test.slint

import { Button, VerticalBox , Switch, TabWidget, HorizontalBox, Slider, ComboBox, GroupBox} from "std-widgets.slint";

export struct NetworkDetails {
    ssid: string,
    connected: bool,
    strength: int
}

component WifiNetworkList inherits VerticalLayout {
    in property <bool> enabled;
    in property <[NetworkDetails]> networks;

    states [
        expanded when enabled: {
            height: self.min-height;
        }
        closed when !enabled: {
            height: 0px;
            opacity: 0;
        }
    ]

    animate height {
        duration: 250ms;
    }
    animate opacity {
         duration: 250ms;
    }

    for network in networks: HorizontalBox {
        Text {
            text: network.ssid + (network.connected ? " 🛜 " : " ");
        }
        Text {
            horizontal-alignment: right;
            text: "\{network.strength}%";
        }
    }
}

export component AppWindow inherits Window {

    in-out property <[NetworkDetails]> wifi-networks: [
        { ssid: "Toradex Customers", connected: true, strength: 80 },
        { ssid: "Toradex Guests", connected: false, strength: 80 },
        { ssid: "Free Airport WiFi", connected: false, strength: 30 },
    ];

    callback bluetooth-toggled(bool);
    callback reboot-device();

    VerticalBox {
        HorizontalLayout {
            Text {
                text: "Control Panel";
                font-size: 2rem;
            }
            Text {
                text: "12:34";
                horizontal-alignment: right;
            }
        }
        TabWidget {
            Tab {
                title: "Networking";
                VerticalBox {
                    alignment: start;
                    wifi-enabled := Switch {
                        text: "WiFi";
                    }
                    GroupBox {
                        title: "Networks:";

                        WifiNetworkList {
                            enabled: wifi-enabled.checked;
                            networks <=> root.wifi-networks;
                        }
                    }
                    Switch {
                        text: "Bluetooth";
                        toggled => {
                            root.bluetooth-toggled(self.checked);
                        }
                    }
                    Switch {
                        text: "VPN";
                    }
                }
            }
            Tab {
                title: "Display Settings";
                VerticalBox {
                    alignment: start;
                    GroupBox {
                        title: "Brightness";
                        VerticalBox {
                            Slider {
                                maximum: 100;
                                value: 60;
                                enabled: !auto-brightness.checked;
                            }
                            auto-brightness := Switch {
                                text: "Automatic Brightness";
                                checked: false;
                            }
                        }
                    }
                    GroupBox {
                        title: "Screen Refresh Rate";
                        ComboBox {
                            model: [
                                "30Hz",
                                "60Hz",
                                "120Hz",
                                "140Hz"
                            ];
                        }
                    }
                }
            }
        }
        HorizontalBox {
            alignment: start;
            Button {
                text: "Enter Service Mode";
            }
            Button {
                text: "Reboot Device";
                clicked => { root.reboot-device(); }
            }
        }
     }
}