add time filter.

svelte-ui/src/pages/GoalPage.svelte

@@ -4,23 +4,37 @@
   import type { ModalData } from "../stores/modal";
   import goalStore from "../stores/goal";
   import RefreshSelection from "../components/RefreshSelection.svelte";
+  import { endOfWeek, formatFormTime, startOfWeek } from "../utils/time";
+  import DateRangeSelect from "../components/DateRangeSelect.svelte";
 
   const mdGoalAdd: ModalData = {name: "goal.add"};
 
-  let minTime = new Date(Date.now() - 366 * 86400000);
+  let minTime = formatFormTime($goalStore.filter.minTime || startOfWeek(new Date()));
+  let maxTime = formatFormTime(endOfWeek(new Date()));
 
   $: {
-    if ($goalStore.stale && !$goalStore.loading) {
-      goalStore.load({minTime});
+    const min = new Date(minTime);
+    const max = new Date(maxTime);
+
+    if (!$goalStore.loading) {
+      if ($goalStore.stale || $goalStore.filter.minTime?.getTime() != min.getTime() || $goalStore.filter.maxTime?.getTime() != max.getTime()) {
+        goalStore.load({
+          minTime: min, 
+          maxTime: max,
+        });
+      }
     }
   }
 </script>
 
 <div class="page">
-  {#each $goalStore.goals as goal (goal.id)}
-    <GoalEntry showAllOptions goal={goal} />
-  {/each}
-  <Boi open={mdGoalAdd}>Add Goal</Boi>
+  <DateRangeSelect label="Time Filter" styled bind:fromValue={minTime} bind:toValue={maxTime} />
+  <div class="goal-list" class:loading={$goalStore.loading}>
+    {#each $goalStore.goals as goal (goal.id)}
+      <GoalEntry showAllOptions goal={goal} />
+    {/each}
+    <Boi open={mdGoalAdd}>Add Goal</Boi>
+  </div>
 </div>
 <RefreshSelection />
 
@@ -33,4 +47,8 @@
     margin-top: 0;
     box-sizing: border-box;
   }
+
+  div.goal-list.loading {
+    opacity: 0.75;
+  }
 </style>

svelte-ui/src/pages/LogsPage.svelte

@@ -2,33 +2,33 @@
   import LogEntry from "../components/LogEntry.svelte";
   import type { LogResult } from "../models/log";
   import logStore from "../stores/logs";
-  import { formatDate, formatTime, formatWeekdayDate } from "../utils/time";
-  import Boi from "../components/Boi.svelte";
+  import { endOfWeek, formatFormTime, formatWeekdayDate, startOfWeek } from "../utils/time";
   import EmptyList from "../components/EmptyList.svelte";
   import RefreshSelection from "../components/RefreshSelection.svelte";
+  import DateRangeSelect from "../components/DateRangeSelect.svelte";
 
   let groupedLogs: {day: number, text: string, logs: LogResult[]}[] = [];
-  let minTime = $logStore.filter.minTime || new Date(Date.now() - (86400000*30));
+  let minTime = formatFormTime($logStore.filter.minTime || startOfWeek(new Date()));
+  let maxTime = formatFormTime(endOfWeek(new Date()));
   let emptyMessage = `No logs since ${formatWeekdayDate(minTime)}.`;
 
-  function loadMore() {
-    if (!$logStore.stale && !$logStore.loading) {
-      minTime = new Date(minTime.getTime() - (86400000*30));
-      logStore.markStale();
-    }
-  }
-
   $: {
-    if ($logStore.stale && !$logStore.loading) {
-      logStore.load({
-        minTime: minTime,
-      });
+    const min = new Date(minTime);
+    const max = new Date(maxTime);
+
+    if (!$logStore.loading) {
+      if ($logStore.stale || $logStore.filter.minTime?.getTime() != min.getTime() || $logStore.filter.maxTime?.getTime() != max.getTime()) {
+        logStore.load({
+          minTime: min, 
+          maxTime: max,
+        });
+      }
     }
   }
 
   $: {
     if (!$logStore.loading && !$logStore.stale) {
-      emptyMessage = `No logs since ${formatWeekdayDate(minTime)}.`;
+      emptyMessage = `No logs between ${formatWeekdayDate(minTime)} and ${formatWeekdayDate(maxTime)}.`;
     }
   }
 
@@ -81,20 +81,18 @@
 </script>
 
 <div class="page">
-  {#each groupedLogs as logGroup (logGroup.day)}
-    <h2>{logGroup.text}</h2>
-    {#each logGroup.logs as log (log.id)}
-      <LogEntry log={log} />
+  <DateRangeSelect label="Time Filter" noFuture styled bind:fromValue={minTime} bind:toValue={maxTime} />
+  <div class="log-list" class:loading={$logStore.loading}>
+    {#each groupedLogs as logGroup (logGroup.day)}
+      <h2>{logGroup.text}</h2>
+      {#each logGroup.logs as log (log.id)}
+        <LogEntry log={log} />
+      {/each}
     {/each}
-  {/each}
-  {#if groupedLogs.length === 0}
-    <EmptyList icon="list" text={emptyMessage} />
-  {/if}
-  {#if !$logStore.loading && !$logStore.stale}
-    <Boi on:click={loadMore}>Load More</Boi>
-  {:else}
-    <Boi disabled>Loading...</Boi>
-  {/if}
+    {#if groupedLogs.length === 0}
+      <EmptyList icon="list" text={emptyMessage} />
+    {/if}
+  </div>
 </div>
 <RefreshSelection />
 
@@ -108,6 +106,10 @@
     box-sizing: border-box;
   }
 
+  div.log-list.loading {
+    opacity: 0.75;
+  }
+
   h2 {
     font-size: 1.5em;
     font-weight: 100;