split into components
parent
768bac3bcf
commit
25cbf12880
|
|
@ -2,6 +2,9 @@
|
|||
import { intros } from './store.ts';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let guild = null;
|
||||
export let channel = null;
|
||||
|
||||
export let introList = null;
|
||||
export let exclude = null;
|
||||
export let btnLabel = 'Add';
|
||||
|
|
@ -10,7 +13,11 @@
|
|||
const dispatch = createEventDispatcher();
|
||||
|
||||
const onConfirm = () => {
|
||||
dispatch('confirm', selectedIntros)
|
||||
dispatch('confirm', {
|
||||
guild: guild,
|
||||
channel: channel,
|
||||
intros: selectedIntros
|
||||
})
|
||||
selectedIntros = [];
|
||||
}
|
||||
|
||||
|
|
@ -20,10 +27,10 @@
|
|||
<div id="list">
|
||||
{#if !!introList}
|
||||
{#if introList.length > 0}
|
||||
{#each introList as i}
|
||||
{#each introList as intro}
|
||||
<label id="list-item">
|
||||
<input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
|
||||
{$intros[i].name} ({!!$intros[i].filename ? $intros[i].filename : $intros[i].url})
|
||||
<input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={intro}>
|
||||
{$intros[intro.index].name} ({!!$intros[intro.index].filename ? $intros[intro.index].filename : $intros[intro.index].url})
|
||||
</label>
|
||||
{/each}
|
||||
{:else if !!emptyMsg}
|
||||
|
|
@ -32,7 +39,7 @@
|
|||
{/if}
|
||||
{:else if !!exclude}
|
||||
{#each $intros as intro, i}
|
||||
{#if (!exclude.includes(i))}
|
||||
{#if (!exclude.map((e) => e.index).includes(i))}
|
||||
<label id="list-item">
|
||||
<input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
|
||||
{intro.name} ({!!intro.filename ? intro.filename : intro.url})
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
await member._fakeLogin(username);
|
||||
}
|
||||
|
||||
let loginPromise = null;
|
||||
|
||||
let enteredUsername = '';
|
||||
</script>
|
||||
|
||||
|
|
|
|||
24
src/app.html
24
src/app.html
|
|
@ -18,6 +18,30 @@
|
|||
color: lightgrey;
|
||||
}
|
||||
|
||||
div#intros {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #323259;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
div#guild-settings {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #2a2a4a;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div#channel-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #2a2a4a;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
div#list {
|
||||
display: inline-flex;
|
||||
width: 85%;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,41 @@
|
|||
import IntroSelector from '../IntroSelector.svelte';
|
||||
|
||||
const addIntros = (event) => {
|
||||
console.log($member.intros)
|
||||
$member.intros = $member.intros.concat(event.detail);
|
||||
console.log($member.intros)
|
||||
let guildIndex = $member.guilds.findIndex((e) => e.name === event.detail.guild);
|
||||
console.log(guildIndex)
|
||||
|
||||
if (guildIndex >= 0) {
|
||||
let channelIndex = $member.guilds[guildIndex].channels.findIndex((e) => e.name === event.detail.channel);
|
||||
console.log(channelIndex)
|
||||
|
||||
if (channelIndex >= 0) {
|
||||
$member.guilds[guildIndex].channels[channelIndex].intros =
|
||||
$member
|
||||
.guilds[guildIndex]
|
||||
.channels[channelIndex]
|
||||
.intros
|
||||
.concat(
|
||||
event.detail.intros.map((index) => {
|
||||
return { index: index, volume: 20 }
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
const removeIntros = (event) => {
|
||||
$member.intros = $member.intros.filter((intro) => !event.detail.includes(intro));
|
||||
let guildIndex = $member.guilds.findIndex((e) => e.name == event.detail.guild);
|
||||
|
||||
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>
|
||||
|
||||
|
|
@ -19,14 +48,34 @@
|
|||
<p>{$member.username}</p>
|
||||
|
||||
<h3>Your Intros</h3>
|
||||
<div id="intros">
|
||||
{#each $member.guilds as guild}
|
||||
<h4>{guild.name}</h4>
|
||||
<div id="guild-settings">
|
||||
{#each guild.channels as channel}
|
||||
<div id="channel-settings">
|
||||
<h4>{channel.name}</h4>
|
||||
<IntroSelector
|
||||
introList={$member.intros}
|
||||
guild={guild.name}
|
||||
channel={channel.name}
|
||||
introList={channel.intros}
|
||||
on:confirm={removeIntros}
|
||||
btnLabel="Remove"
|
||||
emptyMsg="You don't have any intros, try adding one"/>
|
||||
emptyMsg="You don't have any intros, try adding one"
|
||||
/>
|
||||
|
||||
<h3>Add Intros</h3>
|
||||
<IntroSelector exclude={$member.intros} on:confirm={addIntros} />
|
||||
<IntroSelector
|
||||
guild={guild.name}
|
||||
channel={channel.name}
|
||||
exclude={channel.intros}
|
||||
on:confirm={addIntros}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<Login />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -26,12 +26,7 @@ function createMemberStore(): MemberStore {
|
|||
if (response === "NoUserFound") {
|
||||
return false;
|
||||
} else {
|
||||
set(
|
||||
{
|
||||
username: username,
|
||||
intros: response.Settings[0].intros.map((intro) => intro[0])
|
||||
}
|
||||
)
|
||||
set(response.Me)
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue