Express-Prorate/project/ui/app.slint

import { DatePickerPopup, Button, VerticalBox, HorizontalBox, ComboBox } from "std-widgets.slint";
import { Calculation } from "calculation.slint";

export struct CalcResult {
    message: string,
    start: int,
    end: int,
}

export component Prorater inherits Window {
    title: "Auto Spa Express - Prorater";
    width: 1024px;
    height: 720px;

    in property <[string]> membership_names: ["Select One..."];
    out property <string> last_billing: "NULL";
    out property <string> current_membership;
    out property <string> new_membership;
    property <CalcResult> calculation_result;
    callback on_calculate() -> CalcResult;

    VerticalBox {
        Image {
            source: @image-url("../data/logo.png");
            width: 25%;
            height: 25%;
        }

        Text {
            text: "Auto Spa Express - Prorate Tool";
            font-size: 4rem;
            horizontal-alignment: center;
        }

        VerticalBox {
            HorizontalBox {
                VerticalBox {
                    Text {
                        text: "Current Membership";
                        font-size: 1.25rem;
                    }

                    current_membership := ComboBox {
                        model: root.membership_names;
                        current-index: 0;
                        selected(current-value) => {
                            root.current_membership = current-value;
                        }
                    }
                }

                VerticalBox {
                    Text {
                        text: "New Membership";
                        font-size: 1.25rem;
                    }

                    new_membership := ComboBox {
                        model: root.membership_names;
                        current-index: 0;
                        selected(current-value) => {
                            root.new_membership = current-value;
                        }
                    }
                }
            }
        }

        VerticalBox {
            HorizontalBox {
                last_billing_date := Button {
                    text: "Last Billing Date";
                    clicked => {
                        date-picker.show();
                    }
                }
            }
        }

        VerticalBox {
            Button {
                text: "Calculate";
                clicked => {
                    calculation_result = on_calculate();
                    calculation.show();
                }
            }

            result_text := Text {
                text: "";
                padding-top: 50px;
                font-size: 1.25rem;
                horizontal-alignment: center;
            }
        }

        date_picker := DatePickerPopup {
            x: (root.width - self.width) / 2;
            y: (root.height - self.height) / 2;
            close-policy: PopupClosePolicy.no-auto-close;

            accepted(date) => {
                date_picker.close();
                root.last_billing = date.month + "/" + date.day + "/" + date.year;
                last_billing_date.text = root.last_billing;
            }

            canceled => {
                date-picker.close();
            }
        }

        calculation := Calculation {
            message: calculation_result.message;
            start: calculation_result.start;
            end: calculation_result.end;
            x: (root.width - self.width) / 2;
            y: (root.height - self.height) / 2;
        }
    }
}