add progress numbers to goals and projects.

svelte-ui/src/components/GoalEntry.svelte

@@ -7,6 +7,7 @@
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
   import Progress from "./Progress.svelte";
+import ProgressNumbers from "./ProgressNumbers.svelte";
   import TimeProgress from "./TimeProgress.svelte";
 
   export let goal: GoalResult = null;
@@ -45,6 +46,11 @@
       <Option open={mdGoalDelete}>Delete</Option>
     </OptionRow>
   {/if}
+  <div slot="post-seprator">
+    {#if showAllOptions}
+      <ProgressNumbers goal={goal} />
+    {/if}
+  </div>
   <div class="progress">
     <Progress count={goal.completedAmount} target={goal.amount} />
     <TimeProgress startTime={goal.startTime} endTime={goal.endTime} />

svelte-ui/src/components/ParentEntry.svelte

@@ -78,6 +78,8 @@ import TimeProgress from "./TimeProgress.svelte";
           <Icon block name={annotation} />
         </div>
       {/each}
+      <div class="separator"></div>
+      <slot name="post-seprator"></slot>
       {#if entry.endTime != null}
         <div class="days-left">
           <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
@@ -141,9 +143,12 @@ import TimeProgress from "./TimeProgress.svelte";
   div.annotation + div.annotation {
     padding-left: 0;
   }
-  div.days-left {
+  div.separator {
     margin-left: auto;
+  }
+  div.days-left {
     margin-right: 0.25ch;
+    margin-left: 1ch;
   }
 
   a {

svelte-ui/src/components/ProgressNumbers.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import type { ProjectResult } from "../models/project";
+  import type { GoalResult } from "../models/goal";
+
+  export let project: ProjectResult | undefined | null;
+  export let goal: GoalResult | undefined | null;
+
+  let progressAmount: number = 0;
+  let progressTarget: number = 0;
+  let timeProgress: number | null = null;
+
+  let boat: number | null = null;
+  let boatNegative = false;
+  let boatPositive = false;
+  let boatString: string | null = null;
+
+  $: {
+    if (project != null) {
+      progressAmount = (project.tasks||[]).map(t => (t.active || t.statusTag === "to do" || t.statusTag === "on hold") 
+        ? Math.min(t.completedAmount, t.itemAmount) * (t.item.groupWeight || 1) 
+        : t.itemAmount * (t.item.groupWeight || 1)
+      ).reduce((n,m) => n+m, 0);
+
+      progressTarget = Math.max((project.tasks||[]).map(t => t.itemAmount * (t.item.groupWeight || 1)).reduce((n,m) => n+m, 0), 1);
+    
+      if (project.endTime) {
+        const start = Date.parse(project.createdTime);
+        const end = Date.parse(project.endTime);
+        const now = Math.min(Date.now(), end);
+
+        timeProgress = (now - start) / (end - start);
+      } else {
+        timeProgress = null;
+      }
+    }
+
+    if (goal != null) {
+      const start = Date.parse(goal.startTime);
+      const end = Date.parse(goal.endTime);
+      const now = Math.min(Date.now(), end);
+
+      progressAmount = goal.completedAmount;
+      progressTarget = goal.amount;
+      timeProgress = (now - start) / (end - start);
+    }
+  }
+
+  $: {
+    if (timeProgress != null) {
+      const boatTarget = Math.ceil(timeProgress * progressTarget);
+      
+      boat = progressAmount - boatTarget;
+      console.log(progressTarget, boatTarget);
+    } else {
+      boat = null;
+    }
+  }
+
+  $: {
+    if (boat != null) {
+      boatNegative = boat < 0;
+      boatPositive = boat > 0;
+
+      boatString = Math.round(boat).toString(10);
+      if (boatPositive) {
+        boatString = '+' + boatString;
+      }
+    }
+  }
+
+  $: {
+    console.log(boat);
+  }
+</script>
+
+<div class="progress">
+  <div class="amount">{progressAmount}</div>
+  <div class="slash">/</div>
+  <div class="target">{progressTarget}</div>
+  {#if boat}
+    <div class="boat" class:positive={boatPositive} class:negative={boatNegative}>
+      ({boatString})
+    </div>
+  {/if}
+</div>
+
+<style>
+  div.progress {
+    padding: 0 0.25ch;
+    color: #555;
+  }
+  
+  div.progress > div {
+    display: inline-block;
+  }
+
+  div.slash {
+    padding: 0 0.125ch;
+    color: #333;
+  }
+
+  div.boat {
+    padding-left: 0.25ch;
+  }
+
+  div.boat.negative {
+    color: #852a24;
+  }
+  div.boat.positive {
+    color: #484;
+  }
+</style>

svelte-ui/src/components/ProjectEntry.svelte

@@ -10,6 +10,7 @@ import markStale from "../stores/markStale";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
+  import ProgressNumbers from "./ProgressNumbers.svelte";
   import StatusColor from "./StatusColor.svelte";
   import TaskList from "./TaskList.svelte";
 
@@ -86,6 +87,9 @@ import markStale from "../stores/markStale";
         <Icon block name="star" />
       {/if}
     </div>
+    <div slot="post-seprator">
+      <ProgressNumbers project={project} />
+    </div>
     {#if showAllOptions}
       <OptionRow>
         <Option open={mdAddTask}>Add Task</Option>