Switch new display to Vue

2026-01-20 01:25:38 -05:00 · 2024-03-04 01:18:45 +00:00
parent a8e60c2e87
commit 4aaa9064fb
62 changed files with 2863 additions and 1569 deletions
--- a/WebDisplay/src/components/CurrentLaundryStatus.vue
+++ b/WebDisplay/src/components/CurrentLaundryStatus.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+    import { useLaundryStore } from '@/stores/laundryStore';
+
+    const laundryStore = useLaundryStore();
+    laundryStore.start();
+</script>
+
+<template>
+    <DashboardItem title="Laundry">
+        <div className="laundry-current">
+            <div v-if="!laundryStore.current">Loading...</div>
+            <table v-else>
+                <tbody>
+                    <tr v-if="laundryStore.current.dryer != null">
+                        <td className="laundry-current-header">Dryer</td>
+                        <td :className="laundryStore.current.dryer.toString()">
+                            {{ laundryStore.current.dryer ? 'On' : 'Off' }}
+                        </td>
+                    </tr>
+                    <tr v-if="laundryStore.current.washer != null">
+                        <td className="laundry-current-header">Washer</td>
+                        <td :className="laundryStore.current.washer.toString()">
+                            {{ laundryStore.current.washer ? 'On' : 'Off' }}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DashboardItem>
+</template>
+
+<style>
+    .laundry-current {
+        font-size: 14px;
+        padding: 6px 12px;
+    }
+
+    .laundry-current-header {
+        font-weight: 500;
+        text-align: right;
+        padding-right: 10px;
+    }
+
+    .true {
+        color: darkgoldenrod;
+    }
+
+    .false {
+        color: darkgreen;
+    }
+</style>