derekc
c9441a9c9a
Subject options: - New subject_options table (auto-created on startup) - SubjectOut now includes options list; all eager-loading chains updated - Admin: Options panel per subject with add, inline edit, and delete - WS broadcast and dashboard API include options in block subject data TV dashboard: - Three equal columns: Timer | Activities | Schedule - Activities column shows current subject's options in large readable text - Activities area has subject-colored border and tinted background - Subject name and label displayed correctly using embedded subject data Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
124 lines
2.9 KiB
Vue
124 lines
2.9 KiB
Vue
<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">
|
||
<span>{{ subjectName || block.label || 'Block' }}</span>
|
||
<span v-if="subjectName && block.label" class="block-label-suffix"> - {{ block.label }}</span>
|
||
</div>
|
||
<div class="block-time">
|
||
{{ block.time_start }} – {{ block.time_end }}
|
||
<span class="block-duration" :class="{ 'block-duration-custom': block.duration_minutes != null }">
|
||
· {{ durationLabel }}
|
||
</span>
|
||
</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)
|
||
|
||
const durationLabel = computed(() => {
|
||
if (props.block.duration_minutes != null) return `${props.block.duration_minutes} min`
|
||
const start = props.block.time_start
|
||
const end = props.block.time_end
|
||
if (start && end) {
|
||
const [sh, sm] = start.split(':').map(Number)
|
||
const [eh, em] = end.split(':').map(Number)
|
||
const mins = (eh * 60 + em) - (sh * 60 + sm)
|
||
if (mins > 0) return `${mins} min`
|
||
}
|
||
return ''
|
||
})
|
||
</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-label-suffix { font-weight: 400; color: #94a3b8; }
|
||
.block-duration { color: #475569; }
|
||
.block-duration-custom { color: #818cf8; }
|
||
|
||
.block-status {
|
||
font-size: 0.85rem;
|
||
color: #64748b;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.block-status.active { color: #818cf8; }
|
||
</style>
|