add room scanner logic

frontend/src/lib/components/RoomComponent.svelte

@@ -3,8 +3,9 @@
     let { room }: { room: Room } = $props()
 </script>
 
-<button
+<a
     class="flex w-82 cursor-pointer flex-row items-center rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
+    href="/room/{room.id}"
 >
     <div class="flex flex-row">
         {room.name}
@@ -12,7 +13,7 @@
     </div>
     <div class="grow"></div>
     <div class="flex flex-row items-center gap-2">
-        <div class="font-mono">64m</div>
+        <div class="font-mono">{Math.round(room.distance)}m</div>
         <div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
     </div>
-</button>
+</a>

frontend/src/lib/types.ts

@@ -37,11 +37,12 @@ export const parseSuggestion = async function(sugg: any): Promise<Suggestion> {
 }
 
 const RoomSchema = z.object({
-    id: z.string(),
+    id: z.number(),
     name: z.string(),
     private: z.boolean(),
-    coords: z.tuple([z.number(), z.number()]),
-    range: z.number().int()
+    coords: z.object({ latitude: z.number(), longitude: z.number() }),
+    range: z.number().int(),
+    distance: z.number()
 })
 export type Room = z.infer<typeof RoomSchema>
 

frontend/src/lib/utils.ts

@@ -1,16 +1,21 @@
+import { get_coords } from "./gps"
 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): Promise<[FetchError | null, string]> {
+    let { coords, error } = await get_coords()
+    if (error != null) return [{ code: 400, message: "Cannot join the room due to GPS error" }, ""]
+    if (coords == null) return [{ code: 400, message: "Cannot join the room due to GPS error" }, ""]
 
-    if (resp.status != 200) {
+    let res = await fetch(`/api/join?room=${roomId}&lat=${coords.latitude}&lon=${coords.longitude}`)
+
+    if (res.status != 200) {
         return [{ code: 400, message: "Cannot join the room" }, ""]
     }
 
     return [null, "test"]
 }
 
-export const getSuggestions = async function (roomId: string): Promise<[FetchError | null, Suggestion[]]> {
+export const getSuggestions = async function(roomId: string): Promise<[FetchError | null, Suggestion[]]> {
     let resp = await fetch("/api/room/suggestions?room=" + roomId)
 
     if (resp.status != 200) {
@@ -31,7 +36,7 @@ export const getSuggestions = async function (roomId: string): Promise<[FetchErr
     return [null, suggestions]
 }
 
-export const getQueueSongs = async function (roomId: string): Promise<[FetchError | null, Song[], number]> {
+export const getQueueSongs = async function(roomId: string): Promise<[FetchError | null, Song[], number]> {
     let resp = await fetch("/api/queue?room=" + roomId)
     if (resp.status != 200) {
         return [{ code: 400, message: "Failed to load queue songs" }, [], 0]
@@ -49,7 +54,7 @@ export const getQueueSongs = async function (roomId: string): Promise<[FetchErro
     return [null, songs, playingId]
 }
 
-export const triggerPlayNext = async function (roomId: string): Promise<[FetchError | null, Song[], number]> {
+export const triggerPlayNext = async function(roomId: string): Promise<[FetchError | null, Song[], number]> {
     let resp = await fetch("/api/queue/next?room=" + roomId, { method: "POST" })
 
     if (resp.status != 200) {
@@ -66,7 +71,7 @@ export const triggerPlayNext = async function (roomId: string): Promise<[FetchEr
     return [null, songs, json["index"]]
 }
 
-export const getStreamingUrl = async function (uuid: string) {
+export const getStreamingUrl = async function(uuid: string) {
     let resp = await fetch("/api/song/audio?song=" + uuid)
 
     let json = await resp.json()

frontend/src/routes/+page.svelte

@@ -1,9 +1,21 @@
 <script lang="ts">
     import RoomComponent from "$lib/components/RoomComponent.svelte"
+    import { get_coords } from "$lib/gps"
     import { parseRoom, type Room } from "$lib/types"
     import { Plus } from "@lucide/svelte"
+    import { onMount } from "svelte"
 
-    let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 }
+    let rooms: Room[] = $state([])
+
+    onMount(async () => {
+        let { coords, error } = await get_coords()
+        if (error != null) return console.log(error)
+        if (coords == null) return
+
+        let res = await fetch(`/api/room?lat=${coords.latitude}&lon=${coords.longitude}`)
+        let json = await res.json()
+        for (let room of json) rooms.push(await parseRoom(room))
+    })
 </script>
 
 <div class="flex flex-col items-center gap-2">
@@ -21,37 +33,8 @@
     </button>
 
     <div class="flex flex-col gap-2">
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
-        <RoomComponent {room}></RoomComponent>
+        {#each rooms as room}
+            <RoomComponent {room} />
+        {/each}
     </div>
 </div>
-<!-- <div class="h-full w-full flex-row justify-center p-4"> -->
-<!--     <div class="relative min-h-screen justify-center justify-items-center"> -->
-<!--         <h1>Scan your nearby rooms</h1> -->
-<!--         <img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" /> -->
-<!--         <div class="max-h-50 w-full overflow-y-auto"> -->
-<!--             <RoomComponent {room} /> -->
-<!--             <RoomComponent {room} /> -->
-<!--             <RoomComponent {room} /> -->
-<!--             <RoomComponent {room} /> -->
-<!--             <RoomComponent {room} /> -->
-<!--             <RoomComponent {room} /> -->
-<!--             <RoomComponent {room} /> -->
-<!--             <RoomComponent {room} /> -->
-<!--             <RoomComponent {room} /> -->
-<!--         </div> -->
-<!--         <div class="fixed right-0 bottom-0"> -->
-<!--             <button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button> -->
-<!--         </div> -->
-<!--     </div> -->
-<!-- </div> -->