CooperandGoodman/homeschool
1
0
Fork 0
Code Issues Pull Requests Activity

Initial project scaffold

Browse Source 
Full-stack homeschool web app with FastAPI backend, Vue 3 frontend,
MySQL database, and Docker Compose orchestration. Includes JWT auth,
WebSocket real-time TV dashboard, schedule builder, activity logging,
and multi-child support.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Derek Cooper
2026-02-27 22:56:31 -08:00
parent 93e0494864
commit 417b3adfe8
68 changed files with 3919 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/App.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<RouterView />
</template>
<script setup>
import { RouterView } from 'vue-router'
</script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0f172a;
color: #f1f5f9;
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
</style>

45
frontend/src/components/ChildSelector.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div class="child-selector" v-if="childrenStore.children.length > 1">
<button
v-for="child in childrenStore.children.filter(c => c.is_active)"
:key="child.id"
class="child-btn"
:class="{ active: childrenStore.activeChild?.id === child.id }"
:style="{ '--color': child.color }"
@click="childrenStore.setActiveChild(child)"
>
{{ child.name }}
</button>
</div>
</template>
<script setup>
import { useChildrenStore } from '@/stores/children'
const childrenStore = useChildrenStore()
</script>
<style scoped>
.child-selector {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.child-btn {
padding: 0.4rem 1rem;
border: 2px solid var(--color, #4f46e5);
background: transparent;
color: #94a3b8;
border-radius: 999px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s;
}
.child-btn:hover,
.child-btn.active {
background: var(--color, #4f46e5);
color: #fff;
}
</style>

89
frontend/src/components/NavBar.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<nav class="navbar">
<RouterLink class="nav-brand" to="/dashboard">🏠 Homeschool</RouterLink>
<div class="nav-links">
<RouterLink to="/dashboard" active-class="active">Dashboard</RouterLink>
<RouterLink to="/schedules" active-class="active">Schedules</RouterLink>
<RouterLink to="/logs" active-class="active">Logs</RouterLink>
<RouterLink to="/admin" active-class="active">Admin</RouterLink>
</div>
<div class="nav-user" v-if="auth.user">
<span class="nav-name">{{ auth.user.full_name }}</span>
<button class="btn-logout" @click="logout">Sign out</button>
</div>
</nav>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const auth = useAuthStore()
const router = useRouter()
async function logout() {
await auth.logout()
router.push('/login')
}
</script>
<style scoped>
.navbar {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.875rem 2rem;
background: #1e293b;
border-bottom: 1px solid #334155;
}
.nav-brand {
font-size: 1.1rem;
font-weight: 700;
color: #818cf8;
text-decoration: none;
white-space: nowrap;
}
.nav-links {
display: flex;
gap: 0.25rem;
flex: 1;
}
.nav-links a {
padding: 0.4rem 0.9rem;
border-radius: 0.5rem;
color: #94a3b8;
font-size: 0.9rem;
transition: all 0.2s;
text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active {
background: #334155;
color: #f1f5f9;
}
.nav-user {
display: flex;
align-items: center;
gap: 0.75rem;
margin-left: auto;
}
.nav-name { font-size: 0.875rem; color: #64748b; }
.btn-logout {
padding: 0.35rem 0.75rem;
border: 1px solid #334155;
background: transparent;
color: #94a3b8;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s;
}
.btn-logout:hover { background: #334155; color: #f1f5f9; }
</style>

29
frontend/src/components/ProgressBar.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div class="progress-track">
<div
class="progress-fill"
:style="{ width: `${Math.min(100, Math.max(0, percent))}%` }"
></div>
</div>
</template>
<script setup>
defineProps({ percent: { type: Number, default: 0 } })
</script>
<style scoped>
.progress-track {
width: 100%;
height: 8px;
background: #0f172a;
border-radius: 999px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #4f46e5, #818cf8);
border-radius: 999px;
transition: width 0.5s ease;
}
</style>

100
frontend/src/components/ScheduleBlock.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<div
class="block-card"
:class="{
'is-current': isCurrent,
'is-completed': isCompleted,
compact,
}"
>
<div class="block-indicator" :style="{ background: subjectColor }"></div>
<div class="block-body">
<div class="block-title">
{{ block.label || subjectName || 'Block' }}
</div>
<div class="block-time">{{ block.time_start }} – {{ block.time_end }}</div>
</div>
<div class="block-status" v-if="isCompleted">✓</div>
<div class="block-status active" v-else-if="isCurrent">▶</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
block: { type: Object, required: true },
isCurrent: { type: Boolean, default: false },
isCompleted: { type: Boolean, default: false },
compact: { type: Boolean, default: false },
})
const subjectColor = computed(() => props.block.subject?.color || '#475569')
const subjectName = computed(() => props.block.subject?.name || null)
</script>
<style scoped>
.block-card {
display: flex;
align-items: center;
gap: 0.75rem;
background: #1e293b;
border-radius: 0.75rem;
padding: 0.75rem 1rem;
border: 1px solid transparent;
transition: all 0.2s;
cursor: default;
}
.block-card.is-current {
border-color: #4f46e5;
background: #1e1b4b;
}
.block-card.is-completed {
opacity: 0.5;
}
.block-card.compact {
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
}
.block-indicator {
width: 4px;
height: 36px;
border-radius: 2px;
flex-shrink: 0;
}
.block-card.compact .block-indicator {
height: 24px;
}
.block-body { flex: 1; min-width: 0; }
.block-title {
font-size: 0.95rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.block-card.compact .block-title { font-size: 0.85rem; }
.block-time {
font-size: 0.75rem;
color: #64748b;
margin-top: 0.15rem;
font-variant-numeric: tabular-nums;
}
.block-status {
font-size: 0.85rem;
color: #64748b;
flex-shrink: 0;
}
.block-status.active { color: #818cf8; }
</style>

127
frontend/src/components/TimerDisplay.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<div class="timer-wrap">
<!-- SVG circular ring -->
<svg class="timer-ring" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="88" class="ring-bg" />
<circle
cx="100" cy="100" r="88"
class="ring-fill"
:style="{ strokeDashoffset: dashOffset, stroke: ringColor }"
/>
</svg>
<div class="timer-inner">
<div class="timer-time">{{ display }}</div>
<div class="timer-label">{{ label }}</div>
</div>
</div>
</template>
<script setup>
import { computed, onUnmounted, ref, watch } from 'vue'
const props = defineProps({
block: { type: Object, default: null },
session: { type: Object, default: null },
})
const elapsed = ref(0)
let interval = null
function parseTime(str) {
if (!str) return 0
const [h, m, s = 0] = str.split(':').map(Number)
return h * 3600 + m * 60 + s
}
const blockDuration = computed(() => {
if (!props.block) return 0
return parseTime(props.block.time_end) - parseTime(props.block.time_start)
})
const remaining = computed(() => Math.max(0, blockDuration.value - elapsed.value))
const display = computed(() => {
const s = remaining.value
const m = Math.floor(s / 60)
const sec = s % 60
return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
})
const label = computed(() => {
if (remaining.value === 0) return 'Done!'
return 'remaining'
})
const CIRCUMFERENCE = 2 * Math.PI * 88
const dashOffset = computed(() => {
if (!blockDuration.value) return CIRCUMFERENCE
const pct = remaining.value / blockDuration.value
return CIRCUMFERENCE * (1 - pct)
})
const ringColor = computed(() => props.block?.subject?.color || '#4f46e5')
// Tick timer
watch(() => props.block?.id, () => { elapsed.value = 0 })
function startTick() {
if (interval) clearInterval(interval)
interval = setInterval(() => { elapsed.value++ }, 1000)
}
startTick()
onUnmounted(() => clearInterval(interval))
</script>
<style scoped>
.timer-wrap {
position: relative;
width: 280px;
height: 280px;
}
.timer-ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.ring-bg {
fill: none;
stroke: #1e293b;
stroke-width: 12;
}
.ring-fill {
fill: none;
stroke-width: 12;
stroke-linecap: round;
stroke-dasharray: 552.92; /* 2π×88 */
transition: stroke-dashoffset 1s linear, stroke 0.5s;
}
.timer-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.timer-time {
font-size: 4rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.02em;
}
.timer-label {
font-size: 0.9rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.1em;
}
</style>

55
frontend/src/composables/useApi.js Normal file
View File

@@ -0,0 +1,55 @@
import axios from 'axios'
const api = axios.create({
baseURL: '/',
withCredentials: true, // send cookies (refresh token)
})
// Attach access token to every request
api.interceptors.request.use((config) => {
const token = localStorage.getItem('access_token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
// Auto-refresh on 401
let refreshing = false
let waitQueue = []
api.interceptors.response.use(
(res) => res,
async (error) => {
const original = error.config
if (error.response?.status === 401 && !original._retry) {
if (refreshing) {
return new Promise((resolve, reject) => {
waitQueue.push({ resolve, reject })
}).then(() => api(original))
}
original._retry = true
refreshing = true
try {
const res = await axios.post('/api/auth/refresh', {}, { withCredentials: true })
const token = res.data.access_token
localStorage.setItem('access_token', token)
waitQueue.forEach(({ resolve }) => resolve())
waitQueue = []
original.headers.Authorization = `Bearer ${token}`
return api(original)
} catch (_) {
waitQueue.forEach(({ reject }) => reject())
waitQueue = []
localStorage.removeItem('access_token')
window.location.href = '/login'
} finally {
refreshing = false
}
}
return Promise.reject(error)
}
)
export default api

50
frontend/src/composables/useWebSocket.js Normal file
View File

@@ -0,0 +1,50 @@
import { ref, onUnmounted } from 'vue'
export function useWebSocket(childId, onMessage) {
const connected = ref(false)
let ws = null
let reconnectTimer = null
function connect() {
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
const url = `${protocol}://${window.location.host}/ws/${childId}`
ws = new WebSocket(url)
ws.onopen = () => {
connected.value = true
if (reconnectTimer) {
clearTimeout(reconnectTimer)
reconnectTimer = null
}
}
ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
onMessage(data)
} catch (e) {
console.warn('WS parse error', e)
}
}
ws.onclose = () => {
connected.value = false
// Reconnect after 3 seconds
reconnectTimer = setTimeout(connect, 3000)
}
ws.onerror = () => {
ws.close()
}
}
function disconnect() {
if (reconnectTimer) clearTimeout(reconnectTimer)
if (ws) ws.close()
}
connect()
onUnmounted(disconnect)
return { connected, disconnect }
}

9
frontend/src/main.js Normal file
View File

@@ -0,0 +1,9 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

65
frontend/src/router/index.js Normal file
View File

@@ -0,0 +1,65 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const routes = [
{
path: '/',
redirect: '/dashboard',
},
{
path: '/login',
name: 'login',
component: () => import('@/views/LoginView.vue'),
meta: { public: true },
},
{
path: '/tv/:childId',
name: 'tv',
component: () => import('@/views/TVView.vue'),
meta: { public: true },
},
{
path: '/dashboard',
name: 'dashboard',
component: () => import('@/views/DashboardView.vue'),
meta: { requiresAuth: true },
},
{
path: '/schedules',
name: 'schedules',
component: () => import('@/views/ScheduleView.vue'),
meta: { requiresAuth: true },
},
{
path: '/logs',
name: 'logs',
component: () => import('@/views/LogView.vue'),
meta: { requiresAuth: true },
},
{
path: '/admin',
name: 'admin',
component: () => import('@/views/AdminView.vue'),
meta: { requiresAuth: true },
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
router.beforeEach(async (to) => {
if (to.meta.requiresAuth) {
const auth = useAuthStore()
if (!auth.isAuthenticated) {
// Try to refresh before redirecting to login
await auth.tryRefresh()
if (!auth.isAuthenticated) {
return { name: 'login', query: { redirect: to.fullPath } }
}
}
}
})
export default router

76
frontend/src/stores/auth.js Normal file
View File

@@ -0,0 +1,76 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import api from '@/composables/useApi'
export const useAuthStore = defineStore('auth', () => {
const accessToken = ref(localStorage.getItem('access_token') || null)
const user = ref(null)
const isAuthenticated = computed(() => !!accessToken.value)
function setToken(token) {
accessToken.value = token
localStorage.setItem('access_token', token)
}
function clearToken() {
accessToken.value = null
user.value = null
localStorage.removeItem('access_token')
}
async function login(email, password) {
const res = await api.post('/api/auth/login', { email, password })
setToken(res.data.access_token)
await fetchMe()
}
async function register(email, password, fullName) {
const res = await api.post('/api/auth/register', {
email,
password,
full_name: fullName,
})
setToken(res.data.access_token)
await fetchMe()
}
async function logout() {
try {
await api.post('/api/auth/logout')
} catch (_) {
// ignore errors on logout
}
clearToken()
}
async function tryRefresh() {
try {
const res = await api.post('/api/auth/refresh')
setToken(res.data.access_token)
await fetchMe()
} catch (_) {
clearToken()
}
}
async function fetchMe() {
try {
const res = await api.get('/api/users/me')
user.value = res.data
} catch (_) {
clearToken()
}
}
return {
accessToken,
user,
isAuthenticated,
login,
register,
logout,
tryRefresh,
fetchMe,
}
})

40
frontend/src/stores/children.js Normal file
View File

@@ -0,0 +1,40 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import api from '@/composables/useApi'
export const useChildrenStore = defineStore('children', () => {
const children = ref([])
const activeChild = ref(null)
async function fetchChildren() {
const res = await api.get('/api/children')
children.value = res.data
if (!activeChild.value && children.value.length > 0) {
activeChild.value = children.value[0]
}
}
async function createChild(data) {
const res = await api.post('/api/children', data)
children.value.push(res.data)
return res.data
}
async function updateChild(id, data) {
const res = await api.patch(`/api/children/${id}`, data)
const idx = children.value.findIndex((c) => c.id === id)
if (idx !== -1) children.value[idx] = res.data
return res.data
}
async function deleteChild(id) {
await api.delete(`/api/children/${id}`)
children.value = children.value.filter((c) => c.id !== id)
}
function setActiveChild(child) {
activeChild.value = child
}
return { children, activeChild, fetchChildren, createChild, updateChild, deleteChild, setActiveChild }
})

79
frontend/src/stores/schedule.js Normal file
View File

@@ -0,0 +1,79 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import api from '@/composables/useApi'
export const useScheduleStore = defineStore('schedule', () => {
const session = ref(null)
const blocks = ref([])
const completedBlockIds = ref([])
const child = ref(null)
const currentBlock = computed(() =>
session.value?.current_block_id
? blocks.value.find((b) => b.id === session.value.current_block_id) || null
: null
)
const progressPercent = computed(() => {
if (!blocks.value.length) return 0
return Math.round((completedBlockIds.value.length / blocks.value.length) * 100)
})
function applySnapshot(snapshot) {
session.value = snapshot.session
blocks.value = snapshot.blocks || []
completedBlockIds.value = snapshot.completed_block_ids || []
if (snapshot.child) child.value = snapshot.child
}
function applyWsEvent(event) {
if (event.event === 'session_update') {
applySnapshot(event)
return
}
// Timer events update session state
if (event.current_block_id !== undefined && session.value) {
session.value.current_block_id = event.current_block_id
}
if (event.event === 'complete' && event.block_id) {
if (!completedBlockIds.value.includes(event.block_id)) {
completedBlockIds.value.push(event.block_id)
}
}
}
async function fetchDashboard(childId) {
const res = await api.get(`/api/dashboard/${childId}`)
applySnapshot(res.data)
}
async function startSession(childId, templateId) {
const res = await api.post('/api/sessions', {
child_id: childId,
template_id: templateId,
})
session.value = res.data
completedBlockIds.value = []
}
async function sendTimerAction(sessionId, eventType, blockId = null) {
await api.post(`/api/sessions/${sessionId}/timer`, {
event_type: eventType,
block_id: blockId,
})
}
return {
session,
blocks,
completedBlockIds,
child,
currentBlock,
progressPercent,
applySnapshot,
applyWsEvent,
fetchDashboard,
startSession,
sendTimerAction,
}
})

199
frontend/src/views/AdminView.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div class="page">
<NavBar />
<main class="container">
<h1>Admin</h1>
<!-- Children section -->
<section class="section">
<div class="section-header">
<h2>Children</h2>
<button class="btn-primary btn-sm" @click="showChildForm = !showChildForm">+ Add</button>
</div>
<form v-if="showChildForm" @submit.prevent="createChild" class="inline-form">
<input v-model="newChild.name" placeholder="Name" required />
<input v-model="newChild.color" type="color" title="Color" />
<button type="submit" class="btn-primary btn-sm">Save</button>
<button type="button" @click="showChildForm = false">Cancel</button>
</form>
<div class="item-list">
<div v-for="child in childrenStore.children" :key="child.id" class="item-row">
<div class="item-color" :style="{ background: child.color }"></div>
<span class="item-name">{{ child.name }}</span>
<span class="item-meta">{{ child.is_active ? 'Active' : 'Inactive' }}</span>
<div class="item-actions">
<button class="btn-sm" @click="toggleChild(child)">
{{ child.is_active ? 'Deactivate' : 'Activate' }}
</button>
<button class="btn-sm btn-danger" @click="deleteChild(child.id)">Delete</button>
</div>
</div>
<div v-if="childrenStore.children.length === 0" class="empty-small">No children added yet.</div>
</div>
</section>
<!-- Subjects section -->
<section class="section">
<div class="section-header">
<h2>Subjects</h2>
<button class="btn-primary btn-sm" @click="showSubjectForm = !showSubjectForm">+ Add</button>
</div>
<form v-if="showSubjectForm" @submit.prevent="createSubject" class="inline-form">
<input v-model="newSubject.name" placeholder="Subject name" required />
<input v-model="newSubject.icon" placeholder="Icon (emoji)" maxlength="4" style="width:60px" />
<input v-model="newSubject.color" type="color" title="Color" />
<button type="submit" class="btn-primary btn-sm">Save</button>
<button type="button" @click="showSubjectForm = false">Cancel</button>
</form>
<div class="item-list">
<div v-for="subject in subjects" :key="subject.id" class="item-row">
<div class="item-color" :style="{ background: subject.color }"></div>
<span class="item-icon">{{ subject.icon }}</span>
<span class="item-name">{{ subject.name }}</span>
<div class="item-actions">
<button class="btn-sm btn-danger" @click="deleteSubject(subject.id)">Delete</button>
</div>
</div>
<div v-if="subjects.length === 0" class="empty-small">No subjects added yet.</div>
</div>
</section>
</main>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useChildrenStore } from '@/stores/children'
import api from '@/composables/useApi'
import NavBar from '@/components/NavBar.vue'
const childrenStore = useChildrenStore()
const subjects = ref([])
const showChildForm = ref(false)
const showSubjectForm = ref(false)
const newChild = ref({ name: '', color: '#4F46E5' })
const newSubject = ref({ name: '', icon: '📚', color: '#10B981' })
async function createChild() {
await childrenStore.createChild(newChild.value)
newChild.value = { name: '', color: '#4F46E5' }
showChildForm.value = false
}
async function toggleChild(child) {
await childrenStore.updateChild(child.id, { is_active: !child.is_active })
}
async function deleteChild(id) {
if (confirm('Delete this child? All associated data will be removed.')) {
await childrenStore.deleteChild(id)
}
}
async function loadSubjects() {
const res = await api.get('/api/subjects')
subjects.value = res.data
}
async function createSubject() {
const res = await api.post('/api/subjects', newSubject.value)
subjects.value.push(res.data)
newSubject.value = { name: '', icon: '📚', color: '#10B981' }
showSubjectForm.value = false
}
async function deleteSubject(id) {
if (confirm('Delete this subject?')) {
await api.delete(`/api/subjects/${id}`)
subjects.value = subjects.value.filter((s) => s.id !== id)
}
}
onMounted(async () => {
await childrenStore.fetchChildren()
await loadSubjects()
})
</script>
<style scoped>
.page { min-height: 100vh; background: #0f172a; }
.container { max-width: 800px; margin: 0 auto; padding: 2rem; }
h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 2rem; }
.section { margin-bottom: 3rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
h2 { font-size: 1.1rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.inline-form {
display: flex;
align-items: center;
gap: 0.5rem;
background: #1e293b;
padding: 1rem;
border-radius: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.inline-form input[type="text"],
.inline-form input:not([type="color"]) {
padding: 0.5rem 0.75rem;
background: #0f172a;
border: 1px solid #334155;
border-radius: 0.5rem;
color: #f1f5f9;
font-size: 0.9rem;
flex: 1;
min-width: 120px;
}
.item-list { display: flex; flex-direction: column; gap: 0.5rem; }
.item-row {
display: flex;
align-items: center;
gap: 0.75rem;
background: #1e293b;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
}
.item-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.item-icon { font-size: 1.2rem; }
.item-name { flex: 1; font-weight: 500; }
.item-meta { font-size: 0.8rem; color: #64748b; }
.item-actions { display: flex; gap: 0.4rem; }
.empty-small { color: #64748b; font-size: 0.9rem; padding: 1rem 0; }
.btn-primary {
padding: 0.5rem 1rem;
background: #4f46e5;
color: #fff;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
}
.btn-primary:hover { background: #4338ca; }
.btn-sm {
padding: 0.35rem 0.75rem;
border: 1px solid #334155;
background: transparent;
color: #94a3b8;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s;
}
.btn-sm:hover { background: #334155; }
.btn-sm.btn-danger { border-color: #7f1d1d; color: #fca5a5; }
.btn-sm.btn-danger:hover { background: #7f1d1d; }
</style>

264
frontend/src/views/DashboardView.vue Normal file
View File

@@ -0,0 +1,264 @@
<template>
<div class="page">
<NavBar />
<main class="container">
<div class="page-header">
<h1>Dashboard</h1>
<ChildSelector />
</div>
<div v-if="!activeChild" class="empty-state">
<p>Add a child in <RouterLink to="/admin">Admin</RouterLink> to get started.</p>
</div>
<div v-else class="dashboard-grid">
<!-- Today's session card -->
<div class="card session-card">
<div class="card-title">Today's Session</div>
<div v-if="scheduleStore.session">
<div class="session-info">
<span class="badge-active">Active</span>
<span>{{ scheduleStore.progressPercent }}% complete</span>
</div>
<ProgressBar :percent="scheduleStore.progressPercent" />
<div class="session-actions">
<button
class="btn-sm"
v-if="scheduleStore.session.current_block_id"
@click="sendAction('pause')"
>Pause</button>
<button class="btn-sm" @click="sendAction('start')">Resume</button>
<button class="btn-sm btn-danger" @click="sendAction('complete')">End Day</button>
</div>
</div>
<div v-else class="no-session">
<p>No active session.</p>
<button class="btn-primary" @click="showStartDialog = true">Start Day</button>
</div>
</div>
<!-- Schedule blocks -->
<div class="card">
<div class="card-title">Today's Schedule</div>
<div v-if="scheduleStore.blocks.length === 0" class="empty-small">
No blocks loaded.
</div>
<div class="block-list" v-else>
<ScheduleBlock
v-for="block in scheduleStore.blocks"
:key="block.id"
:block="block"
:is-current="block.id === scheduleStore.session?.current_block_id"
:is-completed="scheduleStore.completedBlockIds.includes(block.id)"
@click="selectBlock(block)"
/>
</div>
</div>
<!-- TV Link -->
<div class="card tv-card">
<div class="card-title">TV Dashboard</div>
<p class="tv-desc">Open this on the living room TV for the full-screen view.</p>
<a :href="`/tv/${activeChild.id}`" target="_blank" class="btn-primary">
Open TV View →
</a>
</div>
</div>
<!-- Start session dialog -->
<div class="dialog-overlay" v-if="showStartDialog" @click.self="showStartDialog = false">
<div class="dialog">
<h2>Start School Day</h2>
<div class="field">
<label>Schedule Template</label>
<select v-model="selectedTemplate">
<option :value="null">No template (freestyle)</option>
<option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option>
</select>
</div>
<div class="dialog-actions">
<button @click="showStartDialog = false">Cancel</button>
<button class="btn-primary" @click="startSession">Start</button>
</div>
</div>
</div>
</main>
</div>
</template>
<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useChildrenStore } from '@/stores/children'
import { useScheduleStore } from '@/stores/schedule'
import { useWebSocket } from '@/composables/useWebSocket'
import api from '@/composables/useApi'
import NavBar from '@/components/NavBar.vue'
import ChildSelector from '@/components/ChildSelector.vue'
import ProgressBar from '@/components/ProgressBar.vue'
import ScheduleBlock from '@/components/ScheduleBlock.vue'
const childrenStore = useChildrenStore()
const scheduleStore = useScheduleStore()
const activeChild = computed(() => childrenStore.activeChild)
const showStartDialog = ref(false)
const selectedTemplate = ref(null)
const templates = ref([])
let wsDisconnect = null
async function loadDashboard() {
if (!activeChild.value) return
await scheduleStore.fetchDashboard(activeChild.value.id)
// Load templates for start dialog
const res = await api.get('/api/schedules')
templates.value = res.data
// WS subscription
if (wsDisconnect) wsDisconnect()
const { disconnect } = useWebSocket(activeChild.value.id, (msg) => {
scheduleStore.applyWsEvent(msg)
})
wsDisconnect = disconnect
}
async function startSession() {
await scheduleStore.startSession(activeChild.value.id, selectedTemplate.value)
showStartDialog.value = false
await loadDashboard()
}
async function sendAction(type) {
if (!scheduleStore.session) return
await scheduleStore.sendTimerAction(scheduleStore.session.id, type)
}
function selectBlock(block) {
if (!scheduleStore.session) return
scheduleStore.sendTimerAction(scheduleStore.session.id, 'start', block.id)
}
onMounted(async () => {
await childrenStore.fetchChildren()
await loadDashboard()
})
watch(activeChild, loadDashboard)
</script>
<style scoped>
.page { min-height: 100vh; background: #0f172a; }
.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
h1 { font-size: 1.75rem; font-weight: 700; }
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1.5rem;
}
.card {
background: #1e293b;
border-radius: 1rem;
padding: 1.5rem;
}
.card-title {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
margin-bottom: 1rem;
}
.session-info {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: #94a3b8;
}
.badge-active {
background: #14532d;
color: #4ade80;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
.session-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.btn-sm {
padding: 0.4rem 0.9rem;
border: 1px solid #334155;
background: transparent;
color: #94a3b8;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
transition: all 0.2s;
}
.btn-sm:hover { background: #334155; }
.btn-sm.btn-danger { border-color: #7f1d1d; color: #fca5a5; }
.btn-sm.btn-danger:hover { background: #7f1d1d; }
.no-session { text-align: center; padding: 1.5rem 0; color: #64748b; }
.no-session p { margin-bottom: 1rem; }
.empty-state { text-align: center; padding: 4rem; color: #64748b; }
.empty-small { color: #64748b; font-size: 0.9rem; padding: 1rem 0; }
.block-list { display: flex; flex-direction: column; gap: 0.5rem; }
.tv-card { grid-column: span 1; }
.tv-desc { color: #64748b; margin-bottom: 1rem; font-size: 0.9rem; }
.btn-primary {
display: inline-block;
padding: 0.7rem 1.5rem;
background: #4f46e5;
color: #fff;
border: none;
border-radius: 0.75rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: background 0.2s;
}
.btn-primary:hover { background: #4338ca; }
.dialog-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.dialog {
background: #1e293b;
border-radius: 1rem;
padding: 2rem;
width: 380px;
max-width: 90vw;
}
.dialog h2 { margin-bottom: 1.5rem; }
.dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; color: #94a3b8; margin-bottom: 0.4rem; }
.field select {
width: 100%;
padding: 0.65rem 0.9rem;
background: #0f172a;
border: 1px solid #334155;
border-radius: 0.5rem;
color: #f1f5f9;
font-size: 0.9rem;
}
</style>

210
frontend/src/views/LogView.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div class="page">
<NavBar />
<main class="container">
<div class="page-header">
<h1>Activity Log</h1>
<button class="btn-primary" @click="showForm = !showForm">+ Log Activity</button>
</div>
<ChildSelector style="margin-bottom: 1.5rem" />
<!-- Add form -->
<div class="card" v-if="showForm">
<h3>Log an Activity</h3>
<form @submit.prevent="createLog">
<div class="field-row">
<div class="field">
<label>Child</label>
<select v-model="newLog.child_id" required>
<option v-for="c in childrenStore.children" :key="c.id" :value="c.id">{{ c.name }}</option>
</select>
</div>
<div class="field">
<label>Date</label>
<input v-model="newLog.log_date" type="date" required />
</div>
</div>
<div class="field-row">
<div class="field">
<label>Subject (optional)</label>
<select v-model="newLog.subject_id">
<option :value="null">None</option>
<option v-for="s in subjects" :key="s.id" :value="s.id">{{ s.icon }} {{ s.name }}</option>
</select>
</div>
<div class="field">
<label>Duration (minutes)</label>
<input v-model.number="newLog.duration_minutes" type="number" min="0" placeholder="e.g. 30" />
</div>
</div>
<div class="field">
<label>Notes</label>
<textarea v-model="newLog.notes" placeholder="What did they do?" rows="3"></textarea>
</div>
<div class="form-actions">
<button type="button" @click="showForm = false">Cancel</button>
<button type="submit" class="btn-primary">Save Log</button>
</div>
</form>
</div>
<!-- Filter bar -->
<div class="filter-bar">
<input v-model="filterDate" type="date" placeholder="Filter by date" />
<button v-if="filterDate" class="btn-sm" @click="filterDate = ''">Clear</button>
</div>
<!-- Logs -->
<div class="log-list">
<div v-for="log in filteredLogs" :key="log.id" class="log-row">
<div class="log-date">{{ log.log_date }}</div>
<div class="log-content">
<div class="log-subject" v-if="log.subject_id">
{{ subjectDisplay(log.subject_id) }}
</div>
<div class="log-notes" v-if="log.notes">{{ log.notes }}</div>
<div class="log-meta" v-if="log.duration_minutes">
{{ log.duration_minutes }} min
</div>
</div>
<button class="btn-sm btn-danger" @click="deleteLog(log.id)">✕</button>
</div>
<div v-if="filteredLogs.length === 0" class="empty-state">
No activity logs yet.
</div>
</div>
</main>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useChildrenStore } from '@/stores/children'
import api from '@/composables/useApi'
import NavBar from '@/components/NavBar.vue'
import ChildSelector from '@/components/ChildSelector.vue'
const childrenStore = useChildrenStore()
const logs = ref([])
const subjects = ref([])
const showForm = ref(false)
const filterDate = ref('')
const today = new Date().toISOString().split('T')[0]
const newLog = ref({ child_id: null, subject_id: null, log_date: today, notes: '', duration_minutes: null })
const filteredLogs = computed(() => {
if (!filterDate.value) return logs.value
return logs.value.filter((l) => l.log_date === filterDate.value)
})
function subjectDisplay(id) {
const s = subjects.value.find((s) => s.id === id)
return s ? `${s.icon} ${s.name}` : ''
}
async function loadLogs() {
const res = await api.get('/api/logs')
logs.value = res.data
}
async function createLog() {
await api.post('/api/logs', newLog.value)
newLog.value = { child_id: newLog.value.child_id, subject_id: null, log_date: today, notes: '', duration_minutes: null }
showForm.value = false
await loadLogs()
}
async function deleteLog(id) {
if (confirm('Delete this log entry?')) {
await api.delete(`/api/logs/${id}`)
logs.value = logs.value.filter((l) => l.id !== id)
}
}
onMounted(async () => {
await childrenStore.fetchChildren()
if (childrenStore.activeChild) newLog.value.child_id = childrenStore.activeChild.id
const [sRes] = await Promise.all([api.get('/api/subjects'), loadLogs()])
subjects.value = sRes.data
})
</script>
<style scoped>
.page { min-height: 100vh; background: #0f172a; }
.container { max-width: 800px; margin: 0 auto; padding: 2rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
h1 { font-size: 1.75rem; font-weight: 700; }
.card { background: #1e293b; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.card h3 { margin-bottom: 1.25rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; color: #94a3b8; margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
width: 100%;
padding: 0.65rem 0.9rem;
background: #0f172a;
border: 1px solid #334155;
border-radius: 0.5rem;
color: #f1f5f9;
font-size: 0.9rem;
resize: vertical;
}
.form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem; }
.filter-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.filter-bar input {
padding: 0.5rem 0.75rem;
background: #1e293b;
border: 1px solid #334155;
border-radius: 0.5rem;
color: #f1f5f9;
font-size: 0.875rem;
}
.log-list { display: flex; flex-direction: column; gap: 0.5rem; }
.log-row {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #1e293b;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
}
.log-date { font-size: 0.8rem; color: #64748b; width: 90px; flex-shrink: 0; padding-top: 0.1rem; }
.log-content { flex: 1; }
.log-subject { font-size: 0.85rem; color: #818cf8; margin-bottom: 0.2rem; }
.log-notes { font-size: 0.9rem; }
.log-meta { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }
.empty-state { text-align: center; padding: 4rem; color: #64748b; }
.btn-primary {
padding: 0.65rem 1.25rem;
background: #4f46e5;
color: #fff;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
}
.btn-primary:hover { background: #4338ca; }
.btn-sm {
padding: 0.35rem 0.75rem;
border: 1px solid #334155;
background: transparent;
color: #94a3b8;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s;
}
.btn-sm:hover { background: #334155; }
.btn-sm.btn-danger { border-color: #7f1d1d; color: #fca5a5; }
.btn-sm.btn-danger:hover { background: #7f1d1d; }
</style>

174
frontend/src/views/LoginView.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<div class="login-root">
<div class="login-card">
<div class="login-logo">🏠</div>
<h1>Homeschool</h1>
<p class="login-sub">Sign in to manage your homeschool</p>
<div class="login-tabs">
<button :class="{ active: mode === 'login' }" @click="mode = 'login'">Sign In</button>
<button :class="{ active: mode === 'register' }" @click="mode = 'register'">Register</button>
</div>
<form @submit.prevent="submit" class="login-form">
<div class="field" v-if="mode === 'register'">
<label>Full Name</label>
<input v-model="form.fullName" type="text" placeholder="Jane Smith" required />
</div>
<div class="field">
<label>Email</label>
<input v-model="form.email" type="email" placeholder="you@example.com" required />
</div>
<div class="field">
<label>Password</label>
<input v-model="form.password" type="password" placeholder="••••••••" required />
</div>
<div class="login-error" v-if="error">{{ error }}</div>
<button type="submit" class="btn-primary" :disabled="loading">
{{ loading ? 'Please wait...' : mode === 'login' ? 'Sign In' : 'Create Account' }}
</button>
</form>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const router = useRouter()
const route = useRoute()
const auth = useAuthStore()
const mode = ref('login')
const loading = ref(false)
const error = ref('')
const form = ref({ email: '', password: '', fullName: '' })
async function submit() {
error.value = ''
loading.value = true
try {
if (mode.value === 'login') {
await auth.login(form.value.email, form.value.password)
} else {
await auth.register(form.value.email, form.value.password, form.value.fullName)
}
const redirect = route.query.redirect || '/dashboard'
router.push(redirect)
} catch (e) {
error.value = e.response?.data?.detail || 'Something went wrong'
} finally {
loading.value = false
}
}
</script>
<style scoped>
.login-root {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0f172a;
padding: 1rem;
}
.login-card {
background: #1e293b;
border-radius: 1.25rem;
padding: 2.5rem;
width: 100%;
max-width: 400px;
text-align: center;
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.login-logo { font-size: 3rem; margin-bottom: 0.5rem; }
h1 { font-size: 1.75rem; font-weight: 700; color: #f1f5f9; }
.login-sub { color: #64748b; margin-top: 0.25rem; margin-bottom: 1.5rem; }
.login-tabs {
display: flex;
background: #0f172a;
border-radius: 0.75rem;
padding: 0.25rem;
margin-bottom: 1.5rem;
}
.login-tabs button {
flex: 1;
padding: 0.6rem;
border: none;
background: transparent;
color: #64748b;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
}
.login-tabs button.active {
background: #4f46e5;
color: #fff;
font-weight: 600;
}
.login-form {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: left;
}
.field label {
display: block;
font-size: 0.85rem;
color: #94a3b8;
margin-bottom: 0.4rem;
}
.field input {
width: 100%;
padding: 0.75rem 1rem;
background: #0f172a;
border: 1px solid #334155;
border-radius: 0.75rem;
color: #f1f5f9;
font-size: 1rem;
outline: none;
transition: border-color 0.2s;
}
.field input:focus {
border-color: #4f46e5;
}
.login-error {
background: #450a0a;
color: #fca5a5;
padding: 0.75rem;
border-radius: 0.5rem;
font-size: 0.875rem;
}
.btn-primary {
width: 100%;
padding: 0.85rem;
background: #4f46e5;
color: #fff;
border: none;
border-radius: 0.75rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
margin-top: 0.5rem;
}
.btn-primary:hover:not(:disabled) { background: #4338ca; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
</style>

233
frontend/src/views/ScheduleView.vue Normal file
View File

@@ -0,0 +1,233 @@
<template>
<div class="page">
<NavBar />
<main class="container">
<div class="page-header">
<h1>Schedules</h1>
<button class="btn-primary" @click="showCreateForm = !showCreateForm">+ New Template</button>
</div>
<!-- Create form -->
<div class="card" v-if="showCreateForm">
<h3>New Schedule Template</h3>
<form @submit.prevent="createTemplate">
<div class="field">
<label>Template Name</label>
<input v-model="newTemplate.name" placeholder="e.g. Monday Schedule" required />
</div>
<div class="field">
<label>Child (optional — leave blank for all children)</label>
<select v-model="newTemplate.child_id">
<option :value="null">All children</option>
<option v-for="c in childrenStore.children" :key="c.id" :value="c.id">{{ c.name }}</option>
</select>
</div>
<div class="form-actions">
<button type="button" @click="showCreateForm = false">Cancel</button>
<button type="submit" class="btn-primary">Create</button>
</div>
</form>
</div>
<!-- Template list -->
<div class="template-list">
<div v-for="template in templates" :key="template.id" class="template-card">
<div class="template-header">
<div>
<div class="template-name">{{ template.name }}</div>
<div class="template-child">
{{ template.child_id ? childName(template.child_id) : 'All children' }}
· {{ template.blocks.length }} blocks
</div>
</div>
<div class="template-actions">
<button class="btn-sm" @click="editingTemplate = editingTemplate === template.id ? null : template.id">
{{ editingTemplate === template.id ? 'Close' : 'Edit Blocks' }}
</button>
<button class="btn-sm btn-danger" @click="deleteTemplate(template.id)">Delete</button>
</div>
</div>
<!-- Block editor -->
<div v-if="editingTemplate === template.id" class="block-editor">
<div class="block-list">
<div v-for="block in template.blocks" :key="block.id" class="block-row">
<span class="block-time">{{ block.time_start }} – {{ block.time_end }}</span>
<span class="block-label">{{ block.label || subjectName(block.subject_id) || 'Unnamed' }}</span>
<button class="btn-sm btn-danger" @click="deleteBlock(template.id, block.id)">✕</button>
</div>
<div v-if="template.blocks.length === 0" class="empty-small">No blocks yet.</div>
</div>
<!-- Add block form -->
<form @submit.prevent="addBlock(template.id)" class="add-block-form">
<select v-model="newBlock.subject_id">
<option :value="null">No subject</option>
<option v-for="s in subjects" :key="s.id" :value="s.id">{{ s.icon }} {{ s.name }}</option>
</select>
<input v-model="newBlock.time_start" type="time" required />
<span>to</span>
<input v-model="newBlock.time_end" type="time" required />
<input v-model="newBlock.label" placeholder="Label (optional)" />
<button type="submit" class="btn-primary btn-sm">Add Block</button>
</form>
</div>
</div>
<div v-if="templates.length === 0 && !showCreateForm" class="empty-state">
No schedule templates yet. Create one to get started.
</div>
</div>
</main>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useChildrenStore } from '@/stores/children'
import api from '@/composables/useApi'
import NavBar from '@/components/NavBar.vue'
const childrenStore = useChildrenStore()
const templates = ref([])
const subjects = ref([])
const showCreateForm = ref(false)
const editingTemplate = ref(null)
const newTemplate = ref({ name: '', child_id: null, is_default: false })
const newBlock = ref({ subject_id: null, time_start: '', time_end: '', label: '', order_index: 0 })
function childName(id) {
return childrenStore.children.find((c) => c.id === id)?.name || 'Unknown'
}
function subjectName(id) {
return subjects.value.find((s) => s.id === id)?.name || null
}
async function loadTemplates() {
const res = await api.get('/api/schedules')
templates.value = res.data
}
async function createTemplate() {
await api.post('/api/schedules', newTemplate.value)
newTemplate.value = { name: '', child_id: null, is_default: false }
showCreateForm.value = false
await loadTemplates()
}
async function deleteTemplate(id) {
if (confirm('Delete this template and all its blocks?')) {
await api.delete(`/api/schedules/${id}`)
await loadTemplates()
}
}
async function addBlock(templateId) {
const payload = {
...newBlock.value,
order_index: templates.value.find((t) => t.id === templateId)?.blocks.length || 0,
}
await api.post(`/api/schedules/${templateId}/blocks`, payload)
newBlock.value = { subject_id: null, time_start: '', time_end: '', label: '', order_index: 0 }
await loadTemplates()
}
async function deleteBlock(templateId, blockId) {
await api.delete(`/api/schedules/${templateId}/blocks/${blockId}`)
await loadTemplates()
}
onMounted(async () => {
await childrenStore.fetchChildren()
const [sRes] = await Promise.all([api.get('/api/subjects'), loadTemplates()])
subjects.value = sRes.data
})
</script>
<style scoped>
.page { min-height: 100vh; background: #0f172a; }
.container { max-width: 900px; margin: 0 auto; padding: 2rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
h1 { font-size: 1.75rem; font-weight: 700; }
.card { background: #1e293b; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.card h3 { margin-bottom: 1.25rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; color: #94a3b8; margin-bottom: 0.4rem; }
.field input, .field select {
width: 100%;
padding: 0.65rem 0.9rem;
background: #0f172a;
border: 1px solid #334155;
border-radius: 0.5rem;
color: #f1f5f9;
font-size: 0.9rem;
}
.form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem; }
.template-list { display: flex; flex-direction: column; gap: 1rem; }
.template-card { background: #1e293b; border-radius: 1rem; padding: 1.25rem; }
.template-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.template-name { font-size: 1.05rem; font-weight: 600; }
.template-child { font-size: 0.8rem; color: #64748b; margin-top: 0.2rem; }
.template-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.block-editor { margin-top: 1.25rem; border-top: 1px solid #334155; padding-top: 1.25rem; }
.block-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.block-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; background: #0f172a; border-radius: 0.5rem; }
.block-time { font-size: 0.8rem; color: #64748b; font-variant-numeric: tabular-nums; }
.block-label { flex: 1; font-size: 0.9rem; }
.add-block-form {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
background: #0f172a;
padding: 0.75rem;
border-radius: 0.75rem;
}
.add-block-form select,
.add-block-form input {
padding: 0.4rem 0.6rem;
background: #1e293b;
border: 1px solid #334155;
border-radius: 0.4rem;
color: #f1f5f9;
font-size: 0.85rem;
}
.add-block-form span { color: #64748b; }
.empty-state { text-align: center; padding: 4rem; color: #64748b; }
.empty-small { color: #64748b; font-size: 0.85rem; padding: 0.5rem 0; }
.btn-primary {
padding: 0.65rem 1.25rem;
background: #4f46e5;
color: #fff;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
}
.btn-primary:hover { background: #4338ca; }
.btn-primary.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.btn-sm {
padding: 0.35rem 0.75rem;
border: 1px solid #334155;
background: transparent;
color: #94a3b8;
border-radius: 0.4rem;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s;
}
.btn-sm:hover { background: #334155; }
.btn-sm.btn-danger { border-color: #7f1d1d; color: #fca5a5; }
.btn-sm.btn-danger:hover { background: #7f1d1d; }
</style>

242
frontend/src/views/TVView.vue Normal file
View File

@@ -0,0 +1,242 @@
<template>
<div class="tv-root">
<!-- Header bar -->
<header class="tv-header">
<div class="tv-child-name">{{ scheduleStore.child?.name || 'Loading...' }}</div>
<div class="tv-clock">{{ clockDisplay }}</div>
<div class="tv-date">{{ dateDisplay }}</div>
</header>
<!-- No session state -->
<div v-if="!scheduleStore.session" class="tv-idle">
<div class="tv-idle-icon">🌟</div>
<div class="tv-idle-text">No active school session today</div>
</div>
<!-- Active session -->
<div v-else class="tv-main">
<!-- Current block (big display) -->
<div class="tv-current" v-if="scheduleStore.currentBlock">
<div
class="tv-subject-badge"
:style="{ background: currentSubjectColor }"
>
{{ currentSubjectIcon }} {{ currentSubjectName }}
</div>
<TimerDisplay
:block="scheduleStore.currentBlock"
:session="scheduleStore.session"
/>
<div class="tv-block-notes" v-if="scheduleStore.currentBlock.notes">
{{ scheduleStore.currentBlock.notes }}
</div>
</div>
<div class="tv-sidebar">
<!-- Progress -->
<div class="tv-progress-section">
<div class="tv-progress-label">
Day Progress — {{ scheduleStore.progressPercent }}%
</div>
<ProgressBar :percent="scheduleStore.progressPercent" />
<div class="tv-block-count">
{{ scheduleStore.completedBlockIds.length }} of {{ scheduleStore.blocks.length }} blocks
</div>
</div>
<!-- Schedule list -->
<div class="tv-schedule-list">
<ScheduleBlock
v-for="block in scheduleStore.blocks"
:key="block.id"
:block="block"
:is-current="block.id === scheduleStore.session?.current_block_id"
:is-completed="scheduleStore.completedBlockIds.includes(block.id)"
compact
/>
</div>
</div>
</div>
<!-- WS connection indicator -->
<div class="tv-ws-status" :class="{ connected: wsConnected }">
{{ wsConnected ? '● Live' : '○ Reconnecting...' }}
</div>
</div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useScheduleStore } from '@/stores/schedule'
import { useWebSocket } from '@/composables/useWebSocket'
import TimerDisplay from '@/components/TimerDisplay.vue'
import ProgressBar from '@/components/ProgressBar.vue'
import ScheduleBlock from '@/components/ScheduleBlock.vue'
const route = useRoute()
const scheduleStore = useScheduleStore()
const childId = parseInt(route.params.childId)
// Clock
const now = ref(new Date())
setInterval(() => { now.value = new Date() }, 1000)
const clockDisplay = computed(() =>
now.value.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
)
const dateDisplay = computed(() =>
now.value.toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' })
)
// Subject display helpers
const currentSubjectColor = computed(() => {
const block = scheduleStore.currentBlock
return block?.subject?.color || '#4F46E5'
})
const currentSubjectIcon = computed(() => scheduleStore.currentBlock?.subject?.icon || '📚')
const currentSubjectName = computed(() =>
scheduleStore.currentBlock?.label || scheduleStore.currentBlock?.subject?.name || 'Current Block'
)
// WebSocket
const wsConnected = ref(false)
const { connected } = useWebSocket(childId, (msg) => {
scheduleStore.applyWsEvent(msg)
})
wsConnected.value = connected.value
// Initial data load
onMounted(async () => {
await scheduleStore.fetchDashboard(childId)
})
</script>
<style scoped>
.tv-root {
min-height: 100vh;
background: #0f172a;
color: #f1f5f9;
display: flex;
flex-direction: column;
padding: 2rem;
gap: 2rem;
}
.tv-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #1e293b;
padding-bottom: 1rem;
}
.tv-child-name {
font-size: 2.5rem;
font-weight: 700;
color: #818cf8;
}
.tv-clock {
font-size: 3rem;
font-weight: 300;
font-variant-numeric: tabular-nums;
color: #f8fafc;
}
.tv-date {
font-size: 1.25rem;
color: #94a3b8;
text-align: right;
}
.tv-idle {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.tv-idle-icon { font-size: 5rem; }
.tv-idle-text { font-size: 2rem; color: #64748b; }
.tv-main {
flex: 1;
display: grid;
grid-template-columns: 1fr 380px;
gap: 2rem;
}
.tv-current {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
justify-content: center;
}
.tv-subject-badge {
font-size: 1.75rem;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 999px;
color: #fff;
}
.tv-block-notes {
font-size: 1.25rem;
color: #94a3b8;
text-align: center;
max-width: 600px;
}
.tv-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.tv-progress-section {
background: #1e293b;
border-radius: 1rem;
padding: 1.25rem;
}
.tv-progress-label {
font-size: 0.9rem;
color: #64748b;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tv-block-count {
font-size: 0.85rem;
color: #475569;
margin-top: 0.5rem;
text-align: right;
}
.tv-schedule-list {
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 60vh;
}
.tv-ws-status {
position: fixed;
bottom: 1rem;
right: 1rem;
font-size: 0.75rem;
color: #ef4444;
opacity: 0.7;
}
.tv-ws-status.connected {
color: #22c55e;
}
</style>