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

// 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;
                Horizontal {
                    alignment: end;
                    Text {
                        text: "Armory Light";
                        vertical-alignment: center;
                        horizontal-alignment: right;
                        font-size: 18px;
                        font-weight: 500;
                    }
                    Switch {
                        checked: false;
                    }
                }

                Horizontal {
                    alignment: end;
                    Text {
                        text: "Bedroom Light";
                        vertical-alignment: center;
                        horizontal-alignment: right;
                        font-size: 18px;
                        font-weight: 500;
                    }
                    Switch {
                        checked: false;
                    }
                }

                Horizontal {
                    alignment: end;
                    Text {
                        text: "Hallway Light";
                        vertical-alignment: center;
                        horizontal-alignment: right;
                        font-size: 18px;
                        font-weight: 500;
                    }
                    Switch {
                        checked: false;
                    }
                }

                Horizontal {
                    alignment: end;
                    Text {
                        text: "Kitchen Light";
                        vertical-alignment: center;
                        horizontal-alignment: right;
                        font-size: 18px;
                        font-weight: 500;
                    }
                    Switch {
                        checked: false;
                    }
                }

                Horizontal {
                    alignment: end;
                    Text {
                        text: "Living Room Light";
                        vertical-alignment: center;
                        horizontal-alignment: right;
                        font-size: 18px;
                        font-weight: 700;
                    }
                    Switch {
                        checked: true;
                    }
                }

                Horizontal {
                    alignment: end;
                    Text {
                        text: "Shower Light";
                        vertical-alignment: center;
                        horizontal-alignment: right;
                        font-size: 18px;
                        font-weight: 500;
                    }
                    Switch {
                        checked: false;
                    }
                }

                Horizontal {
                    alignment: end;
                    Text {
                        text: "Utilities Light";
                        vertical-alignment: center;
                        horizontal-alignment: right;
                        font-size: 18px;
                        font-weight: 500;
                    }
                    Switch {
                        enabled: false;
                        checked: false;
                    }
                }

                Horizontal {
                    alignment: end;
                    Text {
                        text: "WC Light";
                        vertical-alignment: center;
                        horizontal-alignment: right;
                        font-size: 18px;
                        font-weight: 500;
                    }
                    Switch {
                        checked: false;
                    }
                }
            }
        }
    }
}