ai ile yapılan büyük güncelleme
This commit is contained in:
+78
-20
@@ -2,11 +2,15 @@ import "./style.css";
|
||||
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";
|
||||
|
||||
const pb = new PocketBase("https://pocketbase.iontalp.com");
|
||||
const app = document.getElementById("app");
|
||||
|
||||
let activeTab = "desktop";
|
||||
let sidebarOpen = window.innerWidth >= 768;
|
||||
let selectedCity = localStorage.getItem("selected_city") || "İstanbul";
|
||||
|
||||
async function render() {
|
||||
const user = pb.authStore.model;
|
||||
@@ -16,7 +20,6 @@ async function render() {
|
||||
return;
|
||||
}
|
||||
|
||||
// PocketBase tam avatar URL formatı
|
||||
const avatarUrl = user?.avatar
|
||||
? `https://pocketbase.iontalp.com/api/files/_pb_users_auth_/${user.id}/${user.avatar}?thumb=100x100`
|
||||
: null;
|
||||
@@ -25,44 +28,73 @@ async function render() {
|
||||
user.selected_bg ||
|
||||
"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920";
|
||||
|
||||
// Sayfayı Yükle
|
||||
if (user.selected_city) {
|
||||
selectedCity = user.selected_city;
|
||||
localStorage.setItem("selected_city", selectedCity);
|
||||
} else {
|
||||
const stored = localStorage.getItem("selected_city");
|
||||
if (stored) {
|
||||
selectedCity = stored;
|
||||
} else {
|
||||
selectedCity = getDefaultCity().name;
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
} else if (activeTab === "kaza") {
|
||||
currentPage = renderKaza(pb);
|
||||
} else {
|
||||
currentPage = renderDesktop();
|
||||
currentPage = renderDesktop(selectedCity);
|
||||
}
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex">
|
||||
<!-- Arka Plan Görseli -->
|
||||
<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;">
|
||||
</div>
|
||||
<div class="absolute inset-0 z-10 bg-slate-950/50 backdrop-blur-[2px]"></div>
|
||||
|
||||
<!-- Sol Menü (Sidebar) -->
|
||||
<aside class="relative z-30 w-72 h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col justify-between">
|
||||
<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>
|
||||
|
||||
${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 p-6 flex flex-col justify-between transition-all duration-300 overflow-hidden">
|
||||
<div>
|
||||
<h1 class="font-bold text-white mb-6 text-xl">Dashboard OS</h1>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="font-bold text-white text-xl ${sidebarOpen ? "block" : "hidden md:block"}">Dashboard OS</h1>
|
||||
</div>
|
||||
<nav class="space-y-2">
|
||||
<button id="navDesktop" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "desktop" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">🏠 Masaüstü</button>
|
||||
<button id="navSettings" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "settings" ? "bg-white/10 text-white" : "text-slate-400 hover:text-white"}">⚙️ Ayarlar</button>
|
||||
<button id="navDesktop" class="w-full flex items-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:block"}">Masaüstü</span>
|
||||
</button>
|
||||
<button id="navKaza" class="w-full flex items-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:block"}">Kaza Namaz</span>
|
||||
</button>
|
||||
<button id="navSettings" class="w-full flex items-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:block"}">Ayarlar</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Profil / Çıkış Alanı -->
|
||||
<div class="space-y-3 pt-4 border-t border-white/10">
|
||||
<div id="profileBtn" class="flex items-center gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
|
||||
${
|
||||
avatarUrl
|
||||
? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md" />`
|
||||
: `<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">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
|
||||
? `<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="overflow-hidden">
|
||||
<div class="overflow-hidden ${sidebarOpen ? "block" : "hidden md:block"}">
|
||||
<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>
|
||||
@@ -74,14 +106,12 @@ async function render() {
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Ana İçerik -->
|
||||
<main id="mainContent" class="relative z-20 flex-1 h-screen p-8 flex items-center justify-center">
|
||||
<main id="mainContent" class="relative z-20 flex-1 h-screen p-8 flex items-center justify-center overflow-hidden">
|
||||
${currentPage.html}
|
||||
</main>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Etkinlikleri bağla
|
||||
const mainContent = document.getElementById("mainContent");
|
||||
currentPage.initEvents(mainContent);
|
||||
|
||||
@@ -89,6 +119,10 @@ async function render() {
|
||||
activeTab = "desktop";
|
||||
render();
|
||||
});
|
||||
document.getElementById("navKaza").addEventListener("click", () => {
|
||||
activeTab = "kaza";
|
||||
render();
|
||||
});
|
||||
document.getElementById("navSettings").addEventListener("click", () => {
|
||||
activeTab = "settings";
|
||||
render();
|
||||
@@ -98,12 +132,36 @@ async function render() {
|
||||
render();
|
||||
});
|
||||
|
||||
document.getElementById("closeBtn").addEventListener("click", () => {
|
||||
activeTab = "desktop";
|
||||
render();
|
||||
});
|
||||
const globalToggle = document.getElementById("globalSidebarToggle");
|
||||
if (globalToggle) {
|
||||
globalToggle.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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("navigate", (e) => {
|
||||
activeTab = e.detail;
|
||||
render();
|
||||
});
|
||||
|
||||
function renderLogin() {
|
||||
app.innerHTML = `
|
||||
<div class="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-4">
|
||||
|
||||
Reference in New Issue
Block a user