1940 lines
115 KiB
TypeScript
1940 lines
115 KiB
TypeScript
// This file is kept for backward compatibility
|
|
// The main Scheduling component has been moved to ./scheduling/Scheduling.tsx
|
|
// This file re-exports it and also contains the original ScheduleExperiment implementation
|
|
|
|
import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
|
|
// @ts-ignore - react-big-calendar types not available
|
|
import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
|
|
// @ts-ignore - react-big-calendar dragAndDrop types not available
|
|
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
|
|
import { DndProvider } from 'react-dnd'
|
|
import { HTML5Backend } from 'react-dnd-html5-backend'
|
|
import moment from 'moment'
|
|
import type { User, ExperimentPhase, Experiment, ExperimentRepetition, Soaking, Airdrying } from '../services/supabase'
|
|
import { availabilityManagement, userManagement, experimentPhaseManagement, experimentManagement, repetitionManagement, phaseManagement, supabase } from '../services/supabase'
|
|
import 'react-big-calendar/lib/css/react-big-calendar.css'
|
|
import './CalendarStyles.css'
|
|
import { HorizontalTimelineCalendar } from './HorizontalTimelineCalendar'
|
|
|
|
// Re-export the new modular Scheduling component
|
|
export { Scheduling } from './scheduling/Scheduling'
|
|
|
|
// Type definitions for calendar events
|
|
interface CalendarEvent {
|
|
id: number | string
|
|
title: string
|
|
start: Date
|
|
end: Date
|
|
resource?: string
|
|
}
|
|
|
|
// Keep the original ScheduleExperiment implementation here for now
|
|
// TODO: Move this to scheduling/views/ScheduleExperimentImpl.tsx and further refactor
|
|
export function ScheduleExperiment({ user, onBack }: { user: User; onBack: () => void }) {
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const [conductors, setConductors] = useState<User[]>([])
|
|
const [conductorIdsWithFutureAvailability, setConductorIdsWithFutureAvailability] = useState<Set<string>>(new Set())
|
|
const [selectedConductorIds, setSelectedConductorIds] = useState<Set<string>>(new Set())
|
|
|
|
const [phases, setPhases] = useState<ExperimentPhase[]>([])
|
|
const [expandedPhaseIds, setExpandedPhaseIds] = useState<Set<string>>(new Set())
|
|
const [conductorsExpanded, setConductorsExpanded] = useState<boolean>(true)
|
|
const [experimentsByPhase, setExperimentsByPhase] = useState<Record<string, Experiment[]>>({})
|
|
const [repetitionsByExperiment, setRepetitionsByExperiment] = useState<Record<string, ExperimentRepetition[]>>({})
|
|
const [selectedRepetitionIds, setSelectedRepetitionIds] = useState<Set<string>>(new Set())
|
|
const [creatingRepetitionsFor, setCreatingRepetitionsFor] = useState<Set<string>>(new Set())
|
|
const [soakingByExperiment, setSoakingByExperiment] = useState<Record<string, Soaking | null>>({})
|
|
const [airdryingByExperiment, setAirdryingByExperiment] = useState<Record<string, Airdrying | null>>({})
|
|
|
|
// Calendar state for selected conductors' availability
|
|
const localizer = momentLocalizer(moment)
|
|
const DnDCalendar = withDragAndDrop(Calendar)
|
|
const [calendarView, setCalendarView] = useState(Views.WEEK)
|
|
const [currentDate, setCurrentDate] = useState(new Date())
|
|
const [availabilityEvents, setAvailabilityEvents] = useState<CalendarEvent[]>([])
|
|
|
|
// Color map per conductor for calendar events
|
|
const [conductorColorMap, setConductorColorMap] = useState<Record<string, string>>({})
|
|
const colorPalette = ['#2563eb', '#059669', '#d97706', '#7c3aed', '#dc2626', '#0ea5e9', '#16a34a', '#f59e0b', '#9333ea', '#ef4444']
|
|
|
|
// Repetition scheduling state
|
|
const [scheduledRepetitions, setScheduledRepetitions] = useState<Record<string, {
|
|
repetitionId: string
|
|
experimentId: string
|
|
soakingStart: Date | null
|
|
airdryingStart: Date | null
|
|
crackingStart: Date | null
|
|
}>>({})
|
|
|
|
// Track repetitions that have been dropped/moved and should show time points
|
|
const [repetitionsWithTimes, setRepetitionsWithTimes] = useState<Set<string>>(new Set())
|
|
<<<<<<< HEAD
|
|
// Track which repetitions are locked (prevent dragging)
|
|
const [lockedSchedules, setLockedSchedules] = useState<Set<string>>(new Set())
|
|
=======
|
|
>>>>>>> old-github/main
|
|
// Track which repetitions are currently being scheduled
|
|
const [schedulingRepetitions, setSchedulingRepetitions] = useState<Set<string>>(new Set())
|
|
// Track conductor assignments for each phase marker (markerId -> conductorIds[])
|
|
const [conductorAssignments, setConductorAssignments] = useState<Record<string, string[]>>({})
|
|
// Horizontal calendar state: zoom level (number of days to show) and current view date
|
|
const [calendarZoom, setCalendarZoom] = useState(3) // Number of days to display
|
|
const [calendarStartDate, setCalendarStartDate] = useState(() => {
|
|
const today = new Date()
|
|
today.setHours(0, 0, 0, 0)
|
|
return today
|
|
})
|
|
|
|
// Ref for calendar container to preserve scroll position
|
|
const calendarRef = useRef<HTMLDivElement>(null)
|
|
const scrollPositionRef = useRef<{ scrollTop: number; scrollLeft: number } | null>(null)
|
|
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
try {
|
|
setLoading(true)
|
|
setError(null)
|
|
|
|
const [allUsers, allPhases] = await Promise.all([
|
|
userManagement.getAllUsers(),
|
|
experimentPhaseManagement.getAllExperimentPhases()
|
|
])
|
|
|
|
// Filter conductors
|
|
const conductorsOnly = allUsers.filter(u => u.roles.includes('conductor'))
|
|
setConductors(conductorsOnly)
|
|
|
|
// For each conductor, check if they have any availability in the future
|
|
const conductorIds = conductorsOnly.map(c => c.id)
|
|
setConductorIdsWithFutureAvailability(new Set(conductorIds))
|
|
|
|
setPhases(allPhases)
|
|
} catch (e: any) {
|
|
setError(e?.message || 'Failed to load scheduling data')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
load()
|
|
}, [])
|
|
|
|
const toggleConductor = (id: string) => {
|
|
setSelectedConductorIds(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(id)) next.delete(id)
|
|
else next.add(id)
|
|
return next
|
|
})
|
|
}
|
|
|
|
const toggleAllConductors = () => {
|
|
const availableConductorIds = conductors
|
|
.filter(c => conductorIdsWithFutureAvailability.has(c.id))
|
|
.map(c => c.id)
|
|
|
|
setSelectedConductorIds(prev => {
|
|
// If all available conductors are selected, deselect all
|
|
const allSelected = availableConductorIds.every(id => prev.has(id))
|
|
if (allSelected) {
|
|
return new Set()
|
|
} else {
|
|
// Select all available conductors
|
|
return new Set(availableConductorIds)
|
|
}
|
|
})
|
|
}
|
|
|
|
// Fetch availability for selected conductors and build calendar events
|
|
useEffect(() => {
|
|
const loadSelectedAvailability = async () => {
|
|
try {
|
|
const selectedIds = Array.from(selectedConductorIds)
|
|
if (selectedIds.length === 0) {
|
|
setAvailabilityEvents([])
|
|
return
|
|
}
|
|
|
|
// Assign consistent colors per conductor based on their position in the full conductors array
|
|
// This ensures the same conductor always gets the same color, matching the checkbox list
|
|
const newColorMap: Record<string, string> = {}
|
|
conductors.forEach((conductor, index) => {
|
|
if (selectedIds.includes(conductor.id)) {
|
|
newColorMap[conductor.id] = colorPalette[index % colorPalette.length]
|
|
}
|
|
})
|
|
setConductorColorMap(newColorMap)
|
|
|
|
// Fetch availability for selected conductors in a single query
|
|
const { data, error } = await supabase
|
|
.from('conductor_availability')
|
|
.select('*')
|
|
.in('user_id', selectedIds)
|
|
.eq('status', 'active')
|
|
.gt('available_to', new Date().toISOString())
|
|
.order('available_from', { ascending: true })
|
|
|
|
if (error) throw error
|
|
|
|
// Map user_id -> display name
|
|
const idToName: Record<string, string> = {}
|
|
conductors.forEach(c => {
|
|
const name = [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email
|
|
idToName[c.id] = name
|
|
})
|
|
|
|
const events: CalendarEvent[] = (data || []).map((r: any) => {
|
|
const conductorId = r.user_id
|
|
return {
|
|
id: r.id,
|
|
title: `${idToName[conductorId] || 'Conductor'}`,
|
|
start: new Date(r.available_from),
|
|
end: new Date(r.available_to),
|
|
resource: conductorId // Store conductor ID for color mapping
|
|
}
|
|
})
|
|
|
|
setAvailabilityEvents(events)
|
|
} catch (e) {
|
|
// Fail silently for calendar, do not break main UI
|
|
setAvailabilityEvents([])
|
|
}
|
|
}
|
|
|
|
loadSelectedAvailability()
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selectedConductorIds, conductors])
|
|
|
|
const togglePhaseExpand = async (phaseId: string) => {
|
|
setExpandedPhaseIds(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(phaseId)) next.delete(phaseId)
|
|
else next.add(phaseId)
|
|
return next
|
|
})
|
|
|
|
// Lazy-load experiments for this phase if not loaded
|
|
if (!experimentsByPhase[phaseId]) {
|
|
try {
|
|
const exps = await experimentManagement.getExperimentsByPhaseId(phaseId)
|
|
setExperimentsByPhase(prev => ({ ...prev, [phaseId]: exps }))
|
|
|
|
// For each experiment, load repetitions and phase data
|
|
const repsEntries = await Promise.all(
|
|
exps.map(async (exp) => {
|
|
const [reps, soaking, airdrying] = await Promise.all([
|
|
repetitionManagement.getExperimentRepetitions(exp.id),
|
|
phaseManagement.getSoakingByExperimentId(exp.id),
|
|
phaseManagement.getAirdryingByExperimentId(exp.id)
|
|
])
|
|
return [exp.id, reps, soaking, airdrying] as const
|
|
})
|
|
)
|
|
|
|
// Update repetitions
|
|
setRepetitionsByExperiment(prev => ({
|
|
...prev,
|
|
...Object.fromEntries(repsEntries.map(([id, reps]) => [id, reps]))
|
|
}))
|
|
|
|
// Update soaking data
|
|
setSoakingByExperiment(prev => ({
|
|
...prev,
|
|
...Object.fromEntries(repsEntries.map(([id, , soaking]) => [id, soaking]))
|
|
}))
|
|
|
|
// Update airdrying data
|
|
setAirdryingByExperiment(prev => ({
|
|
...prev,
|
|
...Object.fromEntries(repsEntries.map(([id, , , airdrying]) => [id, airdrying]))
|
|
}))
|
|
} catch (e: any) {
|
|
setError(e?.message || 'Failed to load experiments or repetitions')
|
|
}
|
|
}
|
|
}
|
|
|
|
const toggleRepetition = (repId: string) => {
|
|
<<<<<<< HEAD
|
|
setSelectedRepetitionIds(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(repId)) {
|
|
next.delete(repId)
|
|
// Remove from scheduled repetitions when unchecked
|
|
setScheduledRepetitions(prevScheduled => {
|
|
const newScheduled = { ...prevScheduled }
|
|
delete newScheduled[repId]
|
|
return newScheduled
|
|
})
|
|
// Clear all related state when unchecked
|
|
setRepetitionsWithTimes(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(repId)
|
|
return next
|
|
})
|
|
setLockedSchedules(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(repId)
|
|
return next
|
|
})
|
|
setSchedulingRepetitions(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(repId)
|
|
return next
|
|
})
|
|
// Re-stagger remaining repetitions
|
|
const remainingIds = Array.from(next).filter(id => id !== repId)
|
|
if (remainingIds.length > 0) {
|
|
reStaggerRepetitions(remainingIds)
|
|
}
|
|
} else {
|
|
next.add(repId)
|
|
// Auto-spawn when checked - pass the updated set to ensure correct stagger calculation
|
|
spawnSingleRepetition(repId, next)
|
|
// Re-stagger all existing repetitions to prevent overlap
|
|
// Note: reStaggerRepetitions will automatically skip locked repetitions
|
|
reStaggerRepetitions([...next, repId])
|
|
=======
|
|
// Checking/unchecking should only control visibility on the timeline.
|
|
// It must NOT clear scheduling info or conductor assignments.
|
|
setSelectedRepetitionIds(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(repId)) {
|
|
// Hide this repetition from the timeline
|
|
next.delete(repId)
|
|
// Keep scheduledRepetitions and repetitionsWithTimes intact so that
|
|
// re-checking the box restores the repetition in the correct spot.
|
|
} else {
|
|
// Show this repetition on the timeline
|
|
next.add(repId)
|
|
// Auto-spawn when checked - pass the updated set to ensure correct stagger calculation
|
|
// spawnSingleRepetition will position the new repetition relative to existing ones
|
|
// without resetting existing positions
|
|
spawnSingleRepetition(repId, next)
|
|
>>>>>>> old-github/main
|
|
}
|
|
return next
|
|
})
|
|
}
|
|
|
|
const toggleAllRepetitionsInPhase = (phaseId: string) => {
|
|
const experiments = experimentsByPhase[phaseId] || []
|
|
const allRepetitions = experiments.flatMap(exp => repetitionsByExperiment[exp.id] || [])
|
|
|
|
setSelectedRepetitionIds(prev => {
|
|
// Check if all repetitions in this phase are selected
|
|
const allSelected = allRepetitions.every(rep => prev.has(rep.id))
|
|
|
|
if (allSelected) {
|
|
<<<<<<< HEAD
|
|
// Deselect all repetitions in this phase
|
|
const next = new Set(prev)
|
|
allRepetitions.forEach(rep => {
|
|
next.delete(rep.id)
|
|
// Remove from scheduled repetitions
|
|
setScheduledRepetitions(prevScheduled => {
|
|
const newScheduled = { ...prevScheduled }
|
|
delete newScheduled[rep.id]
|
|
return newScheduled
|
|
})
|
|
})
|
|
return next
|
|
} else {
|
|
// Select all repetitions in this phase
|
|
=======
|
|
// Deselect all repetitions in this phase (hide from timeline only)
|
|
const next = new Set(prev)
|
|
allRepetitions.forEach(rep => {
|
|
next.delete(rep.id)
|
|
})
|
|
return next
|
|
} else {
|
|
// Select all repetitions in this phase (show on timeline)
|
|
>>>>>>> old-github/main
|
|
const next = new Set(prev)
|
|
allRepetitions.forEach(rep => {
|
|
next.add(rep.id)
|
|
// Auto-spawn when checked - pass the updated set to ensure correct stagger calculation
|
|
spawnSingleRepetition(rep.id, next)
|
|
})
|
|
return next
|
|
}
|
|
})
|
|
}
|
|
|
|
const createRepetitionsForExperiment = async (experimentId: string) => {
|
|
try {
|
|
setCreatingRepetitionsFor(prev => new Set(prev).add(experimentId))
|
|
setError(null)
|
|
|
|
// Create all repetitions for this experiment
|
|
const newRepetitions = await repetitionManagement.createAllRepetitions(experimentId)
|
|
|
|
// Update the repetitions state
|
|
setRepetitionsByExperiment(prev => ({
|
|
...prev,
|
|
[experimentId]: newRepetitions
|
|
}))
|
|
} catch (e: any) {
|
|
setError(e?.message || 'Failed to create repetitions')
|
|
} finally {
|
|
setCreatingRepetitionsFor(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(experimentId)
|
|
return next
|
|
})
|
|
}
|
|
}
|
|
|
|
// Re-stagger all repetitions to prevent overlap
|
|
// IMPORTANT: Skip locked repetitions to prevent them from moving
|
|
<<<<<<< HEAD
|
|
const reStaggerRepetitions = useCallback((repIds: string[]) => {
|
|
=======
|
|
const reStaggerRepetitions = useCallback((repIds: string[], onlyResetWithoutCustomTimes: boolean = false) => {
|
|
>>>>>>> old-github/main
|
|
const tomorrow = new Date()
|
|
tomorrow.setDate(tomorrow.getDate() + 1)
|
|
tomorrow.setHours(9, 0, 0, 0)
|
|
|
|
setScheduledRepetitions(prev => {
|
|
const newScheduled = { ...prev }
|
|
|
|
<<<<<<< HEAD
|
|
// Filter out locked repetitions - they should not be moved
|
|
const unlockedRepIds = repIds.filter(repId => !lockedSchedules.has(repId))
|
|
=======
|
|
// If onlyResetWithoutCustomTimes is true, filter out repetitions that have custom times set
|
|
let unlockedRepIds = repIds
|
|
if (onlyResetWithoutCustomTimes) {
|
|
unlockedRepIds = unlockedRepIds.filter(repId => !repetitionsWithTimes.has(repId))
|
|
}
|
|
>>>>>>> old-github/main
|
|
|
|
// Calculate stagger index only for unlocked repetitions
|
|
let staggerIndex = 0
|
|
unlockedRepIds.forEach((repId) => {
|
|
if (newScheduled[repId]) {
|
|
const staggerMinutes = staggerIndex * 15 // 15 minutes between each repetition
|
|
const baseTime = new Date(tomorrow.getTime() + (staggerMinutes * 60000))
|
|
|
|
// Find the experiment for this repetition
|
|
let experimentId = ''
|
|
for (const [expId, reps] of Object.entries(repetitionsByExperiment)) {
|
|
if (reps.find(r => r.id === repId)) {
|
|
experimentId = expId
|
|
break
|
|
}
|
|
}
|
|
|
|
if (experimentId) {
|
|
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
|
|
const soaking = soakingByExperiment[experimentId]
|
|
const airdrying = airdryingByExperiment[experimentId]
|
|
|
|
if (experiment && soaking && airdrying) {
|
|
const soakingStart = new Date(baseTime)
|
|
const airdryingStart = new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000))
|
|
const crackingStart = new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000))
|
|
|
|
newScheduled[repId] = {
|
|
...newScheduled[repId],
|
|
soakingStart,
|
|
airdryingStart,
|
|
crackingStart
|
|
}
|
|
staggerIndex++
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
return newScheduled
|
|
})
|
|
<<<<<<< HEAD
|
|
}, [lockedSchedules, repetitionsByExperiment, experimentsByPhase, soakingByExperiment, airdryingByExperiment])
|
|
=======
|
|
}, [repetitionsByExperiment, experimentsByPhase, soakingByExperiment, airdryingByExperiment, repetitionsWithTimes])
|
|
>>>>>>> old-github/main
|
|
|
|
// Spawn a single repetition in calendar
|
|
const spawnSingleRepetition = (repId: string, updatedSelectedIds?: Set<string>) => {
|
|
const tomorrow = new Date()
|
|
tomorrow.setDate(tomorrow.getDate() + 1)
|
|
tomorrow.setHours(9, 0, 0, 0) // Default to 9 AM tomorrow
|
|
|
|
// Find the experiment for this repetition
|
|
let experimentId = ''
|
|
for (const [expId, reps] of Object.entries(repetitionsByExperiment)) {
|
|
if (reps.find(r => r.id === repId)) {
|
|
experimentId = expId
|
|
break
|
|
}
|
|
}
|
|
|
|
if (experimentId) {
|
|
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
|
|
const soaking = soakingByExperiment[experimentId]
|
|
const airdrying = airdryingByExperiment[experimentId]
|
|
|
|
if (experiment && soaking && airdrying) {
|
|
// Stagger the positioning to avoid overlap when multiple repetitions are selected
|
|
// Use the updated set if provided, otherwise use current state (may be stale)
|
|
const selectedReps = updatedSelectedIds ? Array.from(updatedSelectedIds) : Array.from(selectedRepetitionIds)
|
|
const repIndex = selectedReps.indexOf(repId)
|
|
// If repId not found in selectedReps, use the count of scheduled repetitions as fallback
|
|
const staggerMinutes = repIndex >= 0 ? repIndex * 15 : Object.keys(scheduledRepetitions).length * 15
|
|
|
|
const soakingStart = new Date(tomorrow.getTime() + (staggerMinutes * 60000))
|
|
const airdryingStart = new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000))
|
|
const crackingStart = new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000))
|
|
|
|
setScheduledRepetitions(prev => ({
|
|
...prev,
|
|
[repId]: {
|
|
repetitionId: repId,
|
|
experimentId,
|
|
soakingStart,
|
|
airdryingStart,
|
|
crackingStart
|
|
}
|
|
}))
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update phase timing when a marker is moved
|
|
const updatePhaseTiming = useCallback((repId: string, phase: 'soaking' | 'airdrying' | 'cracking', newTime: Date) => {
|
|
console.log('updatePhaseTiming called:', repId, phase, newTime)
|
|
setScheduledRepetitions(prev => {
|
|
const current = prev[repId]
|
|
if (!current) {
|
|
console.log('No current repetition found for:', repId)
|
|
return prev
|
|
}
|
|
|
|
const experimentId = current.experimentId
|
|
const soaking = soakingByExperiment[experimentId]
|
|
const airdrying = airdryingByExperiment[experimentId]
|
|
|
|
if (!soaking || !airdrying) {
|
|
console.log('Missing soaking or airdrying data for experiment:', experimentId)
|
|
return prev
|
|
}
|
|
|
|
let newScheduled = { ...prev }
|
|
|
|
const clampToReasonableHours = (d: Date) => {
|
|
<<<<<<< HEAD
|
|
const min = new Date(d)
|
|
min.setHours(5, 0, 0, 0)
|
|
const max = new Date(d)
|
|
max.setHours(23, 0, 0, 0)
|
|
=======
|
|
// Allow full 24 hours (midnight to midnight)
|
|
const min = new Date(d)
|
|
min.setHours(0, 0, 0, 0)
|
|
const max = new Date(d)
|
|
max.setHours(23, 59, 59, 999)
|
|
>>>>>>> old-github/main
|
|
const t = d.getTime()
|
|
return new Date(Math.min(Math.max(t, min.getTime()), max.getTime()))
|
|
}
|
|
|
|
if (phase === 'soaking') {
|
|
const soakingStart = clampToReasonableHours(newTime)
|
|
const airdryingStart = clampToReasonableHours(new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000)))
|
|
const crackingStart = clampToReasonableHours(new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000)))
|
|
|
|
newScheduled[repId] = {
|
|
...current,
|
|
soakingStart,
|
|
airdryingStart,
|
|
crackingStart
|
|
}
|
|
console.log('Updated repetition times:', newScheduled[repId])
|
|
} else if (phase === 'airdrying') {
|
|
const airdryingStart = clampToReasonableHours(newTime)
|
|
const soakingStart = clampToReasonableHours(new Date(airdryingStart.getTime() - (soaking.soaking_duration_minutes * 60000)))
|
|
const crackingStart = clampToReasonableHours(new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000)))
|
|
|
|
newScheduled[repId] = {
|
|
...current,
|
|
soakingStart,
|
|
airdryingStart,
|
|
crackingStart
|
|
}
|
|
console.log('Updated repetition times:', newScheduled[repId])
|
|
} else if (phase === 'cracking') {
|
|
const crackingStart = clampToReasonableHours(newTime)
|
|
const airdryingStart = clampToReasonableHours(new Date(crackingStart.getTime() - (airdrying.duration_minutes * 60000)))
|
|
const soakingStart = clampToReasonableHours(new Date(airdryingStart.getTime() - (soaking.soaking_duration_minutes * 60000)))
|
|
|
|
newScheduled[repId] = {
|
|
...current,
|
|
soakingStart,
|
|
airdryingStart,
|
|
crackingStart
|
|
}
|
|
console.log('Updated repetition times:', newScheduled[repId])
|
|
}
|
|
|
|
return newScheduled
|
|
})
|
|
}, [soakingByExperiment, airdryingByExperiment])
|
|
|
|
// Generate calendar events for scheduled repetitions (memoized)
|
|
const generateRepetitionEvents = useCallback((): CalendarEvent[] => {
|
|
const events: CalendarEvent[] = []
|
|
|
|
Object.values(scheduledRepetitions).forEach(scheduled => {
|
|
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === scheduled.experimentId)
|
|
const repetition = repetitionsByExperiment[scheduled.experimentId]?.find(r => r.id === scheduled.repetitionId)
|
|
|
|
if (experiment && repetition && scheduled.soakingStart) {
|
|
<<<<<<< HEAD
|
|
const isLocked = lockedSchedules.has(scheduled.repetitionId)
|
|
const lockIcon = isLocked ? '🔒' : '🔓'
|
|
|
|
// Soaking marker
|
|
events.push({
|
|
id: `${scheduled.repetitionId}-soaking`,
|
|
title: `${lockIcon} 💧 Soaking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
|
=======
|
|
// Soaking marker
|
|
events.push({
|
|
id: `${scheduled.repetitionId}-soaking`,
|
|
title: `💧 Soaking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
|
>>>>>>> old-github/main
|
|
start: scheduled.soakingStart,
|
|
end: new Date(scheduled.soakingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
|
|
resource: 'soaking'
|
|
})
|
|
|
|
// Airdrying marker
|
|
if (scheduled.airdryingStart) {
|
|
events.push({
|
|
id: `${scheduled.repetitionId}-airdrying`,
|
|
<<<<<<< HEAD
|
|
title: `${lockIcon} 🌬️ Airdrying - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
|
=======
|
|
title: `🌬️ Airdrying - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
|
>>>>>>> old-github/main
|
|
start: scheduled.airdryingStart,
|
|
end: new Date(scheduled.airdryingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
|
|
resource: 'airdrying'
|
|
})
|
|
}
|
|
|
|
// Cracking marker
|
|
if (scheduled.crackingStart) {
|
|
events.push({
|
|
id: `${scheduled.repetitionId}-cracking`,
|
|
<<<<<<< HEAD
|
|
title: `${lockIcon} ⚡ Cracking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
|
=======
|
|
title: `⚡ Cracking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
|
>>>>>>> old-github/main
|
|
start: scheduled.crackingStart,
|
|
end: new Date(scheduled.crackingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
|
|
resource: 'cracking'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
return events
|
|
<<<<<<< HEAD
|
|
}, [scheduledRepetitions, experimentsByPhase, repetitionsByExperiment, lockedSchedules])
|
|
=======
|
|
}, [scheduledRepetitions, experimentsByPhase, repetitionsByExperiment])
|
|
>>>>>>> old-github/main
|
|
|
|
// Memoize the calendar events
|
|
const calendarEvents = useMemo(() => {
|
|
return generateRepetitionEvents()
|
|
}, [generateRepetitionEvents])
|
|
|
|
// Functions to preserve and restore scroll position
|
|
const preserveScrollPosition = useCallback(() => {
|
|
if (calendarRef.current) {
|
|
const scrollContainer = calendarRef.current.querySelector('.rbc-time-content') as HTMLElement
|
|
if (scrollContainer) {
|
|
scrollPositionRef.current = {
|
|
scrollTop: scrollContainer.scrollTop,
|
|
scrollLeft: scrollContainer.scrollLeft
|
|
}
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
const restoreScrollPosition = useCallback(() => {
|
|
if (calendarRef.current && scrollPositionRef.current) {
|
|
const scrollContainer = calendarRef.current.querySelector('.rbc-time-content') as HTMLElement
|
|
if (scrollContainer) {
|
|
scrollContainer.scrollTop = scrollPositionRef.current.scrollTop
|
|
scrollContainer.scrollLeft = scrollPositionRef.current.scrollLeft
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
// Helper functions for scheduling
|
|
const formatTime = (date: Date | null) => {
|
|
if (!date) return 'Not set'
|
|
return moment(date).format('MMM D, h:mm A')
|
|
}
|
|
|
|
<<<<<<< HEAD
|
|
const toggleScheduleLock = (repId: string) => {
|
|
setLockedSchedules(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(repId)) {
|
|
next.delete(repId)
|
|
} else {
|
|
next.add(repId)
|
|
}
|
|
return next
|
|
=======
|
|
// Remove all conductor assignments from a repetition
|
|
const removeRepetitionAssignments = (repId: string) => {
|
|
const markerIdPrefix = repId
|
|
setConductorAssignments(prev => {
|
|
const newAssignments = { ...prev }
|
|
// Remove assignments for all three phases
|
|
delete newAssignments[`${markerIdPrefix}-soaking`]
|
|
delete newAssignments[`${markerIdPrefix}-airdrying`]
|
|
delete newAssignments[`${markerIdPrefix}-cracking`]
|
|
return newAssignments
|
|
>>>>>>> old-github/main
|
|
})
|
|
}
|
|
|
|
const draggableAccessor = useCallback((event: any) => {
|
|
// Only make repetition markers draggable, not availability events
|
|
const resource = event.resource as string
|
|
if (resource === 'soaking' || resource === 'airdrying' || resource === 'cracking') {
|
|
<<<<<<< HEAD
|
|
// Check if the repetition is locked
|
|
const eventId = event.id as string
|
|
const repId = eventId.split('-')[0]
|
|
const isLocked = lockedSchedules.has(repId)
|
|
return !isLocked
|
|
}
|
|
return false
|
|
}, [lockedSchedules])
|
|
=======
|
|
return true
|
|
}
|
|
return false
|
|
}, [])
|
|
>>>>>>> old-github/main
|
|
|
|
const eventPropGetter = useCallback((event: any) => {
|
|
const resource = event.resource as string
|
|
|
|
// Styling for repetition markers (foreground events)
|
|
if (resource === 'soaking' || resource === 'airdrying' || resource === 'cracking') {
|
|
<<<<<<< HEAD
|
|
const eventId = event.id as string
|
|
const repId = eventId.split('-')[0]
|
|
const isLocked = lockedSchedules.has(repId)
|
|
|
|
=======
|
|
>>>>>>> old-github/main
|
|
const colors = {
|
|
soaking: '#3b82f6', // blue
|
|
airdrying: '#10b981', // green
|
|
cracking: '#f59e0b' // orange
|
|
}
|
|
const color = colors[resource as keyof typeof colors] || '#6b7280'
|
|
|
|
return {
|
|
style: {
|
|
<<<<<<< HEAD
|
|
backgroundColor: isLocked ? '#9ca3af' : color, // gray if locked
|
|
borderColor: isLocked ? color : color, // border takes original color when locked
|
|
=======
|
|
backgroundColor: color,
|
|
borderColor: color,
|
|
>>>>>>> old-github/main
|
|
color: 'white',
|
|
borderRadius: '8px',
|
|
border: '2px solid',
|
|
height: '40px',
|
|
minHeight: '40px',
|
|
fontSize: '12px',
|
|
padding: '8px 12px',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
fontWeight: 'bold',
|
|
zIndex: 10,
|
|
position: 'relative',
|
|
lineHeight: '1.4',
|
|
textShadow: '1px 1px 2px rgba(0,0,0,0.7)',
|
|
gap: '8px',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
<<<<<<< HEAD
|
|
cursor: isLocked ? 'not-allowed' : 'grab',
|
|
boxShadow: isLocked ? '0 1px 2px rgba(0,0,0,0.1)' : '0 2px 4px rgba(0,0,0,0.2)',
|
|
transition: 'all 0.2s ease',
|
|
opacity: isLocked ? 0.7 : 1
|
|
=======
|
|
cursor: 'grab',
|
|
boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
|
|
transition: 'all 0.2s ease',
|
|
opacity: 1
|
|
>>>>>>> old-github/main
|
|
}
|
|
}
|
|
}
|
|
|
|
// Default styling for other events
|
|
return {}
|
|
<<<<<<< HEAD
|
|
}, [lockedSchedules])
|
|
=======
|
|
}, [])
|
|
>>>>>>> old-github/main
|
|
|
|
const scheduleRepetition = async (repId: string, experimentId: string) => {
|
|
setSchedulingRepetitions(prev => new Set(prev).add(repId))
|
|
|
|
try {
|
|
const scheduled = scheduledRepetitions[repId]
|
|
if (!scheduled) throw new Error('No scheduled times found')
|
|
|
|
const { soakingStart, airdryingStart, crackingStart } = scheduled
|
|
if (!soakingStart || !airdryingStart || !crackingStart) {
|
|
throw new Error('All time points must be set')
|
|
}
|
|
|
|
const soaking = soakingByExperiment[experimentId]
|
|
const airdrying = airdryingByExperiment[experimentId]
|
|
|
|
if (!soaking || !airdrying) throw new Error('Phase data not found')
|
|
|
|
// Update repetition scheduled_date (earliest time point)
|
|
await repetitionManagement.updateRepetition(repId, {
|
|
scheduled_date: soakingStart.toISOString()
|
|
})
|
|
|
|
// Create/update soaking record with repetition_id
|
|
await phaseManagement.createSoaking({
|
|
repetition_id: repId,
|
|
scheduled_start_time: soakingStart.toISOString(),
|
|
soaking_duration_minutes: soaking.soaking_duration_minutes
|
|
})
|
|
|
|
// Create/update airdrying record with repetition_id
|
|
await phaseManagement.createAirdrying({
|
|
repetition_id: repId,
|
|
scheduled_start_time: airdryingStart.toISOString(),
|
|
duration_minutes: airdrying.duration_minutes
|
|
})
|
|
|
|
// Create/update cracking record with repetition_id
|
|
// Note: cracking requires machine_type_id - need to get from experiment phase
|
|
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
|
|
const phase = phases.find(p => p.id === experiment?.phase_id)
|
|
|
|
if (phase?.cracking_machine_type_id) {
|
|
await phaseManagement.createCracking({
|
|
repetition_id: repId,
|
|
machine_type_id: phase.cracking_machine_type_id,
|
|
scheduled_start_time: crackingStart.toISOString()
|
|
})
|
|
}
|
|
|
|
// Update local state to reflect scheduling
|
|
setRepetitionsByExperiment(prev => ({
|
|
...prev,
|
|
[experimentId]: prev[experimentId]?.map(r =>
|
|
r.id === repId
|
|
? { ...r, scheduled_date: soakingStart.toISOString() }
|
|
: r
|
|
) || []
|
|
}))
|
|
|
|
} catch (error: any) {
|
|
setError(error?.message || 'Failed to schedule repetition')
|
|
} finally {
|
|
setSchedulingRepetitions(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(repId)
|
|
return next
|
|
})
|
|
}
|
|
}
|
|
|
|
<<<<<<< HEAD
|
|
=======
|
|
// Unschedule a repetition: clear its scheduling info and unassign all conductors.
|
|
const unscheduleRepetition = async (repId: string, experimentId: string) => {
|
|
setSchedulingRepetitions(prev => new Set(prev).add(repId))
|
|
|
|
try {
|
|
// Remove all conductor assignments for this repetition
|
|
removeRepetitionAssignments(repId)
|
|
|
|
// Clear scheduled_date on the repetition in local state
|
|
setRepetitionsByExperiment(prev => ({
|
|
...prev,
|
|
[experimentId]: prev[experimentId]?.map(r =>
|
|
r.id === repId ? { ...r, scheduled_date: null } : r
|
|
) || []
|
|
}))
|
|
|
|
// Clear scheduled times for this repetition so it disappears from the timeline
|
|
setScheduledRepetitions(prev => {
|
|
const next = { ...prev }
|
|
delete next[repId]
|
|
return next
|
|
})
|
|
|
|
// This repetition no longer has active times
|
|
setRepetitionsWithTimes(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(repId)
|
|
return next
|
|
})
|
|
|
|
// Also clear scheduled_date in the database for this repetition
|
|
await repetitionManagement.updateRepetition(repId, {
|
|
scheduled_date: null
|
|
})
|
|
} catch (error: any) {
|
|
setError(error?.message || 'Failed to unschedule repetition')
|
|
} finally {
|
|
setSchedulingRepetitions(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(repId)
|
|
return next
|
|
})
|
|
}
|
|
}
|
|
|
|
>>>>>>> old-github/main
|
|
// Restore scroll position after scheduledRepetitions changes
|
|
useEffect(() => {
|
|
if (scrollPositionRef.current) {
|
|
// Use a longer delay to ensure the calendar has fully re-rendered
|
|
const timeoutId = setTimeout(() => {
|
|
restoreScrollPosition()
|
|
}, 50)
|
|
|
|
return () => clearTimeout(timeoutId)
|
|
}
|
|
}, [scheduledRepetitions, restoreScrollPosition])
|
|
|
|
// Transform data for horizontal timeline calendar
|
|
const horizontalCalendarData = useMemo(() => {
|
|
// Calculate date range based on zoom level and current start date
|
|
const startDate = new Date(calendarStartDate)
|
|
startDate.setHours(0, 0, 0, 0)
|
|
const endDate = new Date(startDate)
|
|
endDate.setDate(endDate.getDate() + (calendarZoom - 1))
|
|
|
|
// Transform conductor availabilities
|
|
const conductorAvailabilities = conductors
|
|
.filter(c => selectedConductorIds.has(c.id))
|
|
.map((conductor, index) => {
|
|
const conductorName = [conductor.first_name, conductor.last_name].filter(Boolean).join(' ') || conductor.email
|
|
const color = conductorColorMap[conductor.id] || colorPalette[index % colorPalette.length]
|
|
|
|
const availability = availabilityEvents
|
|
.filter(event => event.resource === conductor.id)
|
|
.map(event => ({
|
|
start: new Date(event.start),
|
|
end: new Date(event.end)
|
|
}))
|
|
|
|
return {
|
|
conductorId: conductor.id,
|
|
conductorName,
|
|
color,
|
|
availability
|
|
}
|
|
})
|
|
|
|
// Transform phase markers
|
|
const phaseMarkers: Array<{
|
|
id: string
|
|
repetitionId: string
|
|
experimentId: string
|
|
phase: 'soaking' | 'airdrying' | 'cracking'
|
|
startTime: Date
|
|
assignedConductors: string[]
|
|
<<<<<<< HEAD
|
|
locked: boolean
|
|
=======
|
|
>>>>>>> old-github/main
|
|
}> = []
|
|
|
|
Object.values(scheduledRepetitions).forEach(scheduled => {
|
|
const repId = scheduled.repetitionId
|
|
<<<<<<< HEAD
|
|
=======
|
|
// Only include markers for repetitions that are checked (selected)
|
|
if (!selectedRepetitionIds.has(repId)) {
|
|
return
|
|
}
|
|
|
|
>>>>>>> old-github/main
|
|
const markerIdPrefix = repId
|
|
|
|
if (scheduled.soakingStart) {
|
|
phaseMarkers.push({
|
|
id: `${markerIdPrefix}-soaking`,
|
|
repetitionId: repId,
|
|
experimentId: scheduled.experimentId,
|
|
phase: 'soaking',
|
|
startTime: scheduled.soakingStart,
|
|
<<<<<<< HEAD
|
|
assignedConductors: conductorAssignments[`${markerIdPrefix}-soaking`] || [],
|
|
locked: lockedSchedules.has(repId)
|
|
=======
|
|
assignedConductors: conductorAssignments[`${markerIdPrefix}-soaking`] || []
|
|
>>>>>>> old-github/main
|
|
})
|
|
}
|
|
|
|
if (scheduled.airdryingStart) {
|
|
phaseMarkers.push({
|
|
id: `${markerIdPrefix}-airdrying`,
|
|
repetitionId: repId,
|
|
experimentId: scheduled.experimentId,
|
|
phase: 'airdrying',
|
|
startTime: scheduled.airdryingStart,
|
|
<<<<<<< HEAD
|
|
assignedConductors: conductorAssignments[`${markerIdPrefix}-airdrying`] || [],
|
|
locked: lockedSchedules.has(repId)
|
|
=======
|
|
assignedConductors: conductorAssignments[`${markerIdPrefix}-airdrying`] || []
|
|
>>>>>>> old-github/main
|
|
})
|
|
}
|
|
|
|
if (scheduled.crackingStart) {
|
|
phaseMarkers.push({
|
|
id: `${markerIdPrefix}-cracking`,
|
|
repetitionId: repId,
|
|
experimentId: scheduled.experimentId,
|
|
phase: 'cracking',
|
|
startTime: scheduled.crackingStart,
|
|
<<<<<<< HEAD
|
|
assignedConductors: conductorAssignments[`${markerIdPrefix}-cracking`] || [],
|
|
locked: lockedSchedules.has(repId)
|
|
=======
|
|
assignedConductors: conductorAssignments[`${markerIdPrefix}-cracking`] || []
|
|
>>>>>>> old-github/main
|
|
})
|
|
}
|
|
})
|
|
|
|
return {
|
|
startDate,
|
|
endDate,
|
|
conductorAvailabilities,
|
|
phaseMarkers
|
|
}
|
|
<<<<<<< HEAD
|
|
}, [selectedConductorIds, conductors, conductorColorMap, colorPalette, availabilityEvents, scheduledRepetitions, conductorAssignments, lockedSchedules, calendarStartDate, calendarZoom])
|
|
=======
|
|
}, [selectedConductorIds, conductors, conductorColorMap, colorPalette, availabilityEvents, scheduledRepetitions, conductorAssignments, calendarStartDate, calendarZoom, selectedRepetitionIds])
|
|
|
|
// Build repetition metadata mapping for timeline display
|
|
const repetitionMetadata = useMemo(() => {
|
|
const metadata: Record<string, { phaseName: string; experimentNumber: number; repetitionNumber: number; experimentId: string; isScheduledInDb: boolean }> = {}
|
|
|
|
Object.values(scheduledRepetitions).forEach(scheduled => {
|
|
const repId = scheduled.repetitionId
|
|
// Only include metadata for repetitions that are checked (selected)
|
|
if (!selectedRepetitionIds.has(repId)) {
|
|
return
|
|
}
|
|
|
|
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === scheduled.experimentId)
|
|
const repetition = Object.values(repetitionsByExperiment).flat().find(r => r.id === repId)
|
|
const phase = phases.find(p =>
|
|
Object.values(experimentsByPhase[p.id] || []).some(e => e.id === scheduled.experimentId)
|
|
)
|
|
|
|
if (experiment && repetition && phase) {
|
|
metadata[repId] = {
|
|
phaseName: phase.name,
|
|
experimentNumber: experiment.experiment_number,
|
|
repetitionNumber: repetition.repetition_number,
|
|
experimentId: scheduled.experimentId,
|
|
// Consider a repetition \"scheduled\" in DB if it has a non-null scheduled_date
|
|
isScheduledInDb: Boolean(repetition.scheduled_date)
|
|
}
|
|
}
|
|
})
|
|
|
|
return metadata
|
|
}, [scheduledRepetitions, experimentsByPhase, repetitionsByExperiment, phases, selectedRepetitionIds])
|
|
|
|
// Scroll to repetition in accordion
|
|
const handleScrollToRepetition = useCallback(async (repetitionId: string) => {
|
|
// First, expand the phase if it's collapsed
|
|
const repetition = Object.values(repetitionsByExperiment).flat().find(r => r.id === repetitionId)
|
|
if (repetition) {
|
|
const experiment = Object.values(experimentsByPhase).flat().find(e =>
|
|
(repetitionsByExperiment[e.id] || []).some(r => r.id === repetitionId)
|
|
)
|
|
if (experiment) {
|
|
const phase = phases.find(p =>
|
|
(experimentsByPhase[p.id] || []).some(e => e.id === experiment.id)
|
|
)
|
|
if (phase && !expandedPhaseIds.has(phase.id)) {
|
|
await togglePhaseExpand(phase.id)
|
|
// Wait a bit for the accordion to expand
|
|
await new Promise(resolve => setTimeout(resolve, 300))
|
|
}
|
|
}
|
|
}
|
|
|
|
// Then scroll to the element
|
|
const element = document.getElementById(`repetition-${repetitionId}`)
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
}
|
|
}, [repetitionsByExperiment, experimentsByPhase, phases, expandedPhaseIds, togglePhaseExpand])
|
|
>>>>>>> old-github/main
|
|
|
|
// Handlers for horizontal calendar
|
|
const handleHorizontalMarkerDrag = useCallback((markerId: string, newTime: Date) => {
|
|
console.log('handleHorizontalMarkerDrag called:', markerId, newTime)
|
|
// Marker ID format: ${repId}-${phase} where repId is a UUID with hyphens
|
|
// Split by '-' and take the last segment as phase, rest as repId
|
|
const parts = markerId.split('-')
|
|
const phase = parts[parts.length - 1] as 'soaking' | 'airdrying' | 'cracking'
|
|
const repId = parts.slice(0, -1).join('-')
|
|
console.log('Updating phase timing:', repId, phase, newTime)
|
|
updatePhaseTiming(repId, phase, newTime)
|
|
setRepetitionsWithTimes(prev => new Set(prev).add(repId))
|
|
}, [updatePhaseTiming])
|
|
|
|
const handleHorizontalMarkerAssignConductors = useCallback((markerId: string, conductorIds: string[]) => {
|
|
setConductorAssignments(prev => ({
|
|
...prev,
|
|
[markerId]: conductorIds
|
|
}))
|
|
}, [])
|
|
|
|
<<<<<<< HEAD
|
|
const handleHorizontalMarkerLockToggle = useCallback((markerId: string) => {
|
|
// Marker ID format: ${repId}-${phase} where repId is a UUID with hyphens
|
|
// Split by '-' and take all but the last segment as repId
|
|
const parts = markerId.split('-')
|
|
const repId = parts.slice(0, -1).join('-')
|
|
setLockedSchedules(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(repId)) {
|
|
next.delete(repId)
|
|
} else {
|
|
next.add(repId)
|
|
}
|
|
return next
|
|
})
|
|
}, [])
|
|
=======
|
|
>>>>>>> old-github/main
|
|
|
|
|
|
return (
|
|
<div className="h-full flex flex-col overflow-hidden -m-4 md:-m-6">
|
|
<div className="p-6 flex-shrink-0">
|
|
<button
|
|
onClick={onBack}
|
|
className="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 mb-4"
|
|
>
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Back to Scheduling
|
|
</button>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
|
Schedule Experiment
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
Schedule specific experiment runs and assign team members to upcoming sessions.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="px-6 pb-6 flex-1 min-h-0 overflow-hidden">
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 h-full flex flex-col min-h-0 overflow-hidden">
|
|
{error && (
|
|
<div className="mb-4 text-sm text-red-600 dark:text-red-400">{error}</div>
|
|
)}
|
|
{loading ? (
|
|
<div className="text-center py-12">
|
|
<div className="mx-auto w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-purple-600 dark:text-purple-400 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 12a8 8 0 018-8" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Loading…</h3>
|
|
<p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">Fetching conductors, phases, and experiments.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Horizontal Timeline Calendar - First */}
|
|
<div className="mb-6 flex flex-col flex-1 min-h-0 overflow-hidden">
|
|
<div className="mb-3 flex-shrink-0 flex items-center justify-between flex-wrap gap-3">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Selected Conductors' Availability & Experiment Scheduling</h3>
|
|
|
|
{/* Navigation and Zoom Controls */}
|
|
<div className="flex items-center gap-2">
|
|
{/* Previous Day Button */}
|
|
<button
|
|
onClick={() => {
|
|
const newDate = new Date(calendarStartDate)
|
|
newDate.setDate(newDate.getDate() - 1)
|
|
setCalendarStartDate(newDate)
|
|
}}
|
|
className="px-3 py-1.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded transition-colors flex items-center gap-1"
|
|
title="Previous day"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
<span className="text-sm">Prev</span>
|
|
</button>
|
|
|
|
{/* Date Display */}
|
|
<div className="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded text-sm min-w-[140px] text-center">
|
|
{moment(horizontalCalendarData.startDate).format('MMM D')} - {moment(horizontalCalendarData.endDate).format('MMM D, YYYY')}
|
|
</div>
|
|
|
|
{/* Next Day Button */}
|
|
<button
|
|
onClick={() => {
|
|
const newDate = new Date(calendarStartDate)
|
|
newDate.setDate(newDate.getDate() + 1)
|
|
setCalendarStartDate(newDate)
|
|
}}
|
|
className="px-3 py-1.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded transition-colors flex items-center gap-1"
|
|
title="Next day"
|
|
>
|
|
<span className="text-sm">Next</span>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Zoom Out Button (show more days) */}
|
|
<button
|
|
onClick={() => setCalendarZoom(prev => Math.min(30, prev + 1))}
|
|
disabled={calendarZoom >= 30}
|
|
className="px-3 py-1.5 bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-900/50 disabled:bg-gray-100 disabled:dark:bg-gray-700 disabled:cursor-not-allowed text-blue-700 dark:text-blue-300 rounded transition-colors"
|
|
title="Zoom out (show more days)"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Zoom Level Display */}
|
|
<div className="px-2 py-1.5 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded text-xs min-w-[60px] text-center">
|
|
{calendarZoom} {calendarZoom === 1 ? 'day' : 'days'}
|
|
</div>
|
|
|
|
{/* Zoom In Button (show fewer days) */}
|
|
<button
|
|
onClick={() => setCalendarZoom(prev => Math.max(1, prev - 1))}
|
|
disabled={calendarZoom <= 1}
|
|
className="px-3 py-1.5 bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-900/50 disabled:bg-gray-100 disabled:dark:bg-gray-700 disabled:cursor-not-allowed text-blue-700 dark:text-blue-300 rounded transition-colors"
|
|
title="Zoom in (show fewer days)"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Today Button */}
|
|
<button
|
|
onClick={() => {
|
|
const today = new Date()
|
|
today.setHours(0, 0, 0, 0)
|
|
setCalendarStartDate(today)
|
|
}}
|
|
className="px-3 py-1.5 bg-green-100 dark:bg-green-900/30 hover:bg-green-200 dark:hover:bg-green-900/50 text-green-700 dark:text-green-300 rounded transition-colors text-sm"
|
|
title="Jump to today"
|
|
>
|
|
Today
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 min-h-0 overflow-hidden">
|
|
<HorizontalTimelineCalendar
|
|
startDate={horizontalCalendarData.startDate}
|
|
endDate={horizontalCalendarData.endDate}
|
|
conductorAvailabilities={horizontalCalendarData.conductorAvailabilities}
|
|
phaseMarkers={horizontalCalendarData.phaseMarkers}
|
|
onMarkerDrag={handleHorizontalMarkerDrag}
|
|
onMarkerAssignConductors={handleHorizontalMarkerAssignConductors}
|
|
<<<<<<< HEAD
|
|
onMarkerLockToggle={handleHorizontalMarkerLockToggle}
|
|
=======
|
|
repetitionMetadata={repetitionMetadata}
|
|
onScrollToRepetition={handleScrollToRepetition}
|
|
onScheduleRepetition={scheduleRepetition}
|
|
>>>>>>> old-github/main
|
|
timeStep={15}
|
|
minHour={6}
|
|
maxHour={22}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conductors and Experiment Phases Dropdowns - Second */}
|
|
<div className="grid grid-cols-2 gap-6 flex-shrink-0">
|
|
{/* Left: Conductors with future availability */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Conductors</h2>
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">Select to consider for scheduling</span>
|
|
</div>
|
|
<div className="border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-200 dark:divide-gray-700">
|
|
{conductors.length === 0 ? (
|
|
<div className="p-4 text-sm text-gray-500 dark:text-gray-400">No conductors found.</div>
|
|
) : (
|
|
<div>
|
|
<button
|
|
className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
|
onClick={() => setConductorsExpanded(!conductorsExpanded)}
|
|
>
|
|
<span className="text-sm font-medium text-gray-900 dark:text-white">All Conductors</span>
|
|
<svg className={`w-4 h-4 text-gray-500 transition-transform ${conductorsExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
{conductorsExpanded && (
|
|
<div className="bg-gray-50 dark:bg-gray-800/50 max-h-[420px] overflow-y-auto">
|
|
{/* Select All checkbox */}
|
|
<div className="p-3 border-b border-gray-200 dark:border-gray-600">
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
|
checked={conductors.filter(c => conductorIdsWithFutureAvailability.has(c.id)).every(c => selectedConductorIds.has(c.id)) && conductors.filter(c => conductorIdsWithFutureAvailability.has(c.id)).length > 0}
|
|
onChange={toggleAllConductors}
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Select All Available Conductors</span>
|
|
</label>
|
|
</div>
|
|
{/* Conductors list */}
|
|
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{conductors.map((c, index) => {
|
|
const name = [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email
|
|
const hasFuture = conductorIdsWithFutureAvailability.has(c.id)
|
|
const checked = selectedConductorIds.has(c.id)
|
|
// Use the same color mapping as the calendar (from conductorColorMap)
|
|
const conductorColor = checked ? (conductorColorMap[c.id] || colorPalette[index % colorPalette.length]) : null
|
|
|
|
return (
|
|
<label
|
|
key={c.id}
|
|
className={`flex items-center justify-between p-3 ${!hasFuture ? 'opacity-50' : ''} ${checked ? 'border-l-4' : ''} hover:bg-gray-100 dark:hover:bg-gray-700/30`}
|
|
style={checked && conductorColor ? { borderLeftColor: conductorColor + '60' } : {}}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
type="checkbox"
|
|
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
|
checked={checked}
|
|
onChange={() => toggleConductor(c.id)}
|
|
disabled={!hasFuture}
|
|
/>
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900 dark:text-white">{name}</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">{c.email}</div>
|
|
</div>
|
|
</div>
|
|
<span className={`text-xs ${hasFuture ? 'text-green-600 dark:text-green-400' : 'text-gray-400'}`}>{hasFuture ? 'Available' : 'No availability'}</span>
|
|
</label>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Phases -> Experiments -> Repetitions */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Experiment Phases</h2>
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">Expand and select repetitions</span>
|
|
</div>
|
|
<div className="border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-200 dark:divide-gray-700">
|
|
{phases.length === 0 && (
|
|
<div className="p-4 text-sm text-gray-500 dark:text-gray-400">No phases defined.</div>
|
|
)}
|
|
{phases.map(phase => {
|
|
const expanded = expandedPhaseIds.has(phase.id)
|
|
const experiments = experimentsByPhase[phase.id] || []
|
|
return (
|
|
<div key={phase.id}>
|
|
<button
|
|
className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
|
onClick={() => togglePhaseExpand(phase.id)}
|
|
>
|
|
<span className="text-sm font-medium text-gray-900 dark:text-white">{phase.name}</span>
|
|
<svg className={`w-4 h-4 text-gray-500 transition-transform ${expanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
{expanded && (
|
|
<div className="bg-gray-50 dark:bg-gray-800/50 max-h-96 overflow-y-auto">
|
|
{/* Select All checkbox for this phase */}
|
|
{experiments.length > 0 && (
|
|
<div className="p-3 border-b border-gray-200 dark:border-gray-600">
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
|
checked={experiments.flatMap(exp => repetitionsByExperiment[exp.id] || []).every(rep => selectedRepetitionIds.has(rep.id)) && experiments.flatMap(exp => repetitionsByExperiment[exp.id] || []).length > 0}
|
|
onChange={() => toggleAllRepetitionsInPhase(phase.id)}
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Select All Repetitions in {phase.name}</span>
|
|
</label>
|
|
</div>
|
|
)}
|
|
{experiments.length === 0 && (
|
|
<div className="p-3 text-xs text-gray-500 dark:text-gray-400">No experiments in this phase.</div>
|
|
)}
|
|
{experiments.map(exp => {
|
|
const reps = repetitionsByExperiment[exp.id] || []
|
|
const isCreating = creatingRepetitionsFor.has(exp.id)
|
|
const allRepsCreated = reps.length >= exp.reps_required
|
|
const soaking = soakingByExperiment[exp.id]
|
|
const airdrying = airdryingByExperiment[exp.id]
|
|
|
|
const getSoakDisplay = () => {
|
|
if (soaking) return `${soaking.soaking_duration_minutes}min`
|
|
return '—'
|
|
}
|
|
|
|
const getAirdryDisplay = () => {
|
|
if (airdrying) return `${airdrying.duration_minutes}min`
|
|
return '—'
|
|
}
|
|
|
|
return (
|
|
<div key={exp.id} className="border-t border-gray-200 dark:border-gray-700">
|
|
<div className="px-3 py-2 flex items-center justify-between">
|
|
<div className="text-sm text-gray-900 dark:text-white">
|
|
<span className="font-medium">Exp #{exp.experiment_number}</span>
|
|
<span className="mx-2 text-gray-400">•</span>
|
|
<span className="text-xs text-gray-600 dark:text-gray-300">Soak: {getSoakDisplay()}</span>
|
|
<span className="mx-2 text-gray-400">/</span>
|
|
<span className="text-xs text-gray-600 dark:text-gray-300">Air-dry: {getAirdryDisplay()}</span>
|
|
</div>
|
|
{!allRepsCreated && (
|
|
<button
|
|
onClick={() => createRepetitionsForExperiment(exp.id)}
|
|
disabled={isCreating}
|
|
className="text-xs bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white px-2 py-1 rounded transition-colors"
|
|
>
|
|
{isCreating ? 'Creating...' : 'Add Repetition'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="px-3 pb-2 space-y-2">
|
|
{reps.map(rep => {
|
|
const checked = selectedRepetitionIds.has(rep.id)
|
|
const hasTimes = repetitionsWithTimes.has(rep.id)
|
|
const scheduled = scheduledRepetitions[rep.id]
|
|
<<<<<<< HEAD
|
|
const isLocked = lockedSchedules.has(rep.id)
|
|
const isScheduling = schedulingRepetitions.has(rep.id)
|
|
|
|
return (
|
|
<div key={rep.id} className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-3">
|
|
=======
|
|
const isScheduling = schedulingRepetitions.has(rep.id)
|
|
|
|
// Check if there are any conductor assignments
|
|
const markerIdPrefix = rep.id
|
|
const soakingConductors = conductorAssignments[`${markerIdPrefix}-soaking`] || []
|
|
const airdryingConductors = conductorAssignments[`${markerIdPrefix}-airdrying`] || []
|
|
const crackingConductors = conductorAssignments[`${markerIdPrefix}-cracking`] || []
|
|
const hasAssignments = soakingConductors.length > 0 || airdryingConductors.length > 0 || crackingConductors.length > 0
|
|
|
|
return (
|
|
<div
|
|
key={rep.id}
|
|
id={`repetition-${rep.id}`}
|
|
className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-3"
|
|
>
|
|
>>>>>>> old-github/main
|
|
{/* Checkbox row */}
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
|
checked={checked}
|
|
onChange={() => toggleRepetition(rep.id)}
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Rep {rep.repetition_number}</span>
|
|
</label>
|
|
|
|
<<<<<<< HEAD
|
|
{/* Time points (shown only if has been dropped/moved) */}
|
|
{hasTimes && scheduled && (
|
|
<div className="mt-2 ml-6 text-xs space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<span>💧</span>
|
|
<span>Soaking: {formatTime(scheduled.soakingStart)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span>🌬️</span>
|
|
<span>Airdrying: {formatTime(scheduled.airdryingStart)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span>⚡</span>
|
|
<span>Cracking: {formatTime(scheduled.crackingStart)}</span>
|
|
</div>
|
|
|
|
{/* Lock checkbox and Schedule button */}
|
|
<div className="flex items-center gap-3 mt-3 pt-2 border-t border-gray-200 dark:border-gray-600">
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
className="h-3 w-3 text-blue-600 border-gray-300 rounded"
|
|
checked={isLocked}
|
|
onChange={() => {
|
|
toggleScheduleLock(rep.id)
|
|
}}
|
|
/>
|
|
<span className="text-xs text-gray-600 dark:text-gray-400">
|
|
{isLocked ? '🔒 Locked' : '🔓 Unlocked'}
|
|
</span>
|
|
</label>
|
|
<button
|
|
onClick={() => scheduleRepetition(rep.id, exp.id)}
|
|
disabled={isScheduling || !isLocked}
|
|
className="px-3 py-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
|
|
>
|
|
{isScheduling ? 'Scheduling...' : 'Schedule'}
|
|
</button>
|
|
=======
|
|
{/* Time points (shown whenever the repetition has scheduled times) */}
|
|
{scheduled && (
|
|
<div className="mt-2 ml-6 text-xs space-y-1">
|
|
{(() => {
|
|
const repId = rep.id
|
|
const markerIdPrefix = repId
|
|
|
|
// Get assigned conductors for each phase
|
|
const soakingConductors = conductorAssignments[`${markerIdPrefix}-soaking`] || []
|
|
const airdryingConductors = conductorAssignments[`${markerIdPrefix}-airdrying`] || []
|
|
const crackingConductors = conductorAssignments[`${markerIdPrefix}-cracking`] || []
|
|
|
|
// Helper to get conductor names
|
|
const getConductorNames = (conductorIds: string[]) => {
|
|
return conductorIds.map(id => {
|
|
const conductor = conductors.find(c => c.id === id)
|
|
if (!conductor) return null
|
|
return [conductor.first_name, conductor.last_name].filter(Boolean).join(' ') || conductor.email
|
|
}).filter(Boolean).join(', ')
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span>💧</span>
|
|
<span>Soaking: {formatTime(scheduled.soakingStart)}</span>
|
|
{soakingConductors.length > 0 && (
|
|
<span className="text-blue-600 dark:text-blue-400">
|
|
({getConductorNames(soakingConductors)})
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span>🌬️</span>
|
|
<span>Airdrying: {formatTime(scheduled.airdryingStart)}</span>
|
|
{airdryingConductors.length > 0 && (
|
|
<span className="text-green-600 dark:text-green-400">
|
|
({getConductorNames(airdryingConductors)})
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span>⚡</span>
|
|
<span>Cracking: {formatTime(scheduled.crackingStart)}</span>
|
|
{crackingConductors.length > 0 && (
|
|
<span className="text-orange-600 dark:text-orange-400">
|
|
({getConductorNames(crackingConductors)})
|
|
</span>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
})()}
|
|
|
|
{/* Remove Assignments button and Schedule/Unschedule button */}
|
|
<div className="flex items-center gap-3 mt-3 pt-2 border-t border-gray-200 dark:border-gray-600">
|
|
{hasAssignments && (
|
|
<button
|
|
onClick={() => removeRepetitionAssignments(rep.id)}
|
|
disabled={Boolean(rep.scheduled_date)}
|
|
className="px-3 py-1 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
|
|
title={rep.scheduled_date ? "Unschedule the repetition first before removing assignments" : "Remove all conductor assignments from this repetition"}
|
|
>
|
|
Remove Assignments
|
|
</button>
|
|
)}
|
|
{rep.scheduled_date ? (
|
|
<button
|
|
onClick={() => unscheduleRepetition(rep.id, exp.id)}
|
|
disabled={isScheduling}
|
|
className="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
|
|
>
|
|
{isScheduling ? 'Unscheduling...' : 'Unschedule'}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => scheduleRepetition(rep.id, exp.id)}
|
|
disabled={isScheduling}
|
|
className="px-3 py-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
|
|
>
|
|
{isScheduling ? 'Scheduling...' : 'Schedule'}
|
|
</button>
|
|
)}
|
|
>>>>>>> old-github/main
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
{reps.length === 0 && !isCreating && (
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 col-span-full">No repetitions created. Click "Create Reps" to generate them.</div>
|
|
)}
|
|
{isCreating && (
|
|
<div className="text-xs text-blue-600 dark:text-blue-400 col-span-full flex items-center gap-2">
|
|
<svg className="w-3 h-3 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 12a8 8 0 018-8" />
|
|
</svg>
|
|
Creating {exp.reps_required} repetitions...
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Availability Calendar Component
|
|
function AvailabilityCalendar({ user }: { user: User }) {
|
|
// User context available for future features like saving preferences
|
|
const localizer = momentLocalizer(moment)
|
|
const [events, setEvents] = useState<CalendarEvent[]>([])
|
|
|
|
const [selectedDate, setSelectedDate] = useState<Date | null>(null)
|
|
const [showTimeSlotForm, setShowTimeSlotForm] = useState(false)
|
|
const [newTimeSlot, setNewTimeSlot] = useState({
|
|
startTime: '09:00',
|
|
endTime: '17:00'
|
|
})
|
|
const [currentView, setCurrentView] = useState(Views.MONTH)
|
|
const [currentDate, setCurrentDate] = useState(new Date())
|
|
|
|
// Load availability from DB on mount
|
|
useEffect(() => {
|
|
const loadAvailability = async () => {
|
|
try {
|
|
const records = await availabilityManagement.getMyAvailability()
|
|
const mapped: CalendarEvent[] = records.map(r => ({
|
|
id: r.id,
|
|
title: 'Available',
|
|
start: new Date(r.available_from),
|
|
end: new Date(r.available_to),
|
|
resource: 'available'
|
|
}))
|
|
setEvents(mapped)
|
|
} catch (e) {
|
|
console.error('Failed to load availability', e)
|
|
}
|
|
}
|
|
loadAvailability()
|
|
}, [])
|
|
|
|
const eventStyleGetter = (event: CalendarEvent) => {
|
|
return {
|
|
style: {
|
|
backgroundColor: '#10b981', // green-500 for available
|
|
borderColor: '#10b981',
|
|
color: 'white',
|
|
borderRadius: '4px',
|
|
border: 'none',
|
|
display: 'block'
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => {
|
|
// Set the selected date and show the time slot form
|
|
setSelectedDate(start)
|
|
setShowTimeSlotForm(true)
|
|
|
|
// Pre-fill the form with the selected time range
|
|
const startTime = moment(start).format('HH:mm')
|
|
const endTime = moment(end).format('HH:mm')
|
|
setNewTimeSlot({
|
|
startTime,
|
|
endTime
|
|
})
|
|
}
|
|
|
|
const handleSelectEvent = async (event: CalendarEvent) => {
|
|
if (!window.confirm('Do you want to remove this availability?')) {
|
|
return
|
|
}
|
|
try {
|
|
if (typeof event.id === 'string') {
|
|
await availabilityManagement.deleteAvailability(event.id)
|
|
}
|
|
setEvents(events.filter(e => e.id !== event.id))
|
|
} catch (e: any) {
|
|
alert(e?.message || 'Failed to delete availability.')
|
|
console.error('Failed to delete availability', e)
|
|
}
|
|
}
|
|
|
|
const handleAddTimeSlot = async () => {
|
|
if (!selectedDate) return
|
|
|
|
const [startHour, startMinute] = newTimeSlot.startTime.split(':').map(Number)
|
|
const [endHour, endMinute] = newTimeSlot.endTime.split(':').map(Number)
|
|
|
|
const startDateTime = new Date(selectedDate)
|
|
startDateTime.setHours(startHour, startMinute, 0, 0)
|
|
|
|
const endDateTime = new Date(selectedDate)
|
|
endDateTime.setHours(endHour, endMinute, 0, 0)
|
|
|
|
// Check for overlapping events
|
|
const hasOverlap = events.some(event => {
|
|
const eventStart = new Date(event.start)
|
|
const eventEnd = new Date(event.end)
|
|
return (
|
|
eventStart.toDateString() === selectedDate.toDateString() &&
|
|
((startDateTime >= eventStart && startDateTime < eventEnd) ||
|
|
(endDateTime > eventStart && endDateTime <= eventEnd) ||
|
|
(startDateTime <= eventStart && endDateTime >= eventEnd))
|
|
)
|
|
})
|
|
|
|
if (hasOverlap) {
|
|
alert('This time slot overlaps with an existing availability. Please choose a different time.')
|
|
return
|
|
}
|
|
|
|
try {
|
|
// Persist to DB first to get real ID and server validation
|
|
const created = await availabilityManagement.createAvailability({
|
|
available_from: startDateTime.toISOString(),
|
|
available_to: endDateTime.toISOString()
|
|
})
|
|
|
|
const newEvent: CalendarEvent = {
|
|
id: created.id,
|
|
title: 'Available',
|
|
start: new Date(created.available_from),
|
|
end: new Date(created.available_to),
|
|
resource: 'available'
|
|
}
|
|
|
|
setEvents([...events, newEvent])
|
|
setShowTimeSlotForm(false)
|
|
setSelectedDate(null)
|
|
} catch (e: any) {
|
|
alert(e?.message || 'Failed to save availability. Please try again.')
|
|
console.error('Failed to create availability', e)
|
|
}
|
|
}
|
|
|
|
const handleCancelTimeSlot = () => {
|
|
setShowTimeSlotForm(false)
|
|
setSelectedDate(null)
|
|
}
|
|
|
|
const getEventsForDate = (date: Date) => {
|
|
return events.filter(event => {
|
|
const eventDate = new Date(event.start)
|
|
return eventDate.toDateString() === date.toDateString()
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Calendar Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
|
Availability Calendar
|
|
</h2>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
Click and drag to add availability slots, or click on existing events to remove them. You can add multiple time slots per day.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="flex items-center space-x-4 mt-4 sm:mt-0">
|
|
<div className="flex items-center">
|
|
<div className="w-3 h-3 bg-green-500 rounded mr-2"></div>
|
|
<span className="text-sm text-gray-600 dark:text-gray-400">Available</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Time Slot Form Modal */}
|
|
{showTimeSlotForm && selectedDate && (
|
|
<div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
|
|
<div
|
|
className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
|
|
onClick={handleCancelTimeSlot}
|
|
/>
|
|
<div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-md mx-auto p-4" onClick={(e) => e.stopPropagation()}>
|
|
{/* Close Button */}
|
|
<button
|
|
onClick={handleCancelTimeSlot}
|
|
className="absolute right-3 top-3 z-999 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
|
|
>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
Add Availability for {moment(selectedDate).format('MMMM D, YYYY')}
|
|
</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Start Time
|
|
</label>
|
|
<input
|
|
type="time"
|
|
value={newTimeSlot.startTime}
|
|
onChange={(e) => setNewTimeSlot({ ...newTimeSlot, startTime: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
End Time
|
|
</label>
|
|
<input
|
|
type="time"
|
|
value={newTimeSlot.endTime}
|
|
onChange={(e) => setNewTimeSlot({ ...newTimeSlot, endTime: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Show existing time slots for this date */}
|
|
{getEventsForDate(selectedDate).length > 0 && (
|
|
<div className="mt-4">
|
|
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Existing time slots:
|
|
</h4>
|
|
<div className="space-y-1">
|
|
{getEventsForDate(selectedDate).map(event => (
|
|
<div key={event.id} className="text-sm text-gray-600 dark:text-gray-400">
|
|
{moment(event.start).format('HH:mm')} - {moment(event.end).format('HH:mm')} ({event.title})
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end space-x-3 mt-6">
|
|
<button
|
|
onClick={handleCancelTimeSlot}
|
|
className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleAddTimeSlot}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
Add Time Slot
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Calendar */}
|
|
<div className="h-[600px] flex flex-col">
|
|
<Calendar
|
|
localizer={localizer}
|
|
events={events}
|
|
startAccessor="start"
|
|
endAccessor="end"
|
|
style={{ height: '100%', minHeight: '600px' }}
|
|
view={currentView}
|
|
onView={setCurrentView}
|
|
date={currentDate}
|
|
onNavigate={setCurrentDate}
|
|
views={[Views.MONTH, Views.WEEK, Views.DAY]}
|
|
selectable
|
|
onSelectSlot={handleSelectSlot}
|
|
onSelectEvent={handleSelectEvent}
|
|
eventPropGetter={eventStyleGetter}
|
|
popup
|
|
showMultiDayTimes
|
|
step={30}
|
|
timeslots={2}
|
|
min={new Date(2024, 0, 1, 6, 0)} // 6:00 AM
|
|
max={new Date(2024, 0, 1, 22, 0)} // 10:00 PM
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|