Receiving current local time

ui/app-window.slint

@@ -3,14 +3,25 @@ import { RecordWidget } from "record.slint";
 import { ReviewWidget } from "review.slint";
 
 export component AppWindow inherits Window {
+    callback update-record-visible-time <=> record.update-visible-time;
+    callback start-new-event <=> record.start-new-event;
+    callback stop-event <=> record.stop-event;
+    callback update-record-offset(int);
+
+    update-record-offset(new-offset) => {
+        record.offset = new-offset;
+    }
+
+    property<[string]> combo-spans: ["1 Hour", "4 Hours", "8 Hours", "24 Hours"];
+
     TabWidget {
         Tab {
             title: "Record";
-            RecordWidget {}
+            record := RecordWidget {}
         }
         Tab {
             title: "Review";
-            ReviewWidget {}
+            review := ReviewWidget {}
         }
     }
 }

ui/record.slint

@@ -2,13 +2,22 @@ import { VerticalBox, LineEdit, Button, ComboBox } from "std-widgets.slint";
 import { Timeline } from "timeline.slint";
 
 export component RecordWidget inherits VerticalBox {
-    Timeline {
+    callback update-visible-time(string);
+    callback start-new-event(string);
+    callback stop-event;
+    in-out property visible-time <=> tl.visible-time;
+    in-out property updating <=> tl.updating;
+    in-out property offset <=> tl.offset;
+    property<bool> in-progress: false;
+    property<string> event-name <=> le.text;
+
+    tl := Timeline {
         updating: true;
     }
     GridLayout {
         spacing-vertical: 8px;
         spacing-horizontal: 16px;
-        LineEdit {
+        le := LineEdit {
             placeholder-text: "Event name";
             text: "Event name";
             font-size: 24px;
@@ -17,9 +26,17 @@ export component RecordWidget inherits VerticalBox {
             row: 0;
         }
         Button {
-            text: "Start";
+            text: updating ? "Stop" : "Start";
             colspan: 2;
             row: 1;
+            clicked => {
+                if in-progress {
+                    root.stop-event();
+                } else {
+                    root.start-new-event(event-name);
+                }
+                in-progress = !in-progress;
+            }
         }
         Text {
             text: "Span:";
@@ -32,6 +49,9 @@ export component RecordWidget inherits VerticalBox {
             current-index: 0;
             row: 2;
             col: 1;
+            selected(current-value) => {
+                root.update-visible-time(current-value);
+            }
         }
     }
 }

ui/timeline.slint

@@ -5,16 +5,30 @@ export struct TimelineEvent {
     label: string
 }
 
+global TimeString {
+    pure function pad-mh(seconds: int, param: int) -> string {
+        if seconds / param < 10 {
+            return "0\{floor(seconds / param)}";
+        }
+        return "\{floor(seconds / param)}";
+    }
+    pure function pad-s(seconds: int) -> string {
+        if mod(seconds, 60) < 10 {
+            return "0\{mod(seconds, 60)}";
+        }
+        return "\{mod(seconds, 60)}";
+    }
+    public pure function from(seconds: int) -> string {
+        return "\{pad-mh(seconds, 3600)}:\{pad-mh(mod(seconds, 3600), 60)}:\{pad-s(seconds)}";
+    }
+}
+
 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; 
+    in-out property<[TimelineEvent]> events: [];
+    in-out property<int> visible-time: 3600; 
     property<int> visible-offset: max(offset, visible-time);
-    in-out property<int> offset: 60;
+    in-out property<int> offset: 0;
 
     timer := Timer {
         interval: 1s;
@@ -38,6 +52,18 @@ export component Timeline inherits Rectangle {
         background: purple;
     }
 
+    Text {
+        x: 0;
+        y: parent.height - self.height;
+        text: TimeString.from(visible-offset - visible-time);
+    }
+
+    Text {
+        x: parent.width - self.width;
+        y: parent.height - self.height;
+        text: TimeString.from(visible-offset);
+    }
+
     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);