add room scanner logic

backend/src/app.py

@@ -1,18 +1,17 @@
 import uuid
 from dataclasses import asdict
+
 import dotenv
+from connect import get_connection
 from flask import Flask, Response, jsonify, request
 from flask_cors import CORS
 from flask_socketio import SocketIO, join_room, leave_room
-
-from state import State
-from connect import get_connection
-from room import Room
-from song import Song, init_db, get_song_by_title_artist, add_song_in_db, get_song_by_uuid
-from song_fetch import query_search, yt_get_audio_url, yt_search_song
+from gps import Coordinates, distance_between_coords
 from qrcode_gen import generate_qr
-from gps import is_within_range, distance_between_coords, Coordinates
-
+from room import Room
+from song import Song, add_song_in_db, get_song_by_title_artist, get_song_by_uuid, init_db
+from song_fetch import query_search, yt_get_audio_url, yt_search_song
+from state import State
 
 dotenv.load_dotenv()
 
@@ -29,11 +28,11 @@ init_db(state.db)
 
 state.rooms[1000] = Room(
     id=1000,
-    coord=Coordinates(1, 5),
+    coord=Coordinates(46.6769043, 11.1851585),
     name="Test Room",
     pin=None,
     tags=set(),
-    range_size=100,
+    range_size=150,
     songs={},
     history=[],
     playing=[],

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,9 +1,14 @@
+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)
+    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" }, ""]
     }
 

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> -->