feat(week): add day strip with per-day progress bars and status
- New DayChip.svelte component: weekday label, date number, progress bar (worked/expected), kind badge (H/V/S), closed checkmark, today highlight, selected state, accessible role=tab/aria-selected - Week page: replace days-grid with horizontal scroll-snap chip strip - Per-day workedMs: uses closed_days.worked_ms when closed, else sums open entries for that day (so in-progress work shows immediately) - dailyExpectedMs: evenly split hours_per_week across workdays; 0 for weekends (no progress bar rendered for non-workdays) - Progress bar turns amber when worked > expected (overtime) - weekEntries stored in state (was discarded after computing set); daysWithEntries now derived from weekEntries
This commit is contained in:
@@ -4,11 +4,12 @@
|
||||
import {
|
||||
currentWeekKey, weekDayKeys, formatDurationShort, formatDelta, todayKey, isWorkday
|
||||
} from '$lib/utils';
|
||||
import DayChip from '$lib/components/DayChip.svelte';
|
||||
|
||||
let weekKey = $state(currentWeekKey());
|
||||
let dayKeys = $derived(weekDayKeys(weekKey));
|
||||
let closedDaysMap = $state<Record<string, ClosedDay>>({});
|
||||
let daysWithEntries = $state<Set<string>>(new Set());
|
||||
let weekEntries = $state<Entry[]>([]);
|
||||
let closedWeek = $state<ClosedWeek | null>(null);
|
||||
let currentSettings = $state<Settings | null>(null);
|
||||
let error = $state('');
|
||||
@@ -27,10 +28,7 @@
|
||||
closedDaysMap = Object.fromEntries((ds ?? []).map((d) => [d.day_key, d]));
|
||||
closedWeek = (ws ?? []).find((w) => w.week_key === weekKey) ?? null;
|
||||
currentSettings = s;
|
||||
// Track which day_keys have at least one entry (for close-week guard).
|
||||
const set = new Set<string>();
|
||||
for (const e of (es ?? [])) set.add(e.day_key);
|
||||
daysWithEntries = set;
|
||||
weekEntries = es ?? [];
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
}
|
||||
@@ -60,13 +58,36 @@
|
||||
|
||||
const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
||||
|
||||
// Per-day worked ms: use closed_days value if closed, else sum open entries.
|
||||
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);
|
||||
}
|
||||
|
||||
// Daily expected ms for a workday; 0 for weekends.
|
||||
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 + (closedDaysMap[dk]?.worked_ms ?? 0), 0)
|
||||
dayKeys.reduce((sum, dk) => sum + dayWorkedMs(dk), 0)
|
||||
);
|
||||
const expectedMs = $derived(
|
||||
currentSettings ? currentSettings.hours_per_week * 3_600_000 : 0
|
||||
);
|
||||
|
||||
// Track which day_keys have at least one entry (for close-week guard).
|
||||
const daysWithEntries = $derived(
|
||||
new Set(weekEntries.map((e) => e.day_key))
|
||||
);
|
||||
|
||||
// Week can be closed if it's not already closed, the week has started,
|
||||
// and every past workday that has entries is also closed.
|
||||
const canCloseWeek = $derived(
|
||||
@@ -102,25 +123,20 @@
|
||||
|
||||
{#if error}<p class="error">{error}</p>{/if}
|
||||
|
||||
<div class="days-grid">
|
||||
<!-- Day strip -->
|
||||
<div class="day-strip" role="tablist" aria-label="Days of the week">
|
||||
{#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>
|
||||
<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={false}
|
||||
isWorkday={currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -151,25 +167,20 @@
|
||||
|
||||
<style>
|
||||
.week-view h1 { margin: 0; font-size: 1.2rem; }
|
||||
.header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
|
||||
.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; }
|
||||
.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; }
|
||||
.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; /* room for scrollbar */
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
Reference in New Issue
Block a user