fix space indentation

This commit is contained in:
Arif Hasanic
2025-07-25 11:27:09 +02:00
parent b2e9c1f056
commit 53da0f740c
21 changed files with 452 additions and 441 deletions

View File

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

View File

@@ -3,12 +3,12 @@ import Timetable from "@/components/Timetable/Timetable";
import Flatastic from "@/components/Flatastic/Flatastic";
function App() {
return (
<>
<Timetable />
<Flatastic />
</>
);
return (
<>
<Timetable />
<Flatastic />
</>
);
}
export default App;

View File

@@ -1,48 +1,50 @@
class Flatastic {
private apikey: string;
private apikey: string;
constructor(apikey: string) {
this.apikey = apikey;
}
constructor(apikey: string) {
this.apikey = apikey;
}
async request(url: stringany) {
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",
};
const response = await fetch(url, {
headers: {
...headers,
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
}
async request(url: stringany) {
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",
};
const response = await fetch(url, {
headers: {
...headers,
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
}
getShoppingList() {
return this.request(
"https://api.flatastic-app.com/index.php/api/shoppinglist",
);
}
getShoppingList() {
return this.request(
"https://api.flatastic-app.com/index.php/api/shoppinglist",
);
}
getTaskList() {
return this.request("https://api.flatastic-app.com/index.php/api/chores");
}
getTaskList() {
return this.request(
"https://api.flatastic-app.com/index.php/api/chores",
);
}
getInformation() {
return this.request("https://api.flatastic-app.com/index.php/api/wg");
}
getInformation() {
return this.request("https://api.flatastic-app.com/index.php/api/wg");
}
}
export { Flatastic };

View File

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

View File

@@ -4,35 +4,35 @@ import { useEffect } from "react";
import type { FlatasticChore } from "@/types/flatasticChore";
const idToNameMap: Record<number, string> = {
1836104: "Gruber",
1836101: "Darius",
1593610: "Arif",
1860060: "Rishab",
1836104: "Gruber",
1836101: "Darius",
1593610: "Arif",
1860060: "Rishab",
};
export default function Flatastic() {
const fetchChores = useFlatasticStore((state) => state.fetch);
const chores = useFlatasticStore((state) => state.chores);
const fetchChores = useFlatasticStore((state) => state.fetch);
const chores = useFlatasticStore((state) => state.chores);
useEffect(() => {
fetchChores();
const interval = setInterval(() => {
fetchChores();
}, 60000);
return () => clearInterval(interval);
}, [fetchChores]);
useEffect(() => {
fetchChores();
const interval = setInterval(() => {
fetchChores();
}, 60000);
return () => clearInterval(interval);
}, [fetchChores]);
return (
<div>
<h1>Flatastic Chores</h1>
<ul>
{chores.map((chore: FlatasticChore) => (
<li key={chore.id} style={{ textAlign: "left" }}>
{idToNameMap[chore.currentUser]}: {chore.title} - Points:{" "}
{chore.points}
</li>
))}
</ul>
</div>
);
return (
<div>
<h1>Flatastic Chores</h1>
<ul>
{chores.map((chore: FlatasticChore) => (
<li key={chore.id} style={{ textAlign: "left" }}>
{idToNameMap[chore.currentUser]}: {chore.title} -
Points: {chore.points}
</li>
))}
</ul>
</div>
);
}

View File

@@ -6,52 +6,52 @@ import { useKVVStore } from "@/store/kvv";
import type { DepartureType } from "@/types/departureType";
function parseTimetableData(data: DepartureType[]) {
const result = data.map((item) => {
return {
...item,
};
});
const result = data.map((item) => {
return {
...item,
};
});
return result;
return result;
}
export default function Timetable() {
const fetchTimetable = useKVVStore((state) => state.fetch);
const pStreet = useKVVStore((state) => state.pStreet);
const hStreet = useKVVStore((state) => state.hStreet);
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]);
useEffect(() => {
fetchTimetable();
const interval = setInterval(() => {
fetchTimetable();
}, 60000);
return () => clearInterval(interval);
}, [fetchTimetable]);
const hStreetData = parseTimetableData(hStreet.departureList || []);
const pStreetData = parseTimetableData(pStreet.departureList || []);
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>
</div>
);
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>
</div>
);
}

View File

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

View File

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

View File

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

View File

@@ -6,7 +6,7 @@ import App from "./App.tsx";
// biome-ignore lint/style/noNonNullAssertion: if the root element is not found, the app should not render
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
<StrictMode>
<App />
</StrictMode>,
);

View File

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

View File

@@ -4,30 +4,33 @@ 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();
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();
console.log("KVV departures fetched:", {
hStreet: hStreetJson,
pStreet: pStreetJson,
});
console.log("KVV departures fetched:", {
hStreet: hStreetJson,
pStreet: pStreetJson,
});
set({
hStreet: hStreetJson as DepartureType[],
pStreet: pStreetJson as DepartureType[],
});
},
}), {
name: "kvv-store",
}),
set({
hStreet: hStreetJson as DepartureType[],
pStreet: pStreetJson as DepartureType[],
});
},
}),
{
name: "kvv-store",
},
),
);
export { useKVVStore };

View File

@@ -1,15 +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;
dateTime: {
year: number;
month: number;
day: number;
hour: number;
minute: number;
};
servingLine: {
number: string;
name: string;
direction: string;
};
stopID: number;
};

View File

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