AI removed features....

2026-05-29 09:55:59 +02:00
parent 18a767f697
commit 929b75dfe3
6 changed files with 257 additions and 108 deletions
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo, useState, useEffect, Fragment } from 'react';
 import { useStats } from '../../hooks/useStats';
 import { timeToMinutes } from '../../utils/time';

@@ -9,8 +9,26 @@ interface TimetableProps {
  day_end: string;
 }

-const Timetable: React.FC<TimetableProps> = ({ from_date, to_date, day_start, day_end }) => {
+function getDayName(dateStr: string) {
+  return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short' });
+}
+
+function formatTimeLabel(mins: number) {
+  const hours = Math.floor(mins / 60);
+  const minutes = mins % 60;
+  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+}
+
+const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) => {
  const { timetable, isLoading } = useStats(from_date, to_date, day_start, day_end);
+  const [selectedDayIndex, setSelectedDayIndex] = useState(0);
+  const [windowWidth, setWindowWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);

  const days = useMemo(() => {
    const start = new Date(from_date + 'T00:00:00');
@@ -21,29 +39,57 @@ const Timetable: React.FC<TimetableProps> = ({ from_date, to_date, day_start, da
      result.push(current.toLocaleDateString('en-CA'));
      current.setDate(current.getDate() + 1);
    }
-    return result;
+    return result; // Chronological (oldest to newest)
  }, [from_date, to_date]);

+  const reversedDays = useMemo(() => [...days].reverse(), [days]);
+
  const timeSteps = useMemo(() => {
-    return Array.from({ length: 24 }, (_, i) => i * 60);
+    return Array.from({ length: 96 }, (_, i) => i * 15);
  }, []);

-  if (isLoading) return <div className="text-center p-4">Loading timetable...</div>;
-  if (!timetable?.slots || timetable.slots.length === 0) {
-    return <div className="text-center p-4 text-gray-500">No data available for this period.</div>;
-  }
+  const tier = useMemo(() => {
+    if (windowWidth >= 768) return 'desktop';
+    if (windowWidth >= 400) return 'medium';
+    return 'small';
+  }, [windowWidth]);

-  const getDayName = (dateStr: string) => {
-    return new Date(dateStr).toLocaleDateString('en-US', { weekday: 'short' });
-  };
+  const { visibleDays, tabGroups } = useMemo(() => {
+    if (tier === 'desktop') {
+      return { visibleDays: days, tabGroups: [] };
+    }

-  const formatTimeLabel = (mins: number) => {
-    const hours = Math.floor(mins / 60);
-    const minutes = mins % 60;
-    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
-  };
+    const activeDays = reversedDays;
+    const selectedDay = days[selectedDayIndex];
+    const indexInActiveDays = activeDays.indexOf(selectedDay);
+
+    if (tier === 'medium') {
+      const groups = [];
+      for (let i = 0; i < activeDays.length; i += 3) {
+        groups.push({
+          label: `${getDayName(activeDays[i])} - ${getDayName(activeDays[Math.min(i + 2, activeDays.length - 1)])}`,
+          startIndex: i,
+        });
+      }
+      return {
+        visibleDays: activeDays.slice(indexInActiveDays, indexInActiveDays + 3),
+        tabGroups: groups,
+      };
+    }
+
+    // Small tier (single day)
+    const groups = activeDays.map((day, idx) => ({
+      label: getDayName(day),
+      startIndex: idx,
+    }));
+    return {
+      visibleDays: activeDays.slice(indexInActiveDays, indexInActiveDays + 1),
+      tabGroups: groups,
+    };
+  }, [tier, days, reversedDays, selectedDayIndex]);

  const isSleepingInInterval = (date: string, intervalStart: number, intervalEnd: number) => {
+    if (!timetable?.slots) return false;
    return timetable.slots.some((slot) => {
      if (slot.date !== date || !slot.sleeping) return false;

@@ -51,7 +97,6 @@ const Timetable: React.FC<TimetableProps> = ({ from_date, to_date, day_start, da
      const sEnd = timeToMinutes(slot.slot_end);
      
      if (sEnd <= sStart) {
-        // Handle wrap-around within a single slot if it happens (though unlikely for 15m segments)
        const overlap1 = Math.max(sStart, intervalStart) < Math.min(1440, intervalEnd);
        const overlap2 = Math.max(0, intervalStart) < Math.min(sEnd, intervalEnd);
        return overlap1 || overlap2;
@@ -61,71 +106,114 @@ const Timetable: React.FC<TimetableProps> = ({ from_date, to_date, day_start, da
    });
  };

+  const handleTabClick = (startIndexInReversed: number) => {
+    const day = reversedDays[startIndexInReversed];
+    const indexInDays = days.indexOf(day);
+    setSelectedDayIndex(indexInDays);
+  };
+
  const currentMins = new Date().getHours() * 60 + new Date().getMinutes();
-  const rowHeightPx = 32; // h-8 is 2rem, which is 32px in standard Tailwind config
+  const rowHeightPx = 8;
+
+  if (isLoading) return <div className="text-center p-4">Loading timetable...</div>;
+  if (!timetable?.slots || timetable.slots.length === 0) {
+    return <div className="text-center p-4 text-gray-500">No data available for this period.</div>;
+  }

  return (
-    <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200 overflow-x-auto">
+    <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
      <h3 className="text-lg font-semibold mb-4 text-gray-800">Sleep Timetable</h3>
-      <div className="min-w-[600px] flex flex-col gap-px">
+
+      {/* Tab Selector (Mobile & Medium) */}
+      {(tier === 'medium' || tier === 'small') && (
+        <div className="flex overflow-x-auto gap-2 mb-4 pb-2 no-scrollbar">
+          {tabGroups.map((group, idx) => {
+            const isActive = selectedDayIndex === days.indexOf(reversedDays[group.startIndex]);
+
+            return (
+              <button
+                key={idx}
+                onClick={() => handleTabClick(group.startIndex)}
+                className={`px-4 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
+                  isActive
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}
+              >
+                {group.label}
+              </button>
+            );
+          })}
+        </div >
+      )}
+
+      {/* Grid Container */}
+      <div className="flex flex-col gap-px">
        {/* Header Row */}
        <div 
          className="grid" 
          style={{ 
-            gridTemplateColumns: `4rem repeat(${days.length}, minmax(40px, 1fr))` 
+            gridTemplateColumns: tier === 'desktop' 
+              ? `4rem repeat(${days.length}, minmax(40px, 1fr))`
+              : tier === 'medium'
+                ? `4rem repeat(3, 1fr)`
+                : `4rem 1fr`
          }}
        >
-          <div className="h-8" /> {/* Empty corner cell */}
-          {days.map((day) => (
-            <div key={day} className="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-8">
+          <div className="h-2" /> {/* Empty corner cell */}
+          {visibleDays.map((day) => (
+            <div key={day} className="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-2">
              {getDayName(day)}
-            </div>
+            </div >
          ))}
-        </div>
+        </div >

        {/* Time Grid Container */}
        <div className="relative">
          <div 
            className="grid" 
            style={{ 
-              gridTemplateColumns: `4rem repeat(${days.length}, minmax(40px, 1fr))` 
+              gridTemplateColumns: tier === 'desktop' 
+                ? `4rem repeat(${days.length}, minmax(40px, 1fr))`
+                : tier === 'medium'
+                  ? `4rem repeat(3, 1fr)`
+                  : `4rem 1fr`
            }}
          >
            {/* Time Rows */}
            {timeSteps.map((step) => (
-              <React.Fragment key={step}>
+              <Fragment key={step}>
                {/* Time Label */}
-                <div className="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8">
+                <div className="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-2">
                  {step % 60 === 0 ? formatTimeLabel(step) : ''}
-                </div>
+                </div >
                
                {/* Grid Cells */}
-                {days.map((day) => {
-                  const sleeping = isSleepingInInterval(day, step, step + 60);
+                {visibleDays.map((day) => {
+                  const sleeping = isSleepingInInterval(day, step, step + 15);
                  return (
                    <div
                      key={`${day}-${step}`}
-                      className={`h-8 w-full ${sleeping ? 'bg-green-500' : 'bg-gray-50'}`}
+                      className={`h-2 w-full border border-gray-100 ${sleeping ? 'bg-green-500' : 'bg-gray-50'}`}
                    />
                  );
                })}
-              </React.Fragment>
+              </Fragment>
            ))}

            {/* Red Marker Line */}
            <div 
              className="absolute left-[4rem] right-0 h-0.5 bg-red-500 pointer-events-none z-10"
              style={{ 
-                top: `${(currentMins / 1440) * (24 * rowHeightPx)}px`,
+                top: `${(currentMins / 1440) * (timeSteps.length * rowHeightPx)}px`,
                transform: 'translateY(-50%)'
              }}
            />
-          </div>
-        </div>
-      </div>
-    </div>
+          </div >
+        </div >
+      </div >
+    </div >
  );
 };

-export default Timetable;
-
+export default Timetable;