biraz daha geliştirme
This commit is contained in:
+56
-45
@@ -1,6 +1,7 @@
|
||||
import { gregorianToHijri } from "../utils/hijri.js";
|
||||
import { fetchWeather, getWeatherIcon, getWeatherDesc } from "../utils/weather.js";
|
||||
import { fetchPrayerTimes } from "../utils/prayerTimes.js";
|
||||
import { getCityByName } from "../utils/locations.js";
|
||||
|
||||
export function renderDesktop(selectedCity = "İstanbul") {
|
||||
const hijri = gregorianToHijri();
|
||||
@@ -13,68 +14,77 @@ export function renderDesktop(selectedCity = "İstanbul") {
|
||||
});
|
||||
|
||||
const html = `
|
||||
<div class="flex justify-end w-full">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 w-full max-w-6xl">
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-indigo-500/20 border border-indigo-500/30 rounded-xl text-indigo-300 text-xl">
|
||||
✨
|
||||
<div class="flex flex-col items-end gap-4 w-full max-w-6xl">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 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">Masaüstü</h2>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">Masaüstü</h2>
|
||||
<p class="text-slate-300 text-xs leading-relaxed">
|
||||
Arka planı değiştirmek için sol menüdeki <b>Ayarlar</b> sekmesine geçebilirsin.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-slate-300 text-xs leading-relaxed">
|
||||
Arka planı değiştirmek için sol menüdeki <b>Ayarlar</b> sekmesine geçebilirsin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-emerald-500/20 border border-emerald-500/30 rounded-xl text-emerald-300 text-xl">
|
||||
📅
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-emerald-500/20 border border-emerald-500/30 rounded-xl text-emerald-300 text-xl">
|
||||
📅
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">Hicri Takvim</h2>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">Hicri Takvim</h2>
|
||||
<p class="text-slate-300 text-xs leading-relaxed">
|
||||
<span class="text-white font-semibold">${hijri.weekday}</span><br />
|
||||
${hijri.day} ${hijri.monthName} ${hijri.year}<br />
|
||||
<span class="text-slate-400">${dateStr}</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-slate-300 text-xs leading-relaxed">
|
||||
<span class="text-white font-semibold">${hijri.weekday}</span><br />
|
||||
${hijri.day} ${hijri.monthName} ${hijri.year}<br />
|
||||
<span class="text-slate-400">${dateStr}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-sky-500/20 border border-sky-500/30 rounded-xl text-sky-300 text-xl">
|
||||
🌤️
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-sky-500/20 border border-sky-500/30 rounded-xl text-sky-300 text-xl">
|
||||
🌤️
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">Hava Durumu</h2>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">Hava Durumu</h2>
|
||||
<p class="text-slate-300 text-xs leading-relaxed" id="weatherWidget">
|
||||
Yükleniyor...
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-slate-300 text-xs leading-relaxed" id="weatherWidget">
|
||||
Yükleniyor...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl text-orange-300 text-xl">
|
||||
🌅
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl text-orange-300 text-xl">
|
||||
🌅
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">İmsakiye</h2>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">İmsakiye</h2>
|
||||
<p class="text-slate-300 text-xs leading-relaxed" id="imsakiyeWidget">
|
||||
Yükleniyor...
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-slate-300 text-xs leading-relaxed" id="imsakiyeWidget">
|
||||
Yükleniyor...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3 cursor-pointer hover:border-white/20 transition-all" id="kazaShortcut">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-amber-500/20 border border-amber-500/30 rounded-xl text-amber-300 text-xl">
|
||||
🕌
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-6 rounded-3xl shadow-2xl text-left space-y-3 cursor-pointer hover:border-white/20 transition-all" id="kazaShortcut">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="inline-flex p-2 bg-amber-500/20 border border-amber-500/30 rounded-xl text-amber-300 text-xl">
|
||||
🕌
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">Kaza Namaz</h2>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white">Kaza Namaz</h2>
|
||||
<p class="text-slate-300 text-xs leading-relaxed">
|
||||
Kaza namaz takibine geçmek için tıkla.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-slate-300 text-xs leading-relaxed">
|
||||
Kaza namaz takibine geçmek için tıkla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -114,7 +124,8 @@ async function loadImsakiye(container, selectedCity) {
|
||||
const widget = container.querySelector("#imsakiyeWidget");
|
||||
if (!widget) return;
|
||||
|
||||
const times = await fetchPrayerTimes(selectedCity);
|
||||
const city = getCityByName(selectedCity);
|
||||
const times = await fetchPrayerTimes(selectedCity, city.lat, city.lon);
|
||||
if (!times) {
|
||||
widget.innerHTML = "Namaz vakitleri alınamadı.";
|
||||
return;
|
||||
|
||||
+72
-48
@@ -1,4 +1,4 @@
|
||||
import { gregorianToHijri, calculateMissedPrayers, getHijriAge } from "../utils/hijri.js";
|
||||
import { gregorianToHijri, calculateMissedPrayers, getHijriAge, getHijriBirthDate } from "../utils/hijri.js";
|
||||
|
||||
const PRAYERS = [
|
||||
{ id: "fajr", name: "SABAH", arabic: "Fecr" },
|
||||
@@ -6,15 +6,17 @@ const PRAYERS = [
|
||||
{ id: "asr", name: "İKİNDİ", arabic: "Asr" },
|
||||
{ id: "maghrib", name: "AKŞAM", arabic: "Mağrib" },
|
||||
{ id: "isha", name: "YATSI", arabic: "İşa" },
|
||||
{ id: "vitr", name: "VİTR", arabic: "Vitr" },
|
||||
];
|
||||
|
||||
export function renderKaza(pb) {
|
||||
const pbBirthDate = pb.authStore.model?.birthDate;
|
||||
const pbGender = pb.authStore.model?.gender;
|
||||
const profileS = localStorage.getItem("kaza_profile");
|
||||
let profile = profileS ? JSON.parse(profileS) : null;
|
||||
|
||||
const hijri = gregorianToHijri();
|
||||
const hijriAge = profile ? getHijriAge(profile.birthDate) : 0;
|
||||
const calc = profile ? calculateMissedPrayers(profile.birthDate, profile.gender) : { missed: 0, days: 0 };
|
||||
const birthDate = pbBirthDate || profile?.birthDate;
|
||||
const gender = pbGender || profile?.gender;
|
||||
|
||||
const html = `
|
||||
<div class="bg-slate-900/60 backdrop-blur-2xl border border-white/10 p-8 rounded-3xl shadow-2xl max-w-4xl w-full h-[80vh] flex flex-col">
|
||||
@@ -27,7 +29,7 @@ export function renderKaza(pb) {
|
||||
Hicri yaşını ve kalan kaza namazını takip et.
|
||||
</p>
|
||||
|
||||
${!profile ? `
|
||||
${!birthDate ? `
|
||||
<div class="bg-slate-900/40 border border-white/10 p-6 rounded-2xl mb-6">
|
||||
<h3 class="text-sm font-semibold text-slate-300 mb-4">Profil Bilgileri</h3>
|
||||
<form id="profileForm" class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
@@ -50,19 +52,18 @@ export function renderKaza(pb) {
|
||||
</form>
|
||||
</div>
|
||||
` : `
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl text-center">
|
||||
<p class="text-xs text-slate-400 mb-1">Hicri Yaş</p>
|
||||
<p class="text-2xl font-bold text-white" id="hijriAgeDisplay">-</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl text-center">
|
||||
<p class="text-xs text-slate-400 mb-1">Toplam Kaza</p>
|
||||
<p class="text-2xl font-bold text-rose-300" id="totalKazaDisplay">-</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl text-center">
|
||||
<p class="text-xs text-slate-400 mb-1">Kalan</p>
|
||||
<p class="text-2xl font-bold text-emerald-300" id="remainingDisplay">-</p>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mb-6">
|
||||
<div class="bg-slate-900/40 border border-white/10 p-3 rounded-2xl text-center">
|
||||
<p class="text-[10px] text-slate-400 mb-1">Hicri Doğum Tarihi</p>
|
||||
<p class="text-sm font-bold text-white" id="hijriBirthDateDisplay">-</p>
|
||||
</div>
|
||||
${PRAYERS.map((p) => `
|
||||
<div class="bg-slate-900/40 border border-white/10 p-3 rounded-2xl text-center">
|
||||
<p class="text-[10px] text-slate-400 mb-1">${p.name}</p>
|
||||
<p class="text-xs text-white">Kalan: <span id="remaining-${p.id}" class="font-bold text-emerald-300">-</span></p>
|
||||
<p class="text-[10px] text-slate-500 mt-1">Toplam: <span id="total-${p.id}">-</span></p>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl mb-6">
|
||||
@@ -84,10 +85,10 @@ export function renderKaza(pb) {
|
||||
|
||||
<div class="flex-1 overflow-y-auto pr-2">
|
||||
<h3 class="text-sm font-semibold text-slate-300 mb-4">Bugünkü Namazlar</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-6">
|
||||
${PRAYERS.map((p) => {
|
||||
const todayKey = new Date().toISOString().split("T")[0];
|
||||
const alreadyDone = profile.todayLogs?.some(
|
||||
const alreadyDone = profile?.todayLogs?.some(
|
||||
(l) => l.prayerId === p.id && l.date === todayKey
|
||||
);
|
||||
return `
|
||||
@@ -120,25 +121,37 @@ export function renderKaza(pb) {
|
||||
});
|
||||
}
|
||||
|
||||
if (!profile) {
|
||||
if (!birthDate) {
|
||||
const form = container.querySelector("#profileForm");
|
||||
const genderSelect = container.querySelector("#gender");
|
||||
if (gender && genderSelect) {
|
||||
genderSelect.value = gender;
|
||||
}
|
||||
if (form) {
|
||||
form.addEventListener("submit", (e) => {
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const birthDate = container.querySelector("#birthDate").value;
|
||||
const gender = container.querySelector("#gender").value;
|
||||
const birthDateInput = container.querySelector("#birthDate").value;
|
||||
const genderInput = container.querySelector("#gender").value;
|
||||
|
||||
if (!birthDate) {
|
||||
if (!birthDateInput) {
|
||||
alert("Lütfen doğum tarihinizi girin.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await pb.collection("users").update(pb.authStore.model.id, {
|
||||
birthDate: birthDateInput,
|
||||
gender: genderInput,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("PocketBase kaydedilemedi:", err);
|
||||
}
|
||||
|
||||
profile = {
|
||||
birthDate,
|
||||
gender,
|
||||
logs: [],
|
||||
todayLogs: [],
|
||||
createdAt: new Date().toISOString(),
|
||||
gender: genderInput,
|
||||
logs: profile?.logs || [],
|
||||
todayLogs: profile?.todayLogs || [],
|
||||
createdAt: profile?.createdAt || new Date().toISOString(),
|
||||
};
|
||||
localStorage.setItem("kaza_profile", JSON.stringify(profile));
|
||||
|
||||
@@ -147,7 +160,7 @@ export function renderKaza(pb) {
|
||||
});
|
||||
}
|
||||
} else {
|
||||
refreshKazaStats(container, pb, profile);
|
||||
refreshKazaStats(container, pb, birthDate, gender, profile);
|
||||
|
||||
const addBtn = container.querySelector("#addKazaBtn");
|
||||
const removeBtn = container.querySelector("#removeKazaBtn");
|
||||
@@ -169,7 +182,7 @@ export function renderKaza(pb) {
|
||||
|
||||
showKazaMsg(msg, `${count} kaza namaz eklendi!`, true);
|
||||
if (countInput) countInput.value = "1";
|
||||
await refreshKazaStats(container, pb, profile);
|
||||
await refreshKazaStats(container, pb, birthDate, gender, profile);
|
||||
} catch (err) {
|
||||
console.error("Kaza eklenemedi:", err);
|
||||
showKazaMsg(msg, "Eklenemedi. PocketBase bağlantısını kontrol et.", false);
|
||||
@@ -207,7 +220,7 @@ export function renderKaza(pb) {
|
||||
|
||||
showKazaMsg(msg, `${count} kaza namaz çıkarıldı!`, true);
|
||||
if (countInput) countInput.value = "1";
|
||||
await refreshKazaStats(container, pb, profile);
|
||||
await refreshKazaStats(container, pb, birthDate, gender, profile);
|
||||
} catch (err) {
|
||||
console.error("Kaza çıkarılamadı:", err);
|
||||
showKazaMsg(msg, "Çıkarılamadı. PocketBase bağlantısını kontrol et.", false);
|
||||
@@ -219,22 +232,19 @@ export function renderKaza(pb) {
|
||||
};
|
||||
}
|
||||
|
||||
async function refreshKazaStats(container, pb, profile) {
|
||||
if (!profile) return;
|
||||
async function refreshKazaStats(container, pb, birthDate, gender, profile) {
|
||||
if (!birthDate) return;
|
||||
|
||||
const hijriAge = getHijriAge(profile.birthDate);
|
||||
const calc = calculateMissedPrayers(profile.birthDate, profile.gender);
|
||||
const calc = calculateMissedPrayers(birthDate, gender);
|
||||
const hijriBirth = getHijriBirthDate(birthDate);
|
||||
|
||||
const ageEl = container.querySelector("#hijriAgeDisplay");
|
||||
const totalEl = container.querySelector("#totalKazaDisplay");
|
||||
const remainEl = container.querySelector("#remainingDisplay");
|
||||
const logsContainer = container.querySelector("#logsContainer");
|
||||
const birthDateEl = container.querySelector("#hijriBirthDateDisplay");
|
||||
if (birthDateEl) {
|
||||
birthDateEl.textContent = `${hijriBirth.day} ${hijriBirth.monthName} ${hijriBirth.year}`;
|
||||
}
|
||||
|
||||
if (ageEl) ageEl.textContent = hijriAge;
|
||||
if (totalEl) totalEl.textContent = calc.missed;
|
||||
|
||||
let totalCompleted = 0;
|
||||
let logs = [];
|
||||
let logsByPrayer = {};
|
||||
|
||||
try {
|
||||
const records = await pb.collection("kaza_logs").getFullList({
|
||||
@@ -250,18 +260,32 @@ async function refreshKazaStats(container, pb, profile) {
|
||||
createdAt: r.createdAt,
|
||||
}));
|
||||
|
||||
totalCompleted = logs.reduce((sum, l) => sum + (l.count || 1), 0);
|
||||
logs.forEach((l) => {
|
||||
logsByPrayer[l.prayerId] = (logsByPrayer[l.prayerId] || 0) + (l.count || 1);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Loglar yüklenemedi:", err);
|
||||
}
|
||||
|
||||
if (remainEl) remainEl.textContent = Math.max(0, calc.missed - totalCompleted);
|
||||
PRAYERS.forEach((p) => {
|
||||
const totalEl = container.querySelector(`#total-${p.id}`);
|
||||
const remainEl = container.querySelector(`#remaining-${p.id}`);
|
||||
const missed = calc[p.id] || 0;
|
||||
const completed = logsByPrayer[p.id] || 0;
|
||||
const remaining = Math.max(0, missed - completed);
|
||||
|
||||
if (totalEl) totalEl.textContent = missed;
|
||||
if (remainEl) remainEl.textContent = remaining;
|
||||
});
|
||||
|
||||
const todayKey = new Date().toISOString().split("T")[0];
|
||||
const todayLogs = logs.filter((l) => l.date === todayKey);
|
||||
profile.todayLogs = todayLogs;
|
||||
localStorage.setItem("kaza_profile", JSON.stringify(profile));
|
||||
if (profile) {
|
||||
profile.todayLogs = todayLogs;
|
||||
localStorage.setItem("kaza_profile", JSON.stringify(profile));
|
||||
}
|
||||
|
||||
const logsContainer = container.querySelector("#logsContainer");
|
||||
if (logsContainer) {
|
||||
logsContainer.innerHTML = logs
|
||||
.slice(0, 20)
|
||||
|
||||
Reference in New Issue
Block a user