Move 3 Strikes from Admin to Dashboard, add strikes feature

- Adds strikes (0-3) to Child model with migration
- New PATCH /api/children/{id}/strikes endpoint with WebSocket broadcast
- TV dashboard shows red ✕ marks next to child name when strikes > 0
- 3 Strikes card on Dashboard page (removed from Admin)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 17:20:10 -08:00
parent 4b49605ed1
commit 44e8f7de7b
7 changed files with 132 additions and 3 deletions

View File

@@ -2,7 +2,16 @@
<div class="tv-root">
<!-- Header bar -->
<header class="tv-header">
<div class="tv-child-name">{{ scheduleStore.child?.name || 'Loading...' }}</div>
<div class="tv-child-name-wrap">
<div class="tv-child-name">{{ scheduleStore.child?.name || 'Loading...' }}</div>
<div class="tv-strikes" v-if="scheduleStore.child?.strikes > 0">
<span
v-for="i in scheduleStore.child.strikes"
:key="i"
class="tv-strike-x"
></span>
</div>
</div>
<div class="tv-clock">{{ clockDisplay }}</div>
<div class="tv-date">{{ dateDisplay }}</div>
</header>
@@ -197,12 +206,30 @@ onMounted(async () => {
padding-bottom: 1rem;
}
.tv-child-name-wrap {
display: flex;
align-items: center;
gap: 1rem;
}
.tv-child-name {
font-size: 2.5rem;
font-weight: 700;
color: #818cf8;
}
.tv-strikes {
display: flex;
gap: 0.4rem;
}
.tv-strike-x {
font-size: 2rem;
font-weight: 700;
color: #ef4444;
line-height: 1;
}
.tv-clock {
font-size: 3rem;
font-weight: 300;