add more history to front page, fix dev proxy not working

frontend/src/lib/components/layout/Row.svelte

@@ -3,11 +3,15 @@
 </script>
 
 <div class="row">
-  <div class="header-row">
-    {#if title != ""}
-      <h2>{title}</h2>
-    {/if}
-    <slot name="right"></slot>
+  <div class="header-col">
+    <slot name="over"></slot>
+    <div class="header-row">
+      {#if title != ""}
+        <h2>{title}</h2>
+      {/if}
+      <slot name="right"></slot>
+    </div>
+    <slot name="under"></slot>
   </div>
 
   <slot></slot>
@@ -15,24 +19,25 @@
 
 <style lang="sass">
   @import "../../css/colors.sass"
-
   
   div.row
     margin: 0.5em 1ch
     padding: 0.5em 1ch
 
-    div.header-row
-      display: flex
-      flex-direction: row
-      padding-bottom: 0.1em
+    div.header-col
       border-bottom: 1px solid $color-entry2-transparent
+      padding-bottom: 0.1em
 
-      &:empty
-        display: none
+      div.header-row
+        display: flex
+        flex-direction: row
+  
+        &:empty
+          display: none
 
-      > h2
-        font-size: 1.25em
-        margin: 0
-        margin-bottom: 0.05em
-        margin-right: auto
+        > h2
+          font-size: 1.25em
+          margin: 0
+          margin-bottom: 0.05em
+          margin-right: auto
 </style>

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

@@ -1,7 +1,9 @@
 <script lang="ts">
-import { significantDecimals } from "$lib/utils/numbers";
-
+  import { addDays, endOfDay, formatWeekdayDate, formatWeekdayTitle, startOfDay } from "$lib/utils/date";
+  import { significantDecimals } from "$lib/utils/numbers";
+    import { morningOf } from "$lib/utils/timeinterval";
   import { getItemMultiListContext } from "../contexts/ItemMultiListContext.svelte";
+  import { getTimeContext } from "../contexts/TimeContext.svelte";
   import Row from "../layout/Row.svelte";
   import ItemSubSection, { type ItemSubSectionEvent } from "../project/ItemSubSection.svelte";
 
@@ -9,13 +11,27 @@ import { significantDecimals } from "$lib/utils/numbers";
   export let title: string;
   export let showAcquiredTime: boolean = false;
   export let useAcquiredTotal: boolean = false;
+  export let useDayFilter: number | null = null;
+  export let selectedDay: number = 0;
   export let event: ItemSubSectionEvent = "none";
 
+  const {now} = getTimeContext();
   const {lists} = getItemMultiListContext();
 
+  let dayTitle = "";
+  let filteredList = [];
+  $: if (useDayFilter != null) {
+    const maxTime = addDays(morningOf($now), -(selectedDay - 1)).toISOString();
+    const minTime = addDays(morningOf($now), -selectedDay).toISOString();
+    filteredList = $lists[key].filter(i => i.acquiredTime >= minTime && i.acquiredTime <= maxTime)
+    dayTitle = formatWeekdayTitle($now, new Date(minTime))
+  } else {
+    filteredList = $lists[key] || [];
+  }
+
   let totalStr = "";
   $: {
-    totalStr = significantDecimals(($lists[key]||[]).map(v => useAcquiredTotal ? v.weightedAcquired : v.weightedRequired).reduce((p,c) => p + c, 0));
+    totalStr = significantDecimals(filteredList.map(v => useAcquiredTotal ? v.weightedAcquired : v.weightedRequired).reduce((p,c) => p + c, 0));
     if (Number(totalStr) < 0.01) {
       totalStr = "";
     }
@@ -23,10 +39,19 @@ import { significantDecimals } from "$lib/utils/numbers";
 </script>
 
 
-{#if ($lists[key]||[]).length > 0}
-  <Row title={title}>
+{#if (filteredList.length > 0 || useDayFilter != null)}
+  <Row title={title || dayTitle}>
     <div class="total" slot="right">{totalStr}</div>
-    {#each $lists[key] as item (item.id)}
+    <div class="day-filters" slot="over">
+      {#if (useDayFilter != null)}
+        {#each {length: useDayFilter} as _, i}
+          <div on:click={() => selectedDay = i} class="option" class:selected={i === selectedDay}>
+            <div class="inner"></div>
+          </div>
+        {/each}
+      {/if}
+    </div>
+    {#each filteredList as item (item.id)}
       <ItemSubSection event={event} showAcquiredTime={showAcquiredTime} item={item} />
     {/each}
   </Row>
@@ -38,4 +63,36 @@ import { significantDecimals } from "$lib/utils/numbers";
   div.total
     color: $color-entry5
     margin-top: 0.25em
+
+  div.day-filters
+    display: flex
+    flex-direction: row
+    max-width: 100%
+    flex-wrap: wrap
+
+    div.option
+      padding: 0.1em 0.25em
+      cursor: pointer
+
+      &:first-child
+        margin-left: -0.25em
+        @media screen and (max-width: 749px)
+          margin-left: 0
+
+      > div.inner
+        width: 1.25ch
+        height: 1.25ch
+        border: 1px solid $color-entry2
+
+        @media screen and (max-width: 749px)
+          width: 2.5ch
+          height: 2.5ch
+
+
+      &.selected > div.inner
+        border-color: $color-entry7
+        background-color: $color-entry7
+
+      &:hover > div.inner
+        border-color: $color-entry9
 </style>

frontend/src/lib/utils/date.ts

@@ -51,6 +51,23 @@ export function formatWeekdayDate(time: Date | string | number): string {
   return `${time.getFullYear()}-${pad(time.getMonth()+1)}-${pad(time.getDate())} (${weekDay[time.getDay()]})`;
 }
 
+export function formatWeekdayTitle(now: Date, time: Date | string | number): string {
+  if (!(time instanceof Date)) {
+    time = new Date(time);
+  }
+
+  const diff = Math.round((time.getTime() - now.getTime()) / (86400000));
+  if (diff === -1) {
+    return "Today"
+  } else if (diff === -2) {
+    return "Yesterday"
+  } else if (diff >= -7) {
+    return `${weekDay[time.getDay()]}`;
+  } else {
+    return formatWeekdayDate(time);
+  }
+}
+
 export function startOfMonth(now: Date, offset = 0): Date {
   return new Date(now.getFullYear(), now.getMonth() + offset);
 }

frontend/src/lib/utils/timeinterval.ts

@@ -59,6 +59,10 @@ export default function parseInterval(s: string, date: Date): TimeInterval<Date>
   return null
 }
 
+export function morningOf(date: Date) {
+  return new Date(startOfDay(date).getTime() + (3600000 * 5));
+}
+
 export function morningInterval(interval: TimeInterval<Date>) {
   if (!interval) {
     return null

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

@@ -8,7 +8,7 @@
         unAcquired: true,
       },
       acquiredFilter: {
-        acquiredTime: morningInterval(parseInterval("today", now)),
+        acquiredTime: morningInterval(parseInterval("last:15d", now)),
       },
       looseFilter: {
         loose: true,
@@ -105,7 +105,7 @@
           <Card on:click={openDeleteScope} pointerCursor><CardHeader>Delete Scope</CardHeader></Card>
         </Row>
         <ItemListRow event="scheduled" title="Scheduled" key="scheduledItems" />
-        <ItemListRow title="Today" key="acquiredItems" showAcquiredTime useAcquiredTotal />
+        <ItemListRow title="" key="acquiredItems" useDayFilter={15} showAcquiredTime useAcquiredTotal />
         <ItemListRow title="Loose" key="looseItems" />
       </Column>
       <Column>

frontend/src/routes/api/[...any].ts

@@ -4,11 +4,13 @@ export const get: RequestHandler = async({ request, url, params, locals }) => {
   const proxyUrl = `${import.meta.env.VITE_STUFFLOG3_API}/api/${params.any}${url.search}`;
 
   const headers = {};
-  if (locals.idToken != null) {
-    headers["Authorization"] = `Bearer ${locals.idToken}`;
-  } else if (request.headers.get("authorization") != null) {
-    headers["Authorization"] = request.headers.get("authorization");
-  }
+  request.headers.forEach((v, k) => {
+    if (k.toLowerCase() == "host") {
+      return;
+    }
+
+    headers[k] = v;
+  })
 
   const res = await fetch(proxyUrl, {
     method: request.method,
@@ -19,15 +21,12 @@ export const get: RequestHandler = async({ request, url, params, locals }) => {
     throw err;
   });
 
+  const body = JSON.stringify(await res.json());
   const result = {
     status: res.status,
-    body: await res.text(),
-    headers: {},
+    body,
   }
-  res.headers.forEach((v, k) => {
-    result.headers[k] = v;
-  })
- 
+
   return result;
 }
 

frontend/src/routes/index.svelte

@@ -9,7 +9,7 @@
         unAcquired: true,
       },
       acquiredFilter: {
-        acquiredTime: morningInterval(parseInterval("today", now)),
+        acquiredTime: morningInterval(parseInterval("last:15d", now)),
       },
       looseFilter: {
         loose: true,
@@ -92,7 +92,7 @@
             <ScopeLinkList />
           </Row>
           <ItemListRow event="scheduled" title="Scheduled" key="scheduledItems" />
-          <ItemListRow title="Today" key="acquiredItems" showAcquiredTime useAcquiredTotal  />
+          <ItemListRow title="" key="acquiredItems" useDayFilter={15} showAcquiredTime useAcquiredTotal  />
           <ItemListRow title="Loose" key="looseItems" />
         </Column>
         <Column>