Show elapsed time and stop button Now row starts to look like a timer.

Changes

3 changed files (+82/-19)

• src/Widget/MainWindow.vala
  • @@ -23,6 +23,9 @@ var header_bar = new Adw.HeaderBar();
    view.add_top_bar(header_bar); var list = new TimerList(model.active_timers); + list.stop.connect((timer) => { + model.update(new Event.TimerStopped(timer.id)); + }); view.content = list; this.title = "Time Tracker";
• src/Widget/TimerList.vala
  • @@ -10,6 +10,8 @@ using GLib;
    namespace TimeTracker.Widget { private class TimerList : Gtk.Box { + public signal void stop(Model.Timer timer); + public ListModel timers { get; set construct; } public TimerList(ListModel timers) {
  • @@ -18,8 +20,8 @@ }
    construct { var factory = new Gtk.SignalListItemFactory(); - factory.setup.connect(TimerListRow.setup); - factory.bind.connect(TimerListRow.bind); + factory.setup.connect(setup); + factory.bind.connect(bind); var list = new Gtk.ListView(null, factory); list.hexpand = true;
  • @@ -29,6 +31,26 @@
    this.bind_property("timers", list, "model", SYNC_CREATE, (_binding, from, ref to) => { to = new Gtk.NoSelection((ListModel) from); }); + } + + private void setup(Gtk.ListItemFactory _factory, Object object) { + var list_item = (Gtk.ListItem) object; + list_item.selectable = false; + list_item.activatable = false; + + var row = new TimerListRow(); + row.stop.connect((timer) => { + stop(timer); + }); + list_item.child = row; + } + + private void bind(Gtk.ListItemFactory _factory, Object object) { + var list_item = (Gtk.ListItem) object; + var timer = (Model.Timer) list_item.item; + var row = (TimerListRow) list_item.child; + + row.timer = timer; } } }
• src/Widget/TimerListRow.vala
  • @@ -10,10 +10,17 @@ using GLib;
    namespace TimeTracker.Widget { private class TimerListRow : Gtk.Box { + /** + * User requested to stop the timer. + */ + public signal void stop(Model.Timer timer); + public Model.Timer? timer { get; set construct; } private Binding? timer_binding = null; - private Gtk.Label label = new Gtk.Label(""); + private Gtk.Label title = new Gtk.Label(""); + private Gtk.Label elapsed = new Gtk.Label("--:--:--"); + private Gtk.Button stop_button = new Gtk.Button(); construct { this.notify["timer"].connect(() => {
  • @@ -23,29 +30,60 @@ timer_binding = null;
    } if (timer != null) { - timer_binding = timer.bind_property("title", label, "label", SYNC_CREATE); + stop_button.visible = true; + + timer_binding = timer.bind_property("title", title, "label", SYNC_CREATE); + + if (!timer.is_stopped) { + Timeout.add(1000, () => { + var started_at = new DateTime.from_unix_utc(timer.started_at); + var now = new DateTime.now_utc(); + + var diff = now.difference(started_at); + + elapsed.label = "%02d:%02d:%02d".printf( + (int) (diff / TimeSpan.HOUR), + (int) (diff / TimeSpan.MINUTE) % 60, + (int) (diff / TimeSpan.SECOND) % 60 + ); + + return !timer.is_stopped; + }); + } else { + stop_button.visible = false; + } } }); - this.margin_top = 8; - this.margin_bottom = 8; - this.margin_start = 8; - this.margin_end = 8; + this.margin_top = 16; + this.margin_bottom = this.margin_top; + this.margin_start = 12; + this.margin_end = this.margin_start; + this.spacing = 8; - this.append(label); - } + var info_col = new Gtk.Box(VERTICAL, 4); + info_col.hexpand = true; + info_col.hexpand_set = true; - public static void setup(Gtk.ListItemFactory _factory, Object object) { - var list_item = (Gtk.ListItem) object; - list_item.child = new TimerListRow(); - } + title.halign = START; + title.css_classes = { "heading" }; + info_col.append(title); - public static void bind(Gtk.ListItemFactory _factory, Object object) { - var list_item = (Gtk.ListItem) object; - var timer = (Model.Timer) list_item.item; - var row = (TimerListRow) list_item.child; + elapsed.halign = START; + elapsed.css_classes = { "numeric" }; + info_col.append(elapsed); + + this.append(info_col); - row.timer = timer; + stop_button.label = "Stop"; + stop_button.visible = false; + stop_button.clicked.connect(() => { + if (timer != null) { + this.stop(timer); + } + }); + + this.append(stop_button); } } }