dashboard/dashboard/ui/main.slint

import {
    Palette,
    StyleMetrics,
    Button,
    ScrollView,
    VerticalBox,
    HorizontalBox,
    StandardTableView,
} from "std-widgets.slint";

import { Climate, WeatherData } from "./climate.slint";
import { Calendar } from "calendar.slint";
import { Energy } from "energy.slint";

export struct LightData {
    id: string,
    name: string,
    on: bool,
    available: bool,
}

export struct ThermometerData {
    id: string,
    name: string,
    value: string,
    unit: string,
}

export struct DateTimeData {
    id: string,
    date: string,
    time: string,
}

component Clock {
    in property <DateTimeData> date-time;

    VerticalLayout {
        alignment: center;
        padding-left: 5px;
        padding-right: StyleMetrics.layout-padding;

        Text {
            text: date-time.date;
            height: 16px;
            font-weight: 100;
            horizontal-alignment: right;
        }

        Text {
            text: date-time.time;
            font-size: 19px;
            height: 19px;
            font-weight: 500;
            horizontal-alignment: right;
        }
    }
}

component Thermometer inherits Rectangle {
    in property <ThermometerData> thermometer;
    border-radius: 16px + 19px;
    border-width: 2px;
    border-color: Palette.alternate-background;
    background: Palette.alternate-background;

    VerticalLayout {
        alignment: center;
        padding-left: parent.border-radius / 2;
        padding-right: parent.border-radius / 2;

        Text {
            text: thermometer.name;
            height: 16px;
            font-weight: 100;
        }

        Text {
            text: "\{thermometer.value} \{thermometer.unit}";
            height: 19px;
            font-size: 19px;
            font-weight: 500;
        }
    }
}

export component AppWindow inherits Window {
    width: 1024px;
    height: 600px;
    default-font-size: 16px;

    property <int> page: 0;

    in property <DateTimeData> date-time;

    in property <WeatherData> weather;
    in property <bool> is-night;

    in property <[ThermometerData]> thermometers;

    in property <[LightData]> lights;
    callback toggle-light(string);

    VerticalLayout {
        width: root.width;
        height: root.height;
        HorizontalLayout {
            alignment: center;
            height: 64px;
            spacing: 15px;
            padding: StyleMetrics.layout-padding / 2;

            Rectangle {
                preferred-width: parent.width;
                height: parent.height;
            }

            for thermometer[index] in root.thermometers: Thermometer {
                thermometer: thermometer;
            }

            Rectangle {
                preferred-width: parent.width;
                height: parent.height;
            }

            Clock {
                date-time: date-time;
            }
        }

        HorizontalLayout {
            height: root.height - 64px;
            Rectangle {
                preferred-width: root.width;
                VerticalLayout {
                    if root.page == 0: Climate {
                        is-night: is-night;
                        weather: weather;
                    }
                    if root.page == 1: Calendar { }
                    if root.page == 2: Energy { }

                    Rectangle {
                        height: 64px;
                        HorizontalBox {
                            padding-top: 0;
                            Button {
                                text: "Climate";
                                clicked => { root.page = 0; }
                                primary: root.page == 0;
                            }

                            Button {
                                text: "Calendar";
                                clicked => { root.page = 1; }
                                primary: root.page == 1;
                            }

                            Button {
                                text: "Energy";
                                clicked => { root.page = 2; }
                                primary: root.page == 2;
                            }
                        }
                    }
                }
            }

            VerticalBox {
                preferred-width: 0;
                for light[index] in root.lights: Button {
                    text: light.name;
                    primary: light.on;
                    enabled: light.available;
                    clicked => { toggle-light(light.id) }
                }
            }
        }
    }
}