add temp and humidity from tent, split departures depending on direction

src/components/DepartureList/DepartureList.tsx

@@ -0,0 +1,66 @@
+import TimetableRow from "@/components/TimetableRow/TimetableRow";
+import type { DepartureType } from "@/types/departureType";
+
+import style from "./style.module.css";
+
+function parseTimetableData(data: DepartureType[]) {
+    const left: DepartureType[] = [];
+    const right: DepartureType[] = [];
+
+    data.forEach((departure) => {
+        if (
+            departure.servingLine?.liErgRiProj?.direction === "R" &&
+            right.length < 5
+        ) {
+            right.push(departure);
+        } else if (left.length < 5) {
+            left.push(departure);
+        }
+
+        // Limit to 5 departures per side
+        if (left.length >= 5 && right.length >= 5) {
+            return;
+        }
+    });
+
+    return {
+        left,
+        right,
+    };
+}
+
+function departureTables(departures: DepartureType[], name: string) {
+    return (
+        <div className={style.departureLists}>
+            <h2>{name} Departures</h2>
+            <table>
+                <tbody>
+                    {departures.map((departure, index) => (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: there is no id
+                        <TimetableRow key={index} departure={departure} />
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}
+
+export default function DepartureList(props: {
+    departures: DepartureType[];
+    name: string;
+}) {
+    const { departures, name } = props;
+
+    if (!departures || departures.length === 0) {
+        return <div>No departures available</div>;
+    }
+
+    const { left, right } = parseTimetableData(departures);
+
+    return (
+        <div className={style.container}>
+            {departureTables(left, name)}
+            {departureTables(right, name)}
+        </div>
+    );
+}

src/components/DepartureList/style.module.css

@@ -0,0 +1,5 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}

src/components/HomeAssistant/HomeAssistant.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useHomeAssistantStore } from "@/store/homeAssistant";
+
+export default function Timetable() {
+    const fetchHomeAssistantData = useHomeAssistantStore((state) => state.fetch);
+    const tentTemperature = useHomeAssistantStore((state) => state.tentTemperature);
+    const tentHumidity = useHomeAssistantStore((state) => state.tentHumidity);
+
+    useEffect(() => {
+        fetchHomeAssistantData();
+        const interval = setInterval(() => {
+            fetchHomeAssistantData();
+        }, 60000);
+        return () => clearInterval(interval);
+    }, [fetchHomeAssistantData]);
+
+    return (
+        <div>
+            <h1>Tent</h1>
+            <p>Temperature: {tentTemperature}°C</p>
+            <p>Humidity: {tentHumidity}%</p>
+        </div>
+    );
+}

src/components/Timetable/Timetable.tsx

@@ -1,18 +1,6 @@
 import { useEffect } from "react";
-
-import TimetableRow from "@/components/TimetableRow/TimetableRow";
+import DepartureList from "@/components/DepartureList/DepartureList";
 import { useKVVStore } from "@/store/kvv";
-import type { DepartureType } from "@/types/departureType";
-
-function parseTimetableData(data: DepartureType[]) {
-    const result = data.map((item) => {
-        return {
-            ...item,
-        };
-    });
-
-    return result;
-}
 
 export default function Timetable() {
     const fetchTimetable = useKVVStore((state) => state.fetch);
@@ -27,30 +15,11 @@ export default function Timetable() {
         return () => clearInterval(interval);
     }, [fetchTimetable]);
 
-    const hStreetData = parseTimetableData(hStreet.departureList || []);
-    const pStreetData = parseTimetableData(pStreet.departureList || []);
-
     return (
         <div>
             <h1>Timetable</h1>
-            <h2>H-Street Departures</h2>
-            <table>
-                <tbody>
-                    {hStreetData.map((departure, index) => (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: there is no id
-                        <TimetableRow key={index} departure={departure} />
-                    ))}
-                </tbody>
-            </table>
-            <h2>P-Street Departures</h2>
-            <table>
-                <tbody>
-                    {pStreetData.map((departure, index) => (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: there is no id
-                        <TimetableRow key={index} departure={departure} />
-                    ))}
-                </tbody>
-            </table>
+            <DepartureList departures={pStreet.departureList} name="P-Street" />
+            <DepartureList departures={hStreet.departureList} name="H-Street" />
         </div>
     );
 }

src/components/TimetableRow/TimetableRow.tsx

@@ -14,7 +14,6 @@ export default function TimetableRow({
     return (
         <tr className={styles.timetableRow}>
             <td>{dateTimeString}</td>
-            <td>{departure.servingLine.name}</td>
             <td>{departure.servingLine.number}</td>
             <td>({departure.servingLine.direction})</td>
         </tr>