fix: removed excessive time slots

gdgbari · Sep 18, 2024 · 6b7d5de · 6b7d5de
1 parent 36c3fbe
commit 6b7d5de
Showing 1 changed file with 13 additions and 43 deletions.
diff --git a/src/components/Schedule/Pages/ScheduleTab.astro b/src/components/Schedule/Pages/ScheduleTab.astro
@@ -12,29 +12,29 @@ interface Props {
 const lang = getLangFromUrl(Astro.url);
 const { schedule, rooms } = Astro.props;
 
-const calcSlotsTaken = (s, tsr, ts_idx) => {
+const calcSlotsTaken = (timeSlots, tsr, ts_idx) => {
     const endDate = new Date(tsr.session.endsAt);
     endDate.setSeconds(0)
     endDate.setMilliseconds(0)
     //Calculate the space to take (how many timeSlot takes this session (until a service session))
     let session_len = 1;
     let last_is_service = false;
-    for (let i = ts_idx+1; i < s.timeSlots.length; i++){
+    for (let i = ts_idx+1; i < timeSlots.length; i++){
       //No sessions
-      if (s.timeSlots[i].rooms.length == 0) continue
+      if (timeSlots[i].rooms.length == 0) continue
       //Take time from one of the sessions
       //Get next start date
-      const next_date = new Date(s.timeSlots[i].rooms[0].session.startsAt)
+      const next_date = new Date(timeSlots[i].rooms[0].session.startsAt)
       next_date.setSeconds(0)
       next_date.setMilliseconds(0)
       //If it's a service session, can't take this space
-      if (s.timeSlots[i].rooms.some( (tsr) => tsr.session.isServiceSession)){
+      if (timeSlots[i].rooms.some( (tsr) => tsr.session.isServiceSession)){
         last_is_service = true
         continue //We need to check if replicate this session for the next timeSlot that is not a service session
       }
       if (last_is_service){ //We stopped at a service session and need to check if replicate this session in next timeSlots
         if (next_date < endDate){
-          s.timeSlots[i].rooms.push(tsr) //Replicate
+          timeSlots[i].rooms.push(tsr) //Replicate
         }
         break
       }
@@ -48,13 +48,15 @@ const calcSlotsTaken = (s, tsr, ts_idx) => {
     return session_len
   }
 
+  const isServiceTimeSlot = (ts) => ts.rooms.some((tsr) => tsr.session.isServiceSession);
 
 ---
 <div>
   {schedule.map((s) => {
         const roomsSelected = rooms?s.rooms.filter((r) => rooms.includes(r.id)):s.rooms
+        const timeSlotSelected = s.timeSlots.filter((ts) => ts.rooms.some((tsr) => roomsSelected.map(r => r.id).includes(tsr.id)) || isServiceTimeSlot(ts));
         const totalScheduleCols = roomsSelected.length;
-        const totalScheduleRows = s.timeSlots.length;
+        const totalScheduleRows = timeSlotSelected.length;
         let skipPadding: {[key:string]:number} = roomsSelected.map((room) => ({[room.id]:0})).reduce((a,b)=>({...a,...b}),{});
         return <>
           <div class="mb-5">
@@ -66,15 +68,13 @@ const calcSlotsTaken = (s, tsr, ts_idx) => {
               }))}
             </p>
             {/* Some classes are created manually due to tilewind issues */}
-            <div class={`grid grid-flow-row grid-cols-layout-${totalScheduleCols} grid-rows-layout-${totalScheduleRows} grid-cols-1 gap-4`} >
-              {s.timeSlots.map((ts,ts_idx) => {
+            <div class={`grid grid-flow-row grid-cols-layout-${totalScheduleCols} grid-cols-1 gap-4`} >
+              {timeSlotSelected.map((ts,ts_idx) => {
 
-                const hasServiceSession = ts.rooms.some(
-                  (tsr) => tsr.session.isServiceSession,
-                );
+                const hasServiceSession = isServiceTimeSlot(ts)
 
                 const sessionsInTimeSlot = ts.rooms.map((tsr) => {
-                  const slots = !hasServiceSession? calcSlotsTaken(s, tsr, ts_idx) : 1;
+                  const slots = !hasServiceSession? calcSlotsTaken(timeSlotSelected, tsr, ts_idx) : 1;
                   if (slots > 1){
                     skipPadding[tsr.id.toString()] = slots-1
                   }
@@ -122,63 +122,33 @@ const calcSlotsTaken = (s, tsr, ts_idx) => {
         .grid-cols-layout-1 {
             grid-template-columns: 90px repeat(1, minmax(0, 1fr));
         }
-        .grid-rows-layout-1 {
-            grid-template-rows: repeat(1, minmax(0, 1fr));
-        }
         .grid-cols-layout-2 {
             grid-template-columns: 90px repeat(2, minmax(0, 1fr));
         }
-        .grid-rows-layout-2 {
-            grid-template-rows: repeat(2, minmax(0, 1fr));
-        }
         .grid-cols-layout-3 {
             grid-template-columns: 90px repeat(3, minmax(0, 1fr));
         }
-        .grid-rows-layout-3 {
-            grid-template-rows: repeat(3, minmax(0, 1fr));
-        }
         .grid-cols-layout-4 {
             grid-template-columns: 90px repeat(4, minmax(0, 1fr));
         }
-        .grid-rows-layout-4 {
-            grid-template-rows: repeat(4, minmax(0, 1fr));
-        }
         .grid-cols-layout-5 {
             grid-template-columns: 90px repeat(5, minmax(0, 1fr));
         }
-        .grid-rows-layout-5 {
-            grid-template-rows: repeat(5, minmax(0, 1fr));
-        }
         .grid-cols-layout-6 {
             grid-template-columns: 90px repeat(6, minmax(0, 1fr));
         }
-        .grid-rows-layout-6 {
-            grid-template-rows: repeat(6, minmax(0, 1fr));
-        }
         .grid-cols-layout-7 {
             grid-template-columns: 90px repeat(7, minmax(0, 1fr));
         }
-        .grid-rows-layout-7 {
-            grid-template-rows: repeat(7, minmax(0, 1fr));
-        }
         .grid-cols-layout-8 {
             grid-template-columns: 90px repeat(8, minmax(0, 1fr));
         }
-        .grid-rows-layout-8 {
-            grid-template-rows: repeat(8, minmax(0, 1fr));
-        }
         .grid-cols-layout-9 {
             grid-template-columns: 90px repeat(9, minmax(0, 1fr));
         }
-        .grid-rows-layout-9 {
-            grid-template-rows: repeat(9, minmax(0, 1fr));
-        }
         .grid-cols-layout-10 {
             grid-template-columns: 90px repeat(10, minmax(0, 1fr));
         }
-        .grid-rows-layout-10 {
-            grid-template-rows: repeat(10, minmax(0, 1fr));
-        }
     }
     </style> 
 </div>