1786089862

ui/main.slint

@@ -9,22 +9,32 @@ import { Horizontal, Vertical, Switch } from "./material.slint";
 import "./fonts/Roboto-VariableFont.ttf";
 import { FilledIcons, OutlinedIcons } from "./icons.slint";
 
+export struct LightData {
+    name: string,
+    entity_id: string,
+    on: bool,
+    available: bool,
+}
+
 component LightSwitch inherits Horizontal {
-    in property <string> text: "";
-    in_out property <bool> checked;
-    in property <bool> enabled: true;
+    in property <LightData> light;
+    callback toggled(string);
+
+    TouchArea {
+        clicked => { if root.light.available { root.toggled(root.light.entity_id); } }
+    }
 
     alignment: end;
-    Text {
-        text: root.text;
+    label := Text {
+        text: root.light.name;
         vertical-alignment: center;
         horizontal-alignment: right;
-        font-size: 18px;
-        font-weight: root.checked ? 700 : 500;
+        font-size: 24px;
+        font-weight: root.light.on ? 700 : 500;
     }
-    Switch {
-        enabled: root.enabled;
-        checked: root.checked;
+    switch := Switch {
+        enabled: root.light.on;
+        checked: root.light.available;
     }
 }
 
@@ -37,8 +47,10 @@ export component MainWindow inherits Window {
     preferred-height: 600px;
     default-font-family: "Roboto";
 
+    in property <[LightData]> lights;
+    callback toggle-light(string);
+
     in-out property <int> current-page: 0;
-    in property <string> text: "Hello World";
     in property <string> next-event-label: "NEXT EVENT";
     in property <string> next-event-title: "LOADING CALENDAR";
     in property <string> next-event-time: "6:00 pm";
@@ -122,39 +134,9 @@ export component MainWindow inherits Window {
             Vertical {
                 alignment: start;
 
-                LightSwitch {
-                    text: "Armory Light";
-                }
-
-                LightSwitch {
-                    text: "Bedroom Light";
-                }
-
-                LightSwitch {
-                    text: "Hallway Light";
-                }
-
-                LightSwitch {
-                    text: "Kitchen Light";
-                }
-
-                LightSwitch {
-                    text: "Living Room Light";
-                    checked: true;
-                }
-
-                LightSwitch {
-                    text: "Shower Light";
-                }
-
-                LightSwitch {
-                    text: "Utilities Light";
-                    enabled: false;
-                    checked: false;
-                }
-
-                LightSwitch {
-                    text: "WC Light";
+                for light_data in root.lights: LightSwitch {
+                    light: light_data;
+                    toggled(entity_id) => { root.user-activity(); root.toggle-light(entity_id); }
                 }
             }
         }