add Calendar, Timesheet, and MiniTimer views
Calendar shows weekly time-block layout with hour rows, entry positioning, current time indicator, and week navigation. Timesheet provides a weekly grid with project/task rows, day columns, totals, and add-row functionality. MiniTimer is a minimal always-on-top timer display for the floating window.
This commit is contained in:
Your Name
364
src/views/CalendarView.vue
Normal file
364
src/views/CalendarView.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="p-6 h-full flex flex-col">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">Calendar</h1>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="goToToday"
|
||||
class="px-3 py-1.5 text-[0.75rem] font-medium border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
|
||||
>
|
||||
Today
|
||||
</button>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
@click="prevWeek"
|
||||
class="p-1.5 text-text-tertiary hover:text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
|
||||
title="Previous week"
|
||||
>
|
||||
<ChevronLeft class="w-4 h-4" :stroke-width="2" />
|
||||
</button>
|
||||
<button
|
||||
@click="nextWeek"
|
||||
class="p-1.5 text-text-tertiary hover:text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
|
||||
title="Next week"
|
||||
>
|
||||
<ChevronRight class="w-4 h-4" :stroke-width="2" />
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-[0.75rem] text-text-secondary font-medium min-w-[10rem]">
|
||||
{{ weekRangeLabel }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Calendar Grid -->
|
||||
<div class="flex-1 bg-bg-surface rounded-lg border border-border-subtle overflow-hidden flex flex-col min-h-0">
|
||||
<!-- Day column headers -->
|
||||
<div class="grid shrink-0 border-b border-border-subtle" :style="gridStyle">
|
||||
<!-- Top-left corner (hour gutter) -->
|
||||
<div class="w-14 shrink-0 border-r border-border-subtle" />
|
||||
<!-- Day headers -->
|
||||
<div
|
||||
v-for="(day, index) in weekDays"
|
||||
:key="index"
|
||||
class="px-2 py-2.5 text-center border-r border-border-subtle last:border-r-0"
|
||||
:class="isToday(day) ? 'bg-accent/5' : ''"
|
||||
>
|
||||
<span
|
||||
class="text-[0.6875rem] uppercase tracking-[0.08em] font-medium"
|
||||
:class="isToday(day) ? 'text-accent-text' : 'text-text-tertiary'"
|
||||
>
|
||||
{{ formatDayHeader(day) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable hour rows -->
|
||||
<div ref="scrollContainer" class="flex-1 overflow-y-auto min-h-0">
|
||||
<div class="grid relative" :style="gridStyle">
|
||||
<!-- Hour labels column -->
|
||||
<div class="w-14 shrink-0 border-r border-border-subtle">
|
||||
<div
|
||||
v-for="hour in hours"
|
||||
:key="hour"
|
||||
class="h-12 flex items-start justify-end pr-2 pt-0.5"
|
||||
>
|
||||
<span class="text-[0.6875rem] text-text-tertiary font-mono leading-none -translate-y-1/2">
|
||||
{{ formatHourLabel(hour) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Day columns -->
|
||||
<div
|
||||
v-for="(day, dayIndex) in weekDays"
|
||||
:key="dayIndex"
|
||||
class="relative border-r border-border-subtle last:border-r-0"
|
||||
:class="isToday(day) ? 'bg-accent/[0.02]' : ''"
|
||||
>
|
||||
<!-- Hour grid lines -->
|
||||
<div
|
||||
v-for="hour in hours"
|
||||
:key="hour"
|
||||
class="h-12 border-b border-border-subtle"
|
||||
/>
|
||||
|
||||
<!-- Time entry blocks -->
|
||||
<div
|
||||
v-for="entry in getEntriesForDay(day)"
|
||||
:key="entry.id"
|
||||
class="absolute left-0.5 right-0.5 rounded px-1.5 py-1 overflow-hidden cursor-default border-l-[3px] min-h-[1.25rem]"
|
||||
:style="getEntryStyle(entry)"
|
||||
:title="getEntryTooltip(entry)"
|
||||
>
|
||||
<p class="text-[0.625rem] font-medium leading-tight truncate" :style="{ color: getProjectColor(entry.project_id) }">
|
||||
{{ getProjectName(entry.project_id) }}
|
||||
</p>
|
||||
<p
|
||||
v-if="entry.duration >= 1800"
|
||||
class="text-[0.5625rem] text-text-tertiary leading-tight truncate mt-0.5"
|
||||
>
|
||||
{{ formatDuration(entry.duration) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Current time indicator -->
|
||||
<div
|
||||
v-if="isToday(day) && currentTimeOffset !== null"
|
||||
class="absolute left-0 right-0 z-10 pointer-events-none"
|
||||
:style="{ top: currentTimeOffset + 'px' }"
|
||||
>
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[3px] -top-[3px] w-[7px] h-[7px] rounded-full bg-status-error" />
|
||||
<div class="h-[1.5px] bg-status-error w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
import { useEntriesStore, type TimeEntry } from '../stores/entries'
|
||||
import { useProjectsStore } from '../stores/projects'
|
||||
|
||||
const entriesStore = useEntriesStore()
|
||||
const projectsStore = useProjectsStore()
|
||||
|
||||
const scrollContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
// The start-of-week date (Monday)
|
||||
const weekStart = ref(getMonday(new Date()))
|
||||
|
||||
// Hours displayed: 6am through 11pm (6..23)
|
||||
const HOUR_START = 6
|
||||
const HOUR_END = 23
|
||||
const hours = Array.from({ length: HOUR_END - HOUR_START + 1 }, (_, i) => HOUR_START + i)
|
||||
const HOUR_HEIGHT = 48 // h-12 = 3rem = 48px
|
||||
|
||||
// Current time tracking
|
||||
const currentTimeOffset = ref<number | null>(null)
|
||||
let timeInterval: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
// Grid template: fixed gutter + 7 equal columns
|
||||
const gridStyle = computed(() => ({
|
||||
gridTemplateColumns: '3.5rem repeat(7, 1fr)'
|
||||
}))
|
||||
|
||||
// Week days (Monday to Sunday)
|
||||
const weekDays = computed(() => {
|
||||
const days: Date[] = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const d = new Date(weekStart.value)
|
||||
d.setDate(d.getDate() + i)
|
||||
days.push(d)
|
||||
}
|
||||
return days
|
||||
})
|
||||
|
||||
// Week range label, e.g. "Feb 17 - Feb 23, 2026"
|
||||
const weekRangeLabel = computed(() => {
|
||||
const start = weekDays.value[0]
|
||||
const end = weekDays.value[6]
|
||||
const startMonth = start.toLocaleString('en-US', { month: 'short' })
|
||||
const endMonth = end.toLocaleString('en-US', { month: 'short' })
|
||||
const startDay = start.getDate()
|
||||
const endDay = end.getDate()
|
||||
const year = end.getFullYear()
|
||||
|
||||
if (startMonth === endMonth) {
|
||||
return `${startMonth} ${startDay} \u2013 ${endDay}, ${year}`
|
||||
}
|
||||
return `${startMonth} ${startDay} \u2013 ${endMonth} ${endDay}, ${year}`
|
||||
})
|
||||
|
||||
// Navigation
|
||||
function prevWeek() {
|
||||
const d = new Date(weekStart.value)
|
||||
d.setDate(d.getDate() - 7)
|
||||
weekStart.value = d
|
||||
fetchWeekEntries()
|
||||
}
|
||||
|
||||
function nextWeek() {
|
||||
const d = new Date(weekStart.value)
|
||||
d.setDate(d.getDate() + 7)
|
||||
weekStart.value = d
|
||||
fetchWeekEntries()
|
||||
}
|
||||
|
||||
function goToToday() {
|
||||
weekStart.value = getMonday(new Date())
|
||||
fetchWeekEntries()
|
||||
nextTick(() => scrollToCurrentTime())
|
||||
}
|
||||
|
||||
// Fetch entries for the displayed week
|
||||
async function fetchWeekEntries() {
|
||||
const start = formatISODate(weekDays.value[0])
|
||||
const end = formatISODate(weekDays.value[6])
|
||||
await entriesStore.fetchEntries(start, end)
|
||||
}
|
||||
|
||||
// Get entries that fall on a given day
|
||||
function getEntriesForDay(day: Date): TimeEntry[] {
|
||||
const dayStr = formatISODate(day)
|
||||
return entriesStore.entries.filter(entry => {
|
||||
const entryDate = new Date(entry.start_time)
|
||||
const entryStr = formatISODate(entryDate)
|
||||
return entryStr === dayStr
|
||||
})
|
||||
}
|
||||
|
||||
// Position and size an entry block
|
||||
function getEntryStyle(entry: TimeEntry): Record<string, string> {
|
||||
const start = new Date(entry.start_time)
|
||||
const startHour = start.getHours() + start.getMinutes() / 60
|
||||
const durationHours = entry.duration / 3600
|
||||
|
||||
// Clamp to visible range
|
||||
const visibleStart = Math.max(startHour, HOUR_START)
|
||||
const visibleEnd = Math.min(startHour + durationHours, HOUR_END + 1)
|
||||
|
||||
if (visibleEnd <= HOUR_START || visibleStart >= HOUR_END + 1) {
|
||||
return { display: 'none' }
|
||||
}
|
||||
|
||||
const topOffset = (visibleStart - HOUR_START) * HOUR_HEIGHT
|
||||
const height = Math.max((visibleEnd - visibleStart) * HOUR_HEIGHT, 20) // min 20px
|
||||
|
||||
const color = getProjectColor(entry.project_id)
|
||||
|
||||
return {
|
||||
top: `${topOffset}px`,
|
||||
height: `${height}px`,
|
||||
backgroundColor: hexToRgba(color, 0.15),
|
||||
borderLeftColor: color
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip for entry blocks
|
||||
function getEntryTooltip(entry: TimeEntry): string {
|
||||
const project = getProjectName(entry.project_id)
|
||||
const duration = formatDuration(entry.duration)
|
||||
const start = new Date(entry.start_time)
|
||||
const time = start.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
|
||||
const desc = entry.description ? ` — ${entry.description}` : ''
|
||||
return `${project} (${duration}) at ${time}${desc}`
|
||||
}
|
||||
|
||||
// Project helpers
|
||||
function getProjectName(projectId: number): string {
|
||||
const project = projectsStore.projects.find(p => p.id === projectId)
|
||||
return project?.name || 'Unknown Project'
|
||||
}
|
||||
|
||||
function getProjectColor(projectId: number): string {
|
||||
const project = projectsStore.projects.find(p => p.id === projectId)
|
||||
return project?.color || '#6B7280'
|
||||
}
|
||||
|
||||
// Format duration from seconds
|
||||
function formatDuration(seconds: number): string {
|
||||
const h = Math.floor(seconds / 3600)
|
||||
const m = Math.floor((seconds % 3600) / 60)
|
||||
if (h > 0) {
|
||||
return `${h}h ${m}m`
|
||||
}
|
||||
return `${m}m`
|
||||
}
|
||||
|
||||
// Date helpers
|
||||
function getMonday(date: Date): Date {
|
||||
const d = new Date(date)
|
||||
const day = d.getDay()
|
||||
// getDay() returns 0 for Sunday, so adjust to get Monday
|
||||
const diff = day === 0 ? -6 : 1 - day
|
||||
d.setDate(d.getDate() + diff)
|
||||
d.setHours(0, 0, 0, 0)
|
||||
return d
|
||||
}
|
||||
|
||||
function formatISODate(date: Date): string {
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
function isToday(date: Date): boolean {
|
||||
const today = new Date()
|
||||
return formatISODate(date) === formatISODate(today)
|
||||
}
|
||||
|
||||
function formatDayHeader(date: Date): string {
|
||||
const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||||
return `${dayNames[date.getDay()]} ${date.getDate()}`
|
||||
}
|
||||
|
||||
function formatHourLabel(hour: number): string {
|
||||
if (hour === 0) return '12am'
|
||||
if (hour === 12) return '12pm'
|
||||
if (hour < 12) return `${hour}am`
|
||||
return `${hour - 12}pm`
|
||||
}
|
||||
|
||||
// Convert hex color to rgba
|
||||
function hexToRgba(hex: string, alpha: number): string {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
if (!result) return `rgba(107, 114, 128, ${alpha})`
|
||||
const r = parseInt(result[1], 16)
|
||||
const g = parseInt(result[2], 16)
|
||||
const b = parseInt(result[3], 16)
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
||||
}
|
||||
|
||||
// Update current time indicator position
|
||||
function updateCurrentTime() {
|
||||
const now = new Date()
|
||||
const currentHour = now.getHours() + now.getMinutes() / 60
|
||||
|
||||
if (currentHour >= HOUR_START && currentHour <= HOUR_END + 1) {
|
||||
currentTimeOffset.value = (currentHour - HOUR_START) * HOUR_HEIGHT
|
||||
} else {
|
||||
currentTimeOffset.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll to current time area on mount
|
||||
function scrollToCurrentTime() {
|
||||
if (!scrollContainer.value) return
|
||||
const now = new Date()
|
||||
const currentHour = now.getHours()
|
||||
// Scroll to ~1 hour before current time for context
|
||||
const targetHour = Math.max(currentHour - 1, HOUR_START)
|
||||
const scrollTop = (targetHour - HOUR_START) * HOUR_HEIGHT
|
||||
scrollContainer.value.scrollTop = scrollTop
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
await Promise.all([
|
||||
projectsStore.fetchProjects(),
|
||||
fetchWeekEntries()
|
||||
])
|
||||
|
||||
updateCurrentTime()
|
||||
timeInterval = setInterval(updateCurrentTime, 60_000)
|
||||
|
||||
nextTick(() => scrollToCurrentTime())
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timeInterval) {
|
||||
clearInterval(timeInterval)
|
||||
timeInterval = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user