wg/monitor-im-flur
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace redux with zustand

Browse Source
This commit is contained in:
Arif Hasanic
2025-07-25 01:03:11 +02:00
parent 5448285211
commit 3bcd2e16a2
30 changed files with 510 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
biome.json Normal file
View File

@@ -0,0 +1,34 @@
{
"$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
"vcs": {
"enabled": false,
"clientKind": "git",
"useIgnoreFile": false
},
"files": {
"ignoreUnknown": false
},
"formatter": {
"enabled": true,
"indentStyle": "tab"
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
},
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on"
}
}
}
}

22
bun.lock
View File

@@ -12,8 +12,10 @@
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-redux": "^9.2.0", "react-redux": "^9.2.0",
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
"zustand": "^5.0.6",
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "2.1.2",
"@eslint/js": "^9.31.0", "@eslint/js": "^9.31.0",
"@types/react": "^19.1.8", "@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6", "@types/react-dom": "^19.1.6",
@@ -36,6 +38,24 @@
}, },
}, },
"packages": { "packages": {
"@biomejs/biome": ["@biomejs/biome@2.1.2", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.1.2", "@biomejs/cli-darwin-x64": "2.1.2", "@biomejs/cli-linux-arm64": "2.1.2", "@biomejs/cli-linux-arm64-musl": "2.1.2", "@biomejs/cli-linux-x64": "2.1.2", "@biomejs/cli-linux-x64-musl": "2.1.2", "@biomejs/cli-win32-arm64": "2.1.2", "@biomejs/cli-win32-x64": "2.1.2" }, "bin": { "biome": "bin/biome" } }, "sha512-yq8ZZuKuBVDgAS76LWCfFKHSYIAgqkxVB3mGVVpOe2vSkUTs7xG46zXZeNPRNVjiJuw0SZ3+J2rXiYx0RUpfGg=="],
"@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.1.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-leFAks64PEIjc7MY/cLjE8u5OcfBKkcDB0szxsWUB4aDfemBep1WVKt0qrEyqZBOW8LPHzrFMyDl3FhuuA0E7g=="],
"@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.1.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-Nmmv7wRX5Nj7lGmz0FjnWdflJg4zii8Ivruas6PBKzw5SJX/q+Zh2RfnO+bBnuKLXpj8kiI2x2X12otpH6a32A=="],
"@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.1.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-NWNy2Diocav61HZiv2enTQykbPP/KrA/baS7JsLSojC7Xxh2nl9IczuvE5UID7+ksRy2e7yH7klm/WkA72G1dw=="],
"@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.1.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-qgHvafhjH7Oca114FdOScmIKf1DlXT1LqbOrrbR30kQDLFPEOpBG0uzx6MhmsrmhGiCFCr2obDamu+czk+X0HQ=="],
"@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.1.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Km/UYeVowygTjpX6sGBzlizjakLoMQkxWbruVZSNE6osuSI63i4uCeIL+6q2AJlD3dxoiBJX70dn1enjQnQqwA=="],
"@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.1.2", "", { "os": "linux", "cpu": "x64" }, "sha512-xlB3mU14ZUa3wzLtXfmk2IMOGL+S0aHFhSix/nssWS/2XlD27q+S6f0dlQ8WOCbYoXcuz8BCM7rCn2lxdTrlQA=="],
"@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.1.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-G8KWZli5ASOXA3yUQgx+M4pZRv3ND16h77UsdunUL17uYpcL/UC7RkWTdkfvMQvogVsAuz5JUcBDjgZHXxlKoA=="],
"@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.1.2", "", { "os": "win32", "cpu": "x64" }, "sha512-9zajnk59PMpjBkty3bK2IrjUsUHvqe9HWwyAWQBjGLE7MIBjbX2vwv1XPEhmO2RRuGoTkVx3WCanHrjAytICLA=="],
"@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.8", "", { "os": "aix", "cpu": "ppc64" }, "sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA=="], "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.8", "", { "os": "aix", "cpu": "ppc64" }, "sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA=="],
"@esbuild/android-arm": ["@esbuild/android-arm@0.25.8", "", { "os": "android", "cpu": "arm" }, "sha512-RONsAvGCz5oWyePVnLdZY/HHwA++nxYWIX1atInlaW6SEkwq6XkP3+cb825EUcRs5Vss/lGh/2YxAb5xqc07Uw=="], "@esbuild/android-arm": ["@esbuild/android-arm@0.25.8", "", { "os": "android", "cpu": "arm" }, "sha512-RONsAvGCz5oWyePVnLdZY/HHwA++nxYWIX1atInlaW6SEkwq6XkP3+cb825EUcRs5Vss/lGh/2YxAb5xqc07Uw=="],
@@ -740,6 +760,8 @@
"yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="], "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
"zustand": ["zustand@5.0.6", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A=="],
"@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="], "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
"@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="], "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],

34
eslint.config.js
View File

@@ -6,21 +6,21 @@ import tseslint from "typescript-eslint";
import { globalIgnores } from "eslint/config"; import { globalIgnores } from "eslint/config";
export default tseslint.config([ export default tseslint.config([
globalIgnores(["dist"]), globalIgnores(["dist"]),
{ {
files: ["**/*.{ts,tsx}"], files: ["**/*.{ts,tsx}"],
extends: [ extends: [
"airbnb", "airbnb",
"plugin:prettier/recommended", "plugin:prettier/recommended",
js.configs.recommended, js.configs.recommended,
tseslint.configs.recommended, tseslint.configs.recommended,
reactHooks.configs["recommended-latest"], reactHooks.configs["recommended-latest"],
reactRefresh.configs.vite, reactRefresh.configs.vite,
"prettier", "prettier",
], ],
languageOptions: { languageOptions: {
ecmaVersion: 2020, ecmaVersion: 2020,
globals: globals.browser, globals: globals.browser,
}, },
}, },
]); ]);

82
package.json
View File

@@ -1,42 +1,44 @@
{ {
"name": "monitor-im-flur", "name": "monitor-im-flur",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc -b && vite build", "build": "tsc -b && vite build",
"lint": "eslint .", "lint": "eslint .",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@reduxjs/toolkit": "^2.8.2", "@reduxjs/toolkit": "^2.8.2",
"@types/lodash": "^4.17.20", "@types/lodash": "^4.17.20",
"@types/node": "^24.1.0", "@types/node": "^24.1.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-redux": "^9.2.0", "react-redux": "^9.2.0",
"redux-persist": "^6.0.0" "redux-persist": "^6.0.0",
}, "zustand": "^5.0.6"
"devDependencies": { },
"@eslint/js": "^9.31.0", "devDependencies": {
"@types/react": "^19.1.8", "@biomejs/biome": "2.1.2",
"@types/react-dom": "^19.1.6", "@eslint/js": "^9.31.0",
"@vitejs/plugin-react-swc": "^3.10.2", "@types/react": "^19.1.8",
"eslint": "^9.31.0", "@types/react-dom": "^19.1.6",
"eslint-config-airbnb": "^19.0.4", "@vitejs/plugin-react-swc": "^3.10.2",
"eslint-config-prettier": "^10.1.8", "eslint": "^9.31.0",
"eslint-plugin-import": "^2.32.0", "eslint-config-airbnb": "^19.0.4",
"eslint-plugin-jsx-a11y": "^6.10.2", "eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.3", "eslint-plugin-import": "^2.32.0",
"eslint-plugin-react": "^7.37.5", "eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-prettier": "^5.5.3",
"eslint-plugin-react-refresh": "^0.4.20", "eslint-plugin-react": "^7.37.5",
"globals": "^16.3.0", "eslint-plugin-react-hooks": "^5.2.0",
"prettier": "3.6.2", "eslint-plugin-react-refresh": "^0.4.20",
"typescript": "~5.8.3", "globals": "^16.3.0",
"typescript-eslint": "^8.35.1", "prettier": "3.6.2",
"vite": "^7.0.4" "typescript": "~5.8.3",
} "typescript-eslint": "^8.35.1",
"vite": "^7.0.4"
}
} }

42
src/App.css
View File

@@ -1,42 +1,42 @@
#root { #root {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
} }
.logo { .logo {
height: 6em; height: 6em;
padding: 1.5em; padding: 1.5em;
will-change: filter; will-change: filter;
transition: filter 300ms; transition: filter 300ms;
} }
.logo:hover { .logo:hover {
filter: drop-shadow(0 0 2em #646cffaa); filter: drop-shadow(0 0 2em #646cffaa);
} }
.logo.react:hover { .logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa); filter: drop-shadow(0 0 2em #61dafbaa);
} }
@keyframes logo-spin { @keyframes logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo { a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear; animation: logo-spin infinite 20s linear;
} }
} }
.card { .card {
padding: 2em; padding: 2em;
} }
.read-the-docs { .read-the-docs {
color: #888; color: #888;
} }

29
src/App.tsx
View File

@@ -1,25 +1,14 @@
import "./App.css"; import "@/App.css";
import Timetable from "./components/Timetable/Timetable"; import Timetable from "@/components/Timetable/Timetable";
import { useDispatch } from "react-redux"; import Flatastic from "@/components/Flatastic/Flatastic";
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() { function App() {
const dispatch = useDispatch<AppDispatch>(); return (
// Fetch the timetable data when the app loads <>
useEffect(() => { <Timetable />
dispatch(fetchTimetable()); <Flatastic />
dispatch(fetchFlatasticChores()); </>
}, [dispatch]); );
return (
<>
<Timetable />
<Flatastic />
</>
);
} }
export default App; export default App;

13
src/api/api.ts
View File

@@ -1,13 +0,0 @@
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`;
const data = await fetch(API_URL, {
method: "GET",
});
if (!data.ok) {
throw new Error(`HTTP error! status: ${data.status}`);
}
return data;
}
export { callApi };

92
src/api/flatastic.ts
View File

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

13
src/api/kvv.ts Normal file
View File

@@ -0,0 +1,13 @@
async function fetchKvvDepartures(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`;
const data = await fetch(API_URL, {
method: "GET",
});
if (!data.ok) {
throw new Error(`HTTP error! status: ${data.status}`);
}
return data;
}
export { fetchKvvDepartures };

49
src/components/Flatastic/Flatastic.tsx
View File

@@ -1,21 +1,38 @@
import fetchFlatasticChores from "@/store/thunks/fetchFlatasticChores"; import { useFlatasticStore } from "@/store/flatastic";
import { useEffect } from "react"; import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { type AppDispatch } from "@/store/index"; import type { FlatasticChore } from "@/types/flatasticChore";
const idToNameMap: Record<number, string> = {
1836104: "Gruber",
1836101: "Darius",
1593610: "Arif",
1860060: "Rishab",
};
export default function Flatastic() { export default function Flatastic() {
const dispatch = useDispatch<AppDispatch>(); const fetchChores = useFlatasticStore((state) => state.fetch);
useEffect(() => { const chores = useFlatasticStore((state) => state.chores);
const intervalID = setInterval(() => {
dispatch(fetchFlatasticChores());
}, 60000); // Fetch every 60 seconds
return () => clearInterval(intervalID); useEffect(() => {
}, []); fetchChores();
const interval = setInterval(() => {
fetchChores();
}, 60000);
return () => clearInterval(interval);
}, [fetchChores]);
return ( return (
<p> <div>
Flatastic API Key: {import.meta.env.VITE_FLATTASTIC_API_KEY || "Not set"} <h1>Flatastic Chores</h1>
</p> <ul>
) {chores.map((chore: FlatasticChore) => (
} <li key={chore.id} style={{ textAlign: "left" }}>
{idToNameMap[chore.currentUser]}: {chore.title} - Points:{" "}
{chore.points}
</li>
))}
</ul>
</div>
);
}

93
src/components/Timetable/Timetable.tsx
View File

@@ -1,63 +1,56 @@
import { useEffect } from "react"; 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 TimetableRow from "../TimetableRow/TimetableRow"; import TimetableRow from "../TimetableRow/TimetableRow";
import _ from "lodash"; import _ from "lodash";
import { useKVVStore } from "@/store/kvv";
import type { DepartureType } from "@/types/departureType";
function parseTimetableData(data: DepartureList[]) { function parseTimetableData(data: DepartureType[]) {
const result = data.map((item) => { const result = data.map((item) => {
return { return {
...item, ...item,
}; };
}); });
return result; return result;
} }
export default function Timetable() { export default function Timetable() {
const dispatch = useDispatch<AppDispatch>(); const fetchTimetable = useKVVStore((state) => state.fetch);
useEffect(() => { const pStreet = useKVVStore((state) => state.pStreet);
const intervalID = setInterval(() => { const hStreet = useKVVStore((state) => state.hStreet);
dispatch(fetchTimetable());
}, 60000); // Fetch every 60 seconds
return () => clearInterval(intervalID); useEffect(() => {
}, []); fetchTimetable();
const pStreet = useSelector((state: AppState) => state.timetable.pStreet); const interval = setInterval(() => {
const hStreet = useSelector((state: AppState) => state.timetable.hStreet); fetchTimetable();
}, 60000);
return () => clearInterval(interval);
}, [fetchTimetable]);
const hStreetData = hStreet const hStreetData = parseTimetableData(hStreet.departureList || []);
? parseTimetableData(hStreet.departureList) const pStreetData = parseTimetableData(pStreet.departureList || []);
: [];
const pStreetData = pStreet
? parseTimetableData(pStreet.departureList)
: [];
return ( return (
<div> <div>
<h1>Timetable</h1> <h1>Timetable</h1>
<h2>H-Street Departures</h2> <h2>H-Street Departures</h2>
<table> <table>
<tbody> <tbody>
{hStreetData.map((departure, index) => ( {hStreetData.map((departure, index) => (
<TimetableRow key={index} departure={departure} /> <TimetableRow key={index} departure={departure} />
))} ))}
</tbody> </tbody>
</table> </table>
<h2>P-Street Departures</h2> <h2>P-Street Departures</h2>
<table> <table>
<tbody> <tbody>
{pStreetData.map((departure, index) => ( {pStreetData.map((departure, index) => (
<TimetableRow key={index} departure={departure} /> <TimetableRow key={index} departure={departure} />
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
); );
} }

31
src/components/TimetableRow/TimetableRow.tsx
View File

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

2
src/components/TimetableRow/style.module.css
View File

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

84
src/index.css
View File

@@ -1,68 +1,68 @@
:root { :root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
background-color: #242424; background-color: #242424;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
a { a {
font-weight: 500; font-weight: 500;
color: #646cff; color: #646cff;
text-decoration: inherit; text-decoration: inherit;
} }
a:hover { a:hover {
color: #535bf2; color: #535bf2;
} }
body { body {
margin: 0; margin: 0;
display: flex; display: flex;
place-items: center; place-items: center;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
} }
h1 { h1 {
font-size: 3.2em; font-size: 3.2em;
line-height: 1.1; line-height: 1.1;
} }
button { button {
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
background-color: #1a1a1a; background-color: #1a1a1a;
cursor: pointer; cursor: pointer;
transition: border-color 0.25s; transition: border-color 0.25s;
} }
button:hover { button:hover {
border-color: #646cff; border-color: #646cff;
} }
button:focus, button:focus,
button:focus-visible { button:focus-visible {
outline: 4px auto -webkit-focus-ring-color; outline: 4px auto -webkit-focus-ring-color;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
color: #213547; color: #213547;
background-color: #ffffff; background-color: #ffffff;
} }
a:hover { a:hover {
color: #747bff; color: #747bff;
} }
button { button {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
} }

16
src/main.tsx
View File

@@ -1,21 +1,11 @@
import { StrictMode } from "react"; import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; 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 "./index.css";
import App from "./App.tsx"; import App from "./App.tsx";
import store from "./store/index.ts";
let persistor = persistStore(store)
createRoot(document.getElementById("root")!).render( createRoot(document.getElementById("root")!).render(
<StrictMode> <StrictMode>
<Provider store={store}> <App />
<PersistGate loading={null} persistor={persistor}> </StrictMode>,
<App />
</PersistGate>
</Provider>
</StrictMode>,
); );

26
src/store/flatastic.ts Normal file
View File

@@ -0,0 +1,26 @@
import { create } from "zustand";
import Flatastic from "@/api/flatastic";
import type { FlatasticChore } from "@/types/flatasticChore";
interface FlatasticStore {
chores: FlatasticChore[];
fetch: () => Promise<void>;
}
const useFlatasticStore = create<FlatasticStore>(
(set: (state: Partial<FlatasticStore>) => void) => ({
chores: [],
fetch: 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 flatastic.getTaskList();
console.log("Flatastic chores fetched:", data);
set({ chores: data as FlatasticChore[] });
},
}),
);
export { useFlatasticStore };

43
src/store/index.ts
View File

@@ -1,43 +0,0 @@
import { configureStore } from "@reduxjs/toolkit";
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 persistedTimetableReducer = persistReducer(
persistConfig,
timetableSlice.reducer
);
const persistedFlatasticChoresReducer = persistReducer(
persistConfig,
flatasticChoresSlice.reducer
);
const store = configureStore({
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 };
export default store;
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;

25
src/store/kvv.ts Normal file
View File

@@ -0,0 +1,25 @@
import { create } from "zustand";
import { fetchKvvDepartures } from "@/api/kvv";
import type { DepartureType } from "@/types/departureType";
import { devtools } from "zustand/middleware";
const useKVVStore = create(
devtools((set) => ({
pStreet: [] as DepartureType[],
hStreet: [] as DepartureType[],
fetch: async () => {
const hStreetStopId = 7000044;
const pStreetStopId = 7000045;
const hStreetData = await fetchKvvDepartures(hStreetStopId);
const pStreetData = await fetchKvvDepartures(pStreetStopId);
const hStreetJson = await hStreetData.json();
const pStreetJson = await pStreetData.json();
set({
hStreet: hStreetJson as DepartureType[],
pStreet: pStreetJson as DepartureType[],
});
},
})),
);
export { useKVVStore };

8
src/store/persist/persistConfig.ts
View File

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

20
src/store/slices/flatastiucChoresSlice.ts
View File

@@ -1,20 +0,0 @@
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;

24
src/store/slices/timetableSlice.ts
View File

@@ -1,24 +0,0 @@
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;

22
src/store/thunks/fetchFlatasticChores.ts
View File

@@ -1,22 +0,0 @@
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;

18
src/store/thunks/fetchTimetable.ts
View File

@@ -1,18 +0,0 @@
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;

15
src/types/departureType.ts Normal file
View File

@@ -0,0 +1,15 @@
export type DepartureType = {
dateTime: {
year: number;
month: number;
day: number;
hour: number;
minute: number;
};
servingLine: {
number: string;
name: string;
direction: string;
};
stopID: number;
};

13
src/types/flatasticChore.ts Normal file
View File

@@ -0,0 +1,13 @@
interface FlatasticChore {
id: number;
title: string;
details: string | null;
users: Array<number>;
points: number;
rotationTime: number;
currentUser: number;
lastDoneDate: string;
timeLeftNext: number;
}
export type { FlatasticChore };

14
src/types/types.ts
View File

@@ -1,14 +0,0 @@
export type DepartureList = {
dateTime: {
year: number;
month: number;
day: number;
hour: number;
minute: number;
};
servingLine: {
number: string;
name: string;
direction: string;
};
};

58
tsconfig.app.json
View File

@@ -1,33 +1,33 @@
{ {
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2022", "target": "ES2022",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"], "lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext", "module": "ESNext",
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
"verbatimModuleSyntax": true, "verbatimModuleSyntax": true,
"moduleDetection": "force", "moduleDetection": "force",
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["src/*"], "@/*": ["src/*"],
"@components/*": ["src/components/*"], "@components/*": ["src/components/*"],
"@store/*": ["src/store/*"], "@store/*": ["src/store/*"],
"@api/*": ["src/api/*"], "@api/*": ["src/api/*"],
"@types/*": ["src/types/*"], "@types/*": ["src/types/*"],
"@thunks/*": ["src/store/thunks/*"], "@thunks/*": ["src/store/thunks/*"],
"@slices/*": ["src/store/slices/*"], "@slices/*": ["src/store/slices/*"]
}, },
/* Linting */ /* Linting */
"strict": true, "strict": true,
"noUnusedLocals": true "noUnusedLocals": true
}, },
"include": ["src"] "include": ["src"]
} }

56
tsconfig.json
View File

@@ -1,30 +1,30 @@
{ {
"files": [], "files": [],
"references": [ "references": [
{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" } { "path": "./tsconfig.node.json" }
], ],
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["src/*"], "@/*": ["src/*"],
"@components/*": ["src/components/*"], "@components/*": ["src/components/*"],
"@store/*": ["src/store/*"], "@store/*": ["src/store/*"],
"@api/*": ["src/api/*"], "@api/*": ["src/api/*"],
"@types/*": ["src/types/*"], "@types/*": ["src/types/*"],
"@thunks/*": ["src/store/thunks/*"], "@thunks/*": ["src/store/thunks/*"],
"@slices/*": ["src/store/slices/*"] "@slices/*": ["src/store/slices/*"]
}, },
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"target": "esnext", "target": "esnext",
"lib": ["dom", "dom.iterable", "esnext"], "lib": ["dom", "dom.iterable", "esnext"],
"jsx": "react-jsx", "jsx": "react-jsx",
"strict": true, "strict": true,
"esModuleInterop": true, "esModuleInterop": true,
"skipLibCheck": true, "skipLibCheck": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noEmit": true, "noEmit": true,
"resolveJsonModule": true "resolveJsonModule": true
} }
} }

42
tsconfig.node.json
View File

@@ -1,25 +1,25 @@
{ {
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023", "target": "ES2023",
"lib": ["ES2023"], "lib": ["ES2023"],
"module": "ESNext", "module": "ESNext",
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
"verbatimModuleSyntax": true, "verbatimModuleSyntax": true,
"moduleDetection": "force", "moduleDetection": "force",
"noEmit": true, "noEmit": true,
/* Linting */ /* Linting */
"strict": true, "strict": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"erasableSyntaxOnly": true, "erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true "noUncheckedSideEffectImports": true
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

24
vite.config.ts
View File

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