show value sorted by in products list

Author: ajgeiss0702

src/lib/lttstore/LTTProductCard.svelte

@@ -6,6 +6,7 @@
 	import { typed } from '$lib';
 	import { dev } from "$app/environment";
 	import { sha256 } from "$lib/utils.ts";
+	import type { Snippet } from "svelte";
 
 	let {
 		product = typed<ShopifyProduct>(),
@@ -14,7 +15,8 @@
 		purchasesPerHour = typed<number | undefined>(),
 		goneIn = typed<boolean>(false),
 		available = typed<boolean>(true),
-		lazyLoadImage = typed<boolean>(false)
+		lazyLoadImage = typed<boolean>(false),
+		detail = typed<Snippet | undefined>()
 	} = $props();
 
 	let goneInHours = $derived((stock?.total ?? -1) / (purchasesPerHour ?? -1));
@@ -75,6 +77,7 @@
 			Could be gone in {Math.round(goneInHours)}h
 		</div>
 	{/if}
+	{@render detail?.()}
 </a>
 
 <style>

src/routes/(info)/lttstore/products/+page.server.ts

@@ -34,7 +34,7 @@ export const load = (async ({platform, url}) => {
   const allProducts = retryD1(() =>
     // a bunch of stuff removed that isnt needed for the products page
     // ordered by available second to put items currently on lttstore above ones that arent
-    db.prepare("select handle,shortTitle,id,available,json_remove(json_remove(json_remove(json_remove(product, '$.media'), '$.images'), '$.variants'), '$.description') as product from products order by " + sortColumn + " DESC, available DESC")
+    db.prepare("select handle,shortTitle,id,available,purchasesPerDay,purchasesPerHour,metadataUpdate,stockChecked,lastRestock,json_remove(json_remove(json_remove(json_remove(product, '$.media'), '$.images'), '$.variants'), '$.description') as product from products order by " + sortColumn + " DESC, available DESC")
       .all<ProductsTableRow>()
       .then(r => r.results)
   );

src/routes/(info)/lttstore/products/+page.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
-
   import LTTProductCard from "$lib/lttstore/LTTProductCard.svelte";
   import { page } from "$app/state";
   import {flip} from "svelte/animate";
   import { fade } from "svelte/transition"
   import { goto, invalidateAll } from "$app/navigation";
   import { Progress } from "@skeletonlabs/skeleton-svelte";
   import { dev } from "$app/environment";
+  import type { PageProps } from "./$types";
+  import DateStamp from "$lib/DateStamp.svelte";
 
-  let { data } = $props();
+  let { data }: PageProps = $props();
 
   let loading = $state(false);
   async function reload() {
@@ -69,7 +68,43 @@
   </div>
   {#each data.allProducts as product, i (product.id)}
     <div class="inline-block" animate:flip={{ duration: 200 }}>
-      <LTTProductCard product={JSON.parse(product.product)} shortTitle={product.shortTitle} available={product.available} lazyLoadImage={i > 30}/>
+      <LTTProductCard
+        product={JSON.parse(product.product)}
+        shortTitle={product.shortTitle}
+        available={product.available}
+        lazyLoadImage={i > 30}
+      >
+        {#snippet detail()}
+          <div class="opacity-80 text-xs">
+            {#if data.sortColumn === "purchasesPerDay"}
+              {product.purchasesPerDay?.toFixed(2) ?? "??"} spd
+            {:else if data.sortColumn === "purchasesPerHour"}
+              {product.purchasesPerHour?.toFixed(2) ?? "??"} sph
+            {:else if data.sortColumn === "metadataUpdate"}
+              Meta updated
+              {#if product.metadataUpdate && product.metadataUpdate > 0}
+                <DateStamp epochSeconds={product.metadataUpdate / 1e3} />
+              {:else}
+                N/A
+              {/if}
+            {:else if data.sortColumn === "stockChecked"}
+              Stock checked
+              {#if product.stockChecked && product.stockChecked > 0}
+                <DateStamp epochSeconds={product.stockChecked / 1e3} />
+              {:else}
+                N/A
+              {/if}
+            {:else if data.sortColumn === "lastRestock"}
+              Restocked
+              {#if product.lastRestock && product.lastRestock > 0}
+                <DateStamp epochSeconds={product.lastRestock / 1e3} />
+              {:else}
+                N/A
+              {/if}
+            {/if}
+          </div>
+        {/snippet}
+      </LTTProductCard>
     </div>
   {:else}
     No products are being tracked yet!