iontalp/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

anasayfaya takvim ekleme deneme.

Browse Source
This commit is contained in:
iontalp
2026-07-28 04:54:46 +02:00
parent 465e39c4d3
commit 6e41565074
2 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.js
+3 -2
View File
@@ -17,14 +17,15 @@ async function render() {
}
let currentBg =
localStorage.getItem("selected_bg") ||
user.selected_bg ||
"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920";
// Sayfayı Yükle
let currentPage;
if (activeTab === "settings") {
currentPage = await renderSettings(pb, currentBg, (newBg) => {
localStorage.setItem("selected_bg", newBg);
// Veritabanı güncellendiğinde yerel kullanıcı modelini tazeleyip render ediyoruz
pb.authStore.model.selected_bg = newBg;
render();
});
} else {
src/pages/settings.js
+27 -26
View File
@@ -15,35 +15,25 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
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">
<h2 class="text-2xl font-bold text-white mb-2">⚙️ Sistem Ayarları</h2>
<p class="text-slate-400 text-sm mb-6">PocketBase sunucundaki duvar kağıtlarından birini seçerek arka planı özelleştir.</p>
<p class="text-slate-400 text-sm mb-6">Seçtiğin duvar kağıdı doğrudan PocketBase hesabına kaydedilir.</p>
<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>
${
bgList.length === 0
? `
<div class="text-center py-12 border border-dashed border-white/10 rounded-2xl text-slate-500">
PocketBase 'backgrounds' koleksiyonunda henüz görsel bulunamadı.
</div>
`
: `
<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"}">
<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">
<span class="text-xs font-medium text-white truncate">${bg.title}</span>
</div>
<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"}">
<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">
<span class="text-xs font-medium text-white truncate">${bg.title}</span>
</div>
`,
)
.join("")}
</div>
`
}
</div>
`,
)
.join("")}
</div>
</div>
</div>
`;
@@ -52,9 +42,20 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
html,
initEvents: (container) => {
container.querySelectorAll(".bg-card").forEach((card) => {
card.addEventListener("click", () => {
card.addEventListener("click", async () => {
const selectedUrl = card.getAttribute("data-url");
onBgSelect(selectedUrl);
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);
}
});
});
},