wisecolt/ytp-glm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix collapse menu

Browse Source
This commit is contained in:
sbilketay
2025-11-06 21:46:29 +03:00
parent b978902c7f
commit 0b75345856
2 changed files with 118 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/lib/components/MonthlyFuelReportContent.svelte
View File

@@ -23,10 +23,19 @@
availableYears.push(currentYear - i); availableYears.push(currentYear - i);
} }
let initialLoadDone = false;
onMount(async () => { onMount(async () => {
await loadFuelData(); await loadFuelData();
initialLoadDone = true;
}); });
// Watch for year changes and reload data
$: if (initialLoadDone && selectedYear) {
loadFuelData();
expandedMonths = new Set();
}
async function loadFuelData() { async function loadFuelData() {
if (!user) { if (!user) {
error = 'Kullanıcı bilgisi bulunamadı.'; error = 'Kullanıcı bilgisi bulunamadı.';
@@ -38,10 +47,6 @@
error = ''; error = '';
try { try {
// Get approved fuel slips for this goods manager for the selected year
const startDate = `${selectedYear}-01-01`;
const endDate = `${selectedYear}-12-31`;
const url = `/api/fuel-slips?manager_id=${user.id}&status=approved`; const url = `/api/fuel-slips?manager_id=${user.id}&status=approved`;
const response = await fetch(url); const response = await fetch(url);
@@ -55,15 +60,12 @@
const slipDate = new Date(slip.date); const slipDate = new Date(slip.date);
return slipDate.getFullYear() === selectedYear; return slipDate.getFullYear() === selectedYear;
}) })
.sort((a, b) => new Date(b.date) - new Date(a.date)); // Sort by date descending .sort((a, b) => new Date(b.date) - new Date(a.date));
console.log(`✅ Loaded ${fuelData.length} fuel slips for year ${selectedYear}`);
} else { } else {
error = 'Yakıt verileri yüklenemedi.'; error = 'Yakıt verileri yüklenemedi.';
} }
} catch (err) { } catch (err) {
console.error('Load fuel data error:', err); error = `Bağlantı hatası: ${err.message}`;
error = 'Bağlantı hatası.';
} finally { } finally {
loading = false; loading = false;
} }
@@ -75,7 +77,7 @@
} else { } else {
expandedMonths.add(monthIndex); expandedMonths.add(monthIndex);
} }
expandedMonths = expandedMonths; // Trigger reactivity expandedMonths = expandedMonths;
} }
function getMonthData(monthIndex) { function getMonthData(monthIndex) {
@@ -114,13 +116,34 @@
return getMonthData(monthIndex).length; return getMonthData(monthIndex).length;
} }
$: monthlyData = Array.from({length: 12}, (_, i) => ({ function getMonthDataSummary() {
month: i, const months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'];
data: getMonthData(i), return months.map((month, index) => ({
total: getMonthTotal(i), month,
count: getSlipCount(i), count: getSlipCount(index),
isExpanded: expandedMonths.has(i) total: getMonthTotal(index)
})); })).filter(m => m.count > 0);
}
// Reactive statement that rebuilds when fuelData or expandedMonths changes
$: monthlyData = (() => {
const months = [];
// Show all 12 months for the selected year
for (let i = 11; i >= 0; i--) {
const data = getMonthData(i);
const monthData = {
month: i,
data: data,
total: getMonthTotal(i),
count: data.length,
isExpanded: expandedMonths.has(i)
};
months.push(monthData);
}
return months;
})();
</script> </script>
<div class="monthly-fuel-report"> <div class="monthly-fuel-report">
@@ -171,68 +194,66 @@
<!-- Monthly Accordion --> <!-- Monthly Accordion -->
<div class="months-container"> <div class="months-container">
{#each monthlyData as month (month.month)} {#each monthlyData as month (month.month)}
{#if !isMonthInFuture(month.month)} <div class="month-card">
<div class="month-card"> <div
<div class="month-header"
class="month-header" class:has-data={month.count > 0}
class:has-data={month.count > 0} class:expanded={month.isExpanded}
class:expanded={month.isExpanded} on:click={() => toggleMonth(month.month)}
on:click={() => toggleMonth(month.month)} >
> <div class="month-info">
<div class="month-info"> <h3 class="month-name">
<h3 class="month-name"> {turkishMonths[month.month]} {selectedYear}
{turkishMonths[month.month]} {selectedYear} </h3>
</h3> {#if month.count > 0}
{#if month.count > 0} <div class="month-stats">
<div class="month-stats"> <span class="stat-badge">{month.count} Fiş</span>
<span class="stat-badge">{month.count} Fiş</span> <span class="stat-badge">{formatLiters(month.total)}L</span>
<span class="stat-badge">{formatLiters(month.total)}L</span>
</div>
{:else}
<div class="month-stats">
<span class="stat-badge empty">Veri Yok</span>
</div>
{/if}
</div>
<div class="expand-icon">
<i class="fa-solid fa-chevron-{month.isExpanded ? 'up' : 'down'}"></i>
</div>
</div>
{#if month.isExpanded && month.count > 0}
<div class="month-content">
<div class="fuel-table-container">
<table class="fuel-table">
<thead>
<tr>
<th>S.No</th>
<th>Araç Plakası</th>
<th>Tarih</th>
<th>Yakıt Cinsi</th>
<th>Miktar</th>
<th>Teslim Alan</th>
<th>Teslim Eden</th>
</tr>
</thead>
<tbody>
{#each month.data.sort((a, b) => new Date(a.date) - new Date(b.date)) as slip, index}
<tr>
<td>{index + 1}</td>
<td class="plate-cell">{slip.vehicle_info?.plate || '-'}</td>
<td>{formatDate(slip.date)}</td>
<td>{getFuelTypeLabel(slip.fuel_type)}</td>
<td class="quantity-cell">{formatLiters(slip.liters)}</td>
<td>{slip.personnel_info?.rank} {slip.personnel_info?.full_name || '-'}</td>
<td>{slip.fuel_manager_info?.full_name || '-'}</td>
</tr>
{/each}
</tbody>
</table>
</div> </div>
</div> {:else}
{/if} <div class="month-stats">
<span class="stat-badge empty">Veri Yok</span>
</div>
{/if}
</div>
<div class="expand-icon">
<i class="fa-solid fa-chevron-{month.isExpanded ? 'up' : 'down'}"></i>
</div>
</div>
{#if month.isExpanded && month.count > 0}
<div class="month-content">
<div class="fuel-table-container">
<table class="fuel-table">
<thead>
<tr>
<th>S.No</th>
<th>Araç Plakası</th>
<th>Tarih</th>
<th>Yakıt Cinsi</th>
<th>Miktar</th>
<th>Teslim Alan</th>
<th>Teslim Eden</th>
</tr>
</thead>
<tbody>
{#each month.data.sort((a, b) => new Date(a.date) - new Date(b.date)) as slip, index}
<tr>
<td>{index + 1}</td>
<td class="plate-cell">{slip.vehicle_info?.plate || '-'}</td>
<td>{formatDate(slip.date)}</td>
<td>{getFuelTypeLabel(slip.fuel_type)}</td>
<td class="quantity-cell">{formatLiters(slip.liters)}</td>
<td>{slip.personnel_info?.rank} {slip.personnel_info?.full_name || '-'}</td>
<td>{slip.fuel_manager_info?.full_name || '-'}</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div> </div>
{/if} {/if}
</div>
{/each} {/each}
</div> </div>
{/if} {/if}
@@ -350,8 +371,9 @@
gap: 2rem; gap: 2rem;
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #E0E7FF;
color: white; color: #4338CA;
border: 1px solid #C7D2FE;
} }
.summary-item { .summary-item {

18
src/routes/api/fuel-slips/+server.js
View File

@@ -17,6 +17,7 @@ export async function GET({ request, url }) {
const manager_id = searchParams.get('manager_id'); const manager_id = searchParams.get('manager_id');
const fuel_manager_id = searchParams.get('fuel_manager_id'); const fuel_manager_id = searchParams.get('fuel_manager_id');
return new Promise((resolve) => { return new Promise((resolve) => {
const db = getDatabase(); const db = getDatabase();
@@ -41,9 +42,14 @@ export async function GET({ request, url }) {
params.push(fuel_manager_id); params.push(fuel_manager_id);
} }
// Tarihe göre ters sırala // Tarihe göre ters sırala
query += ' ORDER BY created_at DESC'; query += ' ORDER BY created_at DESC';
console.log(`🔍 API Query: ${query}`);
console.log(`📋 API Parameters:`, params);
db.all(query, params, (err, rows) => { db.all(query, params, (err, rows) => {
db.close(); db.close();
@@ -53,6 +59,8 @@ export async function GET({ request, url }) {
return; return;
} }
console.log(`📊 Database returned ${rows.length} rows`);
// JSON string olarak saklanan alanları parse et // JSON string olarak saklanan alanları parse et
const fuelSlips = rows.map(row => ({ const fuelSlips = rows.map(row => ({
...row, ...row,
@@ -62,6 +70,16 @@ export async function GET({ request, url }) {
fuel_manager_info: row.fuel_manager_info ? JSON.parse(row.fuel_manager_info) : null fuel_manager_info: row.fuel_manager_info ? JSON.parse(row.fuel_manager_info) : null
})); }));
console.log(`✅ Processed ${fuelSlips.length} fuel slips for API response`);
console.log(`📋 Fuel slips summary:`, fuelSlips.map(s => ({
id: s.id,
date: s.date,
goods_manager_id: s.goods_manager_id,
status: s.status,
liters: s.liters,
vehicle: s.vehicle_info?.plate
})));
resolve(json({ fuelSlips })); resolve(json({ fuelSlips }));
}); });
}); });