Timeline

ui/record.slint

@@ -2,7 +2,9 @@ import { VerticalBox, LineEdit, Button, ComboBox } from "std-widgets.slint";
 import { Timeline } from "timeline.slint";
 
 export component RecordWidget inherits VerticalBox {
-    Timeline {}
+    Timeline {
+        updating: true;
+    }
     GridLayout {
         spacing-vertical: 8px;
         spacing-horizontal: 16px;

ui/review.slint

@@ -6,7 +6,9 @@ export component ReviewWidget inherits VerticalBox {
     property<int> current-month;
     property<int> current-day;
 
-    Timeline {}
+    Timeline {
+        updating: false;
+    }
     GridLayout {
         spacing-vertical: 8px;
         spacing-horizontal: 16px;

ui/timeline.slint

@@ -1 +1,62 @@
-export component Timeline inherits Path {}
+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;
+        }
+    }
+}