added initial frontend

frontend/src/App.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import InfoComp from "./lib/Info.svelte";
+  import AlarmComp from "./lib/Alarm.svelte";
+  import type { Alarm, Info } from "./types";
+  import AddAlarm from "./lib/AddAlarm.svelte";
+
+  let info: Info;
+  let alarms: Alarm[];
+
+  onMount(async () => {
+    Promise.all([
+      fetch("/api/info")
+        .then((r) => r.json())
+        .then((data) => {
+          info = data;
+        }),
+      fetch("/api/alarm")
+        .then((r) => r.json())
+        .then((data) => {
+          alarms = data;
+        }),
+    ]);
+  });
+</script>
+
+<main class="flex flex-col items-center justify-center max-w-xl m-auto mt-6">
+  {#if info}
+    <div class="mb-8"> 
+      <InfoComp {info} />
+    </div>
+  {/if}
+  {#if alarms}
+    {#each alarms as alarm}
+      <div class="mb-2 pb-2 px-2 w-full border-b-2">
+        <AlarmComp {alarm} />
+      </div>
+    {/each}
+  {/if}
+  <AddAlarm />
+</main>

frontend/src/Duration.ts

@@ -0,0 +1,65 @@
+export class Duration {
+    private seconds: number = 0;
+
+    constructor(s: number) {
+        this.seconds = s;
+    }
+
+    public static parse(s: string): Duration {
+        const regex = /(\d+d)?(\d+h)?(\d+m)?([\d.]+s)?/g;
+        const matches = [...s.matchAll(regex)];
+
+        if (!matches || matches.length === 0) {
+          throw new Error("Invalid duration format");
+        }
+      
+        let totalSeconds = 0;
+      
+        for (const match of matches) {
+          const [, days, hours, minutes, seconds] = match;
+          const numericDays = parseInt(days) || 0;
+          const numericHours = parseInt(hours) || 0;
+          const numericMinutes = parseInt(minutes) || 0;
+          const numericSeconds = parseFloat(seconds) || 0;
+      
+          totalSeconds +=
+            numericDays * 24 * 60 * 60 +
+            numericHours * 60 * 60 +
+            numericMinutes * 60 +
+            numericSeconds;
+        }
+      
+        return new Duration(totalSeconds);
+    }
+
+    public toString(): string {
+        let seconds = this.seconds;
+        let days = Math.floor(seconds / 86400);
+        seconds -= days * 86400;
+        let hours = Math.floor(seconds / 3600);
+        seconds -= hours * 3600;
+        let minutes = Math.floor(seconds / 60);
+        seconds -= minutes * 60;
+        let result = "";
+        if (days > 0) { result += days + "d "; }
+        if (hours > 0) { result += hours + "h "; }
+        if (minutes > 0) { result += minutes + "m "; }
+        if (seconds > 0) { result += seconds + "s "; }
+        return result;
+    }
+
+    public sprintf(format: string): string {
+        let seconds = this.seconds;
+        let days = Math.floor(seconds / 86400);
+        seconds -= days * 86400;
+        let hours = Math.floor(seconds / 3600);
+        seconds -= hours * 3600;
+        let minutes = Math.floor(seconds / 60);
+        seconds -= minutes * 60;
+        return format
+            .replace("%d", days.toString())
+            .replace("%h", hours.toString())
+            .replace("%m", minutes.toString())
+            .replace("%s", seconds.toFixed(0).toString());
+    }
+}

frontend/src/ServerClock.ts

@@ -0,0 +1,28 @@
+export class ServerClock {
+    private serverStartDate 
+
+    constructor(time: string) {
+        // parse time
+        var timeParts = time.split(/[: ]/)
+        var hours = parseInt(timeParts[0])
+        var minutes = parseInt(timeParts[1])
+        var seconds = parseInt(timeParts[2])
+
+        let now = new Date()
+
+        now.setHours(hours)
+        now.setMinutes(minutes)
+        now.setSeconds(seconds)
+
+        this.serverStartDate = now
+    }
+
+    getServerTime(): string {
+        let now = new Date()
+        let diff = now.getTime() - this.serverStartDate.getTime()
+        let serverTime = new Date()
+        serverTime.setTime(this.serverStartDate.getTime() + diff)
+        
+        return serverTime.toLocaleTimeString()
+    }
+}

frontend/src/app.postcss

@@ -0,0 +1,12 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-gray-900;
+}
+
+* {
+    @apply text-white;
+}

frontend/src/lib/AddAlarm.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    //@ts-ignore
+    import MdAddAlarm from 'svelte-icons/md/MdAddAlarm.svelte'
+
+    let closed = true;
+
+    function focus(el: HTMLInputElement) {
+        el.focus();
+    }
+
+</script>
+
+<div>
+    <div class="fixed bottom-8 right-5" >
+        {#if closed}
+            <button class="h-16 p-2 bg-orange-500 rounded-xl cursor-pointer" on:click={()=>{
+                closed = false;
+            }} >
+                <MdAddAlarm />
+            </button>
+        {:else}
+            <div class="w-40 h-10 bg-orange-500 rounded-xl flex">
+                <form 
+                    on:submit|preventDefault={()=>{
+                        closed = true;
+                        // TODO: add alarm
+                    }}  
+                >
+                    <input 
+                        type="text" 
+                        class="bg-transparent border-b-2 border-white outline-none w-32 m-auto" 
+                        use:focus on:focusout={()=>{
+                            closed = true;
+                        }}
+                    >
+                </form>
+            </div>
+        {/if}
+    </div>
+</div>

frontend/src/lib/Alarm.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    //@ts-ignore
+    import MdRemoveCircle from 'svelte-icons/md/MdRemoveCircle.svelte'
+    //@ts-ignore
+    import MdAlarmOff from 'svelte-icons/md/MdAlarmOff.svelte'
+    
+    import type { Alarm } from "../types";
+
+    export let alarm: Alarm;
+</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>
+</div>
+
+<style>
+
+</style>

frontend/src/lib/Info.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    //@ts-ignore
+    import MdAccessAlarm from 'svelte-icons/md/MdAccessAlarm.svelte'
+    import type { Info } from "../types";
+    import { Duration } from "../Duration";
+    import { ServerClock } from '../ServerClock';
+
+    export let info: Info; 
+
+    let duration = Duration.parse(info.nextAlarmIn);
+    let localUTOffset = new Date().getTimezoneOffset() * -1 / 60;
+    let serverTime = new ServerClock(info.serverTime)
+
+    let dispalyTime = serverTime.getServerTime();
+
+    setInterval(() => {
+        dispalyTime = serverTime.getServerTime();
+    }, 1000);
+</script>
+
+<div>
+    <div class="text-4xl text-center">
+        {dispalyTime}
+    </div>
+    <div class="text-xs text-center">
+        {info.timezone}
+        {#if localUTOffset != info.timezoneOffsetInH}
+            <p class="text-orange-500" >Local time not in sync with server </p>
+        {/if }
+    </div>
+    <div class="text-lg text-center mt-2">
+      <div class="h-4 inline-block" ><MdAccessAlarm /></div> <span> in {duration.sprintf("%hh %mm")}</span>
+    </div>
+</div>

frontend/src/main.ts

@@ -0,0 +1,8 @@
+import "./app.postcss";
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.getElementById("app")!,
+});
+
+export default app;

frontend/src/types.ts

@@ -0,0 +1,16 @@
+export interface Info {
+    alarms: number
+    deviceId: string
+    nextAlarmAt: string
+    nextAlarmIn: string
+    serverTime: string
+    spotifyUser: string
+    timezone: string
+    timezoneOffsetInH: number
+    wakeupPlaylist: string
+}
+
+export interface Alarm {
+    name: string
+    time: string
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />