Skip to content

Commit

Permalink
feat(web): Implemented Queue tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@slashtube
slashtube committed Oct 24, 2023
1 parent 6234560 commit ec1872c
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 100 deletions.
12 changes: 12 additions & 0 deletions web/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"eslint-plugin-svelte": "^2.30.0",
"flowbite": "^1.8.1",
"flowbite-svelte": "^0.44.18",
"flowbite-svelte-icons": "^0.4.4",
"postcss": "^8.4.24",
"postcss-load-config": "^4.0.1",
"prettier": "^2.8.0",
Expand Down
14 changes: 4 additions & 10 deletions web/src/lib/queue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,27 +74,21 @@ export async function RemoveFromQueue() { // AKA skip
}
}

export async function GetQueue() {
let GuildID = document.getElementById("id").value;
let token = document.getElementById("token").value;

export async function GetQueue(GuildID, token) {
// Request
let route = `https://gerry.thetipo.rocks/queue/${GuildID}`
let route = `https://gerry.thetipo.rocks/queue/${GuildID}?` + new URLSearchParams({"token": token}).toString()
let response = await fetch(route, {
method: "GET",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: {
'token': token,
'Content-Type': 'application/x-www-form-urlencoded',
},
})

// Error Handling
switch(response.status) {
case 200:
return response.json();
return await response.json();
case 401:
return -1;
}
Expand Down
31 changes: 18 additions & 13 deletions web/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
<script>
import Queue from "./queue.svelte";
import Song from "./song.svelte"
import Favorites from "./favorites.svelte"
import {Heading} from "flowbite-svelte"
import { Tabs, TabItem} from "flowbite-svelte"
import StarSolid from "flowbite-svelte-icons/StarSolid.svelte"
import ListMusicSolid from "flowbite-svelte-icons/ListMusicSolid.svelte"
</script>
<Heading tag="h1" align="center">Gerry UI</Heading>
<div class="grid grid-cols-3 gap-4 m-5 items-center justify-item-center">
<div>
<Heading tag="h4">Queue</Heading>
<Tabs style="underline">
<TabItem open>
<div slot="title" class="flex items-center gap-2">
<ListMusicSolid />
Queue
</div>
<Queue />
</div>
<div>
<Song />
</div>
<div>
<Heading tag="h4">Favorites</Heading>
</TabItem>
<TabItem>
<div slot="title" class="flex items-center gap-2">
<StarSolid />
Favorites
</div>
<Favorites />
</div>
</TabItem>
</Tabs>
<div >
</div>

26 changes: 5 additions & 21 deletions web/src/routes/favorites.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,11 @@
<script>
import {Heading} from "flowbite-svelte"
import {Button, Dropdown, DropdownItem } from "flowbite-svelte"
import { Button } from "flowbite-svelte";
</script>

<div class="grid grid-row-3 gap-4">
<Button>Add to favorites</Button>
<Dropdown>
<DropdownItem>
<Button class="w-25 absolute right-9 bottom-5">
Add to Favorites
</Button>
<div class="grid grid-col-2 gap-4">

</DropdownItem>
</Dropdown>

<Button>Remove from favorites</Button>
<Dropdown>
<DropdownItem>

</DropdownItem>
</Dropdown>

<Button>Show favorites</Button>
<Dropdown>
<DropdownItem>

</DropdownItem>
</Dropdown>
</div>
89 changes: 38 additions & 51 deletions web/src/routes/queue.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,43 @@
<script>
import {AddToQueue, RemoveFromQueue, GetQueue} from '../lib/queue'
import {Label, Input} from 'flowbite-svelte'
import {Button, Dropdown, DropdownItem } from "flowbite-svelte"
import {Button} from "flowbite-svelte";
import {Avatar} from "flowbite-svelte"
import {P, Heading, A} from "flowbite-svelte";
import { GetQueue, AddToQueue, RemoveFromQueue } from "../lib/queue";
import PlaySolid from "flowbite-svelte-icons/PlaySolid.svelte"
import PauseSolid from "flowbite-svelte-icons/PauseSolid.svelte"
let queue = GetQueue("145618799947677696", "iAADRNu7eEfcHmcT9j9pbUsI4Rff7ihG");
</script>

<div class="grid grid-row-3 gap-4">
<Button>Add a song to the queue</Button>
<Dropdown>
<DropdownItem>
<form>
<Label for="id" class="block mb-2">Guild ID</Label>
<Input type="text" id="id" />
<Label for="link" class="mt-2">Song name or link</Label>
<Input type="text" id="song" />
<Label for="token" class="mt-2">User token</Label>
<Input type="text" id="token" />
<Label for="playlist" class="mt-2"> Playlist </Label>
<Input type="checkbox" id="playlist" />
<Label for="shuffle" class="mt-2"> Shuffle </Label>
<Input type="checkbox" id="shuffle" />
<Label for="loop" class="mt-2"> Loop </Label>
<Input type="checkbox" id="loop" />
<Label for="priority" class="mt-2"> Priority </Label>
<Input type="checkbox" id="priority" />

<Button class="mt-2" on:click={AddToQueue} >Submit</Button>
</form>
</DropdownItem>
</Dropdown>
<Button>Skip song</Button>
<Dropdown>
<DropdownItem>
<form>
<Label for="id" class="block mb-2">Guild ID</Label>
<Input type="text" id="id" />
<Label for="clear" class="mt-2">Clear queue?</Label>
<Input type="checkbox" id="clear" />
<Button class="w-25 absolute right-9 bottom-5">
Add to Queue
</Button>

<Button class="mt-2" on:click={RemoveFromQueue} >Submit</Button>
</form>
</DropdownItem>
</Dropdown>
<Button>Show queue</Button>
<Dropdown>
<DropdownItem>
<Label for="id" class="block mb-2"> Guild ID</Label>
<Input type="text" id="id" />
<Label for="token" class="mt-2">User token</Label>
<Input type="text" id="token" />

<Button class="mt-2" on:click={GetQueue} >Submit</Button>
</DropdownItem>
</Dropdown>

</div>

{#await queue}
<P>Fetching Queue</P>
{:then json}
<div class="grid grid-cols-2 gap-4">
<div >
<img alt="thumbnail" src={json[0].thumbnail} class=""/>
<div class="mt-5 grid grid-cols-2">
<div class="justify-self-end"><PauseSolid /></div>
<div class="justify-self-start"><PlaySolid /></div>
</div>
<P class="mt-5">{json[0].title}</P>
<P>Requested by {json[0].user}</P>
</div>
<div>
<Heading tag="h4" class="mb-5" align="center">Queue</Heading>
{#each json as song, index}
{#if index != 0}
<div class="grid grid-cols-3 justify-items-center mt-3" >
<Avatar src={song.thumbnail} rounded/>
<A href={song.link}>{song.title}</A>
<P>{song.duration}</P>
</div>
{/if}
{/each}
</div>
</div>
{/await}
5 changes: 0 additions & 5 deletions web/src/routes/song.svelte
View file

This file was deleted.

0 comments on commit ec1872c

Please sign in to comment.