refactor: default to today-view
This commit is contained in:
270
web/src/lib/components/WeekView.svelte
Normal file
270
web/src/lib/components/WeekView.svelte
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { entries, days, weeks, settings, type Entry, type ClosedDay, type ClosedWeek, type Settings, ApiError } from '$lib/api/client';
|
||||||
|
import { triggerSync } from '$lib/stores/sync';
|
||||||
|
import {
|
||||||
|
weekDayKeys, formatDurationShort, formatDelta,
|
||||||
|
todayKey, isWorkday, dayCapabilities, defaultDayForWeek
|
||||||
|
} from '$lib/utils';
|
||||||
|
import DayChip from '$lib/components/DayChip.svelte';
|
||||||
|
import DayDetail from '$lib/components/DayDetail.svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
weekKey: string;
|
||||||
|
selectedDay: string;
|
||||||
|
onweekchange: (weekKey: string, dayKey: string) => void;
|
||||||
|
ondaychange: (dayKey: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { weekKey, selectedDay, onweekchange, ondaychange }: Props = $props();
|
||||||
|
|
||||||
|
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')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function navigateWeek(offset: number) {
|
||||||
|
const wk = offsetWeek(weekKey, offset);
|
||||||
|
onweekchange(wk, defaultDayForWeek(wk));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Data ────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
let dayKeys = $derived(weekDayKeys(weekKey));
|
||||||
|
let closedDaysMap = $state<Record<string, ClosedDay>>({});
|
||||||
|
let weekEntries = $state<Entry[]>([]);
|
||||||
|
let closedWeek = $state<ClosedWeek | null>(null);
|
||||||
|
let currentSettings = $state<Settings | null>(null);
|
||||||
|
let error = $state('');
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
error = '';
|
||||||
|
const from = dayKeys[0];
|
||||||
|
const to = dayKeys[6];
|
||||||
|
try {
|
||||||
|
const [ds, ws, es] = await Promise.all([
|
||||||
|
days.list(from, to),
|
||||||
|
weeks.list(weekKey, weekKey),
|
||||||
|
entries.list(from, to)
|
||||||
|
]);
|
||||||
|
closedDaysMap = Object.fromEntries((ds ?? []).map((d) => [d.day_key, d]));
|
||||||
|
closedWeek = (ws ?? []).find((w) => w.week_key === weekKey) ?? null;
|
||||||
|
weekEntries = es ?? [];
|
||||||
|
} catch (e) {
|
||||||
|
error = e instanceof ApiError ? e.message : String(e);
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
currentSettings = await settings.current();
|
||||||
|
} catch (e) {
|
||||||
|
if (!(e instanceof ApiError && e.status === 503)) {
|
||||||
|
error = e instanceof ApiError ? e.message : String(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => { weekKey; load(); });
|
||||||
|
|
||||||
|
// ── Keyboard navigation ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function handleStripKeydown(e: KeyboardEvent) {
|
||||||
|
const idx = dayKeys.indexOf(selectedDay);
|
||||||
|
if (e.key === 'ArrowRight' && idx < 6) {
|
||||||
|
ondaychange(dayKeys[idx + 1]);
|
||||||
|
e.preventDefault();
|
||||||
|
} else if (e.key === 'ArrowLeft' && idx > 0) {
|
||||||
|
ondaychange(dayKeys[idx - 1]);
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Week actions ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
async function handleCloseWeek() {
|
||||||
|
error = '';
|
||||||
|
try {
|
||||||
|
const cw = await weeks.close(weekKey);
|
||||||
|
closedWeek = cw;
|
||||||
|
triggerSync();
|
||||||
|
} catch (e) {
|
||||||
|
error = e instanceof ApiError ? e.message : String(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleReopenWeek() {
|
||||||
|
error = '';
|
||||||
|
try {
|
||||||
|
await weeks.reopen(weekKey);
|
||||||
|
closedWeek = null;
|
||||||
|
triggerSync();
|
||||||
|
} catch (e) {
|
||||||
|
error = e instanceof ApiError ? e.message : String(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Derived display values ───────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
||||||
|
|
||||||
|
function dayWorkedMs(dk: string): number {
|
||||||
|
const cd = closedDaysMap[dk];
|
||||||
|
if (cd) return cd.worked_ms;
|
||||||
|
return weekEntries
|
||||||
|
.filter((e) => e.day_key === dk && e.end_time != null)
|
||||||
|
.reduce((sum, e) => sum + (e.end_time! - e.start_time), 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function dailyExpectedMs(dk: string): number {
|
||||||
|
if (!currentSettings) return 0;
|
||||||
|
const mask = currentSettings.workdays_mask;
|
||||||
|
if (!isWorkday(dk, mask)) return 0;
|
||||||
|
const workdayCount = [1, 2, 4, 8, 16, 32, 64].filter((b) => mask & b).length;
|
||||||
|
return (currentSettings.hours_per_week * 3_600_000) / workdayCount;
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalWorkedMs = $derived(
|
||||||
|
dayKeys.reduce((sum, dk) => sum + dayWorkedMs(dk), 0)
|
||||||
|
);
|
||||||
|
const expectedMs = $derived(
|
||||||
|
currentSettings ? currentSettings.hours_per_week * 3_600_000 : 0
|
||||||
|
);
|
||||||
|
|
||||||
|
const daysWithEntries = $derived(new Set(weekEntries.map((e) => e.day_key)));
|
||||||
|
|
||||||
|
const canCloseWeek = $derived(
|
||||||
|
!closedWeek &&
|
||||||
|
dayKeys[0] <= todayKey() &&
|
||||||
|
dayKeys.every((dk) => {
|
||||||
|
if (dk > todayKey()) return true;
|
||||||
|
if (!daysWithEntries.has(dk)) return true;
|
||||||
|
return !!closedDaysMap[dk];
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const detailCaps = $derived(
|
||||||
|
dayCapabilities(selectedDay, todayKey(), !!closedDaysMap[selectedDay])
|
||||||
|
);
|
||||||
|
|
||||||
|
let chipRefs: Record<string, HTMLElement> = {};
|
||||||
|
$effect(() => {
|
||||||
|
const el = chipRefs[selectedDay];
|
||||||
|
el?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="week-view">
|
||||||
|
<div class="header">
|
||||||
|
<button onclick={() => navigateWeek(-1)} aria-label="Previous week">‹</button>
|
||||||
|
<h1>Week {weekKey}</h1>
|
||||||
|
<button onclick={() => navigateWeek(1)} aria-label="Next week">›</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if error}<p class="error">{error}</p>{/if}
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y_interactive_supports_focus -->
|
||||||
|
<div
|
||||||
|
class="day-strip"
|
||||||
|
role="tablist"
|
||||||
|
aria-label="Days of the week"
|
||||||
|
onkeydown={handleStripKeydown}
|
||||||
|
>
|
||||||
|
{#each dayKeys as dk, i (dk)}
|
||||||
|
<div class="chip-slot" bind:this={chipRefs[dk]}>
|
||||||
|
<DayChip
|
||||||
|
dayKey={dk}
|
||||||
|
weekdayLabel={DAY_NAMES[i]}
|
||||||
|
workedMs={dayWorkedMs(dk)}
|
||||||
|
expectedMs={dailyExpectedMs(dk)}
|
||||||
|
kind={closedDaysMap[dk]?.kind ?? null}
|
||||||
|
closed={!!closedDaysMap[dk]}
|
||||||
|
isToday={dk === todayKey()}
|
||||||
|
selected={dk === selectedDay}
|
||||||
|
isWorkday={currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
|
||||||
|
onclick={() => ondaychange(dk)}
|
||||||
|
/>
|
||||||
|
</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 canCloseWeek}
|
||||||
|
<button class="btn close-week" onclick={handleCloseWeek}>Close week</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="day-detail-panel" role="tabpanel">
|
||||||
|
<h2 class="detail-heading">{selectedDay}</h2>
|
||||||
|
<DayDetail
|
||||||
|
dayKey={selectedDay}
|
||||||
|
capabilities={detailCaps}
|
||||||
|
oninvalidate={(cd) => {
|
||||||
|
if (cd !== undefined) {
|
||||||
|
if (cd === null) {
|
||||||
|
const { [selectedDay]: _, ...rest } = closedDaysMap;
|
||||||
|
closedDaysMap = rest;
|
||||||
|
} else {
|
||||||
|
closedDaysMap = { ...closedDaysMap, [selectedDay]: cd };
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
load();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.week-view h1 { margin: 0; font-size: 1.2rem; }
|
||||||
|
.header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
|
||||||
|
.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; margin-bottom: 1rem; }
|
||||||
|
|
||||||
|
.day-strip {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
scroll-snap-type: x mandatory;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
padding-bottom: 0.25rem;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-slot {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 2.8rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
.day-detail-panel { border-top: 2px solid #dee2e6; margin-top: 1.25rem; padding-top: 0.75rem; }
|
||||||
|
.detail-heading { font-size: 1rem; font-weight: 600; color: #495057; margin: 0 0 0.5rem; }
|
||||||
|
</style>
|
||||||
@@ -180,3 +180,10 @@ export function dayCapabilities(
|
|||||||
canReopenDay: false
|
canReopenDay: false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Default day to select for a given week: today if in the week, else Monday. */
|
||||||
|
export function defaultDayForWeek(weekKey: string): string {
|
||||||
|
const keys = weekDayKeys(weekKey);
|
||||||
|
const t = todayKey();
|
||||||
|
return keys.includes(t) ? t : keys[0];
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
import { onMount, onDestroy } from 'svelte';
|
import { onMount, onDestroy } from 'svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { startSync, stopSync, triggerSync, syncState } from '$lib/stores/sync';
|
import { startSync, stopSync, triggerSync, syncState } from '$lib/stores/sync';
|
||||||
import { todayKey, currentWeekKey } from '$lib/utils';
|
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
@@ -26,14 +25,7 @@
|
|||||||
|
|
||||||
onDestroy(stopSync);
|
onDestroy(stopSync);
|
||||||
|
|
||||||
function todayHref(): string {
|
const todayActive = $derived(page.url.pathname === '/today');
|
||||||
return `/week?week=${currentWeekKey()}&day=${todayKey()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const todayActive = $derived(
|
|
||||||
page.url.pathname === '/week' &&
|
|
||||||
page.url.searchParams.get('day') === todayKey()
|
|
||||||
);
|
|
||||||
|
|
||||||
const weekActive = $derived(
|
const weekActive = $derived(
|
||||||
page.url.pathname === '/week' && !todayActive
|
page.url.pathname === '/week' && !todayActive
|
||||||
@@ -63,7 +55,7 @@
|
|||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<a href={todayHref()} class:active={todayActive}>Today</a>
|
<a href="/today" class:active={todayActive}>Today</a>
|
||||||
<a href="/week" class:active={weekActive}>Week</a>
|
<a href="/week" class:active={weekActive}>Week</a>
|
||||||
<a href="/history" class:active={page.url.pathname === '/history'}>History</a>
|
<a href="/history" class:active={page.url.pathname === '/history'}>History</a>
|
||||||
<a href="/settings" class:active={page.url.pathname === '/settings'}>Settings</a>
|
<a href="/settings" class:active={page.url.pathname === '/settings'}>Settings</a>
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { todayKey, currentWeekKey } from '$lib/utils';
|
onMount(() => goto('/today', { replaceState: true }));
|
||||||
onMount(() => goto(`/week?week=${currentWeekKey()}&day=${todayKey()}`));
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
15
web/src/routes/today/+page.svelte
Normal file
15
web/src/routes/today/+page.svelte
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import { currentWeekKey, todayKey } from '$lib/utils';
|
||||||
|
import WeekView from '$lib/components/WeekView.svelte';
|
||||||
|
|
||||||
|
const weekKey = currentWeekKey();
|
||||||
|
let selectedDay = $state(todayKey());
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<WeekView
|
||||||
|
{weekKey}
|
||||||
|
{selectedDay}
|
||||||
|
onweekchange={(wk, dk) => goto(`/week?week=${wk}&day=${dk}`)}
|
||||||
|
ondaychange={(dk) => { selectedDay = dk; }}
|
||||||
|
/>
|
||||||
@@ -1,25 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { entries, days, weeks, settings, type Entry, type ClosedDay, type ClosedWeek, type Settings, ApiError } from '$lib/api/client';
|
import { currentWeekKey, defaultDayForWeek } from '$lib/utils';
|
||||||
import { triggerSync } from '$lib/stores/sync';
|
import WeekView from '$lib/components/WeekView.svelte';
|
||||||
import {
|
|
||||||
currentWeekKey, weekDayKeys, formatDurationShort, formatDelta,
|
|
||||||
todayKey, isWorkday, dayCapabilities
|
|
||||||
} from '$lib/utils';
|
|
||||||
import DayChip from '$lib/components/DayChip.svelte';
|
|
||||||
import DayDetail from '$lib/components/DayDetail.svelte';
|
|
||||||
|
|
||||||
// ── URL-driven state ────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
// Canonical default day for a given week: today if in the week, else Monday.
|
|
||||||
function defaultDayForWeek(wk: string): string {
|
|
||||||
const keys = weekDayKeys(wk);
|
|
||||||
const t = todayKey();
|
|
||||||
return keys.includes(t) ? t : keys[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Read week+day from URL; fall back to current week + default day.
|
|
||||||
let weekKey = $derived(
|
let weekKey = $derived(
|
||||||
$page.url.searchParams.get('week') ?? currentWeekKey()
|
$page.url.searchParams.get('week') ?? currentWeekKey()
|
||||||
);
|
);
|
||||||
@@ -27,7 +11,7 @@
|
|||||||
$page.url.searchParams.get('day') ?? defaultDayForWeek(weekKey)
|
$page.url.searchParams.get('day') ?? defaultDayForWeek(weekKey)
|
||||||
);
|
);
|
||||||
|
|
||||||
// On mount: if URL is bare /week (no params), canonicalize via replaceState.
|
// Canonicalize bare /week (no params) via replaceState so bookmarks work.
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
const url = $page.url;
|
const url = $page.url;
|
||||||
if (!url.searchParams.has('week') || !url.searchParams.has('day')) {
|
if (!url.searchParams.has('week') || !url.searchParams.has('day')) {
|
||||||
@@ -39,278 +23,20 @@
|
|||||||
goto(next.toString(), { replaceState: true, noScroll: true, keepFocus: true });
|
goto(next.toString(), { replaceState: true, noScroll: true, keepFocus: true });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
function selectDay(dk: string) {
|
<WeekView
|
||||||
const next = new URL($page.url);
|
{weekKey}
|
||||||
next.searchParams.set('day', dk);
|
{selectedDay}
|
||||||
goto(next.toString(), { replaceState: true, noScroll: true, keepFocus: true });
|
onweekchange={(wk, dk) => {
|
||||||
}
|
|
||||||
|
|
||||||
function navigateWeek(offset: number) {
|
|
||||||
const wk = offsetWeek(weekKey, offset);
|
|
||||||
const dk = defaultDayForWeek(wk);
|
|
||||||
const next = new URL($page.url);
|
const next = new URL($page.url);
|
||||||
next.searchParams.set('week', wk);
|
next.searchParams.set('week', wk);
|
||||||
next.searchParams.set('day', dk);
|
next.searchParams.set('day', dk);
|
||||||
// Push history so back/forward works for week navigation.
|
|
||||||
goto(next.toString(), { noScroll: true, keepFocus: true });
|
goto(next.toString(), { noScroll: true, keepFocus: true });
|
||||||
}
|
|
||||||
|
|
||||||
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')}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Data ────────────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
let dayKeys = $derived(weekDayKeys(weekKey));
|
|
||||||
let closedDaysMap = $state<Record<string, ClosedDay>>({});
|
|
||||||
let weekEntries = $state<Entry[]>([]);
|
|
||||||
let closedWeek = $state<ClosedWeek | null>(null);
|
|
||||||
let currentSettings = $state<Settings | null>(null);
|
|
||||||
let error = $state('');
|
|
||||||
|
|
||||||
async function load() {
|
|
||||||
error = '';
|
|
||||||
const from = dayKeys[0];
|
|
||||||
const to = dayKeys[6];
|
|
||||||
try {
|
|
||||||
const [ds, ws, es] = await Promise.all([
|
|
||||||
days.list(from, to),
|
|
||||||
weeks.list(weekKey, weekKey),
|
|
||||||
entries.list(from, to)
|
|
||||||
]);
|
|
||||||
closedDaysMap = Object.fromEntries((ds ?? []).map((d) => [d.day_key, d]));
|
|
||||||
closedWeek = (ws ?? []).find((w) => w.week_key === weekKey) ?? null;
|
|
||||||
weekEntries = es ?? [];
|
|
||||||
} catch (e) {
|
|
||||||
error = e instanceof ApiError ? e.message : String(e);
|
|
||||||
}
|
|
||||||
// Load settings independently so a missing settings row doesn't break the rest.
|
|
||||||
try {
|
|
||||||
currentSettings = await settings.current();
|
|
||||||
} catch (e) {
|
|
||||||
if (!(e instanceof ApiError && e.status === 503)) {
|
|
||||||
error = e instanceof ApiError ? e.message : String(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$effect(() => { weekKey; load(); });
|
|
||||||
|
|
||||||
// ── Keyboard navigation for chip strip ──────────────────────────────────────
|
|
||||||
|
|
||||||
function handleStripKeydown(e: KeyboardEvent) {
|
|
||||||
const idx = dayKeys.indexOf(selectedDay);
|
|
||||||
if (e.key === 'ArrowRight' && idx < 6) {
|
|
||||||
selectDay(dayKeys[idx + 1]);
|
|
||||||
e.preventDefault();
|
|
||||||
} else if (e.key === 'ArrowLeft' && idx > 0) {
|
|
||||||
selectDay(dayKeys[idx - 1]);
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Week actions ─────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
async function handleCloseWeek() {
|
|
||||||
error = '';
|
|
||||||
try {
|
|
||||||
const cw = await weeks.close(weekKey);
|
|
||||||
closedWeek = cw;
|
|
||||||
triggerSync();
|
|
||||||
} catch (e) {
|
|
||||||
error = e instanceof ApiError ? e.message : String(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleReopenWeek() {
|
|
||||||
error = '';
|
|
||||||
try {
|
|
||||||
await weeks.reopen(weekKey);
|
|
||||||
closedWeek = null;
|
|
||||||
triggerSync();
|
|
||||||
} catch (e) {
|
|
||||||
error = e instanceof ApiError ? e.message : String(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Derived display values ───────────────────────────────────────────────────
|
|
||||||
|
|
||||||
const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
||||||
|
|
||||||
function dayWorkedMs(dk: string): number {
|
|
||||||
const cd = closedDaysMap[dk];
|
|
||||||
if (cd) return cd.worked_ms;
|
|
||||||
return weekEntries
|
|
||||||
.filter((e) => e.day_key === dk && e.end_time != null)
|
|
||||||
.reduce((sum, e) => sum + (e.end_time! - e.start_time), 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function dailyExpectedMs(dk: string): number {
|
|
||||||
if (!currentSettings) return 0;
|
|
||||||
const mask = currentSettings.workdays_mask;
|
|
||||||
if (!isWorkday(dk, mask)) return 0;
|
|
||||||
const workdayCount = [1, 2, 4, 8, 16, 32, 64].filter((b) => mask & b).length;
|
|
||||||
return (currentSettings.hours_per_week * 3_600_000) / workdayCount;
|
|
||||||
}
|
|
||||||
|
|
||||||
const totalWorkedMs = $derived(
|
|
||||||
dayKeys.reduce((sum, dk) => sum + dayWorkedMs(dk), 0)
|
|
||||||
);
|
|
||||||
const expectedMs = $derived(
|
|
||||||
currentSettings ? currentSettings.hours_per_week * 3_600_000 : 0
|
|
||||||
);
|
|
||||||
|
|
||||||
const daysWithEntries = $derived(new Set(weekEntries.map((e) => e.day_key)));
|
|
||||||
|
|
||||||
const canCloseWeek = $derived(
|
|
||||||
!closedWeek &&
|
|
||||||
dayKeys[0] <= todayKey() &&
|
|
||||||
dayKeys.every((dk) => {
|
|
||||||
if (dk > todayKey()) return true;
|
|
||||||
if (!daysWithEntries.has(dk)) return true;
|
|
||||||
return !!closedDaysMap[dk];
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Capabilities for the selected day, reactive on closedDaysMap updates.
|
|
||||||
const detailCaps = $derived(
|
|
||||||
dayCapabilities(selectedDay, todayKey(), !!closedDaysMap[selectedDay])
|
|
||||||
);
|
|
||||||
|
|
||||||
// Scroll selected chip into view when selection changes.
|
|
||||||
let chipRefs: Record<string, HTMLElement> = {};
|
|
||||||
$effect(() => {
|
|
||||||
const el = chipRefs[selectedDay];
|
|
||||||
el?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="week-view">
|
|
||||||
<div class="header">
|
|
||||||
<button onclick={() => navigateWeek(-1)} aria-label="Previous week">‹</button>
|
|
||||||
<h1>Week {weekKey}</h1>
|
|
||||||
<button onclick={() => navigateWeek(1)} aria-label="Next week">›</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if error}<p class="error">{error}</p>{/if}
|
|
||||||
|
|
||||||
<!-- Day strip -->
|
|
||||||
<!-- svelte-ignore a11y_interactive_supports_focus -->
|
|
||||||
<div
|
|
||||||
class="day-strip"
|
|
||||||
role="tablist"
|
|
||||||
aria-label="Days of the week"
|
|
||||||
onkeydown={handleStripKeydown}
|
|
||||||
>
|
|
||||||
{#each dayKeys as dk, i (dk)}
|
|
||||||
<div class="chip-slot" bind:this={chipRefs[dk]}>
|
|
||||||
<DayChip
|
|
||||||
dayKey={dk}
|
|
||||||
weekdayLabel={DAY_NAMES[i]}
|
|
||||||
workedMs={dayWorkedMs(dk)}
|
|
||||||
expectedMs={dailyExpectedMs(dk)}
|
|
||||||
kind={closedDaysMap[dk]?.kind ?? null}
|
|
||||||
closed={!!closedDaysMap[dk]}
|
|
||||||
isToday={dk === todayKey()}
|
|
||||||
selected={dk === selectedDay}
|
|
||||||
isWorkday={currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
|
|
||||||
onclick={() => selectDay(dk)}
|
|
||||||
/>
|
|
||||||
</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 canCloseWeek}
|
|
||||||
<button class="btn close-week" onclick={handleCloseWeek}>Close week</button>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- Day detail panel -->
|
|
||||||
<div class="day-detail-panel" role="tabpanel">
|
|
||||||
<h2 class="detail-heading">{selectedDay}</h2>
|
|
||||||
<DayDetail
|
|
||||||
dayKey={selectedDay}
|
|
||||||
capabilities={detailCaps}
|
|
||||||
oninvalidate={(cd) => {
|
|
||||||
if (cd !== undefined) {
|
|
||||||
// Day was closed or reopened — update map immediately so detailCaps reacts.
|
|
||||||
// Do NOT call load() here; Dexie doesn't have the server result yet and
|
|
||||||
// would overwrite the optimistic update.
|
|
||||||
if (cd === null) {
|
|
||||||
const { [selectedDay]: _, ...rest } = closedDaysMap;
|
|
||||||
closedDaysMap = rest;
|
|
||||||
} else {
|
|
||||||
closedDaysMap = { ...closedDaysMap, [selectedDay]: cd };
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Entry mutation — reload entries/days from Dexie.
|
|
||||||
load();
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
/>
|
ondaychange={(dk) => {
|
||||||
</div>
|
const next = new URL($page.url);
|
||||||
</div>
|
next.searchParams.set('day', dk);
|
||||||
|
goto(next.toString(), { replaceState: true, noScroll: true, keepFocus: true });
|
||||||
<style>
|
}}
|
||||||
.week-view h1 { margin: 0; font-size: 1.2rem; }
|
/>
|
||||||
.header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
|
|
||||||
.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; margin-bottom: 1rem; }
|
|
||||||
|
|
||||||
.day-strip {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.4rem;
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
overflow-x: auto;
|
|
||||||
scroll-snap-type: x mandatory;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
padding-bottom: 0.25rem;
|
|
||||||
/* let chips grow to fill available width */
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Each slot is a flex child that stretches and provides the container
|
|
||||||
query context via the .chip-wrap inside DayChip */
|
|
||||||
.chip-slot {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 2.8rem;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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; }
|
|
||||||
.day-detail-panel { border-top: 2px solid #dee2e6; margin-top: 1.25rem; padding-top: 0.75rem; }
|
|
||||||
.detail-heading { font-size: 1rem; font-weight: 600; color: #495057; margin: 0 0 0.5rem; }
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -19,7 +19,8 @@ export default defineConfig({
|
|||||||
globPatterns: ['**/*.{js,css,svg,png,ico,woff,woff2}'],
|
globPatterns: ['**/*.{js,css,svg,png,ico,woff,woff2}'],
|
||||||
additionalManifestEntries: [
|
additionalManifestEntries: [
|
||||||
{ url: '/', revision: buildId },
|
{ url: '/', revision: buildId },
|
||||||
{ url: '/index.html', revision: buildId }
|
{ url: '/index.html', revision: buildId },
|
||||||
|
{ url: '/today', revision: buildId }
|
||||||
],
|
],
|
||||||
cleanupOutdatedCaches: true,
|
cleanupOutdatedCaches: true,
|
||||||
clientsClaim: true,
|
clientsClaim: true,
|
||||||
@@ -48,7 +49,7 @@ export default defineConfig({
|
|||||||
theme_color: '#1a1a2e',
|
theme_color: '#1a1a2e',
|
||||||
background_color: '#f8f9fa',
|
background_color: '#f8f9fa',
|
||||||
display: 'standalone',
|
display: 'standalone',
|
||||||
start_url: '/',
|
start_url: '/today',
|
||||||
icons: [
|
icons: [
|
||||||
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
|
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
|
||||||
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' }
|
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' }
|
||||||
|
|||||||
Reference in New Issue
Block a user