add flatastic api

.env

@@ -0,0 +1 @@
+VITE_FLATTASTIC_API_KEY="Lrq8tXOeK4aA1563zvS1soZZElKoomz2"

bun.lock

@@ -6,10 +6,12 @@
       "dependencies": {
         "@reduxjs/toolkit": "^2.8.2",
         "@types/lodash": "^4.17.20",
+        "@types/node": "^24.1.0",
         "lodash": "^4.17.21",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-redux": "^9.2.0",
+        "redux-persist": "^6.0.0",
       },
       "devDependencies": {
         "@eslint/js": "^9.31.0",
@@ -204,6 +206,8 @@
 
     "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],
 
+    "@types/node": ["@types/node@24.1.0", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w=="],
+
     "@types/react": ["@types/react@19.1.8", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g=="],
 
     "@types/react-dom": ["@types/react-dom@19.1.6", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw=="],
@@ -616,6 +620,8 @@
 
     "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
 
+    "redux-persist": ["redux-persist@6.0.0", "", { "peerDependencies": { "redux": ">4.0.0" } }, "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ=="],
+
     "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
 
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
@@ -712,6 +718,8 @@
 
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
 
+    "undici-types": ["undici-types@7.8.0", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="],
+
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
     "use-sync-external-store": ["use-sync-external-store@1.5.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A=="],

package.json

@@ -12,10 +12,12 @@
     "dependencies": {
         "@reduxjs/toolkit": "^2.8.2",
         "@types/lodash": "^4.17.20",
+        "@types/node": "^24.1.0",
         "lodash": "^4.17.21",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "react-redux": "^9.2.0"
+        "react-redux": "^9.2.0",
+        "redux-persist": "^6.0.0"
     },
     "devDependencies": {
         "@eslint/js": "^9.31.0",

src/App.tsx

@@ -4,16 +4,20 @@ import { useDispatch } from "react-redux";
 import { fetchTimetable } from "./store/index";
 import { useEffect } from "react";
 import { type AppDispatch } from "./store/index";
+import Flatastic from "./components/Flatastic/Flatastic";
+import fetchFlatasticChores from "./store/thunks/fetchFlatasticChores";
 
 function App() {
     const dispatch = useDispatch<AppDispatch>();
     // Fetch the timetable data when the app loads
     useEffect(() => {
         dispatch(fetchTimetable());
+        dispatch(fetchFlatasticChores());
     }, [dispatch]);
     return (
         <>
             <Timetable />
+            <Flatastic />
         </>
     );
 }

src/api/api.ts

@@ -1,9 +1,13 @@
-function callApi(stopId: number) {
-    const API_URL = `https://projekte.kvv-efa.de/sl3-alone/XSLT_DM_REQUEST?outputFormat=JSON&coordOutputFormat=WGS84[dd.ddddd]&depType=stopEvents&locationServerActive=1&mode=direct&name_dm=${stopId}&type_dm=stop&useOnlyStops=1&useRealtime=1&limit=6&line=kvv%253A22301%253AE%253AH%253As25&line=kvv%253A21012%253AE%253AH%253As25&line=kvv%253A21012%253AE%253AR%253As25&line=kvv%253A22305%253AE%253AH%253As25`;
+async function callApi(stopId: number) {
+    const API_URL = `https://projekte.kvv-efa.de/sl3-alone/XSLT_DM_REQUEST?outputFormat=JSON&coordOutputFormat=WGS84[dd.ddddd]&depType=stopEvents&locationServerActive=1&mode=direct&name_dm=${stopId}&type_dm=stop&useOnlyStops=1&useRealtime=1&limit=6&line=kvv:22301:E:H:s25&line=kvv:21012:E:H:s25&line=kvv:21012:E:R:s25&line=kvv:22305:E:H:s25`;
 
-    return fetch(API_URL, {
+    const data = await fetch(API_URL, {
         method: "GET",
     });
+    if (!data.ok) {
+        throw new Error(`HTTP error! status: ${data.status}`);
+    }
+    return data;
 }
 
 export { callApi };

src/api/flatastic.ts

@@ -0,0 +1,55 @@
+
+class Flatastic {
+    private apikey: string;
+
+    constructor(apikey: string) {
+        this.apikey = apikey;
+    }
+
+    async request(url: string, option: any, cb: (info: any) => void) {
+        const headers = {
+            "accept": "application/json, text/plain, */*",
+            "accept-language": "de-CH,de;q=0.9,en-US;q=0.8,en-CH;q=0.7,en;q=0.6,ar-JO;q=0.5,ar;q=0.4,de-DE;q=0.3",
+            // "cache-control": "no-cache",
+            // "pragma": "no-cache",
+            // "sec-fetch-dest": "empty",
+            // "sec-fetch-mode": "cors",
+            // "sec-fetch-site": "same-site",
+            "x-api-key": this.apikey,
+            "x-api-version": "2.0.0",
+            "x-client-version": "2.3.20"
+        };
+        try {
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: headers
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const info = await response.json();
+            cb(info);
+        } catch (error) {
+            let message = 'Unknown error';
+            if (error instanceof Error) {
+                message = error.message;
+            }
+            cb({ error: message });
+        }
+    }
+
+    getShoppingList(callback: (info: any) => void) {
+        this.request('https://api.flatastic-app.com/index.php/api/shoppinglist', {}, callback);
+    }
+
+    getTaskList(callback: (info: any) => void) {
+        this.request('https://api.flatastic-app.com/index.php/api/chores', {}, callback);
+    }
+
+    getInformation(callback: (info: any) => void) {
+        this.request('https://api.flatastic-app.com/index.php/api/wg', {}, callback);
+    }
+}
+
+export { Flatastic };
+export default Flatastic;

src/components/Flatastic/Flatastic.tsx

@@ -0,0 +1,21 @@
+import fetchFlatasticChores from "@/store/thunks/fetchFlatasticChores";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { type AppDispatch } from "@/store/index";
+
+export default function Flatastic() {
+    const dispatch = useDispatch<AppDispatch>();
+    useEffect(() => {
+        const intervalID = setInterval(() => {
+            dispatch(fetchFlatasticChores());
+        }, 60000); // Fetch every 60 seconds
+
+        return () => clearInterval(intervalID);
+    }, []);
+
+    return (
+        <p>
+            Flatastic API Key: {import.meta.env.VITE_FLATTASTIC_API_KEY || "Not set"}
+        </p>
+    )
+}

src/components/Timetable/Timetable.tsx

@@ -1,23 +1,19 @@
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchTimetable, type AppDispatch, type AppState } from "@/store/index";
-import { type DepartureList } from "@/types/types";
+import {
+    fetchTimetable,
+    type AppDispatch,
+    type AppState,
+} from "../../store/index";
+import { type DepartureList } from "../../types/types";
+import TimetableRow from "../TimetableRow/TimetableRow";
 
 import _ from "lodash";
 
 function parseTimetableData(data: DepartureList[]) {
     const result = data.map((item) => {
-        const { dateTime } = item;
-        const hour = _.padStart(_.toString(dateTime.hour), 2, "0");
-        const minute = _.padStart(_.toString(dateTime.minute), 2, "0");
-        const dateTimeString = `${hour}:${minute}`;
         return {
-            dateTimeString,
-            servingLine: {
-                number: item.servingLine.number,
-                name: item.servingLine.name,
-                direction: item.servingLine.direction,
-            },
+            ...item,
         };
     });
 
@@ -47,31 +43,21 @@ export default function Timetable() {
         <div>
             <h1>Timetable</h1>
             <h2>H-Street Departures</h2>
-            <ul style={{ textAlign: "left" }}>
+            <table>
+                <tbody>
                 {hStreetData.map((departure, index) => (
-                    <li key={index}>
-                        {departure.dateTimeString} -{" "}
-                        {departure.servingLine?.name || "Unknown Line"}{" "}
-                        {departure.servingLine?.number || "Unknown Number"} (
-                        {departure.servingLine?.direction ||
-                            "Unknown Direction"}
-                        )
-                    </li>
+                    <TimetableRow key={index} departure={departure} />
                 ))}
-            </ul>
+                </tbody>
+            </table>
             <h2>P-Street Departures</h2>
-            <ul style={{ textAlign: "left" }}>
+            <table>
+                <tbody>
                 {pStreetData.map((departure, index) => (
-                    <li key={index}>
-                        {departure.dateTimeString} -{" "}
-                        {departure.servingLine?.name || "Unknown Line"}{" "}
-                        {departure.servingLine?.number || "Unknown Number"} (
-                        {departure.servingLine?.direction ||
-                            "Unknown Direction"}
-                        )
-                    </li>
+                    <TimetableRow key={index} departure={departure} />
                 ))}
-            </ul>
+                </tbody>
+            </table>
         </div>
     );
 }

src/components/TimetableRow/TimetableRow.tsx

@@ -0,0 +1,23 @@
+import { type DepartureList } from "../../types/types";
+
+import styles from "./style.module.css";
+
+export default function TimetableRow({
+    departure,
+}: {
+    departure: DepartureList;
+}) {
+    const hour = String(departure.dateTime.hour).padStart(2, "0");
+    const minute = String(departure.dateTime.minute).padStart(2, "0");
+    const dateTimeString = `${hour}:${minute}`;
+    return (
+        <>
+            <tr className={styles.timetableRow}>
+                <td>{dateTimeString}</td>
+                <td>{departure.servingLine.name}</td>
+                <td>{departure.servingLine.number}</td>
+                <td>({departure.servingLine.direction})</td>
+            </tr>
+        </>
+    );
+}

src/components/TimetableRow/style.module.css

@@ -0,0 +1,3 @@
+.timetableRow {
+    text-align: left;
+}

src/main.tsx

@@ -1,14 +1,21 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
+import { PersistGate } from 'redux-persist/integration/react'
+import { persistStore } from 'redux-persist'
+
 import "./index.css";
 import App from "./App.tsx";
 import store from "./store/index.ts";
 
+let persistor = persistStore(store)
+
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
         <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
                 <App />
+            </PersistGate>
         </Provider>
     </StrictMode>,
 );

src/store/index.ts

@@ -1,48 +1,38 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { createSlice } from "@reduxjs/toolkit";
-import { createAsyncThunk } from "@reduxjs/toolkit";
-import { callApi } from "@/api/api";
-import { type DepartureList } from "@/types/types";
+import { persistReducer } from "redux-persist";
+import timetableSlice from "./slices/timetableSlice";
+import flatasticChoresSlice from "./slices/flatastiucChoresSlice";
+import fetchTimetable from "./thunks/fetchTimetable";
+import persistConfig from "./persist/persistConfig";
 
-const fetchTimetable = createAsyncThunk("timetable/phillipStreet", async () => {
-    const hStreetStopId = 7000044;
-    const pStreetStopId = 7000045;
+const persistedTimetableReducer = persistReducer(
+    persistConfig,
+    timetableSlice.reducer
+);
 
-    const hStreetData = await callApi(hStreetStopId);
-    const pStreetData = await callApi(pStreetStopId);
-
-    const hStreetJson = await hStreetData.json();
-    const pStreetJson = await pStreetData.json();
-
-    return {
-        hStreet: hStreetJson,
-        pStreet: pStreetJson,
-    };
-});
-
-const timetableSlice = createSlice({
-    name: "timetable",
-    initialState: {
-        hStreet: {
-            departureList: [] as DepartureList[],
-        },
-        pStreet: {
-            departureList: [] as DepartureList[],
-        },
-    },
-    reducers: {},
-    extraReducers: (builder) => {
-        builder.addCase(fetchTimetable.fulfilled, (state, action) => {
-            state.hStreet = action.payload.hStreet;
-            state.pStreet = action.payload.pStreet;
-        });
-    },
-});
+const persistedFlatasticChoresReducer = persistReducer(
+    persistConfig,
+    flatasticChoresSlice.reducer
+);
 
 const store = configureStore({
     reducer: {
-        timetable: timetableSlice.reducer,
+        timetable: persistedTimetableReducer,
+        flatasticChores: persistedFlatasticChoresReducer
     },
+    middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware({
+            serializableCheck: {
+                ignoredActions: [
+                    "persist/PERSIST",
+                    "persist/REHYDRATE",
+                    "persist/PAUSE",
+                    "persist/FLUSH",
+                    "persist/REGISTER",
+                    "persist/PURGE",
+                ],
+            },
+        }),
 });
 
 export { store, fetchTimetable };
@@ -51,4 +41,3 @@ export type RootState = ReturnType<typeof store.getState>;
 export type AppState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 export type ThunkDispatch = typeof store.dispatch;
-export type fetchTimetableType = typeof fetchTimetable;

src/store/persist/persistConfig.ts

@@ -0,0 +1,8 @@
+import storage from 'redux-persist/lib/storage';
+
+const persistConfig = {
+    key: 'root',
+    storage,
+};
+
+export default persistConfig;

src/store/slices/flatastiucChoresSlice.ts

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+import fetchFlatasticChores from "../thunks/fetchFlatasticChores";
+
+const timetableSlice = createSlice({
+    name: "chores",
+    initialState: {
+        chores: [] as any[],
+    },
+    reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(fetchFlatasticChores.fulfilled, (state, action) => {
+            // Filter out timetable-related entries
+            state.chores = Array.isArray(action.payload)
+                ? action.payload.filter((item) => item.name !== "hstreeet" && item.name !== "pstreet")
+                : [];
+        });
+    },
+});
+
+export default timetableSlice;

src/store/slices/timetableSlice.ts

@@ -0,0 +1,24 @@
+import { createSlice } from "@reduxjs/toolkit";
+import fetchTimetable from "@thunks/fetchTimetable";
+import { type DepartureList } from "@/types/types";
+
+const timetableSlice = createSlice({
+    name: "timetable",
+    initialState: {
+        hStreet: {
+            departureList: [] as DepartureList[],
+        },
+        pStreet: {
+            departureList: [] as DepartureList[],
+        },
+    },
+    reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(fetchTimetable.fulfilled, (state, action) => {
+            state.hStreet = action.payload.hStreet;
+            state.pStreet = action.payload.pStreet;
+        });
+    },
+});
+
+export default timetableSlice;

src/store/thunks/fetchFlatasticChores.ts

@@ -0,0 +1,22 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { Flatastic } from "@/api/flatastic";
+
+const fetchFlatasticChores = createAsyncThunk("flatastic/chores", async () => {
+    if (!import.meta.env.VITE_FLATTASTIC_API_KEY) {
+        throw new Error("Flatastic API Key is not set");
+    }
+    const flatastic = new Flatastic(import.meta.env.VITE_FLATTASTIC_API_KEY);
+    const data = await new Promise((resolve, reject) => {
+        flatastic.getTaskList((info) => {
+            if (info.error) {
+                reject(new Error(info.error));
+            } else {
+                resolve(info);
+            }
+        });
+    });
+
+    return data;
+});
+
+export default fetchFlatasticChores;

src/store/thunks/fetchTimetable.ts

@@ -0,0 +1,18 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { callApi } from "@/api/api";
+
+const fetchTimetable = createAsyncThunk("timetable/fetchTimeTable", async () => {
+    const hStreetStopId = 7000044;
+    const pStreetStopId = 7000045;
+    const hStreetData = await callApi(hStreetStopId);
+    const pStreetData = await callApi(pStreetStopId);
+    const hStreetJson = await hStreetData.json();
+    const pStreetJson = await pStreetData.json();
+
+    return {
+        hStreet: hStreetJson,
+        pStreet: pStreetJson,
+    };
+});
+
+export default fetchTimetable;

tsconfig.app.json

@@ -20,16 +20,14 @@
             "@components/*": ["src/components/*"],
             "@store/*": ["src/store/*"],
             "@api/*": ["src/api/*"],
-            "@types/*": ["src/types/*"]
+            "@types/*": ["src/types/*"],
+            "@thunks/*": ["src/store/thunks/*"],
+            "@slices/*": ["src/store/slices/*"],
         },
 
         /* Linting */
         "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "erasableSyntaxOnly": true,
-        "noFallthroughCasesInSwitch": true,
-        "noUncheckedSideEffectImports": true
+        "noUnusedLocals": true
     },
     "include": ["src"]
 }

tsconfig.json

@@ -11,7 +11,9 @@
             "@components/*": ["src/components/*"],
             "@store/*": ["src/store/*"],
             "@api/*": ["src/api/*"],
-            "@types/*": ["src/types/*"]
+            "@types/*": ["src/types/*"],
+            "@thunks/*": ["src/store/thunks/*"],
+            "@slices/*": ["src/store/slices/*"]
         },
         "module": "esnext",
         "moduleResolution": "node",

vite.config.ts

@@ -1,7 +1,19 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import path from "path";
 
 // https://vite.dev/config/
 export default defineConfig({
     plugins: [react()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "src"),
+            "@components": path.resolve(__dirname, "src/components"),
+            "@store": path.resolve(__dirname, "src/store"),
+            "@api": path.resolve(__dirname, "src/api"),
+            "@types": path.resolve(__dirname, "src/types"),
+            "@thunks": path.resolve(__dirname, "src/store/thunks"),
+            "@slices": path.resolve(__dirname, "src/store/slices"),
+        },
+    },
 });