feat(m4): SvelteKit frontend - today, week, history, settings views
This commit is contained in:
171
web/src/routes/week/+page.svelte
Normal file
171
web/src/routes/week/+page.svelte
Normal file
@@ -0,0 +1,171 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { days, weeks, settings, type ClosedDay, type ClosedWeek, type Settings, ApiError } from '$lib/api/client';
|
||||
import {
|
||||
currentWeekKey, weekDayKeys, formatDurationShort, formatDelta, todayKey, isWorkday
|
||||
} from '$lib/utils';
|
||||
|
||||
let weekKey = $state(currentWeekKey());
|
||||
let dayKeys = $derived(weekDayKeys(weekKey));
|
||||
let closedDaysMap: Record<string, ClosedDay> = $state({});
|
||||
let closedWeek: ClosedWeek | null = $state(null);
|
||||
let currentSettings: Settings | null = $state(null);
|
||||
let error = $state('');
|
||||
|
||||
async function load() {
|
||||
error = '';
|
||||
const from = dayKeys[0];
|
||||
const to = dayKeys[6];
|
||||
try {
|
||||
const [ds, ws, s] = await Promise.all([
|
||||
days.list(from, to),
|
||||
weeks.list(weekKey, weekKey),
|
||||
settings.current()
|
||||
]);
|
||||
closedDaysMap = Object.fromEntries((ds ?? []).map((d) => [d.day_key, d]));
|
||||
closedWeek = (ws ?? []).find((w) => w.week_key === weekKey) ?? null;
|
||||
currentSettings = s;
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => { weekKey; load(); });
|
||||
|
||||
async function handleCloseWeek() {
|
||||
error = '';
|
||||
try {
|
||||
const cw = await weeks.close(weekKey);
|
||||
closedWeek = cw;
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReopenWeek() {
|
||||
error = '';
|
||||
try {
|
||||
await weeks.reopen(weekKey);
|
||||
closedWeek = null;
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
}
|
||||
}
|
||||
|
||||
const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
||||
|
||||
const totalWorkedMs = $derived(
|
||||
dayKeys.reduce((sum, dk) => sum + (closedDaysMap[dk]?.worked_ms ?? 0), 0)
|
||||
);
|
||||
const expectedMs = $derived(
|
||||
currentSettings ? currentSettings.hours_per_week * 3_600_000 : 0
|
||||
);
|
||||
|
||||
const allWorkdaysClosed = $derived(
|
||||
currentSettings
|
||||
? dayKeys.every((dk) => !isWorkday(dk, currentSettings!.workdays_mask) || !!closedDaysMap[dk])
|
||||
: false
|
||||
);
|
||||
|
||||
function prevWeek() { weekKey = offsetWeek(weekKey, -1); }
|
||||
function nextWeek() { weekKey = offsetWeek(weekKey, 1); }
|
||||
function offsetWeek(wk: string, offset: number): string {
|
||||
const [y, w] = wk.split('-W').map(Number);
|
||||
const date = new Date(y, 0, 4);
|
||||
date.setDate(date.getDate() + (w - 1) * 7 + offset * 7);
|
||||
const thu = new Date(date);
|
||||
thu.setDate(date.getDate() + 4 - (date.getDay() || 7));
|
||||
const ys = new Date(thu.getFullYear(), 0, 1);
|
||||
const weekNum = Math.ceil(((thu.getTime() - ys.getTime()) / 86400000 + 1) / 7);
|
||||
return `${thu.getFullYear()}-W${String(weekNum).padStart(2, '0')}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="week-view">
|
||||
<div class="header">
|
||||
<button onclick={prevWeek}>‹</button>
|
||||
<h1>Week {weekKey}</h1>
|
||||
<button onclick={nextWeek}>›</button>
|
||||
</div>
|
||||
|
||||
{#if error}<p class="error">{error}</p>{/if}
|
||||
|
||||
<div class="days-grid">
|
||||
{#each dayKeys as dk, i (dk)}
|
||||
{@const cd = closedDaysMap[dk]}
|
||||
{@const isToday = dk === todayKey()}
|
||||
{@const workday = currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
|
||||
<div class="day" class:today={isToday} class:weekend={!workday} class:closed={!!cd}>
|
||||
<div class="day-header">
|
||||
<span class="day-name">{DAY_NAMES[i]}</span>
|
||||
<span class="day-date">{dk.slice(5)}</span>
|
||||
</div>
|
||||
{#if cd}
|
||||
<div class="day-status" data-kind={cd.kind}>{cd.kind}</div>
|
||||
<div class="day-worked">{formatDurationShort(cd.worked_ms)}</div>
|
||||
{:else if workday}
|
||||
<div class="day-status open">open</div>
|
||||
{:else}
|
||||
<div class="day-status weekend-label">—</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="summary">
|
||||
<div class="row">
|
||||
<span>Worked</span>
|
||||
<strong>{formatDurationShort(totalWorkedMs)}</strong>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Expected</span>
|
||||
<strong>{formatDurationShort(expectedMs)}</strong>
|
||||
</div>
|
||||
<div class="row delta" class:positive={totalWorkedMs >= expectedMs}>
|
||||
<span>Delta</span>
|
||||
<strong>{formatDelta(totalWorkedMs - expectedMs)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if closedWeek}
|
||||
<div class="week-closed">
|
||||
<p>Week closed — overtime: <strong>{formatDelta(closedWeek.delta_ms)}</strong></p>
|
||||
<button onclick={handleReopenWeek}>Reopen week</button>
|
||||
</div>
|
||||
{:else if allWorkdaysClosed}
|
||||
<button class="btn close-week" onclick={handleCloseWeek}>Close week</button>
|
||||
{:else}
|
||||
<p class="hint">Close all workdays to close the week.</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.week-view h1 { margin: 0; font-size: 1.2rem; }
|
||||
.header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
|
||||
.header button { background: none; border: 1px solid #dee2e6; border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 1.1rem; }
|
||||
.error { color: #c0392b; background: #fde8e4; padding: 0.5rem; border-radius: 6px; }
|
||||
.days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; }
|
||||
.day { border: 1px solid #dee2e6; border-radius: 8px; padding: 0.5rem; background: #fff; text-align: center; }
|
||||
.day.today { border-color: #2c7be5; box-shadow: 0 0 0 2px #cce5ff; }
|
||||
.day.weekend { background: #f8f9fa; color: #adb5bd; }
|
||||
.day.closed { background: #f0f9f0; }
|
||||
.day-header { display: flex; flex-direction: column; font-size: 0.75rem; }
|
||||
.day-name { font-weight: 600; }
|
||||
.day-date { color: #6c757d; }
|
||||
.day-status { font-size: 0.7rem; margin-top: 0.3rem; padding: 0.1rem 0.3rem; border-radius: 4px; }
|
||||
.day-status[data-kind="work"] { background: #d4edda; color: #155724; }
|
||||
.day-status[data-kind="holiday"] { background: #fff3cd; color: #856404; }
|
||||
.day-status[data-kind="vacation"] { background: #cce5ff; color: #004085; }
|
||||
.day-status[data-kind="sick"] { background: #f8d7da; color: #721c24; }
|
||||
.day-status.open { background: #f8f9fa; color: #6c757d; }
|
||||
.day-status.weekend-label { color: #adb5bd; }
|
||||
.day-worked { font-size: 0.8rem; font-variant-numeric: tabular-nums; margin-top: 0.25rem; font-weight: 600; }
|
||||
.summary { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
|
||||
.row { display: flex; justify-content: space-between; padding: 0.25rem 0; }
|
||||
.delta strong { color: #c0392b; }
|
||||
.delta.positive strong { color: #27ae60; }
|
||||
.btn.close-week { background: #343a40; color: #fff; border: none; padding: 0.55rem 1.4rem; border-radius: 6px; font-size: 1rem; font-weight: 600; }
|
||||
.week-closed { background: #d4edda; border-radius: 8px; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; }
|
||||
.week-closed button { background: none; border: 1px solid #155724; color: #155724; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.875rem; }
|
||||
.hint { color: #6c757d; font-size: 0.875rem; font-style: italic; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user