genel olarak yapılan düzeltmeler
This commit is contained in:
+54
-58
@@ -3,7 +3,7 @@ import PocketBase from "pocketbase";
|
||||
import { renderSettings } from "./pages/settings.js";
|
||||
import { renderDesktop } from "./pages/desktop.js";
|
||||
import { renderKaza } from "./pages/kaza.js";
|
||||
import { getDefaultCity, getCityByName } from "./utils/locations.js";
|
||||
import { getDefaultCity } from "./utils/locations.js";
|
||||
|
||||
const pb = new PocketBase("https://pocketbase.iontalp.com");
|
||||
const app = document.getElementById("app");
|
||||
@@ -42,14 +42,20 @@ async function render() {
|
||||
|
||||
let currentPage;
|
||||
if (activeTab === "settings") {
|
||||
currentPage = await renderSettings(pb, currentBg, (newBg) => {
|
||||
pb.authStore.model.selected_bg = newBg;
|
||||
render();
|
||||
}, selectedCity, (city) => {
|
||||
selectedCity = city;
|
||||
localStorage.setItem("selected_city", city);
|
||||
render();
|
||||
});
|
||||
currentPage = await renderSettings(
|
||||
pb,
|
||||
currentBg,
|
||||
(newBg) => {
|
||||
pb.authStore.model.selected_bg = newBg;
|
||||
render();
|
||||
},
|
||||
selectedCity,
|
||||
(city) => {
|
||||
selectedCity = city;
|
||||
localStorage.setItem("selected_city", city);
|
||||
render();
|
||||
},
|
||||
);
|
||||
} else if (activeTab === "kaza") {
|
||||
currentPage = renderKaza(pb);
|
||||
} else {
|
||||
@@ -59,32 +65,33 @@ async function render() {
|
||||
app.innerHTML = `
|
||||
<div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex">
|
||||
<div class="absolute inset-0 z-0 bg-center bg-no-repeat transition-all duration-700"
|
||||
style="background-image: url('${currentBg}'); background-size: 1920px 1080px;">
|
||||
style="background-image: url('${currentBg}'); background-size: cover;">
|
||||
</div>
|
||||
<div class="absolute inset-0 z-10 bg-slate-950/50"></div>
|
||||
<div class="absolute inset-0 z-10 bg-slate-950/60 backdrop-blur-[2px]"></div>
|
||||
|
||||
<button id="globalSidebarToggle" class="fixed top-4 left-4 z-50 bg-white/10 hover:bg-white/20 text-white p-3 rounded-xl transition-all">
|
||||
${sidebarOpen ? "✕" : "☰"}
|
||||
<button id="globalSidebarToggle" class="fixed top-4 left-4 z-50 bg-white/10 hover:bg-white/20 text-white p-2.5 rounded-xl backdrop-blur-md transition-all border border-white/10">
|
||||
${sidebarOpen ? "◀" : "▶"}
|
||||
</button>
|
||||
|
||||
${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" : "w-72 -translate-x-full md:w-20 md:translate-x-0"} h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 ${sidebarOpen ? "p-6" : "md:p-0"} flex flex-col ${sidebarOpen ? "" : "md:items-center"} justify-between transition-all duration-300 overflow-hidden">
|
||||
<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/80 backdrop-blur-xl border-r border-white/10 flex flex-col justify-between transition-all duration-300 overflow-hidden">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center justify-between mb-8 mt-2">
|
||||
<h1 class="font-bold text-white text-xl ${sidebarOpen ? "block" : "hidden md:hidden"}">Dashboard OS</h1>
|
||||
</div>
|
||||
|
||||
<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-white/10 text-white" : "text-slate-400 hover:text-white"}">
|
||||
<span>🏠</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Masaüstü</span>
|
||||
</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-white/10 text-white" : "text-slate-400 hover:text-white"}">
|
||||
<span>🕌</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Kaza Namaz</span>
|
||||
</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-white/10 text-white" : "text-slate-400 hover:text-white"}">
|
||||
<span>⚙️</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Ayarlar</span>
|
||||
</button>
|
||||
</nav>
|
||||
<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/30 text-indigo-300 border border-indigo-500/30" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span>🏠</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Masaüstü</span>
|
||||
</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/30 text-indigo-300 border border-indigo-500/30" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span>📿</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Kaza Namazı</span>
|
||||
</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/30 text-indigo-300 border border-indigo-500/30" : "text-slate-400 hover:text-white hover:bg-white/5"}">
|
||||
<span>⚙️</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Ayarlar</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 pt-4 border-t border-white/10 w-full">
|
||||
@@ -94,19 +101,19 @@ async function render() {
|
||||
? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md flex-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 flex-shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
|
||||
}
|
||||
<div class="${sidebarOpen ? "block" : "hidden md:hidden"}">
|
||||
<p class="text-sm font-medium text-white truncate">${user.name || user.email}</p>
|
||||
<p class="text-xs text-slate-400">Çevrimiçi</p>
|
||||
<div class="${sidebarOpen ? "block" : "hidden md:hidden"} overflow-hidden">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="logoutBtn" class="w-full bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 py-2 rounded-xl border border-rose-500/30 text-sm font-medium transition-all">
|
||||
🚪 Çıkış Yap
|
||||
<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">
|
||||
<span>🚪</span> <span class="${sidebarOpen ? "inline" : "hidden md:hidden"}">Çıkış Yap</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main id="mainContent" class="relative z-20 flex-1 h-screen p-8 flex items-center justify-center overflow-hidden">
|
||||
<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}
|
||||
</main>
|
||||
</div>
|
||||
@@ -115,46 +122,35 @@ async function render() {
|
||||
const mainContent = document.getElementById("mainContent");
|
||||
currentPage.initEvents(mainContent);
|
||||
|
||||
document.getElementById("navDesktop").addEventListener("click", () => {
|
||||
document.getElementById("navDesktop")?.addEventListener("click", () => {
|
||||
activeTab = "desktop";
|
||||
render();
|
||||
});
|
||||
document.getElementById("navKaza").addEventListener("click", () => {
|
||||
document.getElementById("navKaza")?.addEventListener("click", () => {
|
||||
activeTab = "kaza";
|
||||
render();
|
||||
});
|
||||
document.getElementById("navSettings").addEventListener("click", () => {
|
||||
document.getElementById("navSettings")?.addEventListener("click", () => {
|
||||
activeTab = "settings";
|
||||
render();
|
||||
});
|
||||
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||
|
||||
document.getElementById("logoutBtn")?.addEventListener("click", () => {
|
||||
pb.authStore.clear();
|
||||
render();
|
||||
});
|
||||
|
||||
const globalToggle = document.getElementById("globalSidebarToggle");
|
||||
if (globalToggle) {
|
||||
globalToggle.addEventListener("click", () => {
|
||||
document
|
||||
.getElementById("globalSidebarToggle")
|
||||
?.addEventListener("click", () => {
|
||||
sidebarOpen = !sidebarOpen;
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
const overlay = document.getElementById("sidebarOverlay");
|
||||
if (overlay) {
|
||||
overlay.addEventListener("click", () => {
|
||||
sidebarOpen = false;
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
const closeBtn = document.getElementById("closeBtn");
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", () => {
|
||||
activeTab = "desktop";
|
||||
render();
|
||||
});
|
||||
}
|
||||
document.getElementById("sidebarOverlay")?.addEventListener("click", () => {
|
||||
sidebarOpen = false;
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("navigate", (e) => {
|
||||
@@ -168,9 +164,9 @@ function renderLogin() {
|
||||
<div class="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-2xl w-full max-w-md">
|
||||
<h1 class="text-2xl font-bold text-center mb-6">Giriş Yap</h1>
|
||||
<form id="loginForm" class="space-y-4">
|
||||
<input type="text" id="identity" placeholder="E-posta / Kullanıcı Adı" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white" />
|
||||
<input type="password" id="password" placeholder="Şifre" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white" />
|
||||
<button type="submit" class="w-full bg-indigo-600 py-2 rounded-xl text-white font-medium">Giriş</button>
|
||||
<input type="text" id="identity" placeholder="E-posta / Kullanıcı Adı" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:outline-none focus:border-indigo-500" />
|
||||
<input type="password" id="password" placeholder="Şifre" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:outline-none focus:border-indigo-500" />
|
||||
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 py-2.5 rounded-xl text-white font-medium transition-all">Giriş Yap</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,7 +182,7 @@ function renderLogin() {
|
||||
);
|
||||
render();
|
||||
} catch {
|
||||
alert("Giriş başarısız!");
|
||||
alert("Giriş başarısız! Bilgilerinizi kontrol edin.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user