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

saat eklendi ve widget tasarıı düzeltildi.

Browse Source
This commit is contained in:
iontalp
2026-07-29 04:57:48 +02:00
parent d6f6eca9c3
commit ff6191a473
1 changed files with 60 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.js
+60 -36
View File
@@ -20,8 +20,9 @@ async function render() {
return; return;
} }
// Güvenli Avatar URL
const avatarUrl = user?.avatar const avatarUrl = user?.avatar
? `https://pocketbase.iontalp.com/api/files/_pb_users_auth_/${user.id}/${user.avatar}?thumb=100x100` ? `https://pocketbase.iontalp.com/api/files/${user.collectionId || "_pb_users_auth_"}/${user.id}/${user.avatar}?thumb=100x100`
: null; : null;
let currentBg = let currentBg =
@@ -54,17 +55,17 @@ async function render() {
selectedCity = city; selectedCity = city;
localStorage.setItem("selected_city", city); localStorage.setItem("selected_city", city);
render(); render();
} },
); );
} else if (activeTab === "kaza") { } else if (activeTab === "kaza") {
currentPage = renderKaza(pb); currentPage = await renderKaza(pb);
} else { } else {
currentPage = renderDesktop(selectedCity, pb); currentPage = await renderDesktop(selectedCity, pb);
} }
app.innerHTML = ` app.innerHTML = `
<div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex"> <div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex">
<!-- Kristal Netliğinde Arka Plan (Blur Kaldırıldı) --> <!-- Kristal Netliğinde Arka Plan -->
<div class="absolute inset-0 z-0 bg-center bg-cover bg-no-repeat transition-all duration-700" <div class="absolute inset-0 z-0 bg-center bg-cover bg-no-repeat transition-all duration-700"
style="background-image: url('${currentBg}');"> style="background-image: url('${currentBg}');">
</div> </div>
@@ -72,51 +73,59 @@ async function render() {
<!-- İnce Netlik Katmanı --> <!-- İnce Netlik Katmanı -->
<div class="absolute inset-0 z-10 bg-black/25"></div> <div class="absolute inset-0 z-10 bg-black/25"></div>
<!-- Sol Menü (Sidebar) --> <!-- Mobil Karartma Overlay -->
<button id="globalSidebarToggle" class="fixed top-4 left-4 z-50 bg-slate-900/80 hover:bg-slate-800 text-white p-2.5 rounded-xl transition-all border border-white/10 shadow-lg">
${sidebarOpen ? "◀" : "▶"}
</button>
${sidebarOpen ? `<div id="sidebarOverlay" class="fixed inset-0 bg-black/50 z-30 md:hidden"></div>` : ""} ${sidebarOpen ? `<div id="sidebarOverlay" class="fixed inset-0 bg-black/50 z-30 md:hidden"></div>` : ""}
<aside id="sidebar" class="fixed md:relative z-40 md:z-30 inset-y-0 left-0 ${sidebarOpen ? "w-72 translate-x-0 p-6" : "w-72 -translate-x-full md:w-20 md:translate-x-0 md:p-3"} h-screen bg-slate-900/85 border-r border-white/10 flex flex-col justify-between transition-all duration-300 overflow-hidden shadow-2xl"> <!-- Sol Menü (Sidebar) -->
<div> <aside id="sidebar" class="fixed md:relative z-40 md:z-30 inset-y-0 left-0 ${sidebarOpen ? "w-72 translate-x-0" : "w-72 -translate-x-full md:w-20 md:translate-x-0"} h-screen bg-slate-900/85 border-r border-white/10 flex flex-col justify-between transition-all duration-300 ease-in-out overflow-hidden shadow-2xl p-4">
<div class="flex items-center justify-between mb-8 mt-2"> <div class="w-full">
<h1 class="font-bold text-white text-xl ${sidebarOpen ? "block" : "hidden md:hidden"}">Dashboard OS</h1> <!-- Sidebar Üst Başlık & Toggle Butonu (İç içe geçmeyi çözen kısım) -->
<div class="flex items-center justify-between mb-6 h-10 px-1">
<h1 class="font-bold text-white text-lg ${sidebarOpen ? "block" : "hidden"} transition-all truncate">İon Talp</h1>
<button id="globalSidebarToggle" class="bg-slate-800/80 hover:bg-slate-700 text-white w-9 h-9 rounded-xl transition-all border border-white/10 shadow-md flex items-center justify-center shrink-0 ${sidebarOpen ? "" : "mx-auto"}">
<span>${sidebarOpen ? "◀" : "▶"}</span>
</button>
</div> </div>
<!-- Navigasyon Menüsü (Zıplamayı önleyen sabit genişlikli ikonlar) -->
<nav class="space-y-2 w-full"> <nav class="space-y-2 w-full">
<button id="navDesktop" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "desktop" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}"> <button id="navDesktop" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "desktop" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
<span>🏠</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Masaüstü</span> <span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">🏠</span>
<span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Masaüstü</span>
</button> </button>
<button id="navKaza" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "kaza" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}"> <button id="navKaza" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "kaza" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
<span>📿</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Kaza Namazı</span> <span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">📿</span>
<span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Kaza Namazı</span>
</button> </button>
<button id="navSettings" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "settings" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}"> <button id="navSettings" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "settings" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
<span>⚙️</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Ayarlar</span> <span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">⚙️</span>
<span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Ayarlar</span>
</button> </button>
</nav> </nav>
</div> </div>
<!-- Profil ve Çıkış Alanı -->
<div class="space-y-3 pt-4 border-t border-white/10 w-full"> <div class="space-y-3 pt-4 border-t border-white/10 w-full">
<div id="profileBtn" class="flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all"> <div id="profileBtn" class="flex items-center h-12 px-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
${ ${
avatarUrl avatarUrl
? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md shrink-0" />` ? `<img src="${avatarUrl}" alt="Avatar" class="w-9 h-9 rounded-full object-cover border border-white/20 shadow-md shrink-0" />`
: `<div class="w-10 h-10 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400 shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>` : `<div class="w-9 h-9 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400 shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
} }
<div class="${sidebarOpen ? "block" : "hidden md:hidden"} overflow-hidden"> <div class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 overflow-hidden whitespace-nowrap">
<p class="text-sm font-medium text-white truncate">${user.name || user.username || user.email}</p> <p class="text-sm font-medium text-white truncate">${user.name || user.username || user.email}</p>
<p class="text-xs text-emerald-400">Çevrimiçi</p> <p class="text-xs text-emerald-400">Çevrimiçi</p>
</div> </div>
</div> </div>
<button id="logoutBtn" class="w-full bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 py-2.5 rounded-xl border border-rose-500/30 text-sm font-medium transition-all flex items-center justify-center gap-2"> <button id="logoutBtn" class="w-full bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 h-11 rounded-xl border border-rose-500/30 text-sm font-medium transition-all flex items-center justify-center">
<span>🚪</span> <span class="${sidebarOpen ? "inline" : "hidden md:hidden"}">Çıkış Yap</span> <span class="w-6 h-6 flex items-center justify-center text-base shrink-0">🚪</span>
<span class="${sidebarOpen ? "opacity-100 ml-2" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Çıkış Yap</span>
</button> </button>
</div> </div>
</aside> </aside>
<!-- Ana İçerik -->
<main id="mainContent" class="relative z-20 flex-1 h-screen p-4 md:p-8 flex items-center justify-center overflow-y-auto"> <main id="mainContent" class="relative z-20 flex-1 h-screen p-4 md:p-8 flex items-center justify-center overflow-y-auto">
${currentPage.html} ${currentPage.html}
</main> </main>
@@ -124,21 +133,35 @@ async function render() {
`; `;
const mainContent = document.getElementById("mainContent"); const mainContent = document.getElementById("mainContent");
currentPage.initEvents(mainContent);
document.getElementById("navDesktop")?.addEventListener("click", () => { activeTab = "desktop"; render(); }); if (currentPage.initEvents) {
document.getElementById("navKaza")?.addEventListener("click", () => { activeTab = "kaza"; render(); }); currentPage.initEvents(mainContent);
document.getElementById("navSettings")?.addEventListener("click", () => { activeTab = "settings"; render(); }); }
document.getElementById("navDesktop")?.addEventListener("click", () => {
activeTab = "desktop";
render();
});
document.getElementById("navKaza")?.addEventListener("click", () => {
activeTab = "kaza";
render();
});
document.getElementById("navSettings")?.addEventListener("click", () => {
activeTab = "settings";
render();
});
document.getElementById("logoutBtn")?.addEventListener("click", () => { document.getElementById("logoutBtn")?.addEventListener("click", () => {
pb.authStore.clear(); pb.authStore.clear();
render(); render();
}); });
document.getElementById("globalSidebarToggle")?.addEventListener("click", () => { document
sidebarOpen = !sidebarOpen; .getElementById("globalSidebarToggle")
render(); ?.addEventListener("click", () => {
}); sidebarOpen = !sidebarOpen;
render();
});
document.getElementById("sidebarOverlay")?.addEventListener("click", () => { document.getElementById("sidebarOverlay")?.addEventListener("click", () => {
sidebarOpen = false; sidebarOpen = false;
@@ -171,7 +194,7 @@ function renderLogin() {
.collection("users") .collection("users")
.authWithPassword( .authWithPassword(
document.getElementById("identity").value, document.getElementById("identity").value,
document.getElementById("password").value document.getElementById("password").value,
); );
render(); render();
} catch { } catch {
@@ -180,4 +203,5 @@ function renderLogin() {
}); });
} }
render(); // Uygulamayı başlat
render();