Continue kiosk work

WebDisplay/src/environment.ts

@@ -4,4 +4,20 @@ export default class Environment {
     public static getUrlPrefix(): string {
         return config.API_PREFIX;
     }
+
+    public static getHomeAssistantUrl(): string {
+        return config.HOME_ASSISTANT_URL;
+    }
+
+    public static getHomeAssistantToken(): string {
+        return config.HOME_ASSISTANT_TOKEN;
+    }
+
+    public static getGarageDevice(): string {
+        return config.GARAGE_DEVICE;
+    }
+
+    public static getAlarmDevice(): string {
+        return config.ALARM_DEVICE;
+    }
 }

WebDisplay/src/models/home-assistant/home-assistant.ts

@@ -0,0 +1,64 @@
+let messageId: number = 1;
+
+export enum MessageType {
+    auth_invalid = 'auth_invalid',
+    auth_ok = 'auth_ok',
+    auth_required = 'auth_required',
+    event = 'event',
+    pong = 'pong',
+    result = 'result'
+}
+
+export interface OutgoingMessage {
+    id: number | undefined;
+    type: string;
+}
+
+export interface IncomingMessage {
+    id: number | undefined;
+    type: string;
+    success: boolean | undefined;
+    result: any;
+}
+
+export class AuthMessage implements OutgoingMessage {
+    id = undefined;
+    type: string = 'auth';
+    access_token: string | null = null;
+
+    constructor(access_token: string) {
+        this.access_token = access_token;
+    }
+}
+
+export class SubscribeEntitiesMessage implements OutgoingMessage {
+    id = messageId++;
+    type = 'subscribe_entities';
+    entity_ids: string[] = [];
+
+    constructor(entity_ids: string[]) {
+        this.entity_ids = entity_ids;
+    }
+}
+
+export interface EventMessage extends IncomingMessage {
+    event: StatesUpdates;
+}
+
+export interface EntityState {
+    /** state */
+    s: string;
+    /** attributes */
+    a: { [key: string]: any };
+    /** last_changed; if set, also applies to lu */
+    lc: number;
+    /** last_updated */
+    lu: number;
+}
+
+export interface StatesUpdates {
+    /** add */
+    a?: Record<string, EntityState>;
+    /** remove */
+    r?: string[]; // remove
+}

WebDisplay/src/pages/kiosk.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-    import { ref } from 'vue';
+    import { capitalize, ref } from 'vue';
     import { useWeatherStore } from '@/stores/weatherStore';
     import { useLaundryStore } from '@/stores/laundryStore';
     import { usePowerStore } from '@/stores/powerStore';
+    import { useHomeAssistantStore } from '@/stores/homeAssistantStore';
 
     const weatherStore = useWeatherStore();
     weatherStore.start();
@@ -13,6 +14,9 @@
     const powerStore = usePowerStore();
     powerStore.start();
 
+    const homeAssistantStore = useHomeAssistantStore();
+    homeAssistantStore.start();
+
     const currentTime = ref(new Date());
 
     const timeFormatter = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit' });
@@ -45,38 +49,66 @@
                 {{ weatherStore.current?.Humidity?.toFixed(0) + '%' }}
             </div>
             <div
-                class="kiosk-generation pl-2 pt-4"
+                class="kiosk-generation text-center pt-4"
                 v-if="powerStore.current">
                 <v-icon
                     class="kiosk-device"
                     icon="mdi-solar-power-variant" />
-                {{ (powerStore.current!.Generation < 0 ? 0 : powerStore.current!.Generation) + '&thinsp;W' }}
+                <div>
+                    {{ (powerStore.current!.Generation < 0 ? 0 : powerStore.current!.Generation) + '&thinsp;W' }}
+                </div>
             </div>
             <div
-                class="kiosk-consumption pl-2 pt-4"
+                class="kiosk-consumption text-center pt-4"
                 v-if="powerStore.current">
                 <v-icon
                     class="kiosk-device"
                     icon="mdi-home-lightning-bolt" />
-                {{ powerStore.current.Consumption + '&thinsp;W' }}
+                <div>
+                    {{ powerStore.current.Consumption + '&thinsp;W' }}
+                </div>
             </div>
             <div
-                class="kiosk-washer pl-2 pt-4"
+                class="kiosk-washer text-center pt-4"
                 v-if="laundryStore?.current?.washer !== undefined"
                 :class="laundryStore.current.washer.toString()">
                 <v-icon
                     class="kiosk-device"
                     icon="mdi-washing-machine" />
-                {{ laundryStore.current.washer ? 'On' : 'Off' }}
+                <div>
+                    {{ laundryStore.current.washer ? 'On' : 'Off' }}
+                </div>
             </div>
             <div
-                class="kiosk-dryer pl-2 pt-4"
+                class="kiosk-dryer text-center pt-4"
                 v-if="laundryStore?.current?.dryer !== undefined"
                 :class="laundryStore.current.dryer.toString()">
                 <v-icon
                     class="kiosk-device"
                     icon="mdi-tumble-dryer" />
-                {{ laundryStore.current.dryer ? 'On' : 'Off' }}
+                <div>
+                    {{ laundryStore.current.dryer ? 'On' : 'Off' }}
+                </div>
+            </div>
+            <div
+                class="kiosk-garage-door text-center pt-4"
+                v-if="homeAssistantStore?.garageState">
+                <v-icon
+                    class="kiosk-device"
+                    :icon="homeAssistantStore.garageState === 'closed' ? 'mdi-garage' : 'mdi-garage-open'" />
+                <div>
+                    {{ capitalize(homeAssistantStore.garageState) }}
+                </div>
+            </div>
+            <div
+                class="kiosk-house-alarm text-center pt-4"
+                v-if="homeAssistantStore?.houseAlarmState">
+                <v-icon
+                    class="kiosk-device"
+                    icon="mdi-shield-home" />
+                <div>
+                    {{ capitalize(homeAssistantStore.houseAlarmState) }}
+                </div>
             </div>
         </div>
     </v-container>
@@ -114,7 +146,7 @@
 
         display: grid;
         grid-template-columns: repeat(2, 50%);
-        grid-template-rows: repeat(5, auto) 1fr;
+        grid-template-rows: repeat(6, auto) 1fr;
         grid-column-gap: 0px;
         grid-row-gap: 0px;
 
@@ -123,7 +155,8 @@
             'kiosk-date kiosk-date'
             'kiosk-temperature kiosk-humidity'
             'kiosk-generation kiosk-consumption'
-            'kiosk-washer kiosk-dryer';
+            'kiosk-washer kiosk-dryer'
+            'kiosk-garage-door kiosk-house-alarm';
     }
 
     .kiosk-time {
@@ -162,6 +195,14 @@
         grid-area: kiosk-dryer;
     }
 
+    .kiosk-garage-door {
+        grid-area: kiosk-garage-door;
+    }
+
+    .kiosk-house-alarm {
+        grid-area: kiosk-house-alarm;
+    }
+
     .kiosk-device {
         font-size: 2.5rem;
     }

WebDisplay/src/stores/homeAssistantStore.ts

@@ -0,0 +1,92 @@
+import { defineStore } from 'pinia';
+import { WebSocketStream } from 'websocketstream-polyfill';
+import { MessageType, AuthMessage, IncomingMessage, SubscribeEntitiesMessage, EventMessage } from '@/models/home-assistant/home-assistant';
+
+import Environment from '@/environment';
+
+export const useHomeAssistantStore = defineStore('home-assistant', {
+    state: () => {
+        return {
+            garageState: null as string | null,
+            houseAlarmState: null as string | null,
+            _wss: null as WebSocketStream | null
+        };
+    },
+    actions: {
+        async start() {
+            if (!Environment.getHomeAssistantUrl() || !Environment.getHomeAssistantToken()) {
+                return;
+            }
+
+            const garageDevice = Environment.getGarageDevice();
+            const alarmDevice = Environment.getAlarmDevice();
+
+            this._wss = new WebSocketStream(Environment.getHomeAssistantUrl());
+
+            const { readable, writable } = await this._wss.opened;
+
+            const reader = readable.getReader();
+            const writer = writable.getWriter();
+
+            while (true) {
+                const { value, done } = await reader.read();
+
+                const message = JSON.parse(value as string) as IncomingMessage;
+
+                console.info(message);
+
+                switch (message.type) {
+                    case MessageType.auth_required:
+                        const authMessage = new AuthMessage(Environment.getHomeAssistantToken());
+                        writer.write(JSON.stringify(authMessage));
+                        break;
+                    case MessageType.auth_ok:
+                        const subscribeEntitiesMessage = new SubscribeEntitiesMessage([
+                            garageDevice,
+                            alarmDevice
+                        ]);
+                        writer.write(JSON.stringify(subscribeEntitiesMessage));
+                        break;
+                    case MessageType.event:
+                        const eventMessage = message as EventMessage;
+
+                        if (!eventMessage?.event?.a) {
+                            break;
+                        }
+
+                        const garageEntity = eventMessage.event.a[garageDevice];
+
+                        if (garageEntity) {
+                            this.$patch({ garageState: garageEntity.s });
+                        }
+
+                        const houseAlarmEntity = eventMessage.event.a[alarmDevice];
+
+                        if (houseAlarmEntity) {
+                            this.$patch({ houseAlarmState: houseAlarmEntity.s });
+                        }
+
+                        break;
+                    case MessageType.result:
+                        // Handle result type
+                        break;
+                    default:
+                        // Handle unknown message type
+                        break;
+                }
+
+                if (done) {
+                    break;
+                }
+            }
+        },
+        async stop() {
+            if (!this._wss) {
+                return;
+            }
+
+            this._wss.close();
+            this._wss = null;
+        }
+    }
+});