more frontend stuff

frontend/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json"

frontend/src/App.svelte

@@ -8,8 +8,8 @@
   let info: Info;
   let alarms: Alarm[];
 
-  onMount(async () => {
-    Promise.all([
+  function fetchdata() {
+    return Promise.all([
       fetch("/api/info")
         .then((r) => r.json())
         .then((data) => {
@@ -21,6 +21,10 @@
           alarms = data;
         }),
     ]);
+  }
+
+  onMount(async () => {
+    await fetchdata();
   });
 </script>
 
@@ -33,7 +37,9 @@
   {#if alarms}
     {#each alarms as alarm}
       <div class="mb-2 pb-2 px-2 w-full border-b-2">
-        <AlarmComp {alarm} />
+        <AlarmComp {alarm} on:update={()=>{
+          fetchdata();
+        }} />
       </div>
     {/each}
   {/if}

frontend/src/lib/AddAlarm.svelte

@@ -11,7 +11,8 @@
 </script>
 
 <div>
-    <div class="fixed bottom-8 right-5" >
+    <!-- TODO: handle position of button on mobile -->
+    <div class="pt-10" >
         {#if closed}
             <button class="h-16 p-2 bg-orange-500 rounded-xl cursor-pointer" on:click={()=>{
                 closed = false;
@@ -19,7 +20,7 @@
                 <MdAddAlarm />
             </button>
         {:else}
-            <div class="w-40 h-10 bg-orange-500 rounded-xl flex">
+            <div class="w-40 h-10 bg-orange-500 rounded-xl flex justify-center">
                 <form 
                     on:submit|preventDefault={()=>{
                         closed = true;
@@ -28,7 +29,8 @@
                 >
                     <input 
                         type="text" 
-                        class="bg-transparent border-b-2 border-white outline-none w-32 m-auto" 
+                        inputmode="text"
+                        class="bg-transparent border-b-2 border-white outline-none w-32 m-auto pt-1" 
                         use:focus on:focusout={()=>{
                             closed = true;
                         }}

frontend/src/lib/Alarm.svelte

@@ -3,21 +3,45 @@
     import MdRemoveCircle from 'svelte-icons/md/MdRemoveCircle.svelte'
     //@ts-ignore
     import MdAlarmOff from 'svelte-icons/md/MdAlarmOff.svelte'
-    
     import type { Alarm } from "../types";
+    import { createEventDispatcher } from 'svelte';
 
     export let alarm: Alarm;
+
+    const dispatch = createEventDispatcher();
 </script>
 
 <div class="flex justify-between items-center w-full">
     <!-- <div class="text-xl" >{alarm.name}</div> -->
     <div class="text-xl">{alarm.time}</div>
-    <dir class="h-7 cursor-pointer flex gap-6 text-orange-500" >
-        <MdAlarmOff  />
-        <MdRemoveCircle />
+    <dir class="flex gap-5">
+        <button class="h-7 cursor-pointer" on:click={()=>{
+            fetch(`/api/alarm/${alarm.name}`, {
+                method: "PATCH",
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    disabled: !alarm.disabled
+                })
+            }).then(res => {
+                
+                if (res.status === 200) {
+                    dispatch('update', alarm);
+                }
+            })
+        }}>
+            <MdAlarmOff />
+        </button>
+        {#if alarm.disabled}
+            <div class="text-xl">Disabled</div>
+        {/if}
+        <button class="h-7 cursor-pointer" on:click={()=>{
+            // TODO: remove alarm
+            dispatch('remove', alarm);
+        }}>
+            <MdRemoveCircle />
+        </button>
     </dir>
+    
 </div>
-
-<style>
-
-</style>

frontend/src/lib/Info.svelte

@@ -7,7 +7,6 @@
 
     export let info: Info; 
 
-    let duration = Duration.parse(info.nextAlarmIn);
     let localUTOffset = new Date().getTimezoneOffset() * -1 / 60;
     let serverTime = new ServerClock(info.serverTime)
 
@@ -28,7 +27,9 @@
             <p class="text-orange-500" >Local time not in sync with server </p>
         {/if }
     </div>
+    {#if info.nextAlarmIn}
     <div class="text-lg text-center mt-2">
-      <div class="h-4 inline-block" ><MdAccessAlarm /></div> <span> in {duration.sprintf("%hh %mm")}</span>
+      <div class="h-4 inline-block" ><MdAccessAlarm /></div> <span> in {Duration.parse(info.nextAlarmIn).sprintf("%hh %mm")}</span>
     </div>
+    {/if}
 </div>

frontend/src/types.ts

@@ -1,8 +1,8 @@
 export interface Info {
     alarms: number
     deviceId: string
-    nextAlarmAt: string
-    nextAlarmIn: string
+    nextAlarmAt?: string
+    nextAlarmIn?: string
     serverTime: string
     spotifyUser: string
     timezone: string
@@ -13,4 +13,5 @@ export interface Info {
 export interface Alarm {
     name: string
     time: string
+    disabled: boolean
 }