mükellef yaşı 12 olarak düzeltildi, masaüstüne ilerleme barı eklendi.
This commit is contained in:
+91
-31
@@ -1,8 +1,12 @@
|
||||
import { gregorianToHijri } from "../utils/hijri.js";
|
||||
import { fetchWeather, getWeatherIcon, getWeatherDesc } from "../utils/weather.js";
|
||||
import { gregorianToHijri, calculateMissedPrayers } from "../utils/hijri.js";
|
||||
import {
|
||||
fetchWeather,
|
||||
getWeatherIcon,
|
||||
getWeatherDesc,
|
||||
} from "../utils/weather.js";
|
||||
import { fetchPrayerTimes } from "../utils/prayerTimes.js";
|
||||
|
||||
export function renderDesktop(selectedCity = "Edremit") {
|
||||
export function renderDesktop(selectedCity = "Edremit", pb) {
|
||||
const hijri = gregorianToHijri();
|
||||
const today = new Date();
|
||||
const dateStr = today.toLocaleDateString("tr-TR", {
|
||||
@@ -15,18 +19,32 @@ export function renderDesktop(selectedCity = "Edremit") {
|
||||
const html = `
|
||||
<div class="flex justify-end w-full max-w-6xl h-full items-start pt-4">
|
||||
<!-- Windows Vista Tarzı Entegre Tek Kolon Sidebar -->
|
||||
<div class="w-full max-w-sm bg-slate-900/50 backdrop-blur-2xl border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
|
||||
<div class="w-full max-w-sm bg-slate-900/80 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-5">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between pb-4 border-b border-white/10">
|
||||
<h2 class="text-lg font-bold text-white flex items-center gap-2">
|
||||
<div class="flex items-center justify-between pb-3 border-b border-white/10">
|
||||
<h2 class="text-base font-bold text-white flex items-center gap-2">
|
||||
<span>🖥️</span> Masaüstü Araçları
|
||||
</h2>
|
||||
<span class="text-xs text-slate-400 font-medium">${selectedCity}</span>
|
||||
</div>
|
||||
|
||||
<!-- YENİ: GENEL KAZA İLERLEME WİDGET'I -->
|
||||
<div id="desktopKazaProgressWidget" class="bg-slate-950/60 border border-white/10 p-4 rounded-2xl space-y-2">
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="font-bold text-indigo-300 flex items-center gap-1.5">
|
||||
<span>🎯</span> KAZA İLERLEMESİ
|
||||
</span>
|
||||
<span id="desktopKazaPct" class="font-extrabold text-emerald-400">%0</span>
|
||||
</div>
|
||||
<div class="w-full h-3 bg-slate-900 rounded-full overflow-hidden border border-white/5 p-0.5">
|
||||
<div id="desktopKazaBar" class="h-full bg-linear-to-r from-indigo-500 via-purple-500 to-emerald-400 rounded-full transition-all duration-700 ease-out w-[0%]"></div>
|
||||
</div>
|
||||
<p id="desktopKazaSub" class="text-[10px] text-slate-400 text-right">Yükleniyor...</p>
|
||||
</div>
|
||||
|
||||
<!-- Bölüm 1: Hicri Takvim -->
|
||||
<div class="space-y-1.5">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-2 text-xs font-semibold text-emerald-400">
|
||||
<span>📅</span> HİCRİ TAKVİM
|
||||
</div>
|
||||
@@ -37,32 +55,29 @@ export function renderDesktop(selectedCity = "Edremit") {
|
||||
<hr class="border-white/5" />
|
||||
|
||||
<!-- Bölüm 2: Hava Durumu -->
|
||||
<div class="space-y-1.5" id="weatherWidget">
|
||||
<div class="flex items-center gap-2 text-xs font-semibold text-sky-400">
|
||||
<span>Yükleniyor...</span>
|
||||
</div>
|
||||
<div class="space-y-1" id="weatherWidget">
|
||||
<div class="text-xs text-slate-400">Hava durumu yükleniyor...</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-white/5" />
|
||||
|
||||
<!-- Bölüm 3: İmsakiye & Aktif Vakit -->
|
||||
<div class="space-y-3" id="imsakiyeWidget">
|
||||
<div class="text-xs font-semibold text-orange-400">İMSAKİYE</div>
|
||||
<p class="text-xs text-slate-400">Yükleniyor...</p>
|
||||
<!-- Bölüm 3: İmsakiye -->
|
||||
<div class="space-y-2" id="imsakiyeWidget">
|
||||
<div class="text-xs text-slate-400">Namaz vakitleri yükleniyor...</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-white/5" />
|
||||
|
||||
<!-- Bölüm 4: Kaza Namazı Kısayolu -->
|
||||
<div id="kazaShortcut" class="bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 p-4 rounded-2xl cursor-pointer transition-all group flex items-center justify-between">
|
||||
<!-- Bölüm 4: Kaza Kısayolu -->
|
||||
<div id="kazaShortcut" class="bg-indigo-600/30 hover:bg-indigo-600/50 border border-indigo-500/30 p-3.5 rounded-2xl cursor-pointer transition-all group flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl group-hover:scale-110 transition-transform">📿</span>
|
||||
<span class="text-xl group-hover:scale-110 transition-transform">📿</span>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-white">Kaza Namazı Takibi</h3>
|
||||
<p class="text-[11px] text-indigo-300">Kaydetmeye ve takibe başla</p>
|
||||
<h3 class="text-xs font-bold text-white">Kaza Namazı Takibi</h3>
|
||||
<p class="text-[10px] text-indigo-300">Detaylı sayaç & takip</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-slate-400 group-hover:translate-x-1 transition-transform">➔</span>
|
||||
<span class="text-slate-400 group-hover:translate-x-1 transition-transform text-xs">➔</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -74,14 +89,59 @@ export function renderDesktop(selectedCity = "Edremit") {
|
||||
initEvents: (container) => {
|
||||
loadWeather(container, selectedCity);
|
||||
loadImsakiye(container, selectedCity);
|
||||
|
||||
container.querySelector("#kazaShortcut")?.addEventListener("click", () => {
|
||||
window.dispatchEvent(new CustomEvent("navigate", { detail: "kaza" }));
|
||||
});
|
||||
if (pb) loadDesktopKazaProgress(container, pb);
|
||||
|
||||
container
|
||||
.querySelector("#kazaShortcut")
|
||||
?.addEventListener("click", () => {
|
||||
window.dispatchEvent(new CustomEvent("navigate", { detail: "kaza" }));
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function loadDesktopKazaProgress(container, pb) {
|
||||
const user = pb.authStore.model;
|
||||
if (!user) return;
|
||||
const birthDate = user.birthDate || user.birthdate;
|
||||
if (!birthDate) return;
|
||||
|
||||
const calc = calculateMissedPrayers(birthDate, user.gender || "male", 12);
|
||||
let totalMissed =
|
||||
calc.fajr + calc.dhuhr + calc.asr + calc.maghrib + calc.isha + calc.vitr ||
|
||||
0;
|
||||
let totalCompleted = 0;
|
||||
|
||||
try {
|
||||
const record = await pb
|
||||
.collection("kaza_logs")
|
||||
.getFirstListItem(`user = "${user.id}"`);
|
||||
if (record) {
|
||||
totalCompleted =
|
||||
(record.fajr || 0) +
|
||||
(record.dhuhr || 0) +
|
||||
(record.asr || 0) +
|
||||
(record.maghrib || 0) +
|
||||
(record.isha || 0) +
|
||||
(record.vitr || 0);
|
||||
}
|
||||
} catch {}
|
||||
|
||||
const pct =
|
||||
totalMissed > 0
|
||||
? Math.min(100, Math.round((totalCompleted / totalMissed) * 100))
|
||||
: 100;
|
||||
|
||||
const bar = container.querySelector("#desktopKazaBar");
|
||||
const pctText = container.querySelector("#desktopKazaPct");
|
||||
const subText = container.querySelector("#desktopKazaSub");
|
||||
|
||||
if (bar) bar.style.width = `${pct}%`;
|
||||
if (pctText) pctText.textContent = `%${pct}`;
|
||||
if (subText)
|
||||
subText.textContent = `${totalCompleted} kılınan / ${Math.max(0, totalMissed - totalCompleted)} kalan`;
|
||||
}
|
||||
|
||||
async function loadWeather(container, selectedCity) {
|
||||
const widget = container.querySelector("#weatherWidget");
|
||||
if (!widget) return;
|
||||
@@ -126,12 +186,12 @@ async function loadImsakiye(container, selectedCity) {
|
||||
<span class="text-[10px] bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 px-2 py-0.5 rounded-full">Şu an: ${times.currentPrayer?.name}</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
<div class="p-2 rounded-xl ${activeKey === 'fajr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">İmsak: ${times.imsak}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === "fajr" ? "bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold" : "bg-slate-900/40 text-slate-300"}">İmsak: ${times.imsak}</div>
|
||||
<div class="p-2 rounded-xl bg-slate-900/40 text-slate-300">Güneş: ${times.sunrise}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === 'dhuhr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Öğle: ${times.dhuhr}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === 'asr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">İkindi: ${times.asr}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === 'maghrib' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Akşam: ${times.maghrib}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === 'isha' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Yatsı: ${times.isha}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === "dhuhr" ? "bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold" : "bg-slate-900/40 text-slate-300"}">Öğle: ${times.dhuhr}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === "asr" ? "bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold" : "bg-slate-900/40 text-slate-300"}">İkindi: ${times.asr}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === "maghrib" ? "bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold" : "bg-slate-900/40 text-slate-300"}">Akşam: ${times.maghrib}</div>
|
||||
<div class="p-2 rounded-xl ${activeKey === "isha" ? "bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold" : "bg-slate-900/40 text-slate-300"}">Yatsı: ${times.isha}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
+12
-19
@@ -15,7 +15,7 @@ export function renderKaza(pb) {
|
||||
const gender = user?.gender || "male";
|
||||
|
||||
const html = `
|
||||
<div class="relative bg-slate-900/70 backdrop-blur-2xl border border-white/10 p-6 md:p-8 rounded-3xl shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col overflow-hidden">
|
||||
<div class="relative bg-slate-900/80 border border-white/10 p-6 md:p-8 rounded-3xl shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col overflow-hidden">
|
||||
<button id="closeBtn" class="absolute top-4 right-4 bg-rose-500/20 hover:bg-rose-500/40 text-rose-300 border border-rose-500/30 w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition-all">
|
||||
✕
|
||||
</button>
|
||||
@@ -31,17 +31,17 @@ export function renderKaza(pb) {
|
||||
${
|
||||
!birthDate
|
||||
? `
|
||||
<div class="bg-slate-900/50 border border-white/10 p-6 rounded-2xl my-auto text-center max-w-md mx-auto w-full">
|
||||
<div class="bg-slate-950/50 border border-white/10 p-6 rounded-2xl my-auto text-center max-w-md mx-auto w-full">
|
||||
<h3 class="text-base font-bold text-white mb-2">Doğum Tarihi Gerekli</h3>
|
||||
<p class="text-xs text-slate-400 mb-6">Kaza namazı borcunu hesaplayabilmemiz için profil bilgilerinizi girin.</p>
|
||||
<form id="profileForm" class="space-y-4">
|
||||
<div class="text-left">
|
||||
<label class="block text-xs text-slate-300 mb-1">Doğum Tarihi</label>
|
||||
<input type="date" id="birthDateInput" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white text-sm focus:border-indigo-500 focus:outline-none" />
|
||||
<label class="block text-xs text-slate-300 mb-1">Doğum Tarihi ve Saati</label>
|
||||
<input type="datetime-local" id="birthDateInput" required class="w-full bg-slate-900 border border-slate-800 rounded-xl px-4 py-2.5 text-white text-sm focus:border-indigo-500 focus:outline-none" />
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<label class="block text-xs text-slate-300 mb-1">Cinsiyet</label>
|
||||
<select id="genderInput" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white text-sm focus:border-indigo-500 focus:outline-none">
|
||||
<select id="genderInput" required class="w-full bg-slate-900 border border-slate-800 rounded-xl px-4 py-2.5 text-white text-sm focus:border-indigo-500 focus:outline-none">
|
||||
<option value="male">Erkek</option>
|
||||
<option value="female">Kadın</option>
|
||||
</select>
|
||||
@@ -162,7 +162,6 @@ export function renderKaza(pb) {
|
||||
};
|
||||
}
|
||||
|
||||
// PocketBase Tek Satır Güncelleme Mantığı
|
||||
async function updateKazaCount(container, pb, birthDate, gender, direction) {
|
||||
const prayerId = container.querySelector("#kazaPrayerType").value;
|
||||
const countInput = container.querySelector("#kazaCount");
|
||||
@@ -172,15 +171,13 @@ async function updateKazaCount(container, pb, birthDate, gender, direction) {
|
||||
|
||||
try {
|
||||
const userId = pb.authStore.model.id;
|
||||
|
||||
// Kullanıcının kaza sayacı kaydı var mı kontrol et
|
||||
let userRecord = null;
|
||||
|
||||
try {
|
||||
userRecord = await pb
|
||||
.collection("kaza_logs")
|
||||
.getFirstListItem(`user = "${userId}"`);
|
||||
} catch {
|
||||
// Yoksa ilk kaydı oluştur
|
||||
userRecord = await pb.collection("kaza_logs").create({
|
||||
user: userId,
|
||||
fajr: 0,
|
||||
@@ -195,7 +192,6 @@ async function updateKazaCount(container, pb, birthDate, gender, direction) {
|
||||
const currentCompleted = userRecord[prayerId] || 0;
|
||||
const newCompleted = Math.max(0, currentCompleted + amount);
|
||||
|
||||
// Tek satır kaydı güncelle
|
||||
await pb.collection("kaza_logs").update(userRecord.id, {
|
||||
[prayerId]: newCompleted,
|
||||
});
|
||||
@@ -213,14 +209,14 @@ async function updateKazaCount(container, pb, birthDate, gender, direction) {
|
||||
console.error("Sayaç güncelleme hatası:", err);
|
||||
showKazaMsg(
|
||||
msg,
|
||||
"Güncelleme başarısız! PocketBase alanlarını ve izinlerini kontrol edin.",
|
||||
"Güncelleme başarısız! PocketBase alanlarını kontrol edin.",
|
||||
false,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshKazaStats(container, pb, birthDate, gender) {
|
||||
const calc = calculateMissedPrayers(birthDate, gender);
|
||||
const calc = calculateMissedPrayers(birthDate, gender, 12);
|
||||
const userId = pb.authStore.model.id;
|
||||
|
||||
let userRecord = { fajr: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0, vitr: 0 };
|
||||
@@ -230,17 +226,15 @@ async function refreshKazaStats(container, pb, birthDate, gender) {
|
||||
.collection("kaza_logs")
|
||||
.getFirstListItem(`user = "${userId}"`);
|
||||
if (record) userRecord = record;
|
||||
} catch (err) {
|
||||
// Kayıt yoksa sorun değil, varsayılan 0 değerleriyle devam eder
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
let grandTotalMissed = 0;
|
||||
let grandTotalCompleted = 0;
|
||||
|
||||
PRAYERS.forEach((p) => {
|
||||
const totalMissed = calc[p.id] || 0; // Doğumdan beri olan toplam borç
|
||||
const completed = userRecord[p.id] || 0; // Kılınan miktar
|
||||
const remaining = Math.max(0, totalMissed - completed); // Kalan borç
|
||||
const totalMissed = calc[p.id] || 0;
|
||||
const completed = userRecord[p.id] || 0;
|
||||
const remaining = Math.max(0, totalMissed - completed);
|
||||
|
||||
grandTotalMissed += totalMissed;
|
||||
grandTotalCompleted += completed;
|
||||
@@ -261,7 +255,6 @@ async function refreshKazaStats(container, pb, birthDate, gender) {
|
||||
}
|
||||
});
|
||||
|
||||
// Genel İlerleme Hesabı
|
||||
const overallPct =
|
||||
grandTotalMissed > 0
|
||||
? Math.min(
|
||||
|
||||
Reference in New Issue
Block a user