234 lines
8.6 KiB
TypeScript
234 lines
8.6 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import { api } from '../lib/api'
|
|
import { Loader2, Play, Square, ExternalLink } from 'lucide-react'
|
|
|
|
export const ActiveTimer = () => {
|
|
const queryClient = useQueryClient()
|
|
const [description, setDescription] = useState('')
|
|
const [isInputVisible, setIsInputVisible] = useState(false)
|
|
const [elapsed, setElapsed] = useState(0)
|
|
|
|
const { data: runningEntry, isLoading } = useQuery({
|
|
queryKey: ['running-entry'],
|
|
queryFn: () => api.getRunningTimeEntry(),
|
|
refetchInterval: 30000,
|
|
})
|
|
|
|
const startMutation = useMutation({
|
|
mutationFn: (desc: string) => api.createTimeEntry({ description, startTime: new Date().toISOString() }),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['running-entry'] })
|
|
setIsInputVisible(false)
|
|
setDescription('')
|
|
},
|
|
})
|
|
|
|
const stopMutation = useMutation({
|
|
mutationFn: (id: string) => api.stopTimeEntry(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['running-entry'] })
|
|
},
|
|
})
|
|
|
|
useEffect(() => {
|
|
let interval: NodeJS.Timeout
|
|
if (runningEntry?.startTime) {
|
|
const update = () => {
|
|
const start = new Date(runningEntry.startTime).getTime()
|
|
const now = Date.now()
|
|
setElapsed(Math.floor((now - start) / 1000))
|
|
}
|
|
update()
|
|
interval = setInterval(update, 1000)
|
|
} else {
|
|
setElapsed(0)
|
|
}
|
|
return () => clearInterval(interval)
|
|
}, [runningEntry])
|
|
|
|
const formatTime = (seconds: number) => {
|
|
const h = Math.floor(seconds / 3600)
|
|
const m = Math.floor((seconds % 3600) / 60)
|
|
const s = seconds % 60
|
|
return h > 0
|
|
? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
|
|
: `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
const handlePopout = () => {
|
|
window.open('/tracker-popout', 'tracker', 'width=320,height=220')
|
|
}
|
|
|
|
if (isLoading) return <div className="h-10 w-10 flex items-center justify-center"><Loader2 className="w-4 h-4 animate-spin" /></div>
|
|
|
|
if (runningEntry) {
|
|
return (
|
|
<div className="h-10 inline-flex items-center gap-3 px-3 py-1 bg-slate-100 dark:bg-slate-800 rounded-full border border-slate-200 dark:border-slate-700 text-sm font-medium">
|
|
<span className="text-slate-500 dark:text-slate-400 truncate max-w-[120px]">
|
|
{runningEntry.description || 'No description'}
|
|
</span>
|
|
<span className="tabular-nums font-mono text-blue-600 dark:text-blue-400">
|
|
{formatTime(elapsed)}
|
|
</span>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={handlePopout}
|
|
title="Pop out timer"
|
|
className="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-500 dark:text-slate-400 rounded-full transition-colors"
|
|
>
|
|
<ExternalLink className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => stopMutation.mutate(runningEntry.id)}
|
|
disabled={stopMutation.isPending}
|
|
className="p-1 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full transition-colors"
|
|
>
|
|
<Square className="w-4 h-4 fill-current" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="h-10 inline-flex items-center gap-2">
|
|
{isInputVisible && (
|
|
<input
|
|
autoFocus
|
|
className="h-8 px-2 text-sm border rounded-md bg-white dark:bg-slate-900 dark:border-slate-700 outline-none focus:ring-1 ring-blue-500 w-40"
|
|
placeholder="What are you working on?"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && startMutation.mutate(description)}
|
|
/>
|
|
)}
|
|
<button
|
|
onClick={() => isInputVisible ? startMutation.mutate(description) : setIsInputVisible(true)}
|
|
disabled={startMutation.isPending}
|
|
className="h-8 px-3 flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors"
|
|
>
|
|
{startMutation.isPending ? <Loader2 className="w-3 h-3 animate-spin" /> : <Play className="w-3 h-3 fill-current" />}
|
|
<span>{isInputVisible ? 'Start' : 'Start Timer'}</span>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const PopoutTrackerView = () => {
|
|
const queryClient = useQueryClient()
|
|
const [description, setDescription] = useState('')
|
|
const [isInputVisible, setIsInputVisible] = useState(false)
|
|
const [elapsed, setElapsed] = useState(0)
|
|
|
|
const { data: runningEntry, isLoading } = useQuery({
|
|
queryKey: ['running-entry'],
|
|
queryFn: () => api.getRunningTimeEntry(),
|
|
refetchInterval: 10000,
|
|
})
|
|
|
|
const startMutation = useMutation({
|
|
mutationFn: (desc: string) => api.createTimeEntry({ description, startTime: new Date().toISOString() }),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['running-entry'] })
|
|
setIsInputVisible(false)
|
|
setDescription('')
|
|
},
|
|
})
|
|
|
|
const stopMutation = useMutation({
|
|
mutationFn: (id: string) => api.stopTimeEntry(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['running-entry'] })
|
|
},
|
|
})
|
|
|
|
useEffect(() => {
|
|
let interval: NodeJS.Timeout
|
|
if (runningEntry?.startTime) {
|
|
const update = () => {
|
|
const start = new Date(runningEntry.startTime).getTime()
|
|
const now = Date.now()
|
|
setElapsed(Math.floor((now - start) / 1000))
|
|
}
|
|
update()
|
|
interval = setInterval(update, 1000)
|
|
} else {
|
|
setElapsed(0)
|
|
}
|
|
return () => clearInterval(interval)
|
|
}, [runningEntry])
|
|
|
|
const formatTime = (seconds: number) => {
|
|
const h = Math.floor(seconds / 3600)
|
|
const m = Math.floor((seconds % 3600) / 60)
|
|
const s = seconds % 60
|
|
return h > 0
|
|
? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
|
|
: `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
if (isLoading) return <div className="flex items-center justify-center h-full"><Loader2 className="w-6 h-6 animate-spin" /></div>
|
|
|
|
return (
|
|
<div className="p-4 flex flex-col items-center justify-center h-full gap-4 text-center">
|
|
{runningEntry ? (
|
|
<>
|
|
<div className="text-slate-500 dark:text-slate-400 text-sm truncate w-full max-w-[200px]">
|
|
{runningEntry.description || 'No description'}
|
|
</div>
|
|
<div className="text-4xl font-mono font-bold tabular-nums text-blue-600 dark:text-blue-400">
|
|
{formatTime(elapsed)}
|
|
</div>
|
|
<button
|
|
onClick={() => stopMutation.mutate(runningEntry.id)}
|
|
disabled={stopMutation.isPending}
|
|
className="flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors font-medium"
|
|
>
|
|
<Square className="w-4 h-4 fill-current" />
|
|
Stop Timer
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="text-slate-500 dark:text-slate-400 text-sm">No active timer</div>
|
|
{isInputVisible ? (
|
|
<div className="flex flex-col gap-2 w-full max-w-[200px]">
|
|
<input
|
|
autoFocus
|
|
className="px-2 py-1 text-sm border rounded-md bg-white dark:bg-slate-900 dark:border-slate-700 outline-none focus:ring-1 ring-blue-500"
|
|
placeholder="What are you working on?"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && startMutation.mutate(description)}
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => startMutation.mutate(description)}
|
|
disabled={startMutation.isPending}
|
|
className="flex-1 px-3 py-1 bg-blue-600 text-white text-xs rounded-md"
|
|
>
|
|
Start
|
|
</button>
|
|
<button
|
|
onClick={() => setIsInputVisible(false)}
|
|
className="flex-1 px-3 py-1 bg-slate-200 dark:bg-slate-700 text-xs rounded-md"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={() => setIsInputVisible(true)}
|
|
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors font-medium flex items-center gap-2"
|
|
>
|
|
<Play className="w-4 h-4 fill-current" />
|
|
Start Timer
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
} |