fix(web): close modal on enter

Also formatted code
TheTipo01 · Nov 2, 2023 · fedb45c · fedb45c
1 parent 8aa2b12
commit fedb45c
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 137 deletions.
diff --git a/web/src/app.html b/web/src/app.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>YADMB - Web UI</title>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>YADMB - Web UI</title>
+    %sveltekit.head%
+</head>
+<body data-sveltekit-preload-data="hover">
+<div style="display: contents">%sveltekit.body%</div>
+</body>
 </html>
diff --git a/web/src/lib/error.js b/web/src/lib/error.js
@@ -17,7 +17,7 @@ export const Response = Object.freeze({
 // Function to handle the status code of each function
 export function get_message(code) {
     let msg = ""
-    switch(code) {
+    switch (code) {
         case Response.SUCCESS:
             msg = "Done.";
             break;

diff --git a/web/src/lib/favorites.js b/web/src/lib/favorites.js
@@ -1,4 +1,4 @@
-import { Response } from "./error";
+import {Response} from "./error";
 
 // Function to add a song to the favorites
 export async function AddFavorite(token, host) {
@@ -23,7 +23,7 @@ export async function AddFavorite(token, host) {
     })
 
     //Error Handling
-    switch(response.status) {
+    switch (response.status) {
         case 200:
             return [{name: name, link: link, folder: folder}];
         case 401:
@@ -50,7 +50,7 @@ export async function RemoveFavorite(token, name, host) {
     })
 
     //Error Handling
-    switch(response.status) {
+    switch (response.status) {
         case 200:
             return Response.SUCCESS;
         case 401:
@@ -73,7 +73,7 @@ export async function GetFavorites(token, host) {
     })
 
     // Error Handling
-    switch(response.status) {
+    switch (response.status) {
         case 200:
             return await response.json();
         case 401:

diff --git a/web/src/lib/queue.js b/web/src/lib/queue.js
@@ -1,5 +1,5 @@
 // This file contains every function used in the queue.svelte component
-import { Response } from "./error";
+import {Response} from "./error";
 
 export async function AddToQueueHTML(GuildID, token, host) {
     // Values needed for adding a song to a queue
@@ -33,7 +33,7 @@ export async function AddToQueue(GuildID, token, host, song, shuffle, playlist,
     })
 
     // Error Handling
-    switch(response.status) {
+    switch (response.status) {
         case 200:
             return Response.SUCCESS;
         case 401:
@@ -46,9 +46,12 @@ export async function AddToQueue(GuildID, token, host, song, shuffle, playlist,
 }
 
 // Function to remove a song from the queue or clear it
-export async function RemoveFromQueue(GuildID, token, clear=false, host) { // AKA skip
+export async function RemoveFromQueue(GuildID, token, clear = false, host) { // AKA skip
     // Request
-    let route = `${host}/queue/${GuildID}?` + new URLSearchParams({'clean': clear.toString(), 'token': token}).toString();
+    let route = `${host}/queue/${GuildID}?` + new URLSearchParams({
+        'clean': clear.toString(),
+        'token': token
+    }).toString();
     let response = await fetch(route, {
         method: "DELETE",
         headers: {
@@ -58,7 +61,7 @@ export async function RemoveFromQueue(GuildID, token, clear=false, host) { // AK
     })
 
     // Error Handling
-    switch(response.status) {
+    switch (response.status) {
         case 200:
             return Response.SUCCESS;
         case 401:
@@ -83,7 +86,7 @@ export async function GetQueue(GuildID, token, host) {
     })
 
     // Error Handling
-    switch(response.status) {
+    switch (response.status) {
         case 200:
             return await response.json();
         case 401:

diff --git a/web/src/lib/song.js b/web/src/lib/song.js
@@ -3,10 +3,9 @@
 // Function to pause or resume the current song 
 export async function ToggleSong(GuildID, token, action = "", host) {
     // Request
-    if(action === "") {
+    if (action === "") {
         return -8
-    }
-    else {
+    } else {
         let route = `${host}/song/${action}/${GuildID}?` + new URLSearchParams({"token": token}).toString();
         let response = await fetch(route, {
             method: "GET",
@@ -15,9 +14,9 @@ export async function ToggleSong(GuildID, token, action = "", host) {
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
         })
-    
+
         // Error Handling
-        switch(response.status) {
+        switch (response.status) {
             case 200:
                 return 0;
             case 401:

diff --git a/web/src/lib/utilities.js b/web/src/lib/utilities.js
@@ -1,16 +1,13 @@
-import { AddFavorite } from "./favorites";
-import { AddToQueueHTML } from "./queue";
-
-// Function to add an object to the array 
+// Function to add an object to the array
 export function AddObjectToArray(promise, objectToAdd) {
     return promise.then((array) => {
         return [...array, ...objectToAdd];
-        });
-    }
+    });
+}
 
 // Function to remove the first object from the array 
 export function RemoveFirstObjectFromArray(promise) {
-return promise.then((array) => {
+    return promise.then((array) => {
         array.shift();
         return array;
     });
@@ -69,24 +66,3 @@ export function GetToken() {
 export function GetHost() {
     return window.location.protocol + "//" + window.location.host;
 }
-
-// Function to handle keyboard inputs
-export function KeyPressed(e, scope, GuildId = "", token = "", host = "") {
-    switch(e.key) {
-        case 'Enter':
-            switch(scope) {
-                case 'queue':
-                    console.log(e.target.value);
-                    AddToQueueHTML(GuildId, token, host);
-                    break;
-                case 'favorite':
-                    AddFavorite(token, host);
-                    break;
-                default:
-                    break;
-            }
-            break;
-        default:
-            break;
-    }
-}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script>
-	import '../app.postcss';
+    import '../app.postcss';
 </script>
 
-<slot />
+<slot/>
 
 
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -1,12 +1,11 @@
 <script>
     import Queue from "./queue.svelte";
     import Favorites from "./favorites.svelte"
-    import { Tabs, TabItem} from "flowbite-svelte"
-    import {Avatar} from "flowbite-svelte"
+    import {Avatar, TabItem, Tabs} from "flowbite-svelte"
     import StarSolid from "flowbite-svelte-icons/StarSolid.svelte"
     import ListMusicSolid from "flowbite-svelte-icons/ListMusicSolid.svelte"
     import {GetGuildID, GetToken, GetHost} from "../lib/utilities"
-	import { onMount } from "svelte";
+    import {onMount} from "svelte";
     import logo from "../assets/logo_yadmb.png"
 
     // variables
@@ -20,34 +19,34 @@
         token = GetToken();
         host = GetHost();
     });
-    
+
 
 </script>
 <div class="flex justify-center">
-    <Avatar src="{logo}" size="xl" class="mt-1"  />
+    <Avatar src="{logo}" size="xl" class="mt-1"/>
 </div>
 
 
 <Tabs style="underline">
     <TabItem open active={activetab === "queue"} on:click={() => (activetab = "queue")}>
         <div slot="title" class="flex items-center gap-2">
-            <ListMusicSolid />
+            <ListMusicSolid/>
             Queue
         </div>
         {#if activetab === "queue"}
             {#if GuildId !== '' && token !== '' && host !== ''}
-                <Queue GuildId={GuildId} token={token} host={host} />
+                <Queue GuildId={GuildId} token={token} host={host}/>
             {/if}
         {/if}
     </TabItem>
     <TabItem active={activetab === "favorites"} on:click={() => (activetab = "favorites")}>
         <div slot="title" class="flex items-center gap-2">
-            <StarSolid />
+            <StarSolid/>
             Favorites
         </div>
         {#if activetab === "favorites"}
             {#if token !== '' && host !== ''}
-                <Favorites GuildId={GuildId} token={token} host={host} />
+                <Favorites GuildId={GuildId} token={token} host={host}/>
             {/if}
         {/if}
     </TabItem>

diff --git a/web/src/routes/errors.svelte b/web/src/routes/errors.svelte
@@ -1,26 +1,26 @@
 <script>
     import {Toast} from "flowbite-svelte";
-    import {Response, get_message} from "../lib/error"
-    import  CheckCircleSolid  from "flowbite-svelte-icons/CheckCircleSolid.svelte"
-    import  CloseCircleSolid  from "flowbite-svelte-icons/CloseCircleSolid.svelte"
+    import {get_message, Response} from "../lib/error"
+    import CheckCircleSolid from "flowbite-svelte-icons/CheckCircleSolid.svelte"
+    import CloseCircleSolid from "flowbite-svelte-icons/CloseCircleSolid.svelte"
 
     // props
     export let code;
-    
+
 </script>
 
 {#if code === Response.SUCCESS}
     <Toast color="green" position="bottom-left">
         <svelte:fragment slot="icon">
-            <CheckCircleSolid class="w-5 h-5" />
+            <CheckCircleSolid class="w-5 h-5"/>
             <span class="sr-only">Check icon</span>
-          </svelte:fragment>
-          {get_message(code)}
+        </svelte:fragment>
+        {get_message(code)}
     </Toast>
 {:else}
     <Toast color="red" position="bottom-left">
         <svelte:fragment slot="icon">
-            <CloseCircleSolid class="w-5 h-5" />
+            <CloseCircleSolid class="w-5 h-5"/>
             <span class="sr-only">Error icon</span>
         </svelte:fragment>
         {get_message(code)}

diff --git a/web/src/routes/favorites.svelte b/web/src/routes/favorites.svelte
@@ -1,14 +1,10 @@
 <script>
-    import { Button } from "flowbite-svelte";
-    import { GetFavorites, AddFavorite, RemoveFavorite} from "../lib/favorites";
-    import {KeyPressed} from "../lib/utilities"
-    import {Modal} from "flowbite-svelte";
-    import {Input, Label} from "flowbite-svelte"
-    import {Heading, P} from "flowbite-svelte"
+    import {Button, Heading, Input, Label, Modal, P} from "flowbite-svelte";
+    import {AddFavorite, GetFavorites, RemoveFavorite} from "../lib/favorites";
+    import {AddObjectToArray, RemoveObjectFromArray} from "../lib/utilities"
     import TrashBinSolid from "flowbite-svelte-icons/TrashBinSolid.svelte"
     import {PlusSolid} from "flowbite-svelte-icons";
     import {AddToQueue} from "../lib/queue"
-    import {AddObjectToArray, RemoveObjectFromArray} from "../lib/utilities"
     import {Response} from "$lib/error.js";
 
     // props
@@ -41,11 +37,11 @@
             </div>
             <div>
                 <Label for="folder" class="mb-2">Folder</Label>
-                <Input type="text" id="folder" />
+                <Input type="text" id="folder"/>
             </div>
         </div>
     </form>
-    
+
     <!-- Submit button -->
     <svelte:fragment slot="footer">
         <Button on:click={ async () => {
@@ -58,13 +54,19 @@
                 default:
                     favorites = AddObjectToArray(favorites, result);
             }
-        }} on:keydown={(e) => (KeyPressed(e, "favorite", "", token, host))}>Add</Button>
+        }} on:keydown={(e) => {
+            if (e.key === "Enter") {
+                AddFavorite(token, host);
+                showModal = false;
+            }
+        }}>Add
+        </Button>
     </svelte:fragment>
 </Modal>
 
 {#await favorites}
     <P>Loading Favorites</P>
-{:then favorite} 
+{:then favorite}
     {#if favorite.length !== 0}
         <div class="grid grid-cols-3">
             <Heading tag="h5">Song Name</Heading>
@@ -87,10 +89,15 @@
                             default:
                                 favorites = RemoveObjectFromArray(favorites, song);
                         }
-                    }} class="w-1/3"><TrashBinSolid /></Button>
-                    <Button on:click={() => AddToQueue(GuildId, token, host, song.link, false, false, false, false)} class="w-1/3"><PlusSolid /></Button>
+                    }} class="w-1/3">
+                        <TrashBinSolid/>
+                    </Button>
+                    <Button on:click={() => AddToQueue(GuildId, token, host, song.link, false, false, false, false)}
+                            class="w-1/3">
+                        <PlusSolid/>
+                    </Button>
                 </div>
-                
+
             </div>
         {/each}
     {:else}