57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import { useEffect } from "react";
|
|
|
|
import TimetableRow from "../TimetableRow/TimetableRow";
|
|
|
|
import _ from "lodash";
|
|
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);
|
|
const pStreet = useKVVStore((state) => state.pStreet);
|
|
const hStreet = useKVVStore((state) => state.hStreet);
|
|
|
|
useEffect(() => {
|
|
fetchTimetable();
|
|
const interval = setInterval(() => {
|
|
fetchTimetable();
|
|
}, 60000);
|
|
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) => (
|
|
<TimetableRow key={index} departure={departure} />
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
<h2>P-Street Departures</h2>
|
|
<table>
|
|
<tbody>
|
|
{pStreetData.map((departure, index) => (
|
|
<TimetableRow key={index} departure={departure} />
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|