Add end of the day. (#1250)

Added end of the day to schedule.

![image](https://github.com/user-attachments/assets/40bf6be4-d8f2-4301-983c-0e9693bd504b)

Author: nikoshell

src/components/schedule/break.astro

@@ -3,12 +3,13 @@ export interface Props {
   time: string;
   title: string;
   style?: any;
+  className?: string;
 }
 
-const { time, title, style }: Props = Astro.props;
+const { time, title, style, className }: Props = Astro.props;
 ---
 
-<div class="break" style={style} aria-label=`${time} ${title}` >
+<div class={className? className: "break"} style={style} aria-label=`${time} ${title}` >
   {time}{" "}
   {title}
   <span class="sr-only">{time} {title}</span>

src/components/schedule/day.astro

@@ -322,6 +322,19 @@ posters.forEach((poster) => {
 
 const date = parseISO(dayName);
 const dateText = format(date, "eeee - do MMMM");
+
+
+
+
+  const lastEndTime = Math.max(
+    ...slots.flatMap((slot) => slot.sessions.map((s) => timeToNumber(s.endTime)))
+  );
+
+  const endStart = numberToTime(lastEndTime);
+  const endStartDate = addMinutes(parseISO(dayName), lastEndTime);
+  const endEndDate = addMinutes(endStartDate, 10);
+  const endEnd = numberToTime(lastEndTime + 10);
+
 ---
 
 <div class="day"
@@ -362,7 +375,7 @@ const dateText = format(date, "eeee - do MMMM");
                 <h2>{format(slot.start, "HH:mm")}</h2>
               </div>
 
-              {sessionsByTime[slot.startTime]
+              {(sessionsByTime[slot.startTime] ?? [])
                 .sort(sortSessionByRooms)
                 .map((session) => {
                   const style = getSessionStyle(session);
@@ -407,7 +420,14 @@ const dateText = format(date, "eeee - do MMMM");
             </div>
           ))
         }
+
       </div>
+
+      <Break
+        title="End of the Day"
+        time={endStart}
+        className="day-end"
+      />
     </div>
     <div class="h-12"></div>
   </div>
@@ -426,6 +446,19 @@ const dateText = format(date, "eeee - do MMMM");
 {
   width: 100%;
 }
+
+
+  :global(.day-end) {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-items: center;
+  background-color: #FCFBFA;
+  border-radius: 10px;
+  margin: 10px 1.5rem;
+  padding:2px 8px;
+  font-size: 0.8rem;
+}
   :global(body) {
   }
 
@@ -548,6 +581,14 @@ const dateText = format(date, "eeee - do MMMM");
       grid-column: var(--col-start) / var(--col-end);
     }
 
+
+    :global(.day-end){
+      font-size: 1.2rem;
+      margin: 2px;
+      padding: 8px;
+    }
+
+
     .time {
       padding: 8px;
       grid-column: 1 / 2;

src/pages/session/[slug].astro

@@ -98,6 +98,20 @@ const nextSessionsOrdered = sameRoomNextSession
           </>
         )
       }
+      {
+        entry.data.end && (
+          <>
+            <dt class="font-bold">End:</dt>
+            <dd>
+              {formatInTimeZone(
+                entry.data.end,
+                "Europe/Prague",
+                "HH:mm 'on' dd MMMM yyyy",
+              )}
+            </dd>
+          </>
+        )
+      }
       <dt class="font-bold">Duration:</dt>
       <dd>{entry.data.duration} minutes</dd>
     </dl>