148 lines
4.1 KiB
JavaScript
148 lines
4.1 KiB
JavaScript
import PocketBase from 'https://cdnjs.cloudflare.com/ajax/libs/pocketbase/0.21.1/pocketbase.es.mjs';
|
||
|
||
// 1. PocketBase Bağlantısı
|
||
// Tarayıcıdaki PocketBase panel adresinle (db. veya pocketbase.) birebir aynı olmalıdır.
|
||
const pb = new PocketBase('https://db.batuhanerkek.com');
|
||
|
||
const loginCard = document.getElementById("login-card");
|
||
const adminPanel = document.getElementById("admin-panel");
|
||
const loginForm = document.getElementById("login-form");
|
||
const blogForm = document.getElementById("blog-form");
|
||
const logoutBtn = document.getElementById("logout-btn");
|
||
const postsList = document.getElementById("posts-list");
|
||
const tagsInput = document.getElementById("tags-input");
|
||
const tagsList = document.getElementById("tags-list");
|
||
|
||
let currentTags = [];
|
||
|
||
// Panel Görünümünü Ayarla
|
||
function setAuthState(isLoggedIn) {
|
||
if (isLoggedIn) {
|
||
loginCard.classList.add("hidden");
|
||
adminPanel.classList.remove("hidden");
|
||
loadPosts();
|
||
} else {
|
||
loginCard.classList.remove("hidden");
|
||
adminPanel.classList.add("hidden");
|
||
}
|
||
}
|
||
|
||
// 2. Giriş Yapma (PocketBase Auth)
|
||
loginForm.addEventListener("submit", async (event) => {
|
||
event.preventDefault();
|
||
const formData = new FormData(loginForm);
|
||
try {
|
||
// PocketBase 'users' koleksiyonu üzerinden giriş yapar
|
||
await pb.collection('users').authWithPassword(
|
||
formData.get("email"),
|
||
formData.get("password")
|
||
);
|
||
loginForm.reset();
|
||
setAuthState(true);
|
||
} catch (error) {
|
||
alert("Giriş başarısız: " + error.message);
|
||
}
|
||
});
|
||
|
||
// 3. Çıkış Yapma
|
||
logoutBtn.addEventListener("click", () => {
|
||
pb.authStore.clear();
|
||
setAuthState(false);
|
||
});
|
||
|
||
// 4. Yeni Yazı Kaydetme
|
||
blogForm.addEventListener("submit", async (event) => {
|
||
event.preventDefault();
|
||
const formData = new FormData(blogForm);
|
||
|
||
// PocketBase 'posts' koleksiyonundaki alan isimleriyle birebir aynı olmalıdır
|
||
const newPost = {
|
||
title: formData.get("title").trim(),
|
||
tags: JSON.stringify(currentTags), // PocketBase'de tags alanı JSON ise bu format uygundur
|
||
summary: formData.get("summary").trim(),
|
||
content: formData.get("content").trim(),
|
||
date: formData.get("date"),
|
||
image: formData.get("image").trim(),
|
||
};
|
||
|
||
try {
|
||
await pb.collection('posts').create(newPost);
|
||
blogForm.reset();
|
||
currentTags = [];
|
||
renderTags();
|
||
loadPosts();
|
||
alert("Yazı başarıyla kaydedildi!");
|
||
} catch (error) {
|
||
alert("Kaydedilemedi: " + error.message);
|
||
}
|
||
});
|
||
|
||
// 5. Yazıları Listeleme
|
||
async function loadPosts() {
|
||
try {
|
||
const records = await pb.collection('posts').getFullList({
|
||
sort: '-created', // En yeni yazıyı en üstte gösterir
|
||
});
|
||
|
||
postsList.innerHTML = records.map(post => `
|
||
<div class="post-item">
|
||
<span>${post.title}</span>
|
||
<button onclick="deletePost('${post.id}')">Sil</button>
|
||
</div>
|
||
`).join('');
|
||
} catch (error) {
|
||
console.error("Yazılar yüklenemedi:", error);
|
||
}
|
||
}
|
||
|
||
// Yazı Silme Fonksiyonu
|
||
window.deletePost = async (id) => {
|
||
if (confirm("Bu yazıyı silmek istediğinize emin misiniz?")) {
|
||
try {
|
||
await pb.collection('posts').delete(id);
|
||
loadPosts();
|
||
} catch (error) {
|
||
alert("Silinemedi: " + error.message);
|
||
}
|
||
}
|
||
};
|
||
|
||
// Etiket Yönetimi
|
||
function renderTags() {
|
||
tagsList.innerHTML = currentTags.map((tag, index) => `
|
||
<span class="tag">${tag} <i onclick="removeTag(${index})">×</i></span>
|
||
`).join('');
|
||
}
|
||
|
||
window.removeTag = (index) => {
|
||
currentTags.splice(index, 1);
|
||
renderTags();
|
||
};
|
||
|
||
// Enter ile etiket ekleme
|
||
tagsInput.addEventListener("keydown", (event) => {
|
||
if (event.key === "Enter") {
|
||
event.preventDefault();
|
||
const tag = tagsInput.value.trim();
|
||
if (tag && !currentTags.includes(tag)) {
|
||
currentTags.push(tag);
|
||
renderTags();
|
||
}
|
||
tagsInput.value = "";
|
||
}
|
||
});
|
||
|
||
// Inputtan odak çıkınca da etiket ekleme (Hızlı kullanım için eklendi)
|
||
tagsInput.addEventListener("blur", () => {
|
||
const tag = tagsInput.value.trim();
|
||
if (tag && !currentTags.includes(tag)) {
|
||
currentTags.push(tag);
|
||
renderTags();
|
||
}
|
||
tagsInput.value = "";
|
||
});
|
||
|
||
// Sayfa yüklendiğinde mevcut oturumu kontrol et
|
||
if (pb.authStore.isValid) {
|
||
setAuthState(true);
|
||
} |