add project progress indicator and sort front page projects by deadline.

svelte-ui/src/pages/FrontPage.svelte

@@ -4,10 +4,11 @@
   import ProjectEntry from "../components/ProjectEntry.svelte";
   import type { ProjectResult } from "../models/project";
   import { fpGoalStore } from "../stores/goal";
-  import { fpProjectStore } from "../stores/project";
-  import { fpTaskStore } from "../stores/tasks";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  import taskStore, { fpTaskStore } from "../stores/tasks";
 
   let fakeProject: ProjectResult
+  let sortedProjects: ProjectResult[]
 
   $: {
     if ($fpGoalStore.stale && !$fpGoalStore.loading) {
@@ -44,12 +45,22 @@
       description: "",
       icon: "list",
       name: "Individual Tasks",
-      tasks: $fpTaskStore.tasks.filter(t => $fpProjectStore.projects.find(p => p.id === t.id) == null),
+      tasks: $fpTaskStore.tasks.filter(t => $fpProjectStore.projects.find(p => p.id === t.id) == null)
+        .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime)),
       endTime: null,
     }
 
+    if (fakeProject.tasks.length > 0) {
+      fakeProject.endTime = fakeProject.tasks[0].endTime;
+    }
+
     console.log(fakeProject, $fpTaskStore);
   }
+
+  $: {
+    const projects = fakeProject.tasks.length > 0 ? [...$fpProjectStore.projects, fakeProject] : [...$fpProjectStore.projects];
+    sortedProjects = projects.sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
+  }
 </script>
 
 <div class="page">
@@ -68,12 +79,9 @@
     {#if !$fpProjectStore.loading || $fpProjectStore.projects.length > 0}
       <h1>Upcoming Deadlines</h1>
     {/if}
-    {#each $fpProjectStore.projects as project (project.id)}
+    {#each sortedProjects as project (project.id)}
       <ProjectEntry hideInactive project={project} />
     {/each}
-    {#if fakeProject.tasks.length > 0}
-      <ProjectEntry project={fakeProject} />
-    {/if}
     {#if fakeProject.tasks.length === 0 && !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
       <EmptyList icon="check" text="All good!" />
     {/if}