show intros in groups by guilds/channels

src/IntroSelector.svelte

@@ -5,6 +5,7 @@
     export let guild = null;
     export let channel = null;
 
+    export let guildIntros = null;
     export let introList = null;
     export let exclude = null;
     export let btnLabel = 'Add';
@@ -25,20 +26,21 @@
 </script>
 
 <div id="list">
-    {#if !!introList}
+    {#if !!introList && !!guildIntros}
         {#if introList.length > 0}
             {#each introList as intro}
                 <label id="list-item">
-                    <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={intro}>
+                    <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={intro.index}>
-                    {$intros[intro.index].name} ({!!$intros[intro.index].filename ? $intros[intro.index].filename : $intros[intro.index].url})
+                    {guildIntros[intro.index].name} ({!!guildIntros[intro.index].filename ? guildIntros[intro.index].filename : guildIntros[intro.index].url})
                 </label>
             {/each}
         {:else if !!emptyMsg}
             <p style='color: yellow'>{emptyMsg}</p>
         {:else}
+            <p>No intros</p>
         {/if}
-    {:else if !!exclude}
+    {:else if !!exclude && !!guildIntros}
-        {#each $intros as intro, i}
+        {#each guildIntros as intro, i}
             {#if (!exclude.map((e) => e.index).includes(i))}
                 <label id="list-item">
                     <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
@@ -47,6 +49,7 @@
             {/if}
         {/each}
     {:else}
+        <p>No intros</p>
     {/if}
     <button on:click={onConfirm}>{btnLabel}</button>
 </div>

src/Login.svelte

@@ -2,8 +2,9 @@
     import { member, intros } from './store.ts';
 
     const login = async (username) => {
-        await intros.fetchIntros();
         await member._fakeLogin(username);
+
+        await intros.fetchIntros($member.guilds);
     }
 
     let loginPromise = null;

src/routes/+page.svelte

@@ -3,42 +3,44 @@
     import Login from '../Login.svelte';
     import IntroSelector from '../IntroSelector.svelte';
 
-    const addIntros = (event) => {
+    let addIntroPromise = null;
-        let guildIndex = $member.guilds.findIndex((e) => e.name === event.detail.guild);
-        console.log(guildIndex)
 
-        if (guildIndex >= 0) {
+    const apiAddIntro = async (guild, channel, username, selectedIntros) => {
-            let channelIndex = $member.guilds[guildIndex].channels.findIndex((e) => e.name === event.detail.channel);
+        for (const intro of selectedIntros) {
-            console.log(channelIndex)
+            const response = await fetch(
-
+                `http://localhost:7756/intros/${guild}/${channel}/${$member.username}/${intro}`,
-            if (channelIndex >= 0) {
+                { method: 'POST' }
-                $member.guilds[guildIndex].channels[channelIndex].intros =
+            );
-                    $member
+            if (!response.ok) {
-                    .guilds[guildIndex]
+                const body = await response.json();
-                    .channels[channelIndex]
+                throw new Error(`${body}`);
-                    .intros
-                    .concat(
-                        event.detail.intros.map((index) => {
-                            return { index: index, volume: 20 }
-                        }));
             }
         }
+
+        await member._fakeLogin(username);
+    };
+
+    const apiRemoveIntro = async (guild, channel, username, selectedIntros) => {
+        for (const intro of selectedIntros) {
+            const response = await fetch(
+                `http://localhost:7756/intros/${guild}/${channel}/${$member.username}/${intro}/remove`,
+                { method: 'POST' }
+            );
+            if (!response.ok) {
+                const body = await response.json();
+                throw new Error(`${body}`);
+            }
+        }
+
+        await member._fakeLogin(username);
+    };
+
+    const addIntros = (event) => {
+        addIntroPromise = apiAddIntro(event.detail.guild, event.detail.channel, $member.username, event.detail.intros);
+
     }
     const removeIntros = (event) => {
-        let guildIndex = $member.guilds.findIndex((e) => e.name == event.detail.guild);
+        addIntroPromise = apiRemoveIntro(event.detail.guild, event.detail.channel, $member.username, event.detail.intros);
-
-        if (guildIndex >= 0) {
-            let channelIndex = $member.guilds[guildIndex].channels.findIndex((e) => e.name === event.detail.channel);
-
-            if (channelIndex >= 0) {
-                $member.guilds[guildIndex].channels[channelIndex].intros =
-                    $member
-                    .guilds[guildIndex]
-                    .channels[channelIndex]
-                    .intros
-                    .filter((intro) => !event.detail.intros.includes(intro));
-            }
-        }
     }
 </script>
 
@@ -55,7 +57,12 @@
                 {#each guild.channels as channel}
                     <div id="channel-settings">
                         <h4>{channel.name}</h4>
+                        {#await addIntroPromise then result}
+                        {:catch err}
+                            <p style='color: red'>Failed to add intro: {err}</p>
+                        {/await}
                         <IntroSelector
+                                guildIntros={$intros[guild.name]}
                                 guild={guild.name}
                                 channel={channel.name}
                                 introList={channel.intros}
@@ -66,6 +73,7 @@
 
                         <h3>Add Intros</h3>
                         <IntroSelector 
+                                guildIntros={$intros[guild.name]}
                                 guild={guild.name}
                                 channel={channel.name}
                                 exclude={channel.intros}

src/store.ts

@@ -35,28 +35,38 @@ function createMemberStore(): MemberStore {
 }
 
 function createIntroStore(): IntroStore {
-    const { subscribe, set, update } = writable([])
+    const { subscribe, set, update } = writable({})
 
     return {
         subscribe: subscribe,
         set: set,
         update: update,
-        fetchIntros: async () => {
+        fetchIntros: async (guilds) => {
-            const response = (await (await fetch("http://localhost:7756/intros/588149178912473103")).json())
+            console.debug('Fetching intros');
-            if (response !== "NoGuildFound") {
+            console.log(guilds)
-                console.log(response.Intros[0].File);
-                const intros = response.Intros.map((intro) => {
-                    if (!!intro.File) {
-                        return { name: intro.File.friendlyName, filename: intro.File.filename }
-                    } else if (!!intro.Online) {
-                        return { name: intro.Online.friendlyName, url: intro.Online.url }
-                    }
-                })
-                console.log(intros)
 
-                set(intros)
+            let intros = {};
+
+            for (const guild of guilds) {
+                const response = (await (await fetch(`http://localhost:7756/intros/${guild.name}`)).json())
+                    if (response !== "NoGuildFound") {
+                    const guild_intros = response.Intros.map((intro) => {
+                        if (!!intro.File) {
+                            return { name: intro.File.friendlyName, filename: intro.File.filename }
+                        } else if (!!intro.Online) {
+                            return { name: intro.Online.friendlyName, url: intro.Online.url }
+                        }
+                    })
+
+                    intros[guild.name] = guild_intros;
+                }
             }
-        },
+
+            console.debug('Setting Intros store');
+            console.debug(intros);
+            console.debug(intros[123]);
+            set(intros)
+        }
     }