.github/workflows/ci.yml

@@ -8,20 +8,8 @@ on:
   workflow_dispatch:
 
 jobs:
-  lint:
-    runs-on: ubuntu-latest
-    container:
-      image: oven/bun
-    steps:
-      - uses: actions/checkout@v4
-      - name: Install Biome
-        run: bun install -g biome
-      - name: Biome CI
-        run: biome ci
-
   build:
     runs-on: ubuntu-latest
-    needs: lint
     container:
       image: oven/bun
     steps:
@@ -30,12 +18,35 @@ jobs:
         run: bun install
       - name: Build
         run: bun run build
+      - name: Create Build Artifact
+        uses: christopherhx/gitea-upload-artifact@v4
+        with:
+          name: build
+          path: dist
+
+  lint:
+    runs-on: ubuntu-latest
+    needs: build
+    container:
+      image: oven/bun
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Biome
+        run: bun install -g biome
+      - name: Run Biome lint
+        run: biome lint .
+      - name: Run Biome format check
+        run: biome format .
 
   build-and-push-docker:
     needs: [build]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: christopherhx/gitea-download-artifact@v4
+        with:
+          name: build
+          path: build
       - name: Log in to Docker Registry
         uses: docker/login-action@v2
         with:

Dockerfile

@@ -1,15 +1,8 @@
-FROM oven/bun
+FROM nginx:latest
 
 WORKDIR /app
 
-COPY package.json bun.lock ./
+COPY ./build/* /usr/share/nginx/html/
 
-RUN bun install
+EXPOSE 80
-
+CMD ["nginx", "-g", "daemon off;"]
-COPY . .
-
-RUN bun run build
-
-EXPOSE 5173
-
-CMD ["bun", "run", "dev", "--host"]

biome.json

@@ -5,7 +5,8 @@
         "useIgnoreFile": false
     },
     "files": {
-        "ignoreUnknown": false
+        "ignoreUnknown": false,
+        "includes": ["!**/dist/**"]
     },
     "formatter": {
         "enabled": true,

bun.lock

@@ -7,7 +7,9 @@
         "@reduxjs/toolkit": "^2.8.2",
         "@types/lodash": "^4.17.20",
         "@types/node": "^24.1.0",
+        "classnames": "^2.5.1",
         "lodash": "^4.17.21",
+        "openmeteo": "^1.2.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-fast-marquee": "^1.6.5",
@@ -141,6 +143,8 @@
 
     "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
 
+    "@openmeteo/sdk": ["@openmeteo/sdk@1.20.1", "", { "dependencies": { "flatbuffers": "^25.2.10" } }, "sha512-o5tw3+N617Ms8nDm649PWwWt6PDz8NHWBLjOOFB8bx/EJpvsvKEeHMMoapxQ71bjHzQM+4h39eCe6/nM+nBuwg=="],
+
     "@pkgr/core": ["@pkgr/core@0.2.9", "", {}, "sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA=="],
 
     "@reduxjs/toolkit": ["@reduxjs/toolkit@2.8.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^10.0.3", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A=="],
@@ -311,6 +315,8 @@
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
+    "classnames": ["classnames@2.5.1", "", {}, "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="],
+
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
@@ -425,6 +431,8 @@
 
     "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
 
+    "flatbuffers": ["flatbuffers@25.2.10", "", {}, "sha512-7JlN9ZvLDG1McO3kbX0k4v+SUAg48L1rIwEvN6ZQl/eCtgJz9UylTMzE9wrmYrcorgxm3CX/3T/w5VAub99UUw=="],
+
     "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
 
     "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
@@ -595,6 +603,8 @@
 
     "object.values": ["object.values@1.2.1", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA=="],
 
+    "openmeteo": ["openmeteo@1.2.0", "", { "dependencies": { "@openmeteo/sdk": "^1.19.0", "flatbuffers": "^25.2.10" } }, "sha512-YinFo02TM4wXdm9o2FBAO2u1ka3drNdnFsGNskiO8aCWvZa6nljh3ioH79ipwPdFhCrIiq/LCfpjDGXqH2RBFw=="],
+
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
     "own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "^1.2.6", "object-keys": "^1.1.1", "safe-push-apply": "^1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],

docker-compose.yml

@@ -2,5 +2,5 @@ services:
   monitor-im-flur:
     image: git.rivercry.com/wg/monitor-im-flur:latest
     ports:
-      - "9123:5173"
+      - "9123:80"
     restart: unless-stopped

nginx.conf

@@ -0,0 +1,29 @@
+http {
+
+  include mime.types;
+
+  set_real_ip_from        0.0.0.0/0;
+  real_ip_recursive       on;
+  real_ip_header          X-Forward-For;
+  limit_req_zone          $binary_remote_addr zone=mylimit:10m rate=10r/s;
+
+  server {
+    listen 80;
+    server_name localhost;
+    root /proxy;
+    limit_req zone=mylimit burst=70 nodelay;
+
+    location / {
+            root   /usr/share/nginx/html;
+            index  index.html index.htm;
+            try_files $uri /index.html;   
+        }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+  }
+}
+
+events {}

package.json

@@ -13,7 +13,9 @@
         "@reduxjs/toolkit": "^2.8.2",
         "@types/lodash": "^4.17.20",
         "@types/node": "^24.1.0",
+        "classnames": "^2.5.1",
         "lodash": "^4.17.21",
+        "openmeteo": "^1.2.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-fast-marquee": "^1.6.5",

src/api/weather.ts

@@ -0,0 +1,34 @@
+import { fetchWeatherApi } from "openmeteo";
+
+const params = {
+    latitude: 49.0094,
+    longitude: 8.4044,
+    daily: ["temperature_2m_max", "temperature_2m_min"],
+    hourly: [
+        "temperature_2m",
+        "precipitation",
+        "rain",
+        "precipitation_probability",
+    ],
+    current: [
+        "temperature_2m",
+        "precipitation",
+        "rain",
+        "showers",
+        "snowfall",
+        "relative_humidity_2m",
+        "apparent_temperature",
+        "weather_code",
+        "cloud_cover",
+        "is_day",
+    ],
+    timezone: "Europe/Berlin",
+    timeformat: "unixtime",
+};
+const url = "https://api.open-meteo.com/v1/forecast";
+
+function fetchWeatherData() {
+    return fetchWeatherApi(url, params);
+}
+
+export default fetchWeatherData;

src/components/Card/Card.tsx

@@ -0,0 +1,11 @@
+import style from "./style.module.css";
+
+export default function Card({
+    active,
+    children,
+}: {
+    active?: boolean;
+    children: React.ReactNode;
+}) {
+    return <div className={style.card}>{children}</div>;
+}

src/components/Card/style.module.css

@@ -0,0 +1,14 @@
+.card {
+    flex-direction: column;
+    justify-content: flex-start;
+    background-color: #c0c0c0;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
+    margin: 10px;
+}
+
+.cardContent {
+    padding: 1px 100px 30px 100px;
+}

src/components/CardHeader/CardHeader.tsx

@@ -0,0 +1,16 @@
+import style from "./style.module.css";
+
+export default function CardHeader({ icon, content, active = false }) {
+    let containerClass = style.container;
+    if (active) {
+        containerClass += ` ${style.active}`;
+    }
+    return (
+        <div className={containerClass}>
+            <div className={style.title}>
+                <div className={style.icon}>{icon}</div>
+                <div className={style.content}>{content}</div>
+            </div>
+        </div>
+    );
+}

src/components/CardHeader/style.module.css

@@ -0,0 +1,27 @@
+.container {
+    height: 28px;
+    display: flex;
+    flex-direction: row;
+    margin: 2px;
+    justify-content: space-between;
+    align-items: center;
+    color: #c0c0c0;
+    background-color: #808080;
+}
+
+.active {
+    color: white;
+    background-color: #000082;
+}
+
+.title {
+    display: flex;
+    flex-direction: row;
+    font-weight: bold;
+    gap: 7px;
+    padding-left: 5px;
+}
+
+.icon {
+    font-size: 10pt;
+}

src/components/Dashboard/Dashboard.tsx

@@ -1,44 +1,70 @@
+import { useEffect, useState } from "react";
+
+import Card from "@/components/Card/Card";
+import CardHeader from "@/components/CardHeader/CardHeader";
 import Datetime from "@/components/Datetime/Datetime";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import Footer from "@/components/Footer/Footer";
 import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
-
+import Weather from "../Weather/Weather";
 import style from "./style.module.css";
 
 export default function Dashboard() {
+    const schemes = [style.day, style.evening, style.night];
+    const [schemeIndex, setSchemeIndex] = useState(0);
+    const scheme = schemes[schemeIndex];
+
+    // change background color based on time of day
+    useEffect(() => {
+        const timer = setInterval(
+            () => {
+                const d = new Date();
+                const hour = d.getHours();
+                if (hour >= 7 && hour < 16) {
+                    setSchemeIndex(0);
+                } else if (hour >= 16 && hour < 23) {
+                    setSchemeIndex(1);
+                } else {
+                    setSchemeIndex(2);
+                }
+            },
+            20 * 60 * 1000,
+        );
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
     return (
-        <div className={style.dashboard}>
+        <div className={`${style.dashboard} ${scheme}`}>
             <div className={style.cardWrapper}>
-                <div className={style.card}>
+                <Card>
-                    <div className={style.cardHeaderInactive}>🚊 Timetable</div>
+                    <CardHeader icon="🚊" content="Timetable" />
-                    <div className={style.cardContent}>
+                    <Timetable />
-                        <Timetable />
+                </Card>
+                <div className={style.clockAndWeather}>
+                    <div className={style.small}>
+                        <Card>
+                            <CardHeader icon="🕐" content="Clock" />
+                            <Datetime />
+                        </Card>
                     </div>
+                    <Card>
+                        <CardHeader icon="🌤️" content="Weather" />
+                        <Weather />
+                    </Card>
                 </div>
+                <Card>
+                    <CardHeader icon="🔔" content="Terminal" active={true} />
+                    <Terminal />
+                </Card>
 
-                <div className={style.clock}>
+                <Card>
-                    <div className={style.card}>
+                    <CardHeader icon="🧹" content="Flatastic" />
-                        <div className={style.cardHeaderInactive}>🕐 Clock</div>
+                    <Flatastic />
-                        <Datetime />
+                </Card>
-                    </div>
-                </div>
-
-                <div className={style.card}>
-                    <div className={style.terminal}>
-                        <div className={style.cardHeader}>🔔 Terminal</div>
-                        <Terminal />
-                    </div>
-                </div>
-
-                <div className={style.card}>
-                    <div className={style.cardHeaderInactive}>🧹 Flatastic</div>
-                    <div className={style.cardContent}>
-                        <Flatastic />
-                    </div>
-                </div>
             </div>
-
             <div className={style.footer}>
                 <Footer />
             </div>

src/components/Dashboard/style.module.css

@@ -2,9 +2,29 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    transition: 0.5s;
+}
+
+/* 7 to 16  */
+.day {
     background-color: #007c7d;
 }
 
+/* 16 to 23 */
+.evening {
+    background-color: #3b5773;
+}
+
+/* 23 to 8 */
+.night {
+    background-color: #2a3f55;
+}
+
+.clockAndWeather {
+    display: flex;
+    align-items: center;
+}
+
 .cardWrapper {
     margin: 30px;
     height: 100%;
@@ -14,42 +34,14 @@
     justify-content: flex-start;
 }
 
-.card {
+.small {
-    flex-direction: column;
-    justify-content: flex-start;
-    background-color: #c0c0c0;
-    border-top: 2px solid white;
-    border-left: 2px solid white;
-    border-bottom: 2px solid #828282;
-    border-right: 2px solid #828282;
-}
-
-.cardContent {
-    padding: 1px 100px 30px 100px;
-}
-
-.cardHeader {
-    height: 30px;
-    color: white;
-    background-color: #000082;
-    text-align: left;
-    padding-left: 5px;
-    font-weight: bold;
-}
-
-.cardHeaderInactive {
-    height: 30px;
-    color: #c0c0c0;
-    background-color: #808080;
-    text-align: left;
-    padding-left: 5px;
-    font-weight: bold;
-}
-
-.clock {
     width: 45%;
 }
 
+.terminal {
+    margin: 2px;
+}
+
 .footer {
     background-color: #c0c0c0;
 }

src/components/Datetime/style.module.css

@@ -19,11 +19,11 @@ img {
 }
 
 .divider {
-  animation: blink 3s step-end infinite;
+    animation: blink 3s step-end infinite;
 }
 
 @keyframes blink {
     50% {
-    opacity: 0;
+        opacity: 0;
-  }
+    }
 }

src/components/Flatastic/Flatastic.tsx

@@ -9,10 +9,12 @@ export default function Flatastic() {
     const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
     const flatasticData = useFlatasticStore((state) => state.flatasticData);
     const chores = (flatasticData?.chores as FlatasticChore[]) || [];
+
     chores.sort(
         (a, b) =>
             a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
     );
+
     const users = flatasticData?.users;
     const idToNameMap: Record<number, string> = {};
     users.forEach((user: FlatasticUser) => {
@@ -35,11 +37,11 @@ export default function Flatastic() {
             className = "irregular";
         } else {
             className = chore.timeLeftNext <= 0 ? "due" : "notDue";
-            timeLeftInDays = <span className={style.timeLeft}>
+            timeLeftInDays = (
-                {Math.abs(
+                <span className={style.timeLeft}>
-                    Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
+                    {Math.abs(Math.floor(chore.timeLeftNext / (60 * 60 * 24)))}d
-                )}d
+                </span>
-            </span>;
+            );
         }
 
         return (
@@ -56,7 +58,7 @@ export default function Flatastic() {
     });
 
     return (
-        <div>
+        <div className={style.container}>
             <h1>Chores</h1>
             <ul className={style.choreList}>{choresRender}</ul>
         </div>

src/components/Flatastic/style.module.css

@@ -1,3 +1,7 @@
+.container {
+    padding: 1px 100px 30px 100px;
+}
+
 .choreList {
     list-style-type: none;
     display: flex;

src/components/Footer/Footer.tsx

@@ -1,7 +1,3 @@
-import { useEffect, useState } from "react";
-import Marquee from "react-fast-marquee";
-
-import pasta from "./pasta.ts";
 import style from "./style.module.css";
 
 export default function Footer() {
@@ -16,12 +12,19 @@ export default function Footer() {
                     />
                     Start
                 </div>
-                <span className={style.divider}></span>
                 <div className={style.windows}>
-                    <span className={style.window}>🚊 Timetable</span>
+                    <span className={style.window}>
-                    <span className={style.window}>🕐 Clock</span>
+                        <span className={style.windowIcon}>🚊</span>Timetable
-                    <span className={style.windowActive}>🔔 Terminal</span>
+                    </span>
-                    <span className={style.window}>🧹 Flatastic</span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>🕐</span>Clock
+                    </span>
+                    <span className={style.windowActive}>
+                        <span className={style.windowIcon}>🔔</span>Terminal
+                    </span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>🧹</span>Flatastic
+                    </span>
                 </div>
             </div>
         </div>

src/components/Footer/style.module.css

@@ -1,5 +1,5 @@
 .container {
-    height: 35px;
+    height: 30px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -9,44 +9,37 @@
 }
 
 .taskbar {
-    font-weight: bold;
     display: flex;
     flex-direction: row;
     text-align: left;
 }
 
 .startButton {
+    font-weight: bold;
     display: inline-flex;
     justify-content: space-around;
     align-items: center;
-    width: 100px;
+    width: 80px;
     border-top: 2px solid white;
     border-left: 2px solid white;
     border-bottom: 2px solid #828282;
     border-right: 2px solid #828282;
+    margin-right: 10px;
 }
 
 .startIcon {
-    height: 30px;
+    height: 20px;
-}
-
-.divider {
-    margin: auto 8px;
-    width: 4px;
-    height: 25px;
-    border-top: 2px solid white;
-    border-left: 2px solid white;
-    border-bottom: 2px solid #828282;
-    border-right: 2px solid #828282;
 }
 
 .windows {
     display: flex;
     flex-direction: row;
+    align-items: center;
     gap: 5px;
 }
 
 .window {
+    height: 25px;
     min-width: 150px;
     padding-left: 10px;
     display: inline-flex;
@@ -57,6 +50,11 @@
     border-right: 2px solid #828282;
 }
 
+.windowIcon {
+    font-size: 11pt;
+    margin-right: 5px;
+}
+
 .windowActive {
     min-width: 150px;
     padding-left: 10px;

src/components/Terminal/Terminal.tsx

@@ -1,8 +1,7 @@
-import { useHomeAssistantStore } from "@/store/homeAssistant";
 import { useEffect, useState } from "react";
-
+import { useHomeAssistantStore } from "@/store/homeAssistant";
-import style from "./style.module.css";
 import pasta from "./pasta.ts";
+import style from "./style.module.css";
 
 export default function Terminal() {
     const [index, setIndex] = useState(0);
@@ -44,7 +43,7 @@ export default function Terminal() {
             <div className={style.fetch}>
                 <span>
                     <pre>
-                        {"      "}-///:.{"      "}
+                        {"      -///:.      "}
                         <span className={style.username}>tent</span>@
                         <span className={style.hostname}>home</span>
                     </pre>
@@ -84,9 +83,8 @@ export default function Terminal() {
             </div>
             <div className={style.msg}>{text}</div>
             <div className={style.input}>
-                <span className={style.prompt}>
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>
-                    [sus@home ~/hallway]{"$"}
+                {" █"}
-                </span>{" "}
             </div>
         </div>
     );

src/components/Terminal/style.module.css

@@ -1,49 +1,47 @@
 .container {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  font-family: monospace;
+    font-family: monospace;
-  font-size: 10pt;
+    font-size: 10pt;
-  background-color: black;
+    background-color: black;
-  color: white;
+    color: white;
-  display: flex;
+    width: 100%;
-  flex-direction: column;
+    height: 290px;
-  width: 100%;
+    overflow: hidden;
-  height: 290px;
-  overflow: hidden;
 }
 
 .fetch {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  padding-bottom: 10px;
+    padding-bottom: 10px;
 }
 
 .prompt {
-  color: lightgreen;
+    color: lightgreen;
 }
 
 .username {
-  color: violet;
+    color: violet;
 }
 
 .hostname {
-  color: skyblue;
+    color: skyblue;
 }
 
 .temp {
-  color: pink;
+    color: pink;
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .humidity {
-  color: skyblue;
+    color: skyblue;
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .plants {
-  color: lightgreen;
+    color: lightgreen;
 }
 
 pre {
-  margin: 0;
+    margin: 0;
 }

src/components/Timetable/Timetable.tsx

@@ -18,7 +18,7 @@ export default function Timetable() {
     }, [fetchTimetable]);
 
     return (
-        <div className={style.wrapper}>
+        <div className={style.container}>
             <h1>Departures</h1>
             <DepartureList
                 departures={pStreet.departureList}

src/components/Timetable/style.module.css

@@ -0,0 +1,3 @@
+.container {
+    padding: 1px 100px 30px 100px;
+}

src/components/Weather/Weather.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { useWeatherStore } from "@/store/weather";
+
+import styles from "./style.module.css";
+
+export default function Weather() {
+    const weatherData = useWeatherStore((state) => state.weatherData);
+    const fetchWeatherData = useWeatherStore((state) => state.fetchWeatherData);
+
+    useEffect(() => {
+        fetchWeatherData();
+        const interval = setInterval(() => {
+            fetchWeatherData();
+        }, 10 * 60000);
+        return () => clearInterval(interval);
+    }, [fetchWeatherData]);
+
+    if (!weatherData.current) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div className={styles.weatherContainer}>
+            <div className={styles.currentTemperature}>
+                <img
+                    src={weatherData.current.icon}
+                    alt={weatherData.current.weather_description}
+                />
+                <span>{weatherData.current.temperature_2m.toFixed(1)}°C</span>
+            </div>
+            <div className={styles.dailyTemperatures}>
+                <span className={styles.minTemperature}>
+                    {weatherData.daily.temperature_2m_min[0].toFixed(1)}°C
+                </span>
+                <span className={styles.maxTemperature}>
+                    {weatherData.daily.temperature_2m_max[0].toFixed(1)}°C
+                </span>
+            </div>
+        </div>
+    );
+}

src/components/Weather/style.module.css

@@ -0,0 +1,30 @@
+.weatherContainer {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    padding: 3px;
+    padding-right: 15px;
+}
+
+.currentTemperature {
+    display: flex;
+    align-items: center;
+    font-size: 2rem;
+    font-weight: bold;
+    padding-right: 5px;
+}
+
+.dailyTemperatures {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.min-temperature {
+    color: blue;
+}
+
+.max-temperature {
+    color: red;
+}

src/index.css

@@ -1,5 +1,7 @@
 :root {
-    font-family: Arial, sans-serif;
+    font-family:
+        Noto Sans Condensed,
+        sans-serif;
     line-height: 1.5;
     font-weight: 400;
 

src/store/weather.ts

@@ -0,0 +1,389 @@
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+import fetchWeatherData from "@/api/weather";
+
+const iconNumberToPng = {
+    "0": {
+        day: {
+            description: "Sunny",
+            image: "http://openweathermap.org/img/wn/01d@2x.png",
+        },
+        night: {
+            description: "Clear",
+            image: "http://openweathermap.org/img/wn/01n@2x.png",
+        },
+    },
+    "1": {
+        day: {
+            description: "Mainly Sunny",
+            image: "http://openweathermap.org/img/wn/01d@2x.png",
+        },
+        night: {
+            description: "Mainly Clear",
+            image: "http://openweathermap.org/img/wn/01n@2x.png",
+        },
+    },
+    "2": {
+        day: {
+            description: "Partly Cloudy",
+            image: "http://openweathermap.org/img/wn/02d@2x.png",
+        },
+        night: {
+            description: "Partly Cloudy",
+            image: "http://openweathermap.org/img/wn/02n@2x.png",
+        },
+    },
+    "3": {
+        day: {
+            description: "Cloudy",
+            image: "http://openweathermap.org/img/wn/03d@2x.png",
+        },
+        night: {
+            description: "Cloudy",
+            image: "http://openweathermap.org/img/wn/03n@2x.png",
+        },
+    },
+    "45": {
+        day: {
+            description: "Foggy",
+            image: "http://openweathermap.org/img/wn/50d@2x.png",
+        },
+        night: {
+            description: "Foggy",
+            image: "http://openweathermap.org/img/wn/50n@2x.png",
+        },
+    },
+    "48": {
+        day: {
+            description: "Rime Fog",
+            image: "http://openweathermap.org/img/wn/50d@2x.png",
+        },
+        night: {
+            description: "Rime Fog",
+            image: "http://openweathermap.org/img/wn/50n@2x.png",
+        },
+    },
+    "51": {
+        day: {
+            description: "Light Drizzle",
+            image: "http://openweathermap.org/img/wn/09d@2x.png",
+        },
+        night: {
+            description: "Light Drizzle",
+            image: "http://openweathermap.org/img/wn/09n@2x.png",
+        },
+    },
+    "53": {
+        day: {
+            description: "Drizzle",
+            image: "http://openweathermap.org/img/wn/09d@2x.png",
+        },
+        night: {
+            description: "Drizzle",
+            image: "http://openweathermap.org/img/wn/09n@2x.png",
+        },
+    },
+    "55": {
+        day: {
+            description: "Heavy Drizzle",
+            image: "http://openweathermap.org/img/wn/09d@2x.png",
+        },
+        night: {
+            description: "Heavy Drizzle",
+            image: "http://openweathermap.org/img/wn/09n@2x.png",
+        },
+    },
+    "56": {
+        day: {
+            description: "Light Freezing Drizzle",
+            image: "http://openweathermap.org/img/wn/09d@2x.png",
+        },
+        night: {
+            description: "Light Freezing Drizzle",
+            image: "http://openweathermap.org/img/wn/09n@2x.png",
+        },
+    },
+    "57": {
+        day: {
+            description: "Freezing Drizzle",
+            image: "http://openweathermap.org/img/wn/09d@2x.png",
+        },
+        night: {
+            description: "Freezing Drizzle",
+            image: "http://openweathermap.org/img/wn/09n@2x.png",
+        },
+    },
+    "61": {
+        day: {
+            description: "Light Rain",
+            image: "http://openweathermap.org/img/wn/10d@2x.png",
+        },
+        night: {
+            description: "Light Rain",
+            image: "http://openweathermap.org/img/wn/10n@2x.png",
+        },
+    },
+    "63": {
+        day: {
+            description: "Rain",
+            image: "http://openweathermap.org/img/wn/10d@2x.png",
+        },
+        night: {
+            description: "Rain",
+            image: "http://openweathermap.org/img/wn/10n@2x.png",
+        },
+    },
+    "65": {
+        day: {
+            description: "Heavy Rain",
+            image: "http://openweathermap.org/img/wn/10d@2x.png",
+        },
+        night: {
+            description: "Heavy Rain",
+            image: "http://openweathermap.org/img/wn/10n@2x.png",
+        },
+    },
+    "66": {
+        day: {
+            description: "Light Freezing Rain",
+            image: "http://openweathermap.org/img/wn/10d@2x.png",
+        },
+        night: {
+            description: "Light Freezing Rain",
+            image: "http://openweathermap.org/img/wn/10n@2x.png",
+        },
+    },
+    "67": {
+        day: {
+            description: "Freezing Rain",
+            image: "http://openweathermap.org/img/wn/10d@2x.png",
+        },
+        night: {
+            description: "Freezing Rain",
+            image: "http://openweathermap.org/img/wn/10n@2x.png",
+        },
+    },
+    "71": {
+        day: {
+            description: "Light Snow",
+            image: "http://openweathermap.org/img/wn/13d@2x.png",
+        },
+        night: {
+            description: "Light Snow",
+            image: "http://openweathermap.org/img/wn/13n@2x.png",
+        },
+    },
+    "73": {
+        day: {
+            description: "Snow",
+            image: "http://openweathermap.org/img/wn/13d@2x.png",
+        },
+        night: {
+            description: "Snow",
+            image: "http://openweathermap.org/img/wn/13n@2x.png",
+        },
+    },
+    "75": {
+        day: {
+            description: "Heavy Snow",
+            image: "http://openweathermap.org/img/wn/13d@2x.png",
+        },
+        night: {
+            description: "Heavy Snow",
+            image: "http://openweathermap.org/img/wn/13n@2x.png",
+        },
+    },
+    "77": {
+        day: {
+            description: "Snow Grains",
+            image: "http://openweathermap.org/img/wn/13d@2x.png",
+        },
+        night: {
+            description: "Snow Grains",
+            image: "http://openweathermap.org/img/wn/13n@2x.png",
+        },
+    },
+    "80": {
+        day: {
+            description: "Light Showers",
+            image: "http://openweathermap.org/img/wn/09d@2x.png",
+        },
+        night: {
+            description: "Light Showers",
+            image: "http://openweathermap.org/img/wn/09n@2x.png",
+        },
+    },
+    "81": {
+        day: {
+            description: "Showers",
+            image: "http://openweathermap.org/img/wn/09d@2x.png",
+        },
+        night: {
+            description: "Showers",
+            image: "http://openweathermap.org/img/wn/09n@2x.png",
+        },
+    },
+    "82": {
+        day: {
+            description: "Heavy Showers",
+            image: "http://openweathermap.org/img/wn/09d@2x.png",
+        },
+        night: {
+            description: "Heavy Showers",
+            image: "http://openweathermap.org/img/wn/09n@2x.png",
+        },
+    },
+    "85": {
+        day: {
+            description: "Light Snow Showers",
+            image: "http://openweathermap.org/img/wn/13d@2x.png",
+        },
+        night: {
+            description: "Light Snow Showers",
+            image: "http://openweathermap.org/img/wn/13n@2x.png",
+        },
+    },
+    "86": {
+        day: {
+            description: "Snow Showers",
+            image: "http://openweathermap.org/img/wn/13d@2x.png",
+        },
+        night: {
+            description: "Snow Showers",
+            image: "http://openweathermap.org/img/wn/13n@2x.png",
+        },
+    },
+    "95": {
+        day: {
+            description: "Thunderstorm",
+            image: "http://openweathermap.org/img/wn/11d@2x.png",
+        },
+        night: {
+            description: "Thunderstorm",
+            image: "http://openweathermap.org/img/wn/11n@2x.png",
+        },
+    },
+    "96": {
+        day: {
+            description: "Light Thunderstorms With Hail",
+            image: "http://openweathermap.org/img/wn/11d@2x.png",
+        },
+        night: {
+            description: "Light Thunderstorms With Hail",
+            image: "http://openweathermap.org/img/wn/11n@2x.png",
+        },
+    },
+    "99": {
+        day: {
+            description: "Thunderstorm With Hail",
+            image: "http://openweathermap.org/img/wn/11d@2x.png",
+        },
+        night: {
+            description: "Thunderstorm With Hail",
+            image: "http://openweathermap.org/img/wn/11n@2x.png",
+        },
+    },
+};
+
+const useWeatherStore = create(
+    devtools(
+        (set) => ({
+            weatherData: {},
+            fetchWeatherData: async () => {
+                const data = await fetchWeatherData();
+
+                // Process first location. Add a for-loop for multiple locations or weather models
+                const response = data[0];
+
+                if (response === null) {
+                    console.error("Failed to fetch weather data");
+                    return;
+                }
+
+                // Attributes for timezone and location
+                const utcOffsetSeconds = response.utcOffsetSeconds();
+                const current = response.current();
+                const hourly = response.hourly();
+                const daily = response.daily();
+
+                if (!current || !hourly || !daily) {
+                    console.error("Failed to fetch weather data");
+                    return;
+                }
+
+                // Note: The order of weather variables in the URL query and the indices below need to match!
+                const weatherData = {
+                    current: {
+                        time: current.time(),
+                        temperature_2m: current.variables(0)?.value(),
+                        precipitation: current.variables(1)?.value(),
+                        rain: current.variables(2)?.value(),
+                        showers: current.variables(3)?.value(),
+                        snowfall: current.variables(4)?.value(),
+                        relative_humidity_2m: current.variables(5)?.value(),
+                        apparent_temperature: current.variables(6)?.value(),
+                        weather_code: current.variables(7)?.value(),
+                        cloud_cover: current.variables(8)?.value(),
+                        is_day: current.variables(9)?.value(),
+                    },
+                    hourly: {
+                        time: [
+                            ...Array(
+                                (Number(hourly.timeEnd()) -
+                                    Number(hourly.time())) /
+                                    hourly.interval(),
+                            ),
+                        ].map(
+                            (_, i) =>
+                                new Date(
+                                    (Number(hourly.time()) +
+                                        i * hourly.interval() +
+                                        utcOffsetSeconds) *
+                                        1000,
+                                ),
+                        ),
+                        temperature_2m: hourly.variables(0)?.valuesArray(),
+                        precipitation: hourly.variables(1)?.valuesArray(),
+                        rain: hourly.variables(2)?.valuesArray(),
+                        precipitation_probability: hourly
+                            .variables(3)
+                            ?.valuesArray(),
+                    },
+                    daily: {
+                        time: [
+                            ...Array(
+                                (Number(daily.timeEnd()) -
+                                    Number(daily.time())) /
+                                    daily.interval(),
+                            ),
+                        ].map(
+                            (_, i) =>
+                                new Date(
+                                    (Number(daily.time()) +
+                                        i * daily.interval() +
+                                        utcOffsetSeconds) *
+                                        1000,
+                                ),
+                        ),
+                        temperature_2m_max: daily.variables(0)?.valuesArray(),
+                        temperature_2m_min: daily.variables(1)?.valuesArray(),
+                    },
+                };
+
+                const isDay = weatherData.current.is_day === 1;
+                const weatherCode = weatherData.current.weather_code;
+                const url =
+                    iconNumberToPng[weatherCode][isDay ? "day" : "night"].image;
+
+                weatherData.current = { ...weatherData.current, icon: url };
+
+                set({ weatherData });
+            },
+        }),
+        {
+            name: "weather-store",
+        },
+    ),
+);
+
+export { useWeatherStore };