From 468d12879c8e0d9757d07b197f07504996977878 Mon Sep 17 00:00:00 2001
From: Gisle Aune <dev@gisle.me>
Date: Wed, 13 Jan 2021 23:08:17 +0100
Subject: [PATCH] make time left indicators update every minute, and fix
 segmented progress bars.

---
 svelte-ui/src/components/DaysLeft.svelte    | 10 +++++--
 svelte-ui/src/components/EveryMinute.svelte | 31 +++++++++++++++++++++
 svelte-ui/src/components/GoalEntry.svelte   |  9 ++++--
 svelte-ui/src/components/Progress.svelte    |  4 +--
 svelte-ui/src/pages/FrontPage.svelte        |  4 +--
 5 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 svelte-ui/src/components/EveryMinute.svelte

diff --git a/svelte-ui/src/components/DaysLeft.svelte b/svelte-ui/src/components/DaysLeft.svelte
index 104f62e..9a1c1af 100644
--- a/svelte-ui/src/components/DaysLeft.svelte
+++ b/svelte-ui/src/components/DaysLeft.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import EveryMinute from "./EveryMinute.svelte";
+
   export let startTime: Date | string = new Date();
   export let endTime: Date | string = new Date();
 
@@ -9,6 +11,7 @@
   let amountStr = "0";
   let unit = "days";
   let titleTimeStr = "";
+  let now = new Date();
 
   function formatTime(time: Date): string {
     const pad = (n:number) => n < 9 ? '0'+n : n.toString();
@@ -16,9 +19,11 @@
     return `${time.getFullYear()}-${pad(time.getMonth()+1)}-${pad(time.getDate())}`
   }
 
-  $: {
-    const now = new Date();
+  function onMinute(e: {detail: Date}) {
+    now = e.detail;
+  }
 
+  $: {
     overdue = false;
     unit = "days";
 
@@ -64,6 +69,7 @@
   }
 </script>
 
+<EveryMinute on:minute={onMinute} />
 <span title={titleTimeStr}>
   {#if (overdue)}
     <span class="overdue">{amountStr} {unit} ago</span>
diff --git a/svelte-ui/src/components/EveryMinute.svelte b/svelte-ui/src/components/EveryMinute.svelte
new file mode 100644
index 0000000..4e1e0b9
--- /dev/null
+++ b/svelte-ui/src/components/EveryMinute.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+  const listeners: ((now: Date)=>void)[] = [];
+
+  setInterval(() => {
+    for (const listener of listeners) {
+      listener(new Date);
+    }
+  }, 60000);
+</script>
+
+
+<script lang="ts">
+  import { createEventDispatcher, onMount } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  function onMinute(date: Date) {
+    dispatch("minute", date);
+  }
+
+  onMount(() => {
+    listeners.push(onMinute);
+
+    return () => {
+      const index = listeners.indexOf(onMinute);
+      if (index !== -1) {
+        listeners.splice(index, 1);
+      }
+    }
+  })
+</script>
\ No newline at end of file
diff --git a/svelte-ui/src/components/GoalEntry.svelte b/svelte-ui/src/components/GoalEntry.svelte
index bc95e07..51e6220 100644
--- a/svelte-ui/src/components/GoalEntry.svelte
+++ b/svelte-ui/src/components/GoalEntry.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { GoalResult } from "../models/goal";
   import type { ModalData } from "../stores/modal";
+import EveryMinute from "./EveryMinute.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
@@ -14,12 +15,16 @@
   let mdGoalDelete: ModalData;
   let msLength: number;
   let msElapsed: number;
+  let now = Date.now();
+
+  function onMinute(e: {detail: Date}) {
+    now = e.detail.getTime();
+  }
 
   $: mdGoalEdit = {name:"goal.edit", goal};
   $: mdGoalDelete = {name:"goal.delete", goal};
 
   $: {
-    const now = Date.now()
     const start = Date.parse(goal.startTime)
     const length = Date.parse(goal.endTime) - start;
 
@@ -35,7 +40,7 @@
     }
   }
 </script>
-
+<EveryMinute on:minute={onMinute} />
 <ParentEntry
   full={showAllOptions} 
   entry={goal} 
diff --git a/svelte-ui/src/components/Progress.svelte b/svelte-ui/src/components/Progress.svelte
index 8cfdf45..60d064a 100644
--- a/svelte-ui/src/components/Progress.svelte
+++ b/svelte-ui/src/components/Progress.svelte
@@ -51,9 +51,7 @@
 
     // Mark it non-segmented if the target is too high. This prevents a clunky progress bar,
     // or a browser freeze if you set the target very high. 
-    if (target > 50) {
-      nonSegmented = true;
-    }
+    nonSegmented = (target >= 50);
   }
 </script>
 
diff --git a/svelte-ui/src/pages/FrontPage.svelte b/svelte-ui/src/pages/FrontPage.svelte
index d49c635..6ed8bd3 100644
--- a/svelte-ui/src/pages/FrontPage.svelte
+++ b/svelte-ui/src/pages/FrontPage.svelte
@@ -41,7 +41,7 @@
     fakeProject = {
       id: "P_fakeProject",
       active: true,
-      createdTime: new Date().toISOString(),
+      createdTime: "1970-01-01T00:00:00Z",
       description: "",
       icon: "list",
       name: "Individual Tasks",
@@ -53,8 +53,6 @@
     if (fakeProject.tasks.length > 0) {
       fakeProject.endTime = fakeProject.tasks[0].endTime;
     }
-
-    console.log(fakeProject, $fpTaskStore);
   }
 
   $: {