2025-summer/team-1
12
Fork 0
Code Issues Pull requests Projects Releases Activity

merge

Browse source
This commit is contained in:
Mat12143 2025-08-02 10:28:38 +02:00
commit e045e11023
9 changed files with 62 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/app.html
View file

@ -1,15 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="h-max">
<div style="display: contents">%sveltekit.body%</div>
</body>
<body data-sveltekit-preload-data="hover" class="h-max">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

7
frontend/src/lib/components/RoomComponent.svelte
View file

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

12
frontend/src/lib/components/SuggestionInput.svelte
View file

@ -1,8 +1,9 @@
<script lang="ts">
let { roomId } = $props()
import { LoaderCircle } from "@lucide/svelte"
let { roomId } = $props()
let input = $state("")
let disabled = $state(false)
let disabled: boolean = $state(false)
async function sendSong() {
disabled = true
@ -23,7 +24,14 @@
sendSong()
}
}}
{disabled}
/>
{#if disabled}
<span class="animate-spin">
<LoaderCircle />
</span>
{/if}
<button
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

5
frontend/src/lib/types.ts
View file

@ -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()]),
coords: z.object({ latitude: z.number(), longitude: z.number() }),
range: z.number().int(),
distance: z.number()
})
export type Room = z.infer<typeof RoomSchema>

19
frontend/src/lib/utils.ts
View file

@ -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, lat: number, lon: number): Promise<[FetchError | null, string]> {
let resp = await fetch(`/api/join?room=${roomId}&lat=${lat}&lon=${lon}`)
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()

49
frontend/src/routes/+page.svelte
View file

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