iontalp/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai ile yapılan büyük güncelleme

Browse Source
This commit is contained in:
iontalp
2026-07-28 10:21:14 +03:00
parent 371eecde2f
commit e71b6d4a91
9 changed files with 781 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/kaza.js
+245
View File
@@ -0,0 +1,245 @@
import { gregorianToHijri, calculateMissedPrayers, getHijriAge } from "../utils/hijri.js";
const PRAYERS = [
{ id: "fajr", name: "SABAH", arabic: "Fecr" },
{ id: "dhuhr", name: "ÖĞLE", arabic: "Zuhur" },
{ id: "asr", name: "İKİNDİ", arabic: "Asr" },
{ id: "maghrib", name: "AKŞAM", arabic: "Mağrib" },
{ id: "isha", name: "YATSI", arabic: "İşa" },
];
export function renderKaza(pb) {
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 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">
<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>
<h2 class="text-2xl font-bold text-white mb-1">🕌 Kaza Namaz Takibi</h2>
<p class="text-slate-400 text-sm mb-6">
Hicri yaşını ve kalan kaza namazını takip et.
</p>
${!profile ? `
<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">
<div>
<label class="block text-xs text-slate-400 mb-1">Doğum Tarihi</label>
<input type="date" id="birthDate" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-sm" />
</div>
<div>
<label class="block text-xs text-slate-400 mb-1">Cinsiyet</label>
<select id="gender" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-sm">
<option value="male">Erkek</option>
<option value="female">Kadın</option>
</select>
</div>
<div class="flex items-end">
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-all">
Hesapla
</button>
</div>
</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>
</div>
<div class="bg-slate-900/40 border border-white/10 p-4 rounded-2xl mb-6">
<h3 class="text-sm font-semibold text-slate-300 mb-3">Kaza Namaz Ekle</h3>
<form id="addKazaForm" class="flex items-center gap-3">
<select id="kazaPrayerType" class="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-sm">
${PRAYERS.map((p) => `<option value="${p.id}">${p.name}</option>`).join("")}
</select>
<input type="number" id="kazaCount" min="1" value="1" required class="w-20 bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-sm" />
<button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-all">
Ekle
</button>
</form>
<p id="kazaMsg" class="text-xs mt-2 hidden"></p>
</div>
<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">
${PRAYERS.map((p) => {
const todayKey = new Date().toISOString().split("T")[0];
const alreadyDone = profile.todayLogs?.some(
(l) => l.prayerId === p.id && l.date === todayKey
);
return `
<div class="bg-slate-900/40 border ${alreadyDone ? "border-emerald-500/50 bg-emerald-500/10" : "border-white/10"} rounded-2xl p-4 text-center transition-all">
<p class="text-xs text-slate-400">${p.arabic}</p>
<p class="text-sm font-semibold text-white">${p.name}</p>
${alreadyDone ? "<p class='text-xs text-emerald-400 mt-1'>✓ Kılındı</p>" : ""}
</div>
`;
}).join("")}
</div>
<h3 class="text-sm font-semibold text-slate-300 mb-4">Son İşlemler</h3>
<div class="space-y-2" id="logsContainer">
<p class="text-xs text-slate-500">Yükleniyor...</p>
</div>
</div>
`}
</div>
`;
return {
html,
initEvents: (container) => {
const closeBtn = container.querySelector("#closeBtn");
if (closeBtn) {
closeBtn.addEventListener("click", () => {
const event = new CustomEvent("navigate", { detail: "desktop" });
window.dispatchEvent(event);
});
}
if (!profile) {
const form = container.querySelector("#profileForm");
if (form) {
form.addEventListener("submit", (e) => {
e.preventDefault();
const birthDate = container.querySelector("#birthDate").value;
const gender = container.querySelector("#gender").value;
if (!birthDate) {
alert("Lütfen doğum tarihinizi girin.");
return;
}
profile = {
birthDate,
gender,
logs: [],
todayLogs: [],
createdAt: new Date().toISOString(),
};
localStorage.setItem("kaza_profile", JSON.stringify(profile));
const event = new CustomEvent("navigate", { detail: "kaza" });
window.dispatchEvent(event);
});
}
} else {
refreshKazaStats(container, pb, profile);
const addForm = container.querySelector("#addKazaForm");
if (addForm) {
addForm.addEventListener("submit", async (e) => {
e.preventDefault();
const prayerId = container.querySelector("#kazaPrayerType").value;
const countInput = container.querySelector("#kazaCount");
const count = Math.max(1, parseInt(countInput?.value || "1", 10));
const msg = container.querySelector("#kazaMsg");
try {
await pb.collection("kaza_logs").create({
user: pb.authStore.model.id,
prayerId,
count,
date: new Date().toISOString().split("T")[0],
});
if (msg) {
msg.textContent = `${count} kaza namaz eklendi!`;
msg.className = "text-xs mt-2 text-emerald-400";
msg.classList.remove("hidden");
}
if (countInput) countInput.value = "1";
refreshKazaStats(container, pb, profile);
} catch (err) {
console.error("Kaza eklenemedi:", err);
if (msg) {
msg.textContent = "Eklenemedi. PocketBase bağlantısını kontrol et.";
msg.className = "text-xs mt-2 text-rose-400";
msg.classList.remove("hidden");
}
}
});
}
}
},
};
}
async function refreshKazaStats(container, pb, profile) {
if (!profile) return;
const hijriAge = getHijriAge(profile.birthDate);
const calc = calculateMissedPrayers(profile.birthDate, profile.gender);
const ageEl = container.querySelector("#hijriAgeDisplay");
const totalEl = container.querySelector("#totalKazaDisplay");
const remainEl = container.querySelector("#remainingDisplay");
const logsContainer = container.querySelector("#logsContainer");
if (ageEl) ageEl.textContent = hijriAge;
if (totalEl) totalEl.textContent = calc.missed;
let totalCompleted = 0;
let logs = [];
try {
const records = await pb.collection("kaza_logs").getFullList({
filter: `user = "${pb.authStore.model.id}"`,
sort: "-createdAt",
});
logs = records.map((r) => ({
id: r.id,
prayerId: r.prayerId,
count: r.count || 1,
date: r.date,
createdAt: r.createdAt,
}));
totalCompleted = logs.reduce((sum, l) => sum + (l.count || 1), 0);
} catch (err) {
console.error("Loglar yüklenemedi:", err);
}
if (remainEl) remainEl.textContent = Math.max(0, calc.missed - totalCompleted);
const todayKey = new Date().toISOString().split("T")[0];
const todayLogs = logs.filter((l) => l.date === todayKey);
profile.todayLogs = todayLogs;
if (logsContainer) {
logsContainer.innerHTML = logs
.slice(0, 20)
.map((log) => {
const prayer = PRAYERS.find((p) => p.id === log.prayerId);
return `
<div class="flex items-center justify-between bg-slate-900/20 border border-white/5 rounded-xl px-4 py-2">
<span class="text-xs text-slate-300">${prayer?.name || log.prayerId} x${log.count} - ${log.date}</span>
<span class="text-xs text-emerald-400">+${log.count}</span>
</div>
`;
})
.join("") || '<p class="text-xs text-slate-500">Henüz kayıt yok.</p>';
}
}