feat: add TimerEditModal component for managing timer sessions with real-time updates and editing capabilities
This commit is contained in:
Mo Tarbin
870
src/views/Modals/Inputs/TimerEditModal.jsx
Normal file
870
src/views/Modals/Inputs/TimerEditModal.jsx
Normal file
@@ -0,0 +1,870 @@
|
|||||||
|
import { Add, Delete, Edit } from '@mui/icons-material'
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Chip,
|
||||||
|
FormControl,
|
||||||
|
FormHelperText,
|
||||||
|
Input,
|
||||||
|
Typography,
|
||||||
|
} from '@mui/joy'
|
||||||
|
import moment from 'moment'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import FadeModal from '../../../components/common/FadeModal'
|
||||||
|
import { useNotification } from '../../../service/NotificationProvider'
|
||||||
|
import {
|
||||||
|
DeleteTimeSession,
|
||||||
|
GetChoreTimer,
|
||||||
|
UpdateTimeSession,
|
||||||
|
} from '../../../utils/Fetcher'
|
||||||
|
import ConfirmationModal from './ConfirmationModal'
|
||||||
|
|
||||||
|
const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
|
||||||
|
const [timerData, setTimerData] = useState(null)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [editingSessions, setEditingSessions] = useState({})
|
||||||
|
const [confirmDeleteConfig, setConfirmDeleteConfig] = useState({})
|
||||||
|
const [currentTime, setCurrentTime] = useState(new Date())
|
||||||
|
const { showError, showSuccess } = useNotification()
|
||||||
|
|
||||||
|
// Fetch timer data when modal opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && choreId) {
|
||||||
|
fetchTimerData()
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [isOpen, choreId])
|
||||||
|
|
||||||
|
// Real-time update interval for active timers
|
||||||
|
useEffect(() => {
|
||||||
|
let interval
|
||||||
|
if (isOpen && timerData && !timerData.endTime) {
|
||||||
|
// Update every second if timer is active
|
||||||
|
interval = setInterval(() => {
|
||||||
|
setCurrentTime(new Date())
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
if (interval) clearInterval(interval)
|
||||||
|
}
|
||||||
|
}, [isOpen, timerData])
|
||||||
|
|
||||||
|
const fetchTimerData = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const response = await GetChoreTimer(choreId)
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
setTimerData(data.res) // data.res is the timer session object
|
||||||
|
} else {
|
||||||
|
showError({
|
||||||
|
title: 'Failed to fetch timer data',
|
||||||
|
message: 'Please try again.',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showError({
|
||||||
|
title: 'Error fetching timer data',
|
||||||
|
message: error.message,
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = seconds => {
|
||||||
|
const hours = Math.floor(seconds / 3600)
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
const secs = seconds % 60
|
||||||
|
return `${hours.toString().padStart(2, '0')}:${minutes
|
||||||
|
.toString()
|
||||||
|
.padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDuration = seconds => {
|
||||||
|
if (seconds < 60) return `${seconds}s`
|
||||||
|
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`
|
||||||
|
const hours = Math.floor(seconds / 3600)
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
return `${hours}h ${minutes}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
const startEditingSession = () => {
|
||||||
|
if (timerData) {
|
||||||
|
setEditingSessions(prev => ({
|
||||||
|
...prev,
|
||||||
|
[timerData.id]: {
|
||||||
|
startTime: moment(timerData.startTime).format('YYYY-MM-DDTHH:mm:ss'),
|
||||||
|
endTime: timerData.endTime
|
||||||
|
? moment(timerData.endTime).format('YYYY-MM-DDTHH:mm:ss')
|
||||||
|
: '',
|
||||||
|
duration: timerData.duration,
|
||||||
|
formattedDuration: formatTime(timerData.duration),
|
||||||
|
pauseLog: timerData.pauseLog || [],
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const addPauseLogEntry = sessionId => {
|
||||||
|
setEditingSessions(prev => ({
|
||||||
|
...prev,
|
||||||
|
[sessionId]: {
|
||||||
|
...prev[sessionId],
|
||||||
|
pauseLog: [
|
||||||
|
...prev[sessionId].pauseLog,
|
||||||
|
{
|
||||||
|
start: new Date().toISOString(),
|
||||||
|
end: null,
|
||||||
|
duration: 0,
|
||||||
|
updatedBy: 0, // This should be current user ID
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatePauseLogEntry = (sessionId, pauseIndex, field, value) => {
|
||||||
|
setEditingSessions(prev => {
|
||||||
|
const updatedPauseLog = prev[sessionId].pauseLog.map((pause, index) => {
|
||||||
|
if (index === pauseIndex) {
|
||||||
|
const updatedPause = { ...pause, [field]: value }
|
||||||
|
|
||||||
|
// Auto-calculate duration if both start and end are present
|
||||||
|
if (updatedPause.start && updatedPause.end) {
|
||||||
|
const startTime = new Date(updatedPause.start)
|
||||||
|
const endTime = new Date(updatedPause.end)
|
||||||
|
updatedPause.duration = Math.floor((endTime - startTime) / 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
return updatedPause
|
||||||
|
}
|
||||||
|
return pause
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
[sessionId]: {
|
||||||
|
...prev[sessionId],
|
||||||
|
pauseLog: updatedPauseLog,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const deletePauseLogEntry = (sessionId, pauseIndex) => {
|
||||||
|
setEditingSessions(prev => ({
|
||||||
|
...prev,
|
||||||
|
[sessionId]: {
|
||||||
|
...prev[sessionId],
|
||||||
|
pauseLog: prev[sessionId].pauseLog.filter(
|
||||||
|
(_, index) => index !== pauseIndex,
|
||||||
|
),
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelEditingSession = sessionId => {
|
||||||
|
setEditingSessions(prev => {
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const { [sessionId]: removed, ...rest } = prev
|
||||||
|
return rest
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveSession = async sessionId => {
|
||||||
|
const editingData = editingSessions[sessionId]
|
||||||
|
if (!editingData) return
|
||||||
|
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
// Use the auto-calculated duration from the editing session
|
||||||
|
const updateData = {
|
||||||
|
startTime: new Date(editingData.startTime).toISOString(),
|
||||||
|
endTime: editingData.endTime
|
||||||
|
? new Date(editingData.endTime).toISOString()
|
||||||
|
: null,
|
||||||
|
duration: editingData.duration,
|
||||||
|
pauseLog: editingData.pauseLog,
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await UpdateTimeSession(choreId, sessionId, updateData)
|
||||||
|
if (response.ok) {
|
||||||
|
showSuccess({
|
||||||
|
title: 'Session updated',
|
||||||
|
message: 'Timer session has been updated successfully.',
|
||||||
|
})
|
||||||
|
await fetchTimerData()
|
||||||
|
cancelEditingSession(sessionId)
|
||||||
|
onTimerUpdate?.()
|
||||||
|
} else {
|
||||||
|
showError({
|
||||||
|
title: 'Failed to update session',
|
||||||
|
message: 'Please try again.',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showError({
|
||||||
|
title: 'Error updating session',
|
||||||
|
message: error.message,
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteSession = async sessionId => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const response = await DeleteTimeSession(choreId, sessionId)
|
||||||
|
if (response.ok) {
|
||||||
|
showSuccess({
|
||||||
|
title: 'Session deleted',
|
||||||
|
message: 'Timer session has been deleted successfully.',
|
||||||
|
})
|
||||||
|
await fetchTimerData()
|
||||||
|
onTimerUpdate?.()
|
||||||
|
} else {
|
||||||
|
showError({
|
||||||
|
title: 'Failed to delete session',
|
||||||
|
message: 'Please try again.',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showError({
|
||||||
|
title: 'Error deleting session',
|
||||||
|
message: error.message,
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmDeleteSession = sessionId => {
|
||||||
|
setConfirmDeleteConfig({
|
||||||
|
isOpen: true,
|
||||||
|
title: 'Delete Timer Session',
|
||||||
|
message: 'Are you sure you want to delete this timer session?',
|
||||||
|
confirmText: 'Delete',
|
||||||
|
cancelText: 'Cancel',
|
||||||
|
color: 'danger',
|
||||||
|
onClose: isConfirmed => {
|
||||||
|
if (isConfirmed) {
|
||||||
|
deleteSession(sessionId)
|
||||||
|
}
|
||||||
|
setConfirmDeleteConfig({})
|
||||||
|
setEditingSessions({})
|
||||||
|
onClose?.()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setEditingSessions({})
|
||||||
|
onClose?.()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate total duration from start to now/end (real-time)
|
||||||
|
const calculateTotalDuration = () => {
|
||||||
|
if (!timerData) return 0
|
||||||
|
|
||||||
|
const startTime = new Date(timerData.startTime)
|
||||||
|
const endTime = timerData.endTime
|
||||||
|
? new Date(timerData.endTime)
|
||||||
|
: currentTime
|
||||||
|
|
||||||
|
return Math.floor((endTime - startTime) / 1000) // in seconds
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate current active duration (including ongoing session) (real-time)
|
||||||
|
const calculateCurrentActiveDuration = () => {
|
||||||
|
if (!timerData || !timerData.pauseLog) return 0
|
||||||
|
|
||||||
|
let totalActive = 0
|
||||||
|
const now = currentTime
|
||||||
|
|
||||||
|
timerData.pauseLog.forEach(session => {
|
||||||
|
if (session.start && session.end) {
|
||||||
|
// Completed session
|
||||||
|
totalActive += Math.floor(
|
||||||
|
(new Date(session.end) - new Date(session.start)) / 1000,
|
||||||
|
)
|
||||||
|
} else if (session.start && !session.end) {
|
||||||
|
// Ongoing session - real-time calculation
|
||||||
|
totalActive += Math.floor((now - new Date(session.start)) / 1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return totalActive
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate idle time (total time minus active time) (real-time)
|
||||||
|
const calculateIdleTime = () => {
|
||||||
|
const totalDuration = calculateTotalDuration()
|
||||||
|
const activeDuration = calculateCurrentActiveDuration()
|
||||||
|
|
||||||
|
return Math.max(0, totalDuration - activeDuration)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FadeModal open={isOpen} onClose={onClose} size='lg' fullWidth={true}>
|
||||||
|
<Typography level='h4'>Timer Details</Typography>
|
||||||
|
|
||||||
|
{loading && (
|
||||||
|
<Alert color='neutral' sx={{ mb: 2 }}>
|
||||||
|
Loading timer data...
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && !timerData && (
|
||||||
|
<Alert color='warning' sx={{ mb: 2 }}>
|
||||||
|
No timer data found for this chore.
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && timerData && (
|
||||||
|
<Box sx={{ maxHeight: '70vh', overflowY: 'auto' }}>
|
||||||
|
{/* Timer Summary */}
|
||||||
|
<Card
|
||||||
|
variant='plain'
|
||||||
|
sx={{
|
||||||
|
mb: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header with timeline */}
|
||||||
|
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Active Time */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
textAlign: 'center',
|
||||||
|
p: 2,
|
||||||
|
borderRadius: 'md',
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'success.500',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
level='h4'
|
||||||
|
sx={{
|
||||||
|
color: 'success.600',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
mb: 0.5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatDuration(calculateCurrentActiveDuration())}
|
||||||
|
</Typography>
|
||||||
|
<Typography level='body-xs' sx={{ color: 'text.secondary' }}>
|
||||||
|
Active Work
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Idle Time */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
textAlign: 'center',
|
||||||
|
p: 2,
|
||||||
|
borderRadius: 'md',
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'warning.500',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
level='h4'
|
||||||
|
sx={{
|
||||||
|
color: 'warning.600',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
mb: 0.5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatDuration(calculateIdleTime())}
|
||||||
|
</Typography>
|
||||||
|
<Typography level='body-xs' sx={{ color: 'text.secondary' }}>
|
||||||
|
Break Time
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Total Sessions */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
textAlign: 'center',
|
||||||
|
p: 2,
|
||||||
|
borderRadius: 'md',
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'primary.500',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
level='h4'
|
||||||
|
sx={{
|
||||||
|
color: 'primary.600',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
mb: 0.5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{timerData.pauseLog?.length || 0}
|
||||||
|
</Typography>
|
||||||
|
<Typography level='body-xs' sx={{ color: 'text.secondary' }}>
|
||||||
|
Work Sessions
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Total Session Time */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
textAlign: 'center',
|
||||||
|
p: 2,
|
||||||
|
borderRadius: 'md',
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'neutral.500',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
level='h4'
|
||||||
|
sx={{
|
||||||
|
color: 'neutral.700',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
mb: 0.5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatTime(calculateTotalDuration())}
|
||||||
|
</Typography>
|
||||||
|
<Typography level='body-xs' sx={{ color: 'text.secondary' }}>
|
||||||
|
Total Time
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<Box sx={{ mt: 3 }}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
mb: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
level='body-xs'
|
||||||
|
sx={{ color: 'text.secondary', fontWeight: 'medium' }}
|
||||||
|
>
|
||||||
|
Work vs Break Distribution
|
||||||
|
</Typography>
|
||||||
|
<Typography level='body-xs' sx={{ color: 'text.tertiary' }}>
|
||||||
|
{calculateCurrentActiveDuration() > 0
|
||||||
|
? `${Math.round((calculateCurrentActiveDuration() / calculateTotalDuration()) * 100)}% active`
|
||||||
|
: 'No active time yet'}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
height: 6,
|
||||||
|
backgroundColor: 'neutral.200',
|
||||||
|
borderRadius: 'sm',
|
||||||
|
overflow: 'hidden',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
height: '100%',
|
||||||
|
width: `${Math.round((calculateCurrentActiveDuration() / Math.max(calculateTotalDuration(), 1)) * 100)}%`,
|
||||||
|
backgroundColor: 'success.400',
|
||||||
|
borderRadius: 'sm',
|
||||||
|
transition: 'width 0.3s ease-in-out',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Time Session */}
|
||||||
|
<Box>
|
||||||
|
<Typography level='h4' sx={{ mb: 2 }}>
|
||||||
|
Session Breakdown
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
{!editingSessions[timerData.id] ? (
|
||||||
|
<Box>
|
||||||
|
{/* Read-only view */}
|
||||||
|
{/* Sessions */}
|
||||||
|
{timerData.pauseLog && timerData.pauseLog.length > 0 && (
|
||||||
|
<Box sx={{ mb: 2 }}>
|
||||||
|
<Typography
|
||||||
|
level='body-sm'
|
||||||
|
sx={{ fontWeight: 'bold', mb: 2 }}
|
||||||
|
>
|
||||||
|
Work Sessions ({timerData.pauseLog.length})
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: 1.5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{timerData.pauseLog
|
||||||
|
.sort((a, b) => moment(b.start) - moment(a.start))
|
||||||
|
.map((pause, pauseIndex) => {
|
||||||
|
const isOngoing = !pause.end
|
||||||
|
const sessionDate = moment(pause.start).format(
|
||||||
|
'MMM DD',
|
||||||
|
)
|
||||||
|
const startTime = moment(pause.start).format(
|
||||||
|
'HH:mm',
|
||||||
|
)
|
||||||
|
const endTime = pause.end
|
||||||
|
? moment(pause.end).format('HH:mm')
|
||||||
|
: null
|
||||||
|
|
||||||
|
const realTimeDuration = isOngoing
|
||||||
|
? Math.max(
|
||||||
|
0,
|
||||||
|
Math.floor(
|
||||||
|
(currentTime - new Date(pause.start)) /
|
||||||
|
1000,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: pause.duration
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={pauseIndex}
|
||||||
|
variant='outlined'
|
||||||
|
sx={{
|
||||||
|
p: 2,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 2,
|
||||||
|
minHeight: 'auto',
|
||||||
|
|
||||||
|
borderColor: isOngoing
|
||||||
|
? 'success.300'
|
||||||
|
: 'divider',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Session indicator */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: isOngoing
|
||||||
|
? 'success.500'
|
||||||
|
: 'neutral.400',
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Duration - Main focus */}
|
||||||
|
<Box sx={{ flexShrink: 0 }}>
|
||||||
|
<Typography
|
||||||
|
level='h4'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: isOngoing
|
||||||
|
? 'success.600'
|
||||||
|
: 'text.primary',
|
||||||
|
lineHeight: 1,
|
||||||
|
mb: 0.5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatDuration(realTimeDuration)}
|
||||||
|
</Typography>
|
||||||
|
{isOngoing && (
|
||||||
|
<Chip
|
||||||
|
size='sm'
|
||||||
|
color='success'
|
||||||
|
variant='soft'
|
||||||
|
sx={{ fontSize: '0.75rem' }}
|
||||||
|
>
|
||||||
|
Live
|
||||||
|
</Chip>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Session details */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flex: 1,
|
||||||
|
minWidth: 0,
|
||||||
|
// this align to the right side of the card
|
||||||
|
textAlign: 'right',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
level='body-sm'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 'medium',
|
||||||
|
color: 'text.secondary',
|
||||||
|
mb: 0.3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Session #{pauseIndex + 1} • {sessionDate}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
level='body-xs'
|
||||||
|
sx={{
|
||||||
|
color: 'text.tertiary',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{startTime}{' '}
|
||||||
|
{endTime ? `→ ${endTime}` : '→ ongoing'}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Box>
|
||||||
|
{/* Editing view */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Session Editor */}
|
||||||
|
<Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
mb: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
level='body-sm'
|
||||||
|
sx={{ fontWeight: 'bold' }}
|
||||||
|
>
|
||||||
|
Sessions
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
size='sm'
|
||||||
|
variant='outlined'
|
||||||
|
startDecorator={<Add />}
|
||||||
|
onClick={() => addPauseLogEntry(timerData.id)}
|
||||||
|
>
|
||||||
|
Add Session
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{editingSessions[timerData.id].pauseLog.map(
|
||||||
|
(pause, pauseIndex) => (
|
||||||
|
<Card
|
||||||
|
key={pauseIndex}
|
||||||
|
variant='soft'
|
||||||
|
sx={{ mb: 2, p: 2 }}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
mb: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
level='body-sm'
|
||||||
|
sx={{ fontWeight: 'bold' }}
|
||||||
|
>
|
||||||
|
Session #{pauseIndex + 1}
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
size='sm'
|
||||||
|
variant='outlined'
|
||||||
|
color='danger'
|
||||||
|
onClick={() =>
|
||||||
|
deletePauseLogEntry(
|
||||||
|
timerData.id,
|
||||||
|
pauseIndex,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Delete />
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormControl size='sm'>
|
||||||
|
<Typography
|
||||||
|
level='body-xs'
|
||||||
|
sx={{ fontWeight: 'bold' }}
|
||||||
|
>
|
||||||
|
Start Time
|
||||||
|
</Typography>
|
||||||
|
<Input
|
||||||
|
type='datetime-local'
|
||||||
|
value={moment(pause.start).format(
|
||||||
|
'YYYY-MM-DDTHH:mm:ss',
|
||||||
|
)}
|
||||||
|
onChange={e =>
|
||||||
|
updatePauseLogEntry(
|
||||||
|
timerData.id,
|
||||||
|
pauseIndex,
|
||||||
|
'start',
|
||||||
|
new Date(e.target.value).toISOString(),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl size='sm'>
|
||||||
|
<Typography
|
||||||
|
level='body-xs'
|
||||||
|
sx={{ fontWeight: 'bold' }}
|
||||||
|
>
|
||||||
|
End Time
|
||||||
|
</Typography>
|
||||||
|
<Input
|
||||||
|
type='datetime-local'
|
||||||
|
value={
|
||||||
|
pause.end
|
||||||
|
? moment(pause.end).format(
|
||||||
|
'YYYY-MM-DDTHH:mm:ss',
|
||||||
|
)
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
onChange={e =>
|
||||||
|
updatePauseLogEntry(
|
||||||
|
timerData.id,
|
||||||
|
pauseIndex,
|
||||||
|
'end',
|
||||||
|
e.target.value
|
||||||
|
? new Date(
|
||||||
|
e.target.value,
|
||||||
|
).toISOString()
|
||||||
|
: null,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<FormHelperText>
|
||||||
|
Leave empty if session is ongoing
|
||||||
|
</FormHelperText>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
<Typography
|
||||||
|
level='body-xs'
|
||||||
|
sx={{ fontWeight: 'bold', mb: 0.5 }}
|
||||||
|
>
|
||||||
|
Duration (Auto-calculated)
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
level='body-xs'
|
||||||
|
sx={{
|
||||||
|
p: 1,
|
||||||
|
bgcolor: 'background.surface',
|
||||||
|
borderRadius: 'sm',
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'divider',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatDuration(pause.duration)} (
|
||||||
|
{pause.duration}s)
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{!timerData && (
|
||||||
|
<Alert color='neutral' sx={{ mt: 2 }}>
|
||||||
|
No timer session found for this chore.
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||||
|
<Button variant='outlined' onClick={handleClose} color='neutral'>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||||
|
{/* Action buttons on the right */}
|
||||||
|
{!loading && timerData && !editingSessions[timerData.id] && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
size='sm'
|
||||||
|
variant='outlined'
|
||||||
|
color='danger'
|
||||||
|
onClick={() => confirmDeleteSession(timerData.id)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant='outlined'
|
||||||
|
startDecorator={<Edit />}
|
||||||
|
onClick={() => startEditingSession()}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Save button when editing */}
|
||||||
|
{!loading && timerData && editingSessions[timerData.id] && (
|
||||||
|
<Button
|
||||||
|
variant='solid'
|
||||||
|
color='primary'
|
||||||
|
onClick={() => saveSession(timerData.id)}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</FadeModal>
|
||||||
|
|
||||||
|
<ConfirmationModal config={confirmDeleteConfig} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TimerEditModal
|
||||||
Reference in New Issue
Block a user