DOWNLOADS

src/IntroDownloader.svelte

@@ -1,2 +1,90 @@
-<h3>Download New Intro</h3>
-<input>
+<script>
+    import { intros, member } from './store.ts';
+    import { member_can, Permission } from './permissions.ts';
+    import { onMount } from 'svelte';
+
+    let enteredUrl = '';
+    let enteredTitle = '';
+    let selectedGuild = null;
+    let canDownloadAny = false;
+    let downloadPromise = null;
+    let allowedGuildList = [];
+
+    $: allowedGuildList = $member.guilds
+        .filter((guild) => member_can(guild.permissions, Permission.CanDownload))
+        .map((guild) => guild.name);
+
+    $: canDownloadAny = allowedGuildList.length > 0;
+
+    const download = () => {
+        if (!!selectedGuild) {
+            downloadPromise = (async () => {
+                await intros.addIntro(selectedGuild, enteredUrl, enteredTitle, $member.token);
+                await intros.fetchIntros($member.guilds);
+            })();
+        } else {
+
+        }
+    };
+</script>
+
+{#if canDownloadAny}
+<div>
+    <h3>Download New Intro</h3>
+    {#if !!downloadPromise}
+        {#await downloadPromise}
+            <p>downloading...</p>
+        {:then result}
+            <p>Downloaded</p>
+            <button on:click={() => {downloadPromise = null}}>Add another</button>
+        {:catch err}
+            <p style='color: red'>{err}</p>
+            <button on:click={() => {downloadPromise = null}}>Ok</button>
+        {/await}
+    {:else}
+        <select bind:value={selectedGuild}>
+            {#each allowedGuildList as guild}
+                <option value={guild}>{guild}</option>
+            {/each}
+        </select>
+        <input bind:value={enteredTitle} placeholder='enter intro title'>
+        <input bind:value={enteredUrl} placeholder='enter video url'>
+        <button on:click={download}>Download</button>
+    {/if}
+</div>
+{/if}
+
+<style>
+    div {
+        display: flex;
+        width: 80%;
+        flex-direction: column;
+        align-items: center;
+        background-color: #2a2a4a;
+        padding: 1.5em;
+        box-shadow: 1px 3px 4px 1px #1f1f36;
+    }
+
+    h3 {
+        margin-top: 0;
+        margin-bottom: 2em;
+    }
+
+    input, button {
+        margin: 0.5em;
+    }
+
+    input {
+        border-style: solid;
+        border-color: #323259;
+        width: 100%;
+        text-align: center;
+        color: lightgrey;
+        background-image: linear-gradient(0deg, #23233d, #1f1f36);
+    }
+
+    input:focus-visible {
+        outline: 2px solid #393963;
+    }
+
+</style>

src/IntroSelector.svelte

@@ -16,7 +16,6 @@
     let filteredIntroList = [];
 
     const getFiltered = () => {
-        console.log("GET FILTERD");
         const guildIntros = Array.from($intros.get(guild).entries()).map(([index, intro]) => {
             return {
                 index: index,
@@ -49,7 +48,6 @@
 
     $: if (!!($intros.get(guild)) && (!!include || !!exclude)) {
         filteredIntroList = getFiltered();
-        console.log(filteredIntroList);
     }; 
 
     const dispatch = createEventDispatcher();

src/app.html

@@ -25,6 +25,7 @@
             align-items: center;
             background-color: #323259;
             padding: 0.5em;
+            box-shadow: 1px 3px 15px 1px #1f1f36;
         }
 
         div#guild-settings {
@@ -33,6 +34,7 @@
             align-items: center;
             background-color: #2a2a4a;
             margin: 1em;
+            box-shadow: 1px 3px 4px 1px #1f1f36;
         }
 
         div#channel-settings {

src/permissions.ts

@@ -1,8 +1,8 @@
-type Permission = {
-    None: 1,
-    CanDownload: 2,
+export const Permission = {
+    None: 0,
+    CanDownload: 1,
 }
 
-export const member_can = (member, perm) => {
-    return (member.permission & perm) > 0;
+export const member_can = (permissions, perm) => {
+    return (permissions & perm) > 0;
 };

src/routes/+page.svelte

@@ -67,7 +67,7 @@
                         {/await}
                         {#await removeIntroPromise then result}
                         {:catch err}
-                            <p style='color: red'>Failed to add remove</p>
+                            <p style='color: red'>Failed to remove intro</p>
                         {/await}
                         <IntroSelector
                                 guild={guild.name}

src/store.ts

@@ -27,10 +27,15 @@ function createIntroStore() {
 
     return {
         subscribe: subscribe,
-        fetchIntros: async (guilds) => {
-            console.debug('Fetching intros');
-            console.log(guilds)
+        addIntro: async (guild, url, title, token) => {
+            const response = await fetch(`http://localhost:7756/intros/${guild}/add/${encodeURIComponent(url)}?name=${encodeURIComponent(title)}`,
+                                         { method: 'GET', headers: { 'token': token } });
 
+            if (!response.ok) {
+                throw new Error(await response.body);
+            }
+        },
+        fetchIntros: async (guilds) => {
             let intros = new Map();
 
             for (const guild of guilds) {
@@ -50,13 +55,9 @@ function createIntroStore() {
                 }
             }
 
-            console.debug('Setting Intros store');
-            console.debug(intros);
             set(intros)
         }
     }
-
-
 }
 
 export const intros = createIntroStore()