add timer for scheduled items.

frontend/src/lib/components/project/ItemSubSection.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  export type ItemSubSectionEvent = "created" | "scheduled" | "acquired" | "none"
+</script>
+
 <script lang="ts">
   import Markdown from "$lib/components/common/Markdown.svelte";
   import SubSection from "$lib/components/layout/SubSection.svelte";
@@ -9,12 +13,15 @@
   import AmountRow from "../common/AmountRow.svelte";
   import type { IconName } from "../layout/Icon.svelte";
   import Icon from "../layout/Icon.svelte";
-  import { formatTime } from "$lib/utils/date";
+  import { formatDays, formatPrettyTime, formatTime } from "$lib/utils/date";
   import RequirementReference from "./RequirementReference.svelte";
   import ItemTimeInfo from "./ItemTimeInfo.svelte";
+  import { getTimeContext } from "../contexts/TimeContext.svelte";
+
+  const {now} = getTimeContext();
 
   export let item: Item;
-  export let event: "created" | "scheduled" | "acquired" | "none" = "none";
+  export let event: ItemSubSectionEvent = "none";
   export let compact = false;
   export let showAcquiredTime = false;
   export let hideStats = false;
@@ -34,9 +41,9 @@
       }
     } else if (event === "scheduled") {
       if (!item.acquiredTime) {
-        icon = "hourglass";
+        icon = "calendar";
         status = Status.Blocked;
-        eventText = "scheduled"
+        eventText = formatDays(new Date(item.scheduledDate), $now)
       }
     } else if (event === "created") {
       icon = "lightbulb";

frontend/src/lib/components/scope/ItemListRow.svelte

@@ -3,12 +3,13 @@ import { significantDecimals } from "$lib/utils/numbers";
 
   import { getItemMultiListContext } from "../contexts/ItemMultiListContext.svelte";
   import Row from "../layout/Row.svelte";
-  import ItemSubSection from "../project/ItemSubSection.svelte";
+  import ItemSubSection, { type ItemSubSectionEvent } from "../project/ItemSubSection.svelte";
 
   export let key: string;
   export let title: string;
   export let showAcquiredTime: boolean = false;
   export let useAcquiredTotal: boolean = false;
+  export let event: ItemSubSectionEvent = "none";
 
   const {lists} = getItemMultiListContext();
 
@@ -26,7 +27,7 @@ import { significantDecimals } from "$lib/utils/numbers";
   <Row title={title}>
     <div class="total" slot="right">{totalStr}</div>
     {#each $lists[key] as item (item.id)}
-      <ItemSubSection showAcquiredTime={showAcquiredTime} item={item} />
+      <ItemSubSection event={event} showAcquiredTime={showAcquiredTime} item={item} />
     {/each}
   </Row>
 {/if}

frontend/src/lib/models/sprint.ts

@@ -19,6 +19,7 @@ export default interface Sprint {
   aggregateRequired: number
   aggregateAcquired: number
   aggregatePlanned: number
+  aggregateBurndown: SprintBurndownDataPoint[]
 
   itemsAcquired?: number
   itemsRequired?: number
@@ -28,6 +29,11 @@ export default interface Sprint {
   progress: StatProgress[]
 }
 
+interface SprintBurndownDataPoint {
+  date: string
+  value: number
+}
+
 export enum SprintKind {
   Items = 0,
   Requirements = 1,

frontend/src/lib/utils/date.ts

@@ -135,6 +135,22 @@ export function addYears(date: Date, years: number): Date {
   return newDate;
 }
 
+export function formatDays(date: Date, now: Date) {
+  const d = startOfDay(date);
+  const n = startOfDay(now);
+  const diff = Math.round((d.getTime() - n.getTime()) / (86400000));
+
+  if (diff === 0) {
+    return "today";
+  } else if (diff === 1) {
+    return "tomorrow";
+  } else if (diff < 7) {
+    return `${diff} days`;
+  } else {
+    return `${Math.floor(diff / 7)} weeks`;
+  }
+}
+
 export function formatPrettyTime(date: Date, now: Date) {
   const d = startOfDay(date);
   const n = startOfDay(now);

frontend/src/routes/[scope=prettyid]/overview.svelte

@@ -104,7 +104,7 @@
           <Card on:click={openEditScope} pointerCursor><CardHeader>Edit Scope</CardHeader></Card>
           <Card on:click={openDeleteScope} pointerCursor><CardHeader>Delete Scope</CardHeader></Card>
         </Row>
-        <ItemListRow title="Scheduled" key="scheduledItems" />
+        <ItemListRow event="scheduled" title="Scheduled" key="scheduledItems" />
         <ItemListRow title="Today" key="acquiredItems" showAcquiredTime useAcquiredTotal />
         <ItemListRow title="Loose" key="looseItems" />
       </Column>

frontend/src/routes/index.svelte

@@ -91,7 +91,7 @@
             </OptionsRow>
             <ScopeLinkList />
           </Row>
-          <ItemListRow title="Scheduled" key="scheduledItems" />
+          <ItemListRow event="scheduled" title="Scheduled" key="scheduledItems" />
           <ItemListRow title="Today" key="acquiredItems" showAcquiredTime useAcquiredTotal  />
           <ItemListRow title="Loose" key="looseItems" />
         </Column>