No more plants

src/components/HAssOverview.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { HAssStates } from "../lib/interfaces";
+import * as styles from "../styles/containers/HomeAssistant.module.css";
+
+const HASS_REFRESH_INTERVAL = 15 * 60 * 1000;
+
+const HomeAssistant = ({ hassUrl, token }: { hassUrl: string, token: string }) => {
+    const [states, setStates] = React.useState<HAssStates>({
+        daniel: false,
+        vicki: false,
+        nextbikes: 0
+    });
+    
+    const fetchState = async (entityId: string) => {
+        const response = await fetch(`${hassUrl}/api/states/${entityId}`, {
+            method: "GET",
+            headers: {
+                "Authorization": `Bearer ${token}`,
+                "Content-Type": "application/json"
+            }
+        });
+        return await response.json();
+    }
+
+    const pullStates = async () => {
+        const daniel = await fetchState("person.daniel")
+        const vicki = await fetchState("person.vicki")
+        const nextbikes = await fetchState("sensor.nextbikes")
+
+
+        console.log(daniel);
+        console.log(vicki);
+        console.log(nextbikes);
+        setStates({
+            daniel: daniel?.state === "home" ? "Zuhause" : "Unterwegs",
+            vicki: vicki?.state === "home" ? "Zuhause" : "Unterwegs",
+            nextbikes: nextbikes?.state
+        });
+    }
+
+    React.useEffect(() => {
+        pullStates()
+        const statesInterval = setInterval(pullStates.bind(this), HASS_REFRESH_INTERVAL);
+
+        return () => clearInterval(statesInterval);
+    }, [])
+
+    return <div className={`container ${styles.container}`}>
+        <span>Daniel: {states.daniel}</span>
+        <span>Vicki: {states.vicki}</span>
+        <span>NextBikes: {states.nextbikes}</span>
+    </div>
+}
+
+export default HomeAssistant;

src/lib/interfaces.ts

@@ -73,6 +73,12 @@ export interface PlantState {
     }
 }
 
+export interface HAssStates {
+    daniel: string|number|boolean;
+    vicki: string|number|boolean;
+    nextbikes: string|number|boolean;
+}
+
 export type SongInfo = {
     playbackState: "PLAYING" | "PAUSE" | "STOPPED";
     title?: string;

src/pages/index.tsx

@@ -7,6 +7,7 @@ import Spotify from "../components/Spotify";
 import PlantState from "../components/PlantState";
 import WeatherAndTimeContainer from "../components/WeatherAndTime"
 import WeatherRadar from "../components/WeatherRadar";
+import HomeAssistant from "../components/HAssOverview";
 
 function importAll(r) {
   return r.keys().map(r);
@@ -40,7 +41,7 @@ const IndexPage = () => {
     <WeatherRadar />
     <News />
     <DVB stopId={secrets.dvb.stopId} />
-    <Spotify mqtt={secrets.mqtt} Alternative={<PlantState hassUrl={secrets.hass.url} token={secrets.hass.token} plants={["Basilikum", "Chili"]} />} />
+    <Spotify mqtt={secrets.mqtt} Alternative={<HomeAssistant hassUrl={secrets.hass.url} token={secrets.hass.token} />} />
   </main>)
 }
 

src/styles/containers/HomeAssistant.module.css

@@ -0,0 +1,10 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: 100%;
+    font-size: 2em;
+    font-weight: bold;
+    line-height: 1.5;
+    padding: 20px;
+}