Mostly Finalize Stuff

status-board/src/app.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+h1 {
+  @apply text-xl
+}

status-board/src/lib/Meal.svelte

@@ -1,7 +1,6 @@
 <script>
   export let meal;
 
-
   let eta_update_variants = [5, 10];
   const optionsTime = {
     hour: 'numeric',
@@ -35,17 +34,27 @@
   }
 
   let absolute_eta = (meal.status.last_modified + meal.status.eta * 60)*1000;
-  //let eta_date = new Date(absolute_eta);
   let start_date = new Date(meal.status.start*1000);
   let end_date = new Date(meal.status.end*1000);
+  let min_til_food = (meal.status.start * 1000 - Date.now())/100/60;
+  setTimeout(() => min_til_food = (meal.status.start * 1000 - Date.now())/100/60, 500)
 </script>
 <div class="bg-unifest-green m-5 p-3 rounded-md">
   <p> "{meal.status.recipe}" ({meal.meal_id}) </p>
-  <p> {start_date.toLocaleString('de-DE', optionsTime)}
-    - {end_date.toLocaleString('de-DE', optionsTime)} </p>
+  <!-- <p> {start_date.toLocaleString('de-DE', optionsTime)}
+    - {end_date.toLocaleString('de-DE', optionsTime)} </p> -->
   {#if !isAdmin}
     <p> Status: 
-      {#if meal.status.eta == 0 || (absolute_eta < Date.now() && meal.status.eta >= 0)}
+      {#if meal.status.start < Date.now()}
+        🕒 Upcoming 
+        {#if min_til_food < 5}
+          (Starting soon)
+        {:else if min_til_food < 60}
+          (Starting in {Math.ceil((meal.status.start * 1000 - Date.now())/100/60)}min )
+        {:else}
+          (Starting at {start_date.toLocaleString('de-DE', optionsTime)})
+        {/if}
+      {:else if meal.status.eta == 0 || (absolute_eta < Date.now() && meal.status.eta >= 0)}
         ✅ Serving 
       {:else if meal.status.eta > 0} 
         <p>⚠️ More is on the way, comming in about {Math.ceil((absolute_eta - Date.now())/1000/60)}min </p>
@@ -59,7 +68,8 @@
       {#each eta_update_variants as label}
         <button on:click={() => {setETA(label)}}>Set ETA to {label}min </button>
       {/each}
-      <button on:click={() => {setETA(-1)}}>Meal is over </button>
+      <button on:click={() => {setETA(-1)}}>Meal is over</button>
+      <button on:click={() => {setETA(0)}}>Now Serving</button>
     <p> Custom Message: <p> <input type="text" bind:value={meal.status.msg}>
     <button on:click={updateMeal}> UPDATE! </button>
   {/if}

status-board/src/routes/+page.svelte

@@ -15,12 +15,21 @@
 {#await fetch('https://essen.campus-kit.de/api/').then((x) => x.json())}
   Loading...
   (If you see this for more than a second, there is probably something wrong :0)
-{:then meals.sort((/** @type {{ name: string; }} */ a, /** @type {{ name: any; }} */ b) => a.name.localeCompare(b.name)) as meal}
-  <div class="grid grid-flow-row grid-cols-4">
-    {#each meals as meal}
-      <Meal meal={meal}/>
+{:then days}
+    {#each days as day}
+      <h1> {new Date(day[0].status.start*1000).toLocaleDateString('de-DE', {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+      })} </h1>
+      <div class="grid grid-flow-row grid-cols-4">
+        {#each day as meal}
+          {#if meal.status.end >= Date.now || meal.status.eta >= 0}
+            <Meal meal={meal}/>
+          {/if}
+        {/each}
+      </div>
     {/each}
-  </div>
 {:catch error}
    Sorry, there was an error :(
    <script> console.log(error) </script>