Timeline

src/main.rs

@@ -7,15 +7,7 @@ slint::include_modules!();
 
 fn main() -> Result<(), Box<dyn Error>> {
     let ui = AppWindow::new()?;
-
-    ui.on_request_increase_value({
-        let ui_handle = ui.as_weak();
-        move || {
-            let ui = ui_handle.unwrap();
-            ui.set_counter(ui.get_counter() + 1);
-        }
-    });
-
+    
     ui.run()?;
 
     Ok(())

ui/app-window.slint

@@ -1,18 +1,16 @@
-import { Button, VerticalBox } from "std-widgets.slint";
+import { TabWidget } from "std-widgets.slint";
+import { RecordWidget } from "record.slint";
+import { ReviewWidget } from "review.slint";
 
 export component AppWindow inherits Window {
-    in-out property <int> counter: 42;
-    callback request-increase-value();
-    VerticalBox {
-        Text {
-            text: "Counter: \{root.counter}";
+    TabWidget {
+        Tab {
+            title: "Record";
+            RecordWidget {}
         }
-
-        Button {
-            text: "Increase value";
-            clicked => {
-                root.request-increase-value();
-            }
+        Tab {
+            title: "Review";
+            ReviewWidget {}
         }
     }
 }

ui/record.slint

@@ -0,0 +1,37 @@
+import { VerticalBox, LineEdit, Button, ComboBox } from "std-widgets.slint";
+import { Timeline } from "timeline.slint";
+
+export component RecordWidget inherits VerticalBox {
+    Timeline {
+        updating: true;
+    }
+    GridLayout {
+        spacing-vertical: 8px;
+        spacing-horizontal: 16px;
+        LineEdit {
+            placeholder-text: "Event name";
+            text: "Event name";
+            font-size: 24px;
+            horizontal-alignment: center;
+            colspan: 2;
+            row: 0;
+        }
+        Button {
+            text: "Start";
+            colspan: 2;
+            row: 1;
+        }
+        Text {
+            text: "Span:";
+            font-size: 24px;
+            row: 2;
+            horizontal-alignment: right;
+        }
+        ComboBox {
+            model: ["1 Hour", "4 Hours", "8 Hours", "24 Hours"];
+            current-index: 0;
+            row: 2;
+            col: 1;
+        }
+    }
+}

ui/review.slint

@@ -0,0 +1,37 @@
+import { VerticalBox, LineEdit, Button, DatePickerPopup } from "std-widgets.slint";
+import { Timeline } from "timeline.slint";
+
+export component ReviewWidget inherits VerticalBox {
+    property<int> current-year;
+    property<int> current-month;
+    property<int> current-day;
+
+    Timeline {
+        updating: false;
+    }
+    GridLayout {
+        spacing-vertical: 8px;
+        spacing-horizontal: 16px;
+        Text {
+            text: "Day: \{current-day}/\{current-month}/\{current-year}";
+            font-size: 32px;
+            horizontal-alignment: right;
+        }
+        Button {
+            text: "Select";
+            clicked => {
+                date-picker.show()
+            }
+        }
+    }
+    date-picker := DatePickerPopup {
+        x: (root.width - self.width) / 2;
+        y: (root.height - self.height) / 2;
+        title: "";
+        accepted(date) => {
+            current-year = date.year;
+            current-month = date.month;
+            current-day = date.day;
+        }
+    }
+}

ui/timeline.slint

@@ -0,0 +1,62 @@
+export struct TimelineEvent {
+    start: int,
+    duration: int,
+    finished: bool,
+    label: string
+}
+
+export component Timeline inherits Rectangle {
+    in-out property<bool> updating: true;
+    in-out property<[TimelineEvent]> events: [
+        { start: 5, duration: 3, finished: true, label: "Event 1" },
+        { start: 10, duration: 15, finished: true, label: "Event 2" },
+        { start: 30, duration: 0, finished: false, label: "Event 3" }
+    ];
+    in-out property<int> visible-time: 60; 
+    property<int> visible-offset: max(offset, visible-time);
+    in-out property<int> offset: 60;
+
+    timer := Timer {
+        interval: 1s;
+        running: updating;
+        triggered => {
+            offset += 1;
+        }
+    }
+
+    background: gray;
+    border-width: 1px;
+    border-color: black;
+    Rectangle {
+        x: 0;
+        y: parent.height / 4;
+        z: 0;
+        width: parent.width;
+        height: parent.height / 2;
+        border-color: black;
+        border-width: 1px;
+        background: purple;
+    }
+
+    for event in events: timeline-event := Rectangle {
+        property<length> real-x: ((visible-time - (visible-offset - event.start)) / visible-time) * parent.width;
+        x: max(real-x, 0);
+        y: parent.height / 4;
+        z: 1;
+        width: event.finished ?
+            (event.duration) / visible-time * parent.width + min(real-x, 0):
+            parent.width - self.x;
+        height: parent.height / 2;
+        visible: self.real-x + self.width > 0 && self.real-x < parent.width;
+        border-color: black;
+        border-width: 1px;
+        background: red;
+        
+        Text {
+            x: 0;
+            y: -self.height;
+            text: event.label;
+            visible: timeline-event.visible;
+        }
+    }
+}