-
diff --git a/src/components/Footer/style.module.css b/src/components/Footer/style.module.css
index 5b09dc8..eacfb09 100644
--- a/src/components/Footer/style.module.css
+++ b/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;
-}
-
-.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;
+ height: 20px;
}
.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;
diff --git a/src/components/Terminal/Terminal.tsx b/src/components/Terminal/Terminal.tsx
index e3cea94..bd4e56a 100644
--- a/src/components/Terminal/Terminal.tsx
+++ b/src/components/Terminal/Terminal.tsx
@@ -1,8 +1,7 @@
-import { useHomeAssistantStore } from "@/store/homeAssistant";
import { useEffect, useState } from "react";
-
-import style from "./style.module.css";
+import { useHomeAssistantStore } from "@/store/homeAssistant";
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() {
-
diff --git a/src/components/Dashboard/style.module.css b/src/components/Dashboard/style.module.css
index b78f3e3..b773a63 100644
--- a/src/components/Dashboard/style.module.css
+++ b/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 {
- 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 {
+.small {
width: 45%;
}
+.terminal {
+ margin: 2px;
+}
+
.footer {
background-color: #c0c0c0;
}
diff --git a/src/components/Datetime/style.module.css b/src/components/Datetime/style.module.css
index ad15448..8a0d38e 100644
--- a/src/components/Datetime/style.module.css
+++ b/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;
+ }
}
diff --git a/src/components/Flatastic/Flatastic.tsx b/src/components/Flatastic/Flatastic.tsx
index cce0b55..270db81 100644
--- a/src/components/Flatastic/Flatastic.tsx
+++ b/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 = {};
users.forEach((user: FlatasticUser) => {
@@ -35,11 +37,11 @@ export default function Flatastic() {
className = "irregular";
} else {
className = chore.timeLeftNext <= 0 ? "due" : "notDue";
- timeLeftInDays =
- {Math.abs(
- Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
- )}d
- ;
+ timeLeftInDays = (
+
+ {Math.abs(Math.floor(chore.timeLeftNext / (60 * 60 * 24)))}d
+
+ );
}
return (
@@ -56,7 +58,7 @@ export default function Flatastic() {
});
return (
-
๐ Timetable
-
-
+
+
+
-
+
-
+
+
+
+
+
+
-
-
-
-
- ๐ Clock
-
-
-
-
-
- ๐ Terminal
-
-
+ ๐งน Flatastic
-
-
-
+
diff --git a/src/components/Flatastic/style.module.css b/src/components/Flatastic/style.module.css
index eb1f027..46582c7 100644
--- a/src/components/Flatastic/style.module.css
+++ b/src/components/Flatastic/style.module.css
@@ -1,3 +1,7 @@
+.container {
+ padding: 1px 100px 30px 100px;
+}
+
.choreList {
list-style-type: none;
display: flex;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 08fe504..7909725 100644
--- a/src/components/Footer/Footer.tsx
+++ b/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
-
Chores
- {choresRender}
- ๐ Timetable
- ๐ Clock
- ๐ Terminal
- ๐งน Flatastic
+
+ ๐Timetable
+
+
+ ๐Clock
+
+
+ ๐Terminal
+
+
+ ๐งนFlatastic
+
- {" "}-///:.{" "}
+ {" -///:. "}
tent@
home
@@ -84,9 +83,8 @@ export default function Terminal() {
{text}
-
- [sus@home ~/hallway]{"$"}
- {" "}
+ [sus@home ~/hallway]{"$"}
+ {" โ"}
+
state.weatherData);
+ const fetchWeatherData = useWeatherStore((state) => state.fetchWeatherData);
+
+ useEffect(() => {
+ fetchWeatherData();
+ const interval = setInterval(() => {
+ fetchWeatherData();
+ }, 10 * 60000);
+ return () => clearInterval(interval);
+ }, [fetchWeatherData]);
+
+ if (!weatherData.current) {
+ return
Departures
Loading...
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/components/Weather/style.module.css b/src/components/Weather/style.module.css
new file mode 100644
index 0000000..ee8acbd
--- /dev/null
+++ b/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;
+}
diff --git a/src/index.css b/src/index.css
index f18b694..d9326cf 100644
--- a/src/index.css
+++ b/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;
diff --git a/src/store/Weather/Weather.ts b/src/store/Weather/Weather.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/store/weather.ts b/src/store/weather.ts
new file mode 100644
index 0000000..4175599
--- /dev/null
+++ b/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 };
+ 
+ {weatherData.current.temperature_2m.toFixed(1)}ยฐC
+
+
+
+ {weatherData.daily.temperature_2m_min[0].toFixed(1)}ยฐC
+
+
+ {weatherData.daily.temperature_2m_max[0].toFixed(1)}ยฐC
+
+
+