ai ile yapılan büyük güncelleme
This commit is contained in:
+121
-21
@@ -1,4 +1,6 @@
|
||||
export async function renderSettings(pb, currentBg, onBgSelect) {
|
||||
import { TURKISH_CITIES } from "../utils/locations.js";
|
||||
|
||||
export async function renderSettings(pb, currentBg, onBgSelect, currentCity, onCitySelect) {
|
||||
let bgList = [];
|
||||
|
||||
try {
|
||||
@@ -12,6 +14,11 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
|
||||
console.error("Görseller yüklenemedi:", err);
|
||||
}
|
||||
|
||||
const cityOptions = TURKISH_CITIES.map((c) => {
|
||||
const selected = c.name === currentCity ? "selected" : "";
|
||||
return `<option value="${c.name}" ${selected}>${c.name}</option>`;
|
||||
}).join("");
|
||||
|
||||
const html = `
|
||||
<div class="bg-slate-900/60 backdrop-blur-2xl border border-white/10 p-8 rounded-3xl shadow-2xl max-w-4xl w-full h-[80vh] flex flex-col">
|
||||
<button id="closeBtn" class="absolute top-4 right-4 bg-rose-500/20 hover:bg-rose-500/40 text-rose-300 border border-rose-500/30 w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition-all">
|
||||
@@ -20,16 +27,41 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
|
||||
<h2 class="text-2xl font-bold text-white mb-2">⚙️ Sistem Ayarları</h2>
|
||||
<p class="text-slate-400 text-sm mb-6">Seçtiğin duvar kağıdı doğrudan PocketBase hesabına kaydedilir.</p>
|
||||
|
||||
<div class="mb-6 p-4 rounded-2xl border border-white/10 bg-slate-900/40">
|
||||
<h3 class="text-sm font-semibold text-slate-300 mb-3">Bölge Ayarı</h3>
|
||||
<div class="flex items-center gap-3">
|
||||
<select id="citySelect" class="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-sm flex-1">
|
||||
${cityOptions}
|
||||
</select>
|
||||
<button id="saveCityBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-xs font-medium transition-all">
|
||||
Kaydet
|
||||
</button>
|
||||
</div>
|
||||
<p id="cityMsg" class="text-xs mt-2 hidden"></p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 p-4 rounded-2xl border border-white/10 bg-slate-900/40">
|
||||
<h3 class="text-sm font-semibold text-slate-300 mb-3">Yeni Arka Plan Ekle</h3>
|
||||
<form id="uploadForm" class="flex items-center gap-3">
|
||||
<input type="file" id="bgFile" accept="image/*" required class="text-xs text-slate-300" />
|
||||
<input type="text" id="bgTitle" placeholder="Başlık (opsiyonel)" class="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-xs flex-1" />
|
||||
<button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-xs font-medium transition-all">
|
||||
Yükle
|
||||
</button>
|
||||
</form>
|
||||
<p id="uploadMsg" class="text-xs mt-2 hidden"></p>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto pr-2">
|
||||
<h3 class="text-sm font-semibold text-slate-300 mb-4">Arka Plan Galerisi (${bgList.length})</h3>
|
||||
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
${bgList
|
||||
.map(
|
||||
(bg) => `
|
||||
<div data-url="${bg.url}" class="bg-card group relative h-40 rounded-2xl overflow-hidden border-2 cursor-pointer transition-all duration-300 hover:scale-[1.02] ${currentBg === bg.url ? "border-indigo-500 ring-4 ring-indigo-500/20" : "border-white/10 hover:border-white/30"}">
|
||||
<div data-url="${bg.url}" class="group relative h-40 rounded-2xl overflow-hidden border-2 cursor-pointer transition-all duration-300 hover:scale-[1.02] ${currentBg === bg.url ? "border-indigo-500 ring-4 ring-indigo-500/20" : "border-white/10 hover:border-white/30"}">
|
||||
<img src="${bg.url}" alt="${bg.title}" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-linear-to-t from-slate-950/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity flex items-end p-3">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity flex items-end p-3">
|
||||
<span class="text-xs font-medium text-white truncate">${bg.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,23 +76,91 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
|
||||
return {
|
||||
html,
|
||||
initEvents: (container) => {
|
||||
container.querySelectorAll(".bg-card").forEach((card) => {
|
||||
card.addEventListener("click", async () => {
|
||||
const selectedUrl = card.getAttribute("data-url");
|
||||
|
||||
try {
|
||||
// PocketBase'deki aktif kullanıcının 'selected_bg' alanını güncelliyoruz
|
||||
await pb.collection("users").update(pb.authStore.model.id, {
|
||||
selected_bg: selectedUrl,
|
||||
});
|
||||
|
||||
// Ekranı yeni ayarla güncelle
|
||||
onBgSelect(selectedUrl);
|
||||
} catch (err) {
|
||||
console.error("Ayar kaydedilemedi:", err);
|
||||
}
|
||||
});
|
||||
});
|
||||
setupCity(container, pb, onCitySelect);
|
||||
setupUpload(container, pb, onBgSelect);
|
||||
setupGallery(container, pb, onBgSelect);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function setupCity(container, pb, onCitySelect) {
|
||||
const saveBtn = container.querySelector("#saveCityBtn");
|
||||
const select = container.querySelector("#citySelect");
|
||||
const msg = container.querySelector("#cityMsg");
|
||||
|
||||
if (!saveBtn || !select) return;
|
||||
|
||||
saveBtn.addEventListener("click", async () => {
|
||||
const city = select.value;
|
||||
try {
|
||||
await pb.collection("users").update(pb.authStore.model.id, {
|
||||
selected_city: city,
|
||||
});
|
||||
if (onCitySelect) onCitySelect(city);
|
||||
showMsg(msg, "Bölge kaydedildi!", true);
|
||||
} catch (err) {
|
||||
console.error("Bölge kaydedilemedi:", err);
|
||||
showMsg(msg, "Kaydedilemedi. Varsayılan olarak kullanılacak.", false);
|
||||
if (onCitySelect) onCitySelect(city);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setupUpload(container, pb, onBgSelect) {
|
||||
const form = container.querySelector("#uploadForm");
|
||||
const msg = container.querySelector("#uploadMsg");
|
||||
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const fileInput = container.querySelector("#bgFile");
|
||||
const titleInput = container.querySelector("#bgTitle");
|
||||
|
||||
const file = fileInput?.files?.[0];
|
||||
if (!file) {
|
||||
showMsg(msg, "Lütfen bir resim seçin.", false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await pb.collection("backgrounds").create({
|
||||
title: titleInput?.value || "Duvar Kağıdı",
|
||||
image: file,
|
||||
});
|
||||
|
||||
showMsg(msg, "Arka plan yüklendi!", true);
|
||||
fileInput.value = "";
|
||||
if (titleInput) titleInput.value = "";
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 800);
|
||||
} catch (err) {
|
||||
console.error("Yükleme hatası:", err);
|
||||
showMsg(msg, "Yükleme başarısız. PocketBase bağlantısını kontrol et.", false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setupGallery(container, pb, onBgSelect) {
|
||||
container.querySelectorAll("[data-url]").forEach((card) => {
|
||||
card.addEventListener("click", async () => {
|
||||
const selectedUrl = card.getAttribute("data-url");
|
||||
try {
|
||||
await pb.collection("users").update(pb.authStore.model.id, {
|
||||
selected_bg: selectedUrl,
|
||||
});
|
||||
onBgSelect(selectedUrl);
|
||||
} catch (err) {
|
||||
console.error("Ayar kaydedilemedi:", err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showMsg(el, text, success) {
|
||||
el.textContent = text;
|
||||
el.className = `text-xs mt-2 ${success ? "text-emerald-400" : "text-rose-400"}`;
|
||||
el.classList.remove("hidden");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user