refactor GoalEntry and add guiding lines to goal progress.

svelte-ui/src/components/GoalEntry.svelte

@@ -1,38 +1,47 @@
 <script lang="ts">
-  import type { IconName } from "../external/icons";
   import type { GoalResult } from "../models/goal";
   import type { ModalData } from "../stores/modal";
-  import DaysLeft from "./DaysLeft.svelte";
-  import Icon from "./Icon.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
+  import ParentEntry from "./ParentEntry.svelte";
   import Progress from "./Progress.svelte";
 
   export let goal: GoalResult = null;
   export let showAllOptions = false;
+  export let linkGoal = false;
 
-  let iconName: IconName = "question";
   let mdGoalEdit: ModalData;
   let mdGoalDelete: ModalData;
+  let msLength: number;
+  let msElapsed: number;
 
-  $: iconName = goal.group.icon as IconName;
   $: 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;
+
+    msLength = length;
+    msElapsed = 0;
+
+    if (now > start) {
+      if (now > start + length) {
+        msElapsed = length;
+      } else {
+        msElapsed = Math.round(now - start);
+      }
+    }
+  }
 </script>
 
-<div class="goal" class:full={showAllOptions}>
-  <div class="icon"><Icon block name={iconName} /></div>
-  <div class="body">
-    <div class="header">
-      <div class="name">{goal.name}</div>
-      <div class="times">
-        <DaysLeft startTime={goal.startTime} endTime={goal.endTime} />
-      </div>
-    </div>
+<ParentEntry
+  full={showAllOptions} 
+  entry={goal} 
+  headerLink={linkGoal ? "/goals#"+goal.id : ""}
+>
   {#if showAllOptions}
-      <div class="description">
-        <p>{goal.description}</p>
-      </div>
     <OptionRow>
       <Option open={mdGoalEdit}>Edit</Option>
       <Option open={mdGoalDelete}>Delete</Option>
@@ -40,54 +49,12 @@
   {/if}
   <div class="progress">
     <Progress count={goal.completedAmount} target={goal.amount} />
+    <Progress thinner gray count={msElapsed} target={msLength} />
   </div>
-  </div>
-</div>
-
+</ParentEntry>
 <style>
-  div.goal {
-    display: flex;
-    flex-direction: row;
-    padding-bottom: 0.5em;
-  }
-  div.goal.full {
-    padding-bottom: 1em;
-  }
-  div.icon {
-    font-size: 2em;
-    padding: 0 0.5ch;
-    width: 2ch;
-    padding-top: 0.125em;
-    color: #333;
-  }
-  div.body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  div.header {
-    display: flex;
-    flex-direction: row;
-  }
-
-  div.name {
-    font-size: 1em;
-    margin: auto 0;
-    vertical-align: middle;
-    font-weight: 100;
-  }
-  div.times {
-    margin-left: auto; 
-    margin-right: 0.25ch;
-  }
-
   div.progress {
     padding-top: 0.125em;
     font-size: 1.25em;
   }
-
-  div.description > p {
-    padding: 0;
-    margin: 0.25em 0;
-  }
 </style>

svelte-ui/src/components/Progress.svelte

@@ -13,6 +13,8 @@
   export let count = 0;
   export let green = false;
   export let thin = false;
+  export let thinner = false;
+  export let gray = false;
   
   let offClass = COLORS[0];
   let onClass = COLORS[1];
@@ -42,6 +44,10 @@
       onClass = "green"
       offClass = "none"
     }
+    if (gray) {
+      onClass = "gray"
+      offClass = "none"
+    }
 
     // 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. 
@@ -51,7 +57,7 @@
   }
 </script>
 
-<div class="bar" class:thin>
+<div class="bar" class:thin class:thinner>
   {#if nonSegmented}
     <div style="flex: {ons}" class={"non-segmented on " + onClass}></div>
     <div style="flex: {offs}" class={"non-segmented off " + offClass}></div>
@@ -80,7 +86,7 @@
     flex-basis: 0;
     display: inline-block;
     box-sizing: border-box;
-    border: 1px solid #000;
+    border: 1px solid #111;
   }
 
   div.non-segmented {
@@ -94,6 +100,7 @@
   div.gold { background-color: #ffd966; }
   div.diamond { background-color: #84f5ff; }
   div.green { background-color: #78ff78; }
+  div.gray { background-color: #777777; }
 
   div.on {
     opacity: 0.75;
@@ -106,4 +113,10 @@
   div.bar.thin {
     height: 0.25em;
   }
+  div.bar.thinner {
+    height: 0.125em;
+  }
+  div.bar.thinner div.none {
+    background-color: #111111;
+  }
 </style>