aksdb/wotra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(week): add day strip with per-day progress bars and status

Browse Source 
- 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:
Andreas Schneider
2026-04-30 19:04:38 +02:00
parent 6c4f78d101
commit 3e4e93a814
2 changed files with 236 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
web/src/lib/components/DayChip.svelte Normal file
View File

@@ -0,0 +1,183 @@
<script lang="ts">
import { formatDurationShort } from '$lib/utils';
interface Props {
dayKey: string;
weekdayLabel: string; // e.g. 'Mon'
workedMs: number;
expectedMs: number;
kind: 'work' | 'holiday' | 'vacation' | 'sick' | null; // null = open/untracked
closed: boolean;
isToday: boolean;
selected: boolean;
isWorkday: boolean;
onclick?: () => void;
}
let {
dayKey,
weekdayLabel,
workedMs,
expectedMs,
kind,
closed,
isToday,
selected,
isWorkday,
onclick
}: Props = $props();
const dateNum = $derived(dayKey.slice(8)); // DD
// Progress bar fill: clamp to [0,1]. Non-workdays have expectedMs=0 → no bar.
const progress = $derived(expectedMs > 0 ? Math.min(workedMs / expectedMs, 1) : 0);
// Kind icons (emoji-free: text labels used for kind badges)
const KIND_ICON: Record<string, string> = {
holiday: 'H',
vacation: 'V',
sick: 'S'
};
</script>
<button
class="day-chip"
class:today={isToday}
class:selected
class:weekend={!isWorkday}
class:closed
role="tab"
aria-selected={selected}
tabindex={selected ? 0 : -1}
{onclick}
>
<span class="wd-label">{weekdayLabel}</span>
<span class="date-num">{dateNum}</span>
{#if expectedMs > 0}
<div class="progress-track" title="{formatDurationShort(workedMs)} / {formatDurationShort(expectedMs)}">
<div class="progress-fill" class:over={workedMs > expectedMs} style="width: {progress * 100}%"></div>
</div>
{:else}
<div class="progress-track weekend-track"></div>
{/if}
<div class="badges">
{#if kind && kind !== 'work'}
<span class="kind-badge" data-kind={kind}>{KIND_ICON[kind]}</span>
{/if}
{#if closed}
<span class="closed-badge" title="Closed">✓</span>
{/if}
</div>
</button>
<style>
.day-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
padding: 0.4rem 0.3rem;
border: 1px solid #dee2e6;
border-radius: 8px;
background: #fff;
cursor: pointer;
min-width: 2.8rem;
flex: 1;
transition: border-color 0.15s, box-shadow 0.15s;
scroll-snap-align: start;
font-family: inherit;
}
.day-chip:hover {
border-color: #adb5bd;
}
.day-chip.today {
border-color: #2c7be5;
}
.day-chip.selected {
border-color: #2c7be5;
box-shadow: 0 0 0 2px #cce5ff;
background: #f0f7ff;
}
.day-chip.weekend {
background: #f8f9fa;
color: #adb5bd;
}
.day-chip.closed {
background: #f0f9f0;
}
.wd-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: inherit;
}
.date-num {
font-size: 1rem;
font-weight: 600;
line-height: 1;
}
.today .date-num {
color: #2c7be5;
}
.progress-track {
width: 100%;
height: 4px;
background: #e9ecef;
border-radius: 2px;
overflow: hidden;
margin: 0.15rem 0;
}
.weekend-track {
background: transparent;
}
.progress-fill {
height: 100%;
background: #27ae60;
border-radius: 2px;
transition: width 0.2s;
}
.progress-fill.over {
background: #f39c12;
}
.badges {
display: flex;
gap: 0.15rem;
flex-wrap: wrap;
justify-content: center;
min-height: 1rem;
}
.kind-badge {
font-size: 0.6rem;
font-weight: 700;
padding: 0.05rem 0.25rem;
border-radius: 3px;
line-height: 1.4;
}
.kind-badge[data-kind="holiday"] { background: #fff3cd; color: #856404; }
.kind-badge[data-kind="vacation"] { background: #cce5ff; color: #004085; }
.kind-badge[data-kind="sick"] { background: #f8d7da; color: #721c24; }
.closed-badge {
font-size: 0.65rem;
color: #27ae60;
font-weight: 700;
}
</style>

95
web/src/routes/week/+page.svelte
View File

@@ -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; }