Active display of a timer

.vscode/tasks.json

@@ -28,6 +28,13 @@
       "command": "npm",
       "problemMatcher": [],
       "args": ["run", "build"]
+    },
+    {
+      "label": "ui:format",
+      "type": "shell",
+      "command": "npm",
+      "problemMatcher": [],
+      "args": ["run", "format"]
     }
   ]
 }

src-tauri/src/main.rs

@@ -1,174 +1,15 @@
+// Copyright 2022 ModZero.
+// SPDX-License-Identifier: 	AGPL-3.0-or-later
 #![cfg_attr(
     all(not(debug_assertions), target_os = "windows"),
     windows_subsystem = "windows"
 )]
 
-use std::{
-    collections::HashMap,
-    sync::{Arc, Mutex},
-    time::{Duration, Instant}, fmt, error::Error,
-};
-
-use chrono::{DateTime, FixedOffset, Local};
-use tauri::{State, Window, async_runtime::spawn};
-use tokio::time::interval;
-use uuid::Uuid;
-
-#[derive(serde::Serialize, Debug)]
-enum TimerError {
-    NotFound,
-    NotStarted,
-}
-
-impl fmt::Display for TimerError {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        match self {
-            TimerError::NotFound => write!(f, "timer not found"),
-            TimerError::NotStarted => write!(f, "timer not started"),
-        }
-    }
-}
-
-impl Error for TimerError {}
-
-#[derive(Clone, Default, serde::Serialize)]
-struct Timer {
-    id: Uuid,
-    started: Option<DateTime<FixedOffset>>,
-    duration: Duration,
-    elapsed: Option<Duration>,
-    message: String,
-    #[serde(skip)]
-    checked: Option<Instant>,
-}
-
-impl Timer {
-    fn new(message: &str, duration: Duration) -> Self {
-        Self {
-            id: Uuid::new_v4(),
-            duration,
-            message: message.to_string(),
-            ..Default::default()
-        }
-    }
-
-    fn complete(&self) -> bool {
-        self.elapsed.map_or(false, |e| e >= self.duration)
-    }
-
-    fn start(self) -> Self {
-        Timer {
-            started: Some(Local::now().into()),
-            elapsed: Some(Duration::from_secs(0)),
-            checked: Some(Instant::now()),
-            ..self
-        }
-    }
-
-    fn tick(self) -> Result<Self, TimerError> {
-        let now = Instant::now();
-        let elapsed = now - match self.checked {
-            None => return Err(TimerError::NotStarted),
-            Some(checked) => checked,
-        };
-
-        Ok(Timer {
-            elapsed: self.elapsed.map(|e| e + elapsed),
-            checked: Some(now),
-            ..self
-        })
-    }
-}
-
-#[derive(Default)]
-struct Timers(Arc<Mutex<HashMap<Uuid, Timer>>>);
-
-impl Timers {
-    fn make_timer(&self, duration: Duration, message: &str) -> Timer {
-        let timer = Timer::new(message, duration);
-
-        self.0.lock().unwrap().insert(timer.id, timer.clone());
-
-        timer
-    }
-
-    fn delete_timer(&self, timer_id: Uuid) -> Option<Timer> {
-        self.0.lock().unwrap().get(&timer_id).cloned()
-    }
-
-    fn start_timer(&self, timer_id: Uuid) -> Result<Timer, TimerError> {
-        let mut timers = self.0.lock().unwrap();
-        match timers.get(&timer_id).cloned() {
-            None => Err(TimerError::NotFound),
-            Some(t) => {
-                let started = t.start();
-                timers.insert(started.id, started.clone());
-
-                Ok(started)
-            }
-        }
-    }
-
-    fn tick_timer(&self, timer_id: Uuid) -> Result<Timer, TimerError> {
-        let mut timers = self.0.lock().unwrap();
-        match timers.get(&timer_id).cloned() {
-            None => Err(TimerError::NotFound),
-            Some(t) => {
-                let started = t.tick()?;
-                timers.insert(started.id, started.clone());
-
-                Ok(started)
-            }
-        }
-    }
-
-}
-
-#[tauri::command]
-fn make_timer(timers: State<'_, Timers>, duration: Duration, message: &str) -> Timer {
-    timers.make_timer(duration, message)
-}
-
-#[tauri::command]
-fn delete_timer(timers: State<'_, Timers>, timer_id: Uuid) -> Option<Timer> {
-    timers.delete_timer(timer_id)
-}
-
-#[tauri::command]
-fn start_timer(window: Window, timers: State<'_, Timers>, timer_id: Uuid) -> Result<Timer, TimerError> {
-    let timers = Timers(timers.0.to_owned());
-    let timer = timers.start_timer(timer_id)?;
-    let res = timer.clone();
-
-    spawn(async move {
-        let mut interval = interval(Duration::from_secs(1) / 60);
-        
-        loop {
-            interval.tick().await;
-            match timers.tick_timer(timer_id) {
-                Err(_) => break,
-                Ok(timer) => {
-                    if timer.complete() || window.emit("timer-tick", timer).is_err() {
-                        break;
-                    }
-                }
-            }
-        }
-
-        window.emit("timer-done", timer).ok();
-    });
-
-    Ok(res)
-}
+mod timers;
 
 fn main() {
     tauri::Builder::default()
-        .manage(Timers(Default::default()))
-        .invoke_handler(tauri::generate_handler![
-            delete_timer,
-            make_timer,
-            start_timer
-        ])
+        .plugin(timers::init())
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/src/timers.rs

@@ -0,0 +1,206 @@
+// Copyright 2022 ModZero.
+// SPDX-License-Identifier: 	AGPL-3.0-or-later
+
+use std::{
+    collections::HashMap,
+    error::Error,
+    fmt,
+    sync::{Arc, Mutex},
+    time::{Duration, Instant},
+};
+
+use chrono::{DateTime, FixedOffset, Local};
+use tauri::{
+    async_runtime::spawn,
+    plugin::{Builder, TauriPlugin},
+    AppHandle, Manager, Runtime, State,
+};
+use tokio::time::interval;
+use uuid::Uuid;
+
+#[derive(serde::Serialize, Debug)]
+pub enum TimerError {
+    NotFound,
+    NotStarted,
+}
+
+impl fmt::Display for TimerError {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            TimerError::NotFound => write!(f, "timer not found"),
+            TimerError::NotStarted => write!(f, "timer not started"),
+        }
+    }
+}
+
+impl Error for TimerError {}
+
+#[derive(Clone, Default, serde::Serialize)]
+pub struct Timer {
+    id: Uuid,
+    started: Option<DateTime<FixedOffset>>,
+    duration: Duration,
+    elapsed: Option<Duration>,
+    #[serde(skip)]
+    checked: Option<Instant>,
+    version: u64,
+}
+
+impl Timer {
+    fn new(duration: Duration) -> Self {
+        Self {
+            id: Uuid::new_v4(),
+            duration,
+            ..Default::default()
+        }
+    }
+
+    fn is_complete(&self) -> bool {
+        self.elapsed.map_or(false, |e| e >= self.duration)
+    }
+
+    fn start(&mut self) {
+        let now = Local::now().into();
+        self.started = Some(now);
+        self.elapsed = Some(Duration::from_secs(0));
+        self.checked = Some(Instant::now());
+        self.version += 1;
+    }
+
+    /// Increment the timer, returning the time since last tick
+    fn tick(&mut self) -> Result<(), TimerError> {
+        let now = Instant::now();
+        match self.checked {
+            None => Err(TimerError::NotStarted),
+            Some(checked) => {
+                self.elapsed = Some(now - checked);
+                self.checked = Some(checked);
+                self.version += 1;
+
+                Ok(())
+            }
+        }
+    }
+
+    fn reset(&mut self, duration: Duration) {
+        self.duration = duration;
+        self.started = None;
+        self.elapsed = None;
+        self.checked = None;
+        self.version += 1;
+    }
+}
+
+#[derive(Default)]
+struct Timers(Arc<Mutex<HashMap<Uuid, Timer>>>);
+
+impl Timers {
+    fn make(&self, duration: Duration) -> Timer {
+        let timer = Timer::new(duration);
+
+        self.0.lock().unwrap().insert(timer.id, timer.clone());
+
+        timer
+    }
+
+    fn delete(&self, timer_id: Uuid) -> Option<Timer> {
+        self.0.lock().unwrap().get(&timer_id).cloned()
+    }
+
+    fn start(&self, timer_id: Uuid) -> Result<Timer, TimerError> {
+        let mut timers = self.0.lock().unwrap();
+        match timers.get_mut(&timer_id) {
+            None => Err(TimerError::NotFound),
+            Some(t) => {
+                t.start();
+
+                Ok(t.clone())
+            }
+        }
+    }
+
+    fn tick(&self, timer_id: Uuid) -> Result<Timer, TimerError> {
+        let mut timers = self.0.lock().unwrap();
+        match timers.get_mut(&timer_id) {
+            None => Err(TimerError::NotFound),
+            Some(t) => t.tick().and(Ok(t.clone())),
+        }
+    }
+
+    fn reset(&self, timer_id: Uuid, duration: Duration) -> Result<Timer, TimerError> {
+        let mut timers = self.0.lock().unwrap();
+        match timers.get_mut(&timer_id) {
+            None => Err(TimerError::NotFound),
+            Some(t) => {
+                t.reset(duration);
+
+                Ok(t.clone())
+            }
+        }
+    }
+}
+
+#[tauri::command]
+fn make(timers: State<'_, Timers>, duration: Duration) -> Timer {
+    timers.make(duration)
+}
+
+#[tauri::command]
+fn delete(timers: State<'_, Timers>, timer_id: Uuid) -> Option<Timer> {
+    timers.delete(timer_id)
+}
+
+#[tauri::command]
+fn reset<R: Runtime>(
+    _app: AppHandle<R>,
+    timers: State<'_, Timers>,
+    timer_id: Uuid,
+    duration: Duration,
+) -> Result<Timer, TimerError> {
+    let res = timers.reset(timer_id, duration);
+
+    if let Ok(timer) = &res {
+        _app.emit_all("timer-update", timer).ok();
+    }
+
+    res
+}
+
+#[tauri::command]
+fn start<R: Runtime>(
+    _app: AppHandle<R>,
+    timers: State<'_, Timers>,
+    timer_id: Uuid,
+) -> Result<Timer, TimerError> {
+    let timers = Timers(timers.0.to_owned());
+    let timer = timers.start(timer_id)?;
+
+    spawn(async move {
+        let mut interval = interval(Duration::from_secs(1) / 60);
+
+        loop {
+            interval.tick().await;
+            match &timers.tick(timer_id) {
+                Err(_) => break, // Timer is gone or no longer running, we're done
+                Ok(timer) => {
+                    _app.emit_all("timer-update", timer).ok();
+                    if timer.is_complete() {
+                        break;
+                    }
+                }
+            }
+        }
+    });
+
+    Ok(timer)
+}
+
+pub fn init<R: Runtime>() -> TauriPlugin<R> {
+    Builder::new("timers")
+        .invoke_handler(tauri::generate_handler![delete, make, reset, start,])
+        .setup(|app_handle| {
+            app_handle.manage(Timers::default());
+            Ok(())
+        })
+        .build()
+}

src/App.svelte

@@ -3,57 +3,11 @@
  SPDX-License-Identifier: 	AGPL-3.0-or-later
 -->
 <script type="ts">
-  import { onDestroy, onMount } from "svelte";
-  import type { UnlistenFn } from "@tauri-apps/api/event";
-  import { invoke } from "@tauri-apps/api";
-  import { listen } from "@tauri-apps/api/event";
-
-  let seconds = 5;
-  let timerTickUnlisten: Promise<UnlistenFn> | null = null;
-  let timerDoneUnlisten: Promise<UnlistenFn> | null = null;
-
-  type Timer = {
-    id: string;
-    elapsed: {
-      secs: number;
-      nsecs: number;
-    };
-  };
-
-  onMount(() => {
-    timerTickUnlisten = listen<Timer>("timer-tick", (event) => {
-      console.log("Tick!", event.payload.id, event.payload.elapsed);
-    });
-
-    timerDoneUnlisten = listen<Timer>("timer-done", (event) => {
-      console.log("Done!", event.payload.id);
-    });
-    
-  });
-
-  onDestroy(() => {
-    timerTickUnlisten?.then((ttu) => ttu());
-    timerDoneUnlisten?.then((tdu) => tdu());
-  });
-
-  async function startTimer() {
-    let timer = await invoke<Timer>("make_timer", {
-      duration: { secs: seconds, nanos: 0 },
-      message: "Hi!",
-    });
-    invoke("start_timer", { timerId: timer.id });
-  }
+  import Timer from "./components/Timer.svelte";
 </script>
 
 <main>
-  <div id="timer" />
-  <div id="controls">
-    <label>
-      Fire after
-      <input type="number" bind:value={seconds} />
-    </label>
-    <button on:click={startTimer}>Fire!</button>
-  </div>
+  <Timer />
 </main>
 
 <style>
@@ -66,13 +20,4 @@
     display: flex;
     flex-direction: column;
   }
-  #timer {
-    flex-grow: 1;
-    margin: 0.5em;
-  }
-
-  #controls {
-    margin: 0.5em;
-    padding: 0.5em;
-  }
 </style>

src/app.css

@@ -36,7 +36,6 @@ h1 {
   line-height: 1.1;
 }
 
-
 #app {
   position: absolute;
   max-width: 1280px;

src/components/Timer.svelte

@@ -0,0 +1,63 @@
+<!--
+ Copyright 2022 ModZero.
+ SPDX-License-Identifier: 	AGPL-3.0-or-later
+-->
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+
+  import { Timer } from "@app/lib/timer";
+
+  let seconds = 5;
+  let timer: Timer = new Timer({ secs: seconds, nanos: 0 });
+  $: timer.ready && timer.reset({ secs: seconds, nanos: 0 });
+  $: console.log(seconds);
+
+  onDestroy(() => {
+    timer.close();
+  });
+</script>
+
+<div class="timer" />
+<div class="meter">
+  {#if $timer !== null}
+    {$timer.elapsed ? `${$timer.elapsed.secs}.${$timer.elapsed.nanos}` : `0.0`} /
+    {$timer.duration.secs}
+  {:else}
+    ...
+  {/if}
+</div>
+
+<div class="controls">
+  <label>
+    Fire after
+    <input
+      disabled={$timer === null || !!$timer.elapsed}
+      type="number"
+      bind:value={seconds}
+    />
+  </label>
+  <button
+    disabled={$timer === null || !!$timer.elapsed}
+    on:click={() => timer.start()}>Fire!</button
+  >
+  <button
+    disabled={$timer === null}
+    on:click={() => timer.reset({ secs: seconds, nanos: 0 })}>Reset</button
+  >
+</div>
+
+<style>
+  .timer {
+    display: flex;
+    flex-direction: column;
+  }
+  .meter {
+    flex-grow: 1;
+    margin: 0.5em;
+  }
+
+  .controls {
+    margin: 0.5em;
+    padding: 0.5em;
+  }
+</style>

src/lib/timer.ts

@@ -0,0 +1,111 @@
+// Copyright 2022 ModZero.
+// SPDX-License-Identifier: 	AGPL-3.0-or-later
+
+import { invoke } from "@tauri-apps/api";
+import { listen, type Event, type UnlistenFn } from "@tauri-apps/api/event";
+import {
+  writable,
+  type Readable,
+  type Subscriber,
+  type Unsubscriber,
+} from "svelte/store";
+
+export type Duration = {
+  readonly secs: number;
+  readonly nanos: number;
+};
+
+export type TimerData = {
+  readonly id: string;
+  readonly duration: Duration;
+  readonly elapsed: Duration | null;
+  readonly version: number;
+};
+
+export class Timer implements Readable<TimerData> {
+  private subscribers: Set<Subscriber<TimerData>> = new Set();
+
+  private _data: TimerData | null = null;
+  private get data(): TimerData | null {
+    return this._data;
+  }
+  private set data(v: TimerData | null) {
+    this._data = v;
+    this.subscribers.forEach((s) => s(v));
+  }
+
+  x = writable(0);
+
+  public subscribe(run: Subscriber<TimerData>): Unsubscriber {
+    run(this.data);
+    this.subscribers.add(run);
+
+    return () => {
+      this.subscribers.delete(run);
+    };
+  }
+
+  private ensureReady() {
+    if (!this.ready) {
+      throw new Error("Timer Still Processing");
+    }
+  }
+
+  private _duration: Duration | null;
+  public get duration(): Duration | null {
+    return this._duration;
+  }
+
+  public reset(duration: Duration) {
+    this.ensureReady();
+    invoke("plugin:timers|reset", {
+      timerId: this.data.id,
+      duration: duration,
+    });
+  }
+
+  private _elapsed: Duration | null;
+  public get elapsed(): Duration | null {
+    return this._elapsed;
+  }
+
+  private unlistenUpdate: Promise<UnlistenFn> | null = null;
+
+  private onUpdate(event: Event<TimerData>): void {
+    if (
+      event.payload.id === this.data.id &&
+      event.payload.version >= this.data.version
+    ) {
+      this.data = event.payload;
+    }
+  }
+
+  public get ready() {
+    return this.data !== null;
+  }
+
+  constructor(duration: Duration) {
+    this.unlistenUpdate = listen<TimerData>("timer-update", (event) =>
+      this.onUpdate(event)
+    );
+
+    invoke<TimerData>("plugin:timers|make", {
+      duration: duration,
+    }).then((timer) => {
+      this.data = timer;
+    });
+  }
+
+  public close() {
+    if (this.ready) {
+      invoke("plugin:timers|delete", { timerId: this.data.id });
+    }
+
+    this.unlistenUpdate.then((u) => u());
+  }
+
+  public start() {
+    this.ensureReady();
+    invoke("plugin:timers|start", { timerId: this.data.id });
+  }
+}

src/main.ts

@@ -1,14 +1,11 @@
 // Copyright 2022 ModZero.
 // SPDX-License-Identifier: 	AGPL-3.0-or-later
 
-
 import "./app.css";
 import App from "./App.svelte";
 
-
 const app = new App({
   target: document.getElementById("app"),
 });
 
 export default app;
-

tsconfig.json

@@ -6,6 +6,9 @@
     "module": "ESNext",
     "resolveJsonModule": true,
     "baseUrl": ".",
+    "paths": {
+      "@app/*": ["./src/*"]
+    },
     /**
      * Typecheck JS in `.svelte` and `.js` files by default.
      * Disable checkJs if you'd like to use dynamic types in JS.

vite.config.ts

@@ -1,11 +1,15 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 
-
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [svelte()],
   build: {
     write: true,
   },
+  resolve: {
+    alias: {
+      "@app": "./src/",
+    },
+  },
 });