dashboard/ui/main.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { LineEdit } from "std-widgets.slint";
import { ComponentCard } from "./components/component_card.slint";

import { Horizontal, Vertical, Switch } from "./material.slint";

import "./fonts/Roboto-VariableFont.ttf";
import { FilledIcons, OutlinedIcons } from "./icons.slint";

component LightSwitch inherits Horizontal {
    in property <string> text: "";
    in_out property <bool> checked: false;
    in property <bool> enabled: true;

    alignment: end;
    Text {
        text: root.text;
        vertical-alignment: center;
        horizontal-alignment: right;
        font-size: 18px;
        font-weight: root.checked ? 700 : 500;
    }
    Switch {
        enabled: root.enabled;
        checked: root.checked;
    }
}


// The window the user interacts with. Edits to the inputs propagate to
// the SystemTrayIcon instance via the host language's callbacks.
export component MainWindow inherits Window {
    title: "Dashboard";
    preferred-width: 1024px;
    preferred-height: 600px;
    default-font-family: "Roboto";

    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";

    callback user-activity();

    Rectangle {
        x: 0;
        y: 0;
        width: parent.width;
        height: 5px;
        background: black;
    }

    Rectangle {
        x: 0;
        y: 0;
        width: parent.width / 2;
        height: parent.height;
        background: black;
    }

    TouchArea {
        x: 0;
        y: 5px;
        width: parent.width - 78px;
        height: 78px;
        clicked => { root.user-activity(); root.current-page = 2; }
    }

    Text {
        x: 38px;
        y: 12px;
        width: (parent.width / 2) - (38px * 2) - 100px;
        height: 18px;
        text: root.next-event-label;
        font-size: 14px;
        font-weight: 700;
    }

    Text {
        x: 38px;
        y: 32px;
        width: (parent.width / 2) - (38px * 2) - 100px;
        height: 36px;
        text: root.next-event-title;
        font-size: 22px;
        font-weight: 700;
        overflow: elide;
        vertical-alignment: center;
    }

    Text {
        x: (root.width / 2) - self.width - 38px;
        y: 32px;
        width: 100px;
        height: 36px;
        text: root.next-event-time;
        font-size: 18px;
        font-weight: 700;
        horizontal-alignment: right;
        vertical-alignment: center;
    }

    Rectangle {
        x: 0px;
        y: 32px + 36px + 5px;
        width: (root.width / 2);
        height: root.height - (32px + 36px + 5px);
    }

    Rectangle {
        x: (root.width / 2);
        y: 5px;
        width: (root.width / 2);
        height: root.height - 10px;

        ComponentCard {
            title: "Lights";

            Vertical {
                alignment: start;

                LightSwitch {
                    text: "Armory Light";
                }

                LightSwitch {
                    text: "Bedroom Light";
                }

                LightSwitch {
                    text: "Hallway Light";
                }

                LightSwitch {
                    text: "Kitchen Light";
                }

                LightSwitch {
                    text: "Living Room Light";
                    enabled: true;
                }

                LightSwitch {
                    text: "Shower Light";
                }

                LightSwitch {
                    text: "Utilities Light";
                    enabled: false;
                    checked: false;
                }

                LightSwitch {
                    text: "WC Light";
                }
            }
        }
    }
}