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

genel olarak yapılan düzeltmeler

Browse Source
This commit is contained in:
iontalp
2026-07-29 04:17:22 +02:00
parent dc4af9cc1d
commit 579a51f899
4 changed files with 146 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.js
+2 -2
View File
@@ -98,8 +98,8 @@ async function render() {
<div id="profileBtn" class="flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
${
avatarUrl
? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md flex-shrink-0" />`
: `<div class="w-10 h-10 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400 flex-shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md shrink-0" />`
: `<div class="w-10 h-10 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400 shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
}
<div class="${sidebarOpen ? "block" : "hidden md:hidden"} overflow-hidden">
<p class="text-sm font-medium text-white truncate">${user.name || user.username || user.email}</p>
src/pages/kaza.js
+81 -48
View File
@@ -1,4 +1,4 @@
import { calculateMissedPrayers, getHijriBirthDate } from "../utils/hijri.js";
import { calculateMissedPrayers, getHijribirthdate } from "../utils/hijri.js";
const PRAYERS = [
{ id: "fajr", name: "SABAH", arabic: "Fecr" },
@@ -12,7 +12,7 @@ const PRAYERS = [
export function renderKaza(pb) {
// Sıfır localStorage! Her şey PocketBase authStore modelinden okunuyor.
const user = pb.authStore.model;
const birthDate = user?.birthDate || user?.birthdate;
const birthdate = user?.birthdate || user?.birthdate;
const gender = user?.gender || "male";
const html = `
@@ -30,7 +30,7 @@ export function renderKaza(pb) {
</div>
${
!birthDate
!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">
<h3 class="text-base font-bold text-white mb-2">Doğum Tarihi Gerekli</h3>
@@ -38,7 +38,7 @@ export function renderKaza(pb) {
<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" />
<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" />
</div>
<div class="text-left">
<label class="block text-xs text-slate-300 mb-1">Cinsiyet</label>
@@ -63,7 +63,7 @@ export function renderKaza(pb) {
<span id="overallPercentage" class="text-sm font-extrabold text-emerald-400">%0</span>
</div>
<div class="w-full h-3.5 bg-slate-900 rounded-full overflow-hidden border border-white/5 p-0.5">
<div id="overallProgressBar" class="h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-emerald-400 rounded-full transition-all duration-700 ease-out w-[0%]"></div>
<div id="overallProgressBar" 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>
<div class="flex justify-between items-center text-[10px] text-slate-400 mt-2">
<span>Kılınan: <b id="totalCompletedText" class="text-white">0</b> vakit</span>
@@ -82,7 +82,7 @@ export function renderKaza(pb) {
<div id="progress-${p.id}" class="bg-emerald-400 h-full w-[0%] transition-all duration-500"></div>
</div>
</div>
`
`,
).join("")}
</div>
@@ -120,46 +120,59 @@ export function renderKaza(pb) {
html,
initEvents: (container) => {
container.querySelector("#closeBtn")?.addEventListener("click", () => {
window.dispatchEvent(new CustomEvent("navigate", { detail: "desktop" }));
window.dispatchEvent(
new CustomEvent("navigate", { detail: "desktop" }),
);
});
if (!birthDate) {
container.querySelector("#profileForm")?.addEventListener("submit", async (e) => {
e.preventDefault();
const bInput = container.querySelector("#birthDateInput").value;
const gInput = container.querySelector("#genderInput").value;
if (!birthdate) {
container
.querySelector("#profileForm")
?.addEventListener("submit", async (e) => {
e.preventDefault();
const bInput = container.querySelector("#birthdateInput").value;
const gInput = container.querySelector("#genderInput").value;
try {
await pb.collection("users").update(pb.authStore.model.id, {
birthDate: bInput,
gender: gInput,
});
pb.authStore.model.birthDate = bInput;
pb.authStore.model.gender = gInput;
window.dispatchEvent(new CustomEvent("navigate", { detail: "kaza" }));
} catch (err) {
alert("Profil kaydedilemedi. PocketBase bağlantısını kontrol edin.");
}
});
try {
await pb.collection("users").update(pb.authStore.model.id, {
birthdate: bInput,
gender: gInput,
});
pb.authStore.model.birthdate = bInput;
pb.authStore.model.gender = gInput;
window.dispatchEvent(
new CustomEvent("navigate", { detail: "kaza" }),
);
} catch (err) {
alert(
"Profil kaydedilemedi. PocketBase bağlantısını kontrol edin.",
);
}
});
} else {
refreshKazaStats(container, pb, birthDate, gender);
refreshKazaStats(container, pb, birthdate, gender);
container.querySelector("#addKazaBtn")?.addEventListener("click", async () => {
await handleKazaLog(container, pb, birthDate, gender, 1);
});
container
.querySelector("#addKazaBtn")
?.addEventListener("click", async () => {
await handleKazaLog(container, pb, birthdate, gender, 1);
});
container.querySelector("#removeKazaBtn")?.addEventListener("click", async () => {
await handleKazaLog(container, pb, birthDate, gender, -1);
});
container
.querySelector("#removeKazaBtn")
?.addEventListener("click", async () => {
await handleKazaLog(container, pb, birthdate, gender, -1);
});
}
},
};
}
async function handleKazaLog(container, pb, birthDate, gender, multiplier) {
async function handleKazaLog(container, pb, birthdate, gender, multiplier) {
const prayerId = container.querySelector("#kazaPrayerType").value;
const countInput = container.querySelector("#kazaCount");
const count = Math.max(1, parseInt(countInput?.value || "1", 10)) * multiplier;
const count =
Math.max(1, parseInt(countInput?.value || "1", 10)) * multiplier;
const msg = container.querySelector("#kazaMsg");
try {
@@ -170,16 +183,26 @@ async function handleKazaLog(container, pb, birthDate, gender, multiplier) {
date: new Date().toISOString().split("T")[0],
});
showKazaMsg(msg, count > 0 ? `🎉 ${count} vakit kaza kılındı olarak işlendi!` : `${Math.abs(count)} vakit düşüldü.`, true);
showKazaMsg(
msg,
count > 0
? `🎉 ${count} vakit kaza kılındı olarak işlendi!`
: `${Math.abs(count)} vakit düşüldü.`,
true,
);
if (countInput) countInput.value = "1";
await refreshKazaStats(container, pb, birthDate, gender);
await refreshKazaStats(container, pb, birthdate, gender);
} catch (err) {
showKazaMsg(msg, "İşlem kaydedilemedi! PocketBase izinlerini veya bağlantısını kontrol edin.", false);
showKazaMsg(
msg,
"İşlem kaydedilemedi! PocketBase izinlerini veya bağlantısını kontrol edin.",
false,
);
}
}
async function refreshKazaStats(container, pb, birthDate, gender) {
const calc = calculateMissedPrayers(birthDate, gender);
async function refreshKazaStats(container, pb, birthdate, gender) {
const calc = calculateMissedPrayers(birthdate, gender);
let logsByPrayer = {};
let logs = [];
@@ -191,7 +214,8 @@ async function refreshKazaStats(container, pb, birthDate, gender) {
logs = records;
records.forEach((l) => {
logsByPrayer[l.prayerId] = (logsByPrayer[l.prayerId] || 0) + (l.count || 0);
logsByPrayer[l.prayerId] =
(logsByPrayer[l.prayerId] || 0) + (l.count || 0);
});
} catch (err) {
console.error("Loglar çekilemedi:", err);
@@ -213,15 +237,22 @@ async function refreshKazaStats(container, pb, birthDate, gender) {
if (remainEl) remainEl.textContent = remaining;
if (progressEl) {
const pct = missed > 0 ? Math.min(100, Math.round((completed / missed) * 100)) : 100;
const pct =
missed > 0
? Math.min(100, Math.round((completed / missed) * 100))
: 100;
progressEl.style.width = `${pct}%`;
}
});
// Genel İlerleme Çubuğu ve Yüzde Hesaplama
const overallPct = grandTotalMissed > 0
? Math.min(100, Math.round((grandTotalCompleted / grandTotalMissed) * 100))
: 100;
const overallPct =
grandTotalMissed > 0
? Math.min(
100,
Math.round((grandTotalCompleted / grandTotalMissed) * 100),
)
: 100;
const bar = container.querySelector("#overallProgressBar");
const pctText = container.querySelector("#overallPercentage");
@@ -231,7 +262,8 @@ async function refreshKazaStats(container, pb, birthDate, gender) {
if (bar) bar.style.width = `${overallPct}%`;
if (pctText) pctText.textContent = `%${overallPct}`;
if (compText) compText.textContent = grandTotalCompleted;
if (remText) remText.textContent = Math.max(0, grandTotalMissed - grandTotalCompleted);
if (remText)
remText.textContent = Math.max(0, grandTotalMissed - grandTotalCompleted);
// İşlem Geçmişi
const logsContainer = container.querySelector("#logsContainer");
@@ -244,12 +276,13 @@ async function refreshKazaStats(container, pb, birthDate, gender) {
const isPlus = log.count > 0;
return `
<div class="flex items-center justify-between bg-slate-950/30 border border-white/5 rounded-xl px-4 py-2">
<span class="text-xs text-slate-300 font-medium">${prayer?.name || log.prayerId} - <span class="text-slate-500">${log.date || ''}</span></span>
<span class="text-xs font-bold ${isPlus ? "text-emerald-400" : "text-rose-400"}">${isPlus ? '+' : ''}${log.count}</span>
<span class="text-xs text-slate-300 font-medium">${prayer?.name || log.prayerId} - <span class="text-slate-500">${log.date || ""}</span></span>
<span class="text-xs font-bold ${isPlus ? "text-emerald-400" : "text-rose-400"}">${isPlus ? "+" : ""}${log.count}</span>
</div>
`;
})
.join("") || '<p class="text-xs text-slate-500">Henüz kayıt bulunmuyor.</p>';
.join("") ||
'<p class="text-xs text-slate-500">Henüz kayıt bulunmuyor.</p>';
}
}
@@ -258,4 +291,4 @@ function showKazaMsg(el, text, success) {
el.textContent = text;
el.className = `text-xs mt-2.5 ${success ? "text-emerald-400 font-medium" : "text-rose-400"}`;
el.classList.remove("hidden");
}
}
src/utils/hijri.js
+38 -28
View File
@@ -1,23 +1,42 @@
const HIJRI_MONTHS = [
"Muharrem", "Safer", "Rebiülevvel", "Rebiülahir",
"Cemaziyelevvel", "Cemaziyelahir", "Receb", "Şaban",
"Ramazan", "Şevval", "Zilkade", "Zilhicce",
"Muharrem",
"Safer",
"Rebiülevvel",
"Rebiülahir",
"Cemaziyelevvel",
"Cemaziyelahir",
"Receb",
"Şaban",
"Ramazan",
"Şevval",
"Zilkade",
"Zilhicce",
];
const DAYS = [
"Pazar", "Pazartesi", "Salı", "Çarşamba",
"Perşembe", "Cuma", "Cumartesi",
"Pazar",
"Pazartesi",
"Salı",
"Çarşamba",
"Perşembe",
"Cuma",
"Cumartesi",
];
export function gregorianToHijri(date = new Date()) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
// Türkiye coğrafi hizalaması ve Hilal takvimi için +2 gün adjustment
const adjustment = 2;
const adjustedDate = new Date(
date.getTime() + adjustment * 24 * 60 * 60 * 1000,
);
const year = adjustedDate.getFullYear();
const month = adjustedDate.getMonth() + 1;
const day = adjustedDate.getDate();
let a = Math.floor((14 - month) / 12);
let y = year + 4800 - a;
let m = month + 12 * a - 3;
let jdn =
day +
Math.floor((153 * m + 2) / 5) +
@@ -38,6 +57,7 @@ export function gregorianToHijri(date = new Date()) {
Math.floor((30 - j) / 15) * Math.floor((17719 * j) / 50) -
Math.floor(j / 16) * Math.floor((15238 * j) / 43) +
29;
let hijriMonth = Math.floor((24 * l) / 709);
let hijriDay = l - Math.floor((709 * hijriMonth) / 24);
let hijriYear = 30 * n + j - 30;
@@ -73,27 +93,17 @@ export function calculateMissedPrayers(birthDate, gender, mukallafAge = 15) {
const diffTime = today - mukallafDate;
const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
return { fajr: days, dhuhr: days, asr: days, maghrib: days, isha: days, vitr: days, days };
return {
fajr: days,
dhuhr: days,
asr: days,
maghrib: days,
isha: days,
vitr: days,
days,
};
}
export function getHijriBirthDate(birthDate) {
return gregorianToHijri(new Date(birthDate));
}
export function getHijriAge(birthDate, mukallafAge = 15) {
const birth = new Date(birthDate);
const today = new Date();
const hijriBirth = gregorianToHijri(birth);
const hijriToday = gregorianToHijri(today);
let age = hijriToday.year - hijriBirth.year;
if (
hijriToday.month < hijriBirth.month ||
(hijriToday.month === hijriBirth.month && hijriToday.day < hijriBirth.day)
) {
age -= 1;
}
return Math.max(0, age);
}
src/utils/prayerTimes.js
+25 -6
View File
@@ -1,13 +1,31 @@
import { getCityByName } from "./locations.js";
export async function fetchPrayerTimes(cityName = "Edremit", lat, lon) {
try {
let url;
if (lat !== undefined && lon !== undefined) {
url = `https://api.aladhan.com/v1/timings?latitude=${encodeURIComponent(lat)}&longitude=${encodeURIComponent(lon)}&method=13`;
} else {
url = `https://api.aladhan.com/v1/timingsByCity?city=${encodeURIComponent(cityName)}&country=Turkey&method=13`;
let fetchLat = lat;
let fetchLon = lon;
// Eğer enlem/boylam verilmediyse şehir listemizden koordinatları çekiyoruz
if (fetchLat === undefined || fetchLon === undefined) {
const cityObj = getCityByName(cityName);
if (cityObj) {
fetchLat = cityObj.lat;
fetchLon = cityObj.lon;
}
}
let url;
if (fetchLat !== undefined && fetchLon !== undefined) {
// Diyanet İşleri Başkanlığı Metodu = 13
url = `https://api.aladhan.com/v1/timings?latitude=${fetchLat}&longitude=${fetchLon}&method=13`;
} else {
url = `https://api.aladhan.com/v1/timingsByCity?city=Edremit&country=Turkey&method=13`;
}
const res = await fetch(url);
if (!res.ok) throw new Error("Namaz vakitleri alınamadı");
if (!res.ok) {
throw new Error("Namaz vakitleri alınamadı");
}
const data = await res.json();
const t = data.data.timings;
@@ -33,6 +51,7 @@ function getCurrentPrayer(timings) {
const currentMinutes = now.getHours() * 60 + now.getMinutes();
const parseTime = (timeStr) => {
if (!timeStr) return 0;
const [h, m] = timeStr.split(":").map(Number);
return h * 60 + m;
};