diff --git a/src/components/sidebar.js b/src/components/sidebar.js new file mode 100644 index 0000000..e69de29 diff --git a/src/main.js b/src/main.js index 51f096e..c451729 100755 --- a/src/main.js +++ b/src/main.js @@ -1,190 +1,90 @@ 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') +let activeTab = 'desktop' + async function render() { const user = pb.authStore.model - if (user) { - // 1. PocketBase'den Arka Plan Resimlerini Çek - let bgUrl = 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920' // Varsayılan görsel - try { - const records = await pb.collection('backgrounds').getFullList() - if (records.length > 0) { - // Rastgele bir arka plan seç - const randomBg = records[Math.floor(Math.random() * records.length)] - bgUrl = pb.files.getURL(randomBg, randomBg.image) - } - } catch (err) { - console.log('Arka plan yüklenirken hata oluştu, varsayılan görsel kullanılıyor.', err) - } + if (!user) { + renderLogin() + return + } - // 2. Masaüstü Arayüzü (WeTransfer Tarzı Hibrit Tasarım) - app.innerHTML = ` -
- - -
-
-
+ let currentBg = localStorage.getItem('selected_bg') || 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920' - - - - - - - -
- - -
-
- ✨ -
-

Hayırla Geldiniz!

-

- Kendi bulut sunucunda çalışan bağımsız masaüstü panelindesin. Sol menüyü kullanarak navigasyonu yönetebilir veya arka planın tadını çıkarabilirsin. -

- -
- -
-
- -
-
- ` - - // Sidebar Açma / Kapama Mantığı - const sidebar = document.getElementById('sidebar') - const toggleBtn = document.getElementById('toggleSidebarBtn') - const openBtn = document.getElementById('openSidebarBtn') - - toggleBtn.addEventListener('click', () => { - sidebar.classList.add('-translate-x-full', 'absolute') - openBtn.classList.remove('hidden') - }) - - openBtn.addEventListener('click', () => { - sidebar.classList.remove('-translate-x-full', 'absolute') - openBtn.classList.add('hidden') - }) - - document.getElementById('logoutBtn').addEventListener('click', () => { - pb.authStore.clear() + // Sayfayı Yükle + let currentPage + if (activeTab === 'settings') { + currentPage = await renderSettings(pb, currentBg, (newBg) => { + localStorage.setItem('selected_bg', newBg) render() }) - } else { - // Giriş yapılmamışsa mevcut Login ekranını göster... - app.innerHTML = ` -
-
-
-

Giriş Yap

-

PocketBase hesabınızla oturum açın

-
- -
-
- - -
- -
- - -
- - - - -
-
-
- ` - - document.getElementById('loginForm').addEventListener('submit', async (e) => { - e.preventDefault() - const identity = document.getElementById('identity').value - const password = document.getElementById('password').value - const errorMsg = document.getElementById('errorMsg') - - try { - errorMsg.classList.add('hidden') - await pb.collection('users').authWithPassword(identity, password) - render() - } catch (err) { - errorMsg.textContent = 'Giriş başarısız! E-posta veya şifre hatalı.' - errorMsg.classList.remove('hidden') - } - }) + currentPage = renderDesktop() } + + app.innerHTML = ` +
+
+
+ + + +
+ ${currentPage.html} +
+
+ ` + + // Etkinlikleri bağla + 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() }) +} + +function renderLogin() { + app.innerHTML = ` +
+
+

Giriş Yap

+
+ + + +
+
+
+ ` + document.getElementById('loginForm').addEventListener('submit', async (e) => { + e.preventDefault() + try { + await pb.collection('users').authWithPassword( + document.getElementById('identity').value, + document.getElementById('password').value + ) + render() + } catch { + alert('Giriş başarısız!') + } + }) } render() \ No newline at end of file diff --git a/src/pages/desktop.js b/src/pages/desktop.js new file mode 100644 index 0000000..262035d --- /dev/null +++ b/src/pages/desktop.js @@ -0,0 +1,15 @@ +export function renderDesktop() { + const html = ` +
+
+ ✨ +
+

Masaüstü

+

+ Modüler mimariye geçtik! Arka planı değiştirmek için sol menüdeki Ayarlar sekmesine geçebilirsin. +

+
+ ` + + return { html, initEvents: () => {} } +} \ No newline at end of file diff --git a/src/pages/settings.js b/src/pages/settings.js new file mode 100644 index 0000000..296c0aa --- /dev/null +++ b/src/pages/settings.js @@ -0,0 +1,54 @@ +export async function renderSettings(pb, currentBg, onBgSelect) { + let bgList = [] + + try { + 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}` + })) + } catch (err) { + console.error('Görseller yüklenemedi:', err) + } + + const html = ` +
+

⚙️ Sistem Ayarları

+

PocketBase sunucundaki duvar kağıtlarından birini seçerek arka planı özelleştir.

+ +
+

Arka Plan Galerisi (${bgList.length})

+ + ${bgList.length === 0 ? ` +
+ PocketBase 'backgrounds' koleksiyonunda henüz görsel bulunamadı. +
+ ` : ` +
+ ${bgList.map(bg => ` +
+ ${bg.title} +
+ ${bg.title} +
+
+ `).join('')} +
+ `} +
+
+ ` + + return { + html, + initEvents: (container) => { + container.querySelectorAll('.bg-card').forEach(card => { + card.addEventListener('click', () => { + const selectedUrl = card.getAttribute('data-url') + onBgSelect(selectedUrl) + }) + }) + } + } +} \ No newline at end of file