Display all block times in AM/PM format instead of 24-hour

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 17:25:10 -08:00
parent 80109976bf
commit fc9413924d
2 changed files with 18 additions and 2 deletions

View File

@@ -14,7 +14,7 @@
<span v-if="subjectName && block.label" class="block-label-suffix"> - {{ block.label }}</span> <span v-if="subjectName && block.label" class="block-label-suffix"> - {{ block.label }}</span>
</div> </div>
<div class="block-time"> <div class="block-time">
{{ block.time_start }} {{ block.time_end }} {{ formatTime(block.time_start) }} {{ formatTime(block.time_end) }}
<span class="block-duration" :class="{ 'block-duration-custom': block.duration_minutes != null }"> <span class="block-duration" :class="{ 'block-duration-custom': block.duration_minutes != null }">
· {{ durationLabel }} · {{ durationLabel }}
</span> </span>
@@ -35,6 +35,14 @@ const props = defineProps({
compact: { type: Boolean, default: false }, compact: { type: Boolean, default: false },
}) })
function formatTime(str) {
if (!str) return ''
const [h, m] = str.split(':').map(Number)
const period = h >= 12 ? 'PM' : 'AM'
const hour = h % 12 || 12
return `${hour}:${String(m).padStart(2, '0')} ${period}`
}
const subjectColor = computed(() => props.block.subject?.color || '#475569') const subjectColor = computed(() => props.block.subject?.color || '#475569')
const subjectName = computed(() => props.block.subject?.name || null) const subjectName = computed(() => props.block.subject?.name || null)

View File

@@ -212,7 +212,7 @@
</form> </form>
<!-- Display mode --> <!-- Display mode -->
<div v-else class="block-row"> <div v-else class="block-row">
<span class="block-time">{{ block.time_start }} {{ block.time_end }}</span> <span class="block-time">{{ formatTime(block.time_start) }} {{ formatTime(block.time_end) }}</span>
<span class="block-label">{{ block.label || subjectName(block.subject_id) || 'Unnamed' }}</span> <span class="block-label">{{ block.label || subjectName(block.subject_id) || 'Unnamed' }}</span>
<span class="block-duration" :class="{ 'block-duration-custom': block.duration_minutes != null }"> <span class="block-duration" :class="{ 'block-duration-custom': block.duration_minutes != null }">
{{ blockDurationLabel(block) }} {{ blockDurationLabel(block) }}
@@ -384,6 +384,14 @@ function subjectName(id) {
return subjects.value.find((s) => s.id === id)?.name || null return subjects.value.find((s) => s.id === id)?.name || null
} }
function formatTime(str) {
if (!str) return ''
const [h, m] = str.split(':').map(Number)
const period = h >= 12 ? 'PM' : 'AM'
const hour = h % 12 || 12
return `${hour}:${String(m).padStart(2, '0')} ${period}`
}
function sortedBlocks(blocks) { function sortedBlocks(blocks) {
const toMin = (t) => { if (!t) return 0; const [h, m] = t.split(':').map(Number); return h * 60 + m } const toMin = (t) => { if (!t) return 0; const [h, m] = t.split(':').map(Number); return h * 60 + m }
return (blocks || []).slice().sort((a, b) => toMin(a.time_start) - toMin(b.time_start)) return (blocks || []).slice().sort((a, b) => toMin(a.time_start) - toMin(b.time_start))