feat(web): Implemented Favorites tab.

fix(web): fixed checkbox value not being checked correctly
chore(web): modified primary colour of buttons

web/src/lib/favorites.js

@@ -1,8 +1,7 @@
-export async function AddFavorite() {
-    let name = document.getElementById("name")?.value;
-    let link = documnent.getElementById("link")?.value;
+export async function AddFavorite(token) {
+    let name = document.getElementById("name").value;
+    let link = document.getElementById("link").value;
     let folder = document.getElementById("folder")?.value;
-    let token = document.getElementById("token")?.token;
 
     // Request
     let route = `https://gerry.thetipo.rocks/favorites`
@@ -31,12 +30,9 @@ export async function AddFavorite() {
     }
 }
 
-export async function RemoveFavorite() {
-    let name = document.getElementById("name")?.value;
-    let token = document.getElementById("token")?.value;
-
+export async function RemoveFavorite(token, name) {
     // Request
-    let route = `https://gerry.thetipo.rocks/favorites`
+    let route = `https://gerry.thetipo.rocks/favorites` + new URLSearchParams({'name': name, 'token': token}).toString();
     let response = await fetch(route, {
         method: 'DELETE',
         headers: {
@@ -60,26 +56,21 @@ export async function RemoveFavorite() {
     }
 }
 
-export async function GetFavorites() {
-    let token = document.getElementById("token")?.value;
-
+export async function GetFavorites(token) {
     // Request
-    let route = `https://gerry.thetipo.rocks/favorites`
+    let route = `https://gerry.thetipo.rocks/favorites?` + 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,
-        },
     })
 
     // Error Handling
     switch(response.status) {
         case 200:
-            return 0;
+            return await response.json();
         case 401:
             return -1;
     }

web/src/lib/queue.js

@@ -1,18 +1,15 @@
 // This file contains every function used in the queue.svelte component
 
-export async function AddToQueue() {
+export async function AddToQueue(GuildID, token) {
     // Values needed for adding a song to a queue
-    let GuildID = document.getElementById("id")?.value;
-    let song = document.getElementById("song")?.value;
-    let token = document.getElementById("token")?.value;
+    let song = document.getElementById("song").value;
     let shuffle;
-    let playlist = document.getElementById("playlist").value;
-    let loop = document.getElementById("loop").value;
-    let priority = document.getElementById("priority").value
+    let playlist = document.getElementById("playlist")?.checked;
+    let loop = document.getElementById("loop")?.checked;
+    let priority = document.getElementById("priority")?.checked
     if(playlist) {
-        shuffle = document.getElementById("shuffle").value;
+        shuffle = document.getElementById("shuffle")?.checked;
     }
-
     // Request
     let route = `https://gerry.thetipo.rocks/queue/${GuildID}`
     let response = await fetch(route, {
@@ -44,21 +41,15 @@ export async function AddToQueue() {
     }
 }
 
-export async function RemoveFromQueue() { // AKA skip
-    let GuildID = document.getElementById("id")?.value;
-    let clear = document.getElementById("clear")?.value;
-
+export async function RemoveFromQueue(GuildID, token, clear=false) { // AKA skip
     // Request
-    let route = `https://gerry.thetipo.rocks/queue/${GuildID}`
+    let route = `https://gerry.thetipo.rocks/queue/${GuildID}` + new URLSearchParams({'clean': clear, 'token': token}).toString();
     let response = await fetch(route, {
         method: "DELETE",
         headers: {
             'Accept': 'application/json',
             'Content-Type': 'application/x-www-form-urlencoded'
         },
-        body: new URLSearchParams({
-            'clean': clear
-        }).toString(),
     })
 
     // Error Handling

web/src/lib/song.js

@@ -1,22 +1,18 @@
-export async function ToggleSong(action = "") {
-    let GuildID = document.getElementById("id").value;
-    let token = document.getElementById("token").value;
+// This file contains a function used in the queue.svelte component
 
+export async function ToggleSong(GuildID, token, action = "") {  // AKA Pause/Resume Song
     // Request
-    if(route === "") {
+    if(action === "") {
         return -8
     }
     else {
-        let route = `https://gerry.thetipo.rocks/song/${action}/${GuildID}`;
+        let route = `https://gerry.thetipo.rocks/song/${action}/${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,
-            },
         })
 
         // Error Handling

web/src/routes/+layout.svelte

@@ -3,3 +3,5 @@
 </script>
 
 <slot />
+
+

web/src/routes/+page.svelte

@@ -4,21 +4,24 @@
     import { Tabs, TabItem} from "flowbite-svelte"
     import StarSolid from "flowbite-svelte-icons/StarSolid.svelte"
     import ListMusicSolid from "flowbite-svelte-icons/ListMusicSolid.svelte"
+    let GuildId = "very cool guild id";
+    let token = "very cool token"
+
 </script>
 <Tabs style="underline">
     <TabItem open>
         <div slot="title" class="flex items-center gap-2">
             <ListMusicSolid />
             Queue
         </div>
-        <Queue />
+        <Queue GuildId = {GuildId} token = {token} />
     </TabItem>
     <TabItem>
         <div slot="title" class="flex items-center gap-2">
             <StarSolid />
             Favorites
         </div>
-        <Favorites />
+        <Favorites token = {token} />
     </TabItem>
 </Tabs>
 <div >

web/src/routes/favorites.svelte

@@ -1,11 +1,66 @@
 <script>
     import { Button } from "flowbite-svelte";
+    import { GetFavorites, AddFavorite, RemoveFavorite} from "../lib/favorites";
+    import {Modal} from "flowbite-svelte";
+    import {Input, Label} from "flowbite-svelte"
+    import {Heading, P} from "flowbite-svelte"
+    import TrashBinSolid from "flowbite-svelte-icons/TrashBinSolid.svelte"
+
+    // props
+    export let token;
+
+    //variables
+    let favorites = GetFavorites(token);
+    let showModal = false;
 </script>
 
-<Button class="w-25 absolute right-9 bottom-5">
+<Button class="w-25 absolute right-9 bottom-5 GenuineOrange" on:click={() => (showModal = true)}>
     Add to Favorites
 </Button>
-<div class="grid grid-col-2 gap-4">
 
+<Modal title="Add Favorite" bind:open={showModal} autoclose>
+    <form id="form">
+        <div class="grid grid-rows-3">
+            <div>
+                <Label for="name" class="mb-2">Song Name</Label>
+                <Input type="text" id="name" required/>
+            </div>
+            <div>
+                <Label for="link" class="mb-2">Song Link</Label>
+                <Input type="text" id="link" required/>
+            </div>
+            <div>
+                <Label for="folder" class="mb-2">Folder</Label>
+                <Input type="text" id="folder" />
+            </div>
+        </div>
+    </form>
+    <svelte:fragment slot="footer">
+        <Button on:click={() => AddFavorite(token)}>Add</Button>
+    </svelte:fragment>
+</Modal>
 
-</div>
+{#await favorites}
+    <P>Loading Favorites</P>
+{:then favorite} 
+    {#if favorite.length != 0}
+        <div class="grid grid-cols-3">
+            <Heading tag="h5">Song Name</Heading>
+            <Heading tag="h5">Link</Heading>
+            <Heading tag="h5">Folder</Heading>
+        </div>
+        {#each favorite as song}
+            <div class="grid grid-cols-3 mt-5">
+                <P>{song.name}</P>
+                <P>{song.link}</P>
+                <div class="grid grid-cols-2">
+                    <P>{song.folder}</P>
+                    <Button on:click={() => RemoveFavorite(token, song.name)}><TrashBinSolid /></Button>
+                </div>
+
+            </div>
+        {/each}
+    {:else}
+        <P>You have no favorites</P>
+    {/if}
+{/await}

web/src/routes/queue.svelte

@@ -2,30 +2,61 @@
     import {Button} from "flowbite-svelte";
     import {Avatar} from "flowbite-svelte"
     import {P, Heading, A} from "flowbite-svelte";
+    import {Modal} from "flowbite-svelte";
+    import {Input, Label, Checkbox} from "flowbite-svelte";
 	import { GetQueue, AddToQueue, RemoveFromQueue } from "../lib/queue";
+    import { ToggleSong } from "../lib/song"
     import PlaySolid from "flowbite-svelte-icons/PlaySolid.svelte"
     import PauseSolid from "flowbite-svelte-icons/PauseSolid.svelte"
-    let queue = GetQueue("145618799947677696", "iAADRNu7eEfcHmcT9j9pbUsI4Rff7ihG");
+    export let GuildId ;
+    export let token;
+
+    let queue = GetQueue(GuildId, token);
+    let showModal = false;
+    let isPlaylist = false;
+
 </script>
 
-<Button class="w-25 absolute right-9 bottom-5">
+<Button style="background-color: rgb(211, 132, 1);" class="w-25 absolute right-9 bottom-5" on:click={() => (showModal = true)}>
     Add to Queue
 </Button>
 
+<Modal title="Add To Queue" bind:open={showModal} autoclose>
+    <form id="form">
+        <div class="grid grid-rows-2">
+            <div>
+                <Label for="song" class="mb-2">Song Link/Name</Label>
+                <Input type="text" id="song" required/>
+            </div>
+            <div class="grid grid-cols-4">
+                <Checkbox on:click={() => (isPlaylist=!isPlaylist)} id="playlist">Playlist</Checkbox>
+                <Checkbox disabled={!isPlaylist} id="shuffle">Shuffle</Checkbox>
+                <Checkbox id="loop">Loop song</Checkbox>
+                <Checkbox id="priority">Priority</Checkbox>
+            </div>
+        </div>
+    </form>
+    <svelte:fragment slot="footer">
+        <Button on:click={() => AddToQueue(GuildId, token)}>Add</Button>
+    </svelte:fragment>
+</Modal>
+
 
 
 {#await queue} 
 <P>Fetching Queue</P>
 {:then json}
+{#if json.length != 0}
 <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>
+        <img alt="thumbnail" src={json[0].thumbnail} class="justify-self-center"/>
+        <div class="mt-5 grid grid-cols-2 gap-2">
+            <div class="justify-self-end"><Button on:click={() => ToggleSong(GuildId, token, "pause")}><PauseSolid /></Button></div>
+            <div class="justify-self-start"><Button on:click={() => ToggleSong(GuildId, token, "resume")}><PlaySolid  /></Button></div>
         </div>
         <P class="mt-5">{json[0].title}</P>
         <P>Requested by {json[0].user}</P>
+        <Button on:click={() => RemoveFromQueue(GuildId, token)}>Skip song</Button>
     </div>
     <div>
         <Heading tag="h4" class="mb-5" align="center">Queue</Heading>
@@ -38,6 +69,16 @@
             </div>
             {/if}
         {/each}
+        <div class="grid grid-rows-1 justify-items-end mt-5">
+            <Button align="right" on:click={() => RemoveFromQueue(GuildId, token, true)}>Clear Queue</Button>
+        </div>
+
     </div>
 </div>
+{:else}
+<P>Queue is empty</P>
+
+{/if}
+
     {/await}
+

web/tailwind.config.cjs

@@ -17,7 +17,7 @@ const config = {
 			400: '#FFBCAD',
 			500: '#FE795D',
 			600: '#EF562F',
-			700: '#EB4F27',
+			700: '#D38401',
 			800: '#CC4522',
 			900: '#A5371B'
 		  }