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 03:05:11 +02:00
parent 1561da3ad1
commit 465e39c4d3
4 changed files with 103 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/counter.js
+6 -6
View File
@@ -1,9 +1,9 @@
export function setupCounter(element) {
let counter = 0
let counter = 0;
const setCounter = (count) => {
counter = count
element.innerHTML = `Count is ${counter}`
}
element.addEventListener('click', () => setCounter(counter + 1))
setCounter(0)
counter = count;
element.innerHTML = `Count is ${counter}`;
};
element.addEventListener("click", () => setCounter(counter + 1));
setCounter(0);
}
src/main.js
+49 -36
View File
@@ -1,32 +1,34 @@
import './style.css'
import PocketBase from 'pocketbase'
import { renderSettings } from './pages/settings.js'
import { renderDesktop } from './pages/desktop.js'
import "./style.css";
import PocketBase from "pocketbase";
import { renderSettings } from "./pages/settings.js";
import { renderDesktop } from "./pages/desktop.js";
const pb = new PocketBase('https://pocketbase.iontalp.com')
const app = document.getElementById('app')
const pb = new PocketBase("https://pocketbase.iontalp.com");
const app = document.getElementById("app");
let activeTab = 'desktop'
let activeTab = "desktop";
async function render() {
const user = pb.authStore.model
const user = pb.authStore.model;
if (!user) {
renderLogin()
return
renderLogin();
return;
}
let currentBg = localStorage.getItem('selected_bg') || 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920'
let currentBg =
localStorage.getItem("selected_bg") ||
"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920";
// Sayfayı Yükle
let currentPage
if (activeTab === 'settings') {
let currentPage;
if (activeTab === "settings") {
currentPage = await renderSettings(pb, currentBg, (newBg) => {
localStorage.setItem('selected_bg', newBg)
render()
})
localStorage.setItem("selected_bg", newBg);
render();
});
} else {
currentPage = renderDesktop()
currentPage = renderDesktop();
}
app.innerHTML = `
@@ -40,8 +42,8 @@ async function render() {
<div>
<h1 class="font-bold text-white mb-6 text-xl">Dashboard OS</h1>
<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"}">🏠 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>
</nav>
</div>
<button id="logoutBtn" class="bg-rose-500/20 text-rose-300 py-2 rounded-xl border border-rose-500/30">🚪 Çıkış Yap</button>
@@ -51,15 +53,24 @@ async function render() {
${currentPage.html}
</main>
</div>
`
`;
// Etkinlikleri bağla
const mainContent = document.getElementById('mainContent')
currentPage.initEvents(mainContent)
const mainContent = document.getElementById("mainContent");
currentPage.initEvents(mainContent);
document.getElementById('navDesktop').addEventListener('click', () => { activeTab = 'desktop'; render() })
document.getElementById('navSettings').addEventListener('click', () => { activeTab = 'settings'; render() })
document.getElementById('logoutBtn').addEventListener('click', () => { pb.authStore.clear(); render() })
document.getElementById("navDesktop").addEventListener("click", () => {
activeTab = "desktop";
render();
});
document.getElementById("navSettings").addEventListener("click", () => {
activeTab = "settings";
render();
});
document.getElementById("logoutBtn").addEventListener("click", () => {
pb.authStore.clear();
render();
});
}
function renderLogin() {
@@ -74,19 +85,21 @@ function renderLogin() {
</form>
</div>
</div>
`
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault()
`;
document.getElementById("loginForm").addEventListener("submit", async (e) => {
e.preventDefault();
try {
await pb.collection('users').authWithPassword(
document.getElementById('identity').value,
document.getElementById('password').value
)
render()
await pb
.collection("users")
.authWithPassword(
document.getElementById("identity").value,
document.getElementById("password").value,
);
render();
} catch {
alert('Giriş başarısız!')
alert("Giriş başarısız!");
}
})
});
}
render()
render();
src/pages/desktop.js
+14 -2
View File
@@ -12,7 +12,19 @@ export function renderDesktop() {
Modüler mimariye geçtik! Arka planı değiştirmek için sol menüdeki <b>Ayarlar</b> sekmesine geçebilirsin.
</p>
</div>
`
return { html, initEvents: () => {} }
<div class="absolute middle-8 right-8 bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl max-w-md w-full text-left space-y-3">
<div class="flex items-center gap-3">
<div class="inline-flex p-1 bg-indigo-500/20 border border-indigo-500/30 rounded-xl text-indigo-300 text-xl">
🌙
</div>
<h2 class="text-xl font-bold text-white">Takvim</h2>
</div>
<p class="text-slate-300 text-xs leading-relaxed">
Modüler mimariye geçtik! Arka planı değiştirmek için sol menüdeki <b>Ayarlar</b> sekmesine geçebilirsin.
</p>
</div>
`;
return { html, initEvents: () => {} };
}
src/pages/settings.js
+31 -23
View File
@@ -1,15 +1,15 @@
export async function renderSettings(pb, currentBg, onBgSelect) {
let bgList = []
let bgList = [];
try {
const records = await pb.collection('backgrounds').getFullList()
bgList = records.map(item => ({
const records = await pb.collection("backgrounds").getFullList();
bgList = records.map((item) => ({
id: item.id,
title: item.title || 'Duvar Kağıdı',
url: `https://pocketbase.iontalp.com/api/files/${item.collectionId}/${item.id}/${item.image || item.file}`
}))
title: item.title || "Duvar Kağıdı",
url: `https://pocketbase.iontalp.com/api/files/${item.collectionId}/${item.id}/${item.image || item.file}`,
}));
} catch (err) {
console.error('Görseller yüklenemedi:', err)
console.error("Görseller yüklenemedi:", err);
}
const html = `
@@ -20,35 +20,43 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
<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 ? `
${
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'}">
${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-gradient-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-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>
`).join('')}
`,
)
.join("")}
</div>
`}
`
}
</div>
</div>
`
`;
return {
html,
initEvents: (container) => {
container.querySelectorAll('.bg-card').forEach(card => {
card.addEventListener('click', () => {
const selectedUrl = card.getAttribute('data-url')
onBgSelect(selectedUrl)
})
})
}
}
container.querySelectorAll(".bg-card").forEach((card) => {
card.addEventListener("click", () => {
const selectedUrl = card.getAttribute("data-url");
onBgSelect(selectedUrl);
});
});
},
};
}