aliveline/ui/record.slint

import { VerticalBox, LineEdit, Button, ComboBox } from "std-widgets.slint";
import { Timeline, TimelineState } from "timeline.slint";

export component RecordWidget inherits VerticalLayout {
    callback update-visible-time(string);
    callback start-new-event(string);
    callback chain-event(string);
    callback stop-event;
    callback get-previous-event();

    in-out property<TimelineState> state;
    in property<[string]> combo-spans: [];
    in-out property<bool> in-progress: false;
    property<string> event-name: "";
    in property<string> previous-event-name: "";
    property<int> combo-index: 0;
    in-out property <bool> minimized;

    if !minimized: GridLayout {
        spacing-vertical: 8px;
        spacing-horizontal: 16px;
        padding: 8px;
        le := LineEdit {
            placeholder-text: "Event name";
            text: event-name;
            font-size: 24px;
            horizontal-alignment: center;
            colspan: 6;
            row: 0;
            edited(text) => {
                event-name = text;
            }
        }
        Button {
            text: in-progress ? "Stop" : "Start";
            row: 1;
            colspan: 2;
            clicked => {
                if in-progress {
                    root.stop-event();
                } else {
                    root.start-new-event(event-name);
                    root.get-previous-event();
                }
                in-progress = !in-progress;
            }
        }
        Button {
            text: "Chain";
            enabled: in-progress;
            col: 2;
            row: 1;
            colspan: 2;
            clicked => {
                root.chain-event(event-name);
                root.get-previous-event();
            }
        }
        Button {
            text: previous-event-name == "" ? "Chain previous event (None)" : "Chain previous event (\{previous-event-name})";
            enabled: in-progress && previous-event-name != "";
            col: 4;
            row: 1;
            colspan: 2;
            clicked => {
                event-name = previous-event-name;
                root.chain-event(event-name);
                root.get-previous-event();
            }
        }
        Text {
            text: "Span: ";
            font-size: 24px;
            row: 2;
            colspan: 3;
            horizontal-alignment: right;
        }
        ComboBox {
            model: combo-spans;
            current-index: combo-index;
            row: 2;
            col: 3;
            colspan: 3;
            selected(current-value) => {
                root.update-visible-time(current-value);
                combo-index = self.current-index;
            }
        }
    }
}