update
This commit is contained in:
Joyce
@@ -12,10 +12,19 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
|
||||
|
||||
const DEFAULT_TIMEZONE = 'America/Toronto';
|
||||
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
|
||||
const SLOT_INTERVAL_MINUTES = 15;
|
||||
const SLOTS_PER_HOUR = 60 / SLOT_INTERVAL_MINUTES;
|
||||
const WORKING_HOUR_START = 8; // 8 AM
|
||||
const WORKING_HOUR_END = 18; // 6 PM
|
||||
const ALL_HOURS = Array.from({ length: 24 }, (_, i) => i);
|
||||
const WORKING_HOURS = Array.from({ length: WORKING_HOUR_END - WORKING_HOUR_START + 1 }, (_, i) => i + WORKING_HOUR_START);
|
||||
|
||||
// Generate time slots with hour and minute
|
||||
const ALL_TIME_SLOTS = Array.from({ length: 24 * SLOTS_PER_HOUR }, (_, i) => ({
|
||||
hour: Math.floor(i / SLOTS_PER_HOUR),
|
||||
minute: (i % SLOTS_PER_HOUR) * SLOT_INTERVAL_MINUTES,
|
||||
}));
|
||||
const WORKING_TIME_SLOTS = ALL_TIME_SLOTS.filter(
|
||||
slot => slot.hour >= WORKING_HOUR_START && slot.hour < WORKING_HOUR_END
|
||||
);
|
||||
|
||||
// Helper to check if a slot is in the past or too close (2h buffer)
|
||||
const isSlotTooSoon = (slotDate: number) => {
|
||||
@@ -88,21 +97,15 @@ export const AvailabilityHeatmapV2 = ({
|
||||
secondaryTimezone = DEFAULT_TIMEZONE,
|
||||
}: AvailabilityHeatmapV2Props) => {
|
||||
const [showFullDay, setShowFullDay] = useState(false);
|
||||
const activeHours = showFullDay ? ALL_HOURS : WORKING_HOURS;
|
||||
const activeSlots = showFullDay ? ALL_TIME_SLOTS : WORKING_TIME_SLOTS;
|
||||
|
||||
const weekDates = useMemo(() => getWeekDates(displayTimezone, weekOffset), [displayTimezone, weekOffset]);
|
||||
|
||||
// Pre-compute slots lookup map for O(1) access
|
||||
// Key: YYYY-MM-DD:Hour
|
||||
// Key: YYYY-MM-DD:Hour:Minute
|
||||
const slotsMap = useMemo(() => {
|
||||
const map = new Map<string, TimeSlot>();
|
||||
slots.forEach(slot => {
|
||||
// Assuming slot.start_time is ISO string.
|
||||
// We need to match it to our grid's local time logic.
|
||||
// This part is "flaky" in the original.
|
||||
// The slot comes with a specific absolute time.
|
||||
// We want to place it in the intersection of "Day (in DisplayTZ)" and "Hour (in DisplayTZ)".
|
||||
|
||||
const d = new Date(slot.start_time);
|
||||
// Format to DisplayTZ to find coordinate
|
||||
const formatter = new Intl.DateTimeFormat('en-CA', {
|
||||
@@ -111,22 +114,22 @@ export const AvailabilityHeatmapV2 = ({
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
hour12: false
|
||||
});
|
||||
// "2023-10-25, 14"
|
||||
const parts = formatter.formatToParts(d);
|
||||
const year = parts.find(p => p.type === 'year')?.value;
|
||||
const month = parts.find(p => p.type === 'month')?.value;
|
||||
const day = parts.find(p => p.type === 'day')?.value;
|
||||
const hour = parts.find(p => p.type === 'hour')?.value;
|
||||
const minute = parts.find(p => p.type === 'minute')?.value;
|
||||
|
||||
if (year && month && day && hour) {
|
||||
// Hour in 24h format might be "24" in some locales? No `hour12: false` gives 0-23 usually.
|
||||
// But Intl sometimes returns "24"? No, 0-23.
|
||||
if (year && month && day && hour && minute) {
|
||||
let h = parseInt(hour, 10);
|
||||
let m = parseInt(minute, 10);
|
||||
if (h === 24) h = 0; // Just in case
|
||||
|
||||
const key = `${year}-${month}-${day}:${h}`;
|
||||
const key = `${year}-${month}-${day}:${h}:${m}`;
|
||||
map.set(key, slot);
|
||||
}
|
||||
});
|
||||
@@ -144,12 +147,20 @@ export const AvailabilityHeatmapV2 = ({
|
||||
return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
|
||||
};
|
||||
|
||||
const getSlotForCell = (date: Date, hour: number) => {
|
||||
const key = `${formatDateKey(date)}:${hour}`;
|
||||
const getSlotForCell = (date: Date, hour: number, minute: number) => {
|
||||
const key = `${formatDateKey(date)}:${hour}:${minute}`;
|
||||
return slotsMap.get(key);
|
||||
};
|
||||
|
||||
const formatHour = (hour: number) => {
|
||||
const formatTime = (hour: number, minute: number) => {
|
||||
return new Date(0, 0, 0, hour, minute).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
});
|
||||
};
|
||||
|
||||
const formatHourOnly = (hour: number) => {
|
||||
return new Date(0, 0, 0, hour).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
hour12: true,
|
||||
@@ -290,7 +301,7 @@ export const AvailabilityHeatmapV2 = ({
|
||||
|
||||
{/* Grid Body */}
|
||||
<div className="relative">
|
||||
{activeHours.map((hour) => {
|
||||
{activeSlots.map(({ hour, minute }) => {
|
||||
const isNight = hour < 8 || hour >= 18;
|
||||
|
||||
// Calculate secondary time
|
||||
@@ -298,40 +309,54 @@ export const AvailabilityHeatmapV2 = ({
|
||||
if (secondaryHour >= 24) secondaryHour -= 24;
|
||||
if (secondaryHour < 0) secondaryHour += 24;
|
||||
|
||||
// Calculate end time for display
|
||||
const endMinute = minute + SLOT_INTERVAL_MINUTES;
|
||||
const endHour = hour + Math.floor(endMinute / 60);
|
||||
const endMinuteNormalized = endMinute % 60;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={hour}
|
||||
key={`${hour}-${minute}`}
|
||||
className={cn(
|
||||
"grid group items-stretch transition-colors border-b border-border/30 last:border-0",
|
||||
"grid group items-stretch transition-colors border-border/30 last:border-0",
|
||||
isNight ? "bg-muted/30" : "bg-card",
|
||||
minute === 0 ? "border-t border-border" : "border-t border-border/10",
|
||||
"hover:bg-muted/10"
|
||||
)}
|
||||
style={{ gridTemplateColumns: `${timeColWidth} repeat(5, 1fr)` }}
|
||||
>
|
||||
{/* Time Label - Sticky Left */}
|
||||
<div className={cn(
|
||||
"text-xs text-muted-foreground font-medium text-right pr-4 py-3 flex flex-col items-end justify-center gap-0.5",
|
||||
"text-xs text-muted-foreground font-medium text-right pr-4 py-2 flex flex-col items-end justify-center gap-0.5",
|
||||
"sticky left-0 z-20 border-r border-border/50",
|
||||
isNight ? "bg-muted/30 backdrop-blur-md" : "bg-card"
|
||||
)}>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{isNight ? (
|
||||
<Moon className="w-3 h-3 text-slate-400/50" />
|
||||
{minute === 0 ? (
|
||||
<div className="flex items-center gap-1.5 font-bold text-foreground/80">
|
||||
{isNight ? (
|
||||
<Moon className="w-3 h-3 text-slate-400/50" />
|
||||
) : (
|
||||
<Sun className="w-3 h-3 text-amber-500/50" />
|
||||
)}
|
||||
<span>{formatTime(hour, minute)}</span>
|
||||
</div>
|
||||
) : (
|
||||
<Sun className="w-3 h-3 text-amber-500/50" />
|
||||
<span className="text-[10px] opacity-0 group-hover:opacity-50 transition-opacity">
|
||||
:{minute.toString().padStart(2, '0')}
|
||||
</span>
|
||||
)}
|
||||
<span>{formatHour(hour)}</span>
|
||||
</div>
|
||||
{showSecondaryTimezone && (
|
||||
<span className="text-[10px] text-muted-foreground/60 font-mono">
|
||||
{formatHour(secondaryHour)}
|
||||
{formatTime(secondaryHour, minute)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Days */}
|
||||
{weekDates.map(date => {
|
||||
const slot = getSlotForCell(date, hour);
|
||||
const slot = getSlotForCell(date, hour, minute);
|
||||
const tooSoon = slot ? isSlotTooSoon(new Date(slot.start_time).getTime()) : true;
|
||||
|
||||
// Availability logic
|
||||
@@ -357,17 +382,17 @@ export const AvailabilityHeatmapV2 = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={date.toISOString()} className="p-1 h-[52px] border-r border-border/30 last:border-0">
|
||||
<div key={`${date.toISOString()}-${minute}`} className="p-0.5 h-[32px] border-r border-border/30 last:border-0">
|
||||
{slot ? (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild disabled={tooSoon}>
|
||||
<div className={cn(
|
||||
"w-full h-full rounded-md transition-all duration-200 cursor-pointer flex items-center justify-center group/cell relative overflow-hidden",
|
||||
bgClass,
|
||||
!tooSoon && (isFull || isPartial) ? "scale-[0.98] hover:scale-100 hover:ring-2 ring-primary/20" : ""
|
||||
!tooSoon ? "scale-[0.98] hover:scale-105 hover:z-10 hover:shadow-lg hover:ring-2 ring-primary/20" : ""
|
||||
)}>
|
||||
{/* Mini Indicators for color-blind accessibility or density */}
|
||||
{isFull && <Check className="w-4 h-4 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />}
|
||||
{isFull && <Check className="w-3 h-3 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />}
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align={hour >= 12 ? "end" : "start"}>
|
||||
@@ -378,7 +403,7 @@ export const AvailabilityHeatmapV2 = ({
|
||||
</h4>
|
||||
<div className="text-sm text-muted-foreground mt-1 flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
{formatHour(hour)} - {formatHour(hour + 1)}
|
||||
{formatTime(hour, minute)} - {formatTime(endHour, endMinuteNormalized)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user