feat: implemented gps location check

frontend/src/lib/components/QueueSlider.svelte

@@ -8,6 +8,10 @@
         queueSongs[playingIndex],
         playingIndex == queueSongs.length - 1 ? createEmptySong() : queueSongs[playingIndex + 1],
     ])
+
+    $effect(() => {
+        console.log(displaySongs)
+    })
 </script>
 
 <div class="relative flex w-full justify-center overflow-hidden">
@@ -28,11 +32,7 @@
                     {/if}
                 </div>
             {:else}
-                <div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center">
-                    {#if i === 1}
-                        <p>No song in queue</p>
-                    {/if}
-                </div>
+                <div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center"></div>
             {/if}
         {/each}
     </div>

frontend/src/lib/components/SuggestionInput.svelte

@@ -4,15 +4,25 @@
     let input = $state("")
 
     async function sendSong() {
-        let resp = await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
+        await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
         input = ""
     }
 </script>
 
-<div class="bg-lime-500 flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600">
-    <input type="text" placeholder="Song & Artist" class="font-bold outline-none text-white h-[50px] px-4 w-3/4 rounded" bind:value={input} />
+<div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600 bg-lime-500">
+    <input
+        type="text"
+        placeholder="Song & Artist"
+        class="h-[50px] w-3/4 rounded px-4 font-bold text-white outline-none"
+        bind:value={input}
+        onkeydown={(e) => {
+            if (e.key == "Enter") {
+                sendSong()
+            }
+        }}
+    />
     <button
-        class="shadow-xl hover:scale-105 w-1/4 h-[40px] cursor-pointer bg-lime-600 border-lime-700 font-semibold text-white border-2 i-lucide-check rounded active:scale-90 duration-100"
+        class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border-2 border-lime-700 bg-lime-600 font-semibold text-white shadow-xl duration-100 hover:scale-105 active:scale-90"
         onclick={sendSong}>Add</button
     >
     <span class="i-lucide-chevrons-left"></span>

frontend/src/lib/types.ts

@@ -10,19 +10,19 @@ const SongSchema = z.object({
 })
 export type Song = z.infer<typeof SongSchema>
 
-export const parseSong = async function(song: any): Promise<Song> {
+export const parseSong = async function (song: any): Promise<Song> {
     let resp = await SongSchema.parseAsync(song)
     return resp
 }
 
-export const createEmptySong = function(): Song {
+export const createEmptySong = function (): Song {
     return {
         uuid: "-1",
         title: "",
         artist: "",
         tags: [""],
         image_id: "",
-        youtube_id: 0,
+        youtube_id: "",
     }
 }
 
@@ -31,7 +31,7 @@ const SuggestionSchema = SongSchema.extend({
 })
 export type Suggestion = z.infer<typeof SuggestionSchema>
 
-export const parseSuggestion = async function(sugg: any): Promise<Suggestion> {
+export const parseSuggestion = async function (sugg: any): Promise<Suggestion> {
     let resp = await SuggestionSchema.parseAsync(sugg)
     return resp
 }
@@ -41,11 +41,11 @@ const RoomSchema = z.object({
     name: z.string(),
     private: z.boolean(),
     coords: z.tuple([z.number(), z.number()]),
-    range: z.number().int()
+    range: z.number().int(),
 })
 export type Room = z.infer<typeof RoomSchema>
 
-export const parseRoom = async function(room: any): Promise<Room> {
+export const parseRoom = async function (room: any): Promise<Room> {
     let resp = await RoomSchema.parseAsync(room)
     return resp
 }

frontend/src/lib/utils.ts

@@ -1,7 +1,7 @@
 import { parseSong, parseSuggestion, type FetchError, type Song, type Suggestion } from "./types"
 
-export const joinRoom = async function (roomId: string): Promise<[FetchError | null, string]> {
-    let resp = await fetch("/api/join?room=" + roomId)
+export const joinRoom = async function (roomId: string, lat: number, lon: number): Promise<[FetchError | null, string]> {
+    let resp = await fetch(`/api/join?room=${roomId}&lat=${lat}&lon=${lon}`)
 
     if (resp.status != 200) {
         return [{ code: 400, message: "Cannot join the room" }, ""]