feat: implemented api
This commit is contained in:
parent
aa25c6075b
commit
1383c0fbed
6 changed files with 65 additions and 31 deletions
|
@ -1,32 +1,31 @@
|
|||
<script lang="ts">
|
||||
import type { Song } from "$lib/types"
|
||||
let { suggestions }: { suggestions: Song[] } = $props()
|
||||
import type { Suggestion } from "$lib/types"
|
||||
|
||||
let reactiveSugg = $derived(
|
||||
[...suggestions].sort((a, b) => {
|
||||
return b.points - a.points
|
||||
})
|
||||
)
|
||||
let { suggestions, roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
|
||||
|
||||
async function vote(amount: number, songId: string) {
|
||||
await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
|
||||
{#each reactiveSugg as sug}
|
||||
{#each suggestions as sug}
|
||||
<div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-black p-2">
|
||||
<div class="flex w-3/4 flex-row gap-2">
|
||||
<img class="w-[60px] min-w-[60px] rounded" src={sug.image} alt="Song cover" />
|
||||
<h1>{sug.name}</h1>
|
||||
<img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
|
||||
<h1>{sug.title} - {sug.artist}</h1>
|
||||
</div>
|
||||
<div class="flex w-1/4 flex-row items-center justify-center gap-2">
|
||||
<button
|
||||
onclick={() => {
|
||||
sug.points += 1
|
||||
}}>🔥</button
|
||||
vote(1, sug.uuid)
|
||||
}}>+1</button
|
||||
>
|
||||
<p>{sug.points}</p>
|
||||
<p>{sug.upvote}</p>
|
||||
<button
|
||||
onclick={() => {
|
||||
sug.points--
|
||||
}}>💩</button
|
||||
vote(-1, sug.uuid)
|
||||
}}>-1</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue