Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

chore: fixed suspense the right way

Browse source
This commit is contained in:
Aron Malcher 2024-03-30 22:20:18 +01:00
parent 6fb563502a
commit d575910662
Signed by: aronmal
GPG key ID: 816B7707426FC612
1 changed files with 236 additions and 233 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

469
src/routes/config/[guildId].tsx
View file

@ -148,7 +148,7 @@ const saveConfig = async (
return { success: true }; return { success: true };
}; };
function MyConfig() { function config() {
const params = useParams(); const params = useParams();
const navigator = useNavigate(); const navigator = useNavigate();
const location = useLocation(); const location = useLocation();
@ -201,7 +201,7 @@ function MyConfig() {
}); });
const updateValues = createMemo(() => { const updateValues = createMemo(() => {
const guild = payload()?.guild; const guild = !payload.loading && payload()?.guild;
if (!guild) return {}; if (!guild) return {};
const data = config.features.timePlanning; const data = config.features.timePlanning;
const tpInterval = combineInterval( const tpInterval = combineInterval(
@ -285,254 +285,257 @@ function MyConfig() {
}); });
return ( return (
<div class="group"> <Layout site="config">
<h3>Configure li&apos;l Judd in</h3> <div class="group">
<div> <h3>Configure li&apos;l Judd in</h3>
<div> <div>
<div class="flex-row centered"> <div>
<img <div class="flex-row centered">
class="guildpfp" <img
src={ class="guildpfp"
payload()?.guild.icon src={
? `https://cdn.discordapp.com/icons/${payload()?.guild.id}/${ payload()?.guild.icon
payload()?.guild.icon ? `https://cdn.discordapp.com/icons/${payload()?.guild.id}/${
}.webp?size=240` payload()?.guild.icon
: "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240" }.webp?size=240`
} : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
alt="Server pfp" }
/> alt="Server pfp"
<h1>{payload()?.guild.name}</h1> />
<h1>{payload()?.guild.name}</h1>
</div>
</div> </div>
</div>
<section class="box"> <section class="box">
<h2>Guild</h2> <h2>Guild</h2>
<p>General settings for this guild.</p> <p>General settings for this guild.</p>
<div class="flex-row"> <div class="flex-row">
<label for="timezone">Timezone for your server:</label> <label for="timezone">Timezone for your server:</label>
<input
type="text"
list="timezones"
id="timezone"
ref={(e) => setTimezoneRef(e)}
value={payload()?.guild.timezone}
onInput={(e) =>
setConfig(
"features",
"timePlanning",
"timezone",
e.target.value,
)
}
/>
<datalist id="timezones">
<Index each={payload()?.tzNames}>
{(zone) => <option value={zone()} />}
</Index>
</datalist>
<button
disabled={guessTZ() === config.features.timePlanning.timezone}
title={"Detected: " + guessTZ()}
onClick={() =>
setConfig("features", "timePlanning", "timezone", guessTZ())
}
>
Auto-detect
</button>
</div>
</section>
<section class="box">
<h2>Features</h2>
<p>Configure the features of the bot</p>
<label for="timePlanning" class="flex-row">
<p>Time Planning </p>
<FontAwesomeIcon
icon={
config.features.timePlanning.enabled
? faToggleOn
: faToggleOff
}
size="xl"
/>
</label>
<input <input
type="text" hidden
list="timezones" type="checkbox"
id="timezone" id="timePlanning"
ref={(e) => setTimezoneRef(e)} ref={(e) => setTpEnabledRef(e)}
value={payload()?.guild.timezone} checked={!!payload()?.guild.tpChannelId}
onInput={(e) => onInput={(e) =>
setConfig( setConfig(
"features", "features",
"timePlanning", "timePlanning",
"timezone", "enabled",
e.target.value, e.target.checked,
) )
} }
/> />
<div
<datalist id="timezones"> class="sub"
<Index each={payload()?.tzNames}> classList={{ disabled: !config.features.timePlanning.enabled }}
{(zone) => <option value={zone()} />}
</Index>
</datalist>
<button
disabled={guessTZ() === config.features.timePlanning.timezone}
title={"Detected: " + guessTZ()}
onClick={() =>
setConfig("features", "timePlanning", "timezone", guessTZ())
}
> >
Auto-detect <div class="flex-row">
</button> <label>Target channel:</label>
</div> <select
</section> ref={(e) => setChannelRef(e)}
value={payload()?.guild.tpChannelId}
<section class="box"> onInput={(e) =>
<h2>Features</h2> setConfig(
<p>Configure the features of the bot</p> "features",
<label for="timePlanning" class="flex-row"> "timePlanning",
<p>Time Planning </p> "channelId",
<FontAwesomeIcon e.target.value,
icon={ )
config.features.timePlanning.enabled ? faToggleOn : faToggleOff }
} >
size="xl" <option disabled value="">
/> --Select a Channel--
</label> </option>
<input <For each={payload()?.guild.channels}>
hidden {(channel) => (
type="checkbox" <option value={channel.id}>{channel.name}</option>
id="timePlanning" )}
ref={(e) => setTpEnabledRef(e)} </For>
checked={!!payload()?.guild.tpChannelId} </select>
onInput={(e) => <Show
setConfig("features", "timePlanning", "enabled", e.target.checked) when={
} config.features.timePlanning.enabled &&
/> !config.features.timePlanning.channelId
<div }
class="sub" >
classList={{ disabled: !config.features.timePlanning.enabled }} {"<-- or changes won't be saved"}
> </Show>
<div class="flex-row"> </div>
<label>Target channel:</label> <div class="flex-row">
<select <label>Target Interval:</label>
ref={(e) => setChannelRef(e)} <select
value={payload()?.guild.tpChannelId} ref={(e) => setTargetDayRef(e)}
onInput={(e) => value={
setConfig( splitInterval(payload()?.guild.tpInterval ?? 0).targetDay
"features", }
"timePlanning", onInput={(e) =>
"channelId", setConfig(
e.target.value, "features",
) "timePlanning",
} "targetDay",
> Number(e.target.value),
<option disabled value=""> )
--Select a Channel-- }
</option> >
<For each={payload()?.guild.channels}> <Index each={Array.from(Array(7)).map((_e, i) => i)}>
{(channel) => ( {(id) => {
<option value={channel.id}>{channel.name}</option> const weekdays = [
)} "Sunday",
</For> "Monday",
</select> "Tuesday",
<Show "Wednesday",
when={ "Thursday",
config.features.timePlanning.enabled && "Friday",
!config.features.timePlanning.channelId "Saturday",
} ];
> return (
{"<-- or changes won't be saved"} <option value={String(id())}>{weekdays[id()]}</option>
</Show> );
</div> }}
<div class="flex-row"> </Index>
<label>Target Interval:</label> </select>
<select at
ref={(e) => setTargetDayRef(e)} <select
value={ ref={(e) => setTargetHourRef(e)}
splitInterval(payload()?.guild.tpInterval ?? 0).targetDay value={
} splitInterval(payload()?.guild.tpInterval ?? 0).targetHour
onInput={(e) => }
setConfig( onInput={(e) =>
"features", setConfig(
"timePlanning", "features",
"targetDay", "timePlanning",
Number(e.target.value), "targetHour",
) Number(e.target.value),
} )
> }
<Index each={Array.from(Array(7)).map((_e, i) => i)}> >
{(id) => { <Index each={Array.from(Array(24)).map((_e, i) => i)}>
const weekdays = [ {(id) => (
"Sunday", <option value={String(id())}>{String(id())}</option>
"Monday", )}
"Tuesday", </Index>
"Wednesday", </select>
"Thursday", :
"Friday", <select
"Saturday", ref={(e) => setTargetMinuteRef(e)}
]; value={
return ( splitInterval(payload()?.guild.tpInterval ?? 0).targetMinute
<option value={String(id())}>{weekdays[id()]}</option> }
); onInput={(e) =>
}} setConfig(
</Index> "features",
</select> "timePlanning",
at "targetMinute",
<select Number(e.target.value),
ref={(e) => setTargetHourRef(e)} )
value={ }
splitInterval(payload()?.guild.tpInterval ?? 0).targetHour >
} <Index each={Array.from(Array(60)).map((_e, i) => i)}>
onInput={(e) => {(id) => (
setConfig( <option value={String(id())}>
"features", {String(id()).padStart(2, "0")}
"timePlanning", </option>
"targetHour", )}
Number(e.target.value), </Index>
) </select>
} </div>
> <div class="flex-row">
<Index each={Array.from(Array(24)).map((_e, i) => i)}> <label for="pingableRoles" class="flex-row">
{(id) => <option value={String(id())}>{String(id())}</option>} <p>Enable pingable Roles:</p>
</Index> <FontAwesomeIcon
</select> icon={
: config.features.timePlanning.pingableRoles
<select ? faToggleOn
ref={(e) => setTargetMinuteRef(e)} : faToggleOff
value={ }
splitInterval(payload()?.guild.tpInterval ?? 0).targetMinute size="xl"
} />
onInput={(e) => </label>
setConfig( <input
"features", hidden
"timePlanning", type="checkbox"
"targetMinute", id="pingableRoles"
Number(e.target.value), ref={(e) => setPingableRolesRef(e)}
) checked={payload()?.guild.pingableRoles}
} onInput={(e) =>
> setConfig(
<Index each={Array.from(Array(60)).map((_e, i) => i)}> "features",
{(id) => ( "timePlanning",
<option value={String(id())}> "pingableRoles",
{String(id()).padStart(2, "0")} e.target.checked,
</option> )
)}
</Index>
</select>
</div>
<div class="flex-row">
<label for="pingableRoles" class="flex-row">
<p>Enable pingable Roles:</p>
<FontAwesomeIcon
icon={
config.features.timePlanning.pingableRoles
? faToggleOn
: faToggleOff
} }
size="xl"
/> />
</label> </div>
<input
hidden
type="checkbox"
id="pingableRoles"
ref={(e) => setPingableRolesRef(e)}
checked={payload()?.guild.pingableRoles}
onInput={(e) =>
setConfig(
"features",
"timePlanning",
"pingableRoles",
e.target.checked,
)
}
/>
</div> </div>
</div> </section>
</section>
<section class="box"> <section class="box">
<button <button
onClick={async () => { onClick={async () => {
const id = payload()?.guild.id; const id = payload()?.guild.id;
if (!id || !willUpdateValues()) return; if (!id || !willUpdateValues()) return;
await saveConfig(id, updateValues()); await saveConfig(id, updateValues());
refetch(); refetch();
}} }}
> >
Apply Apply
</button> </button>
<button onClick={() => navigator("/config")}>Back</button> <button onClick={() => navigator("/config")}>Back</button>
<button onClick={() => refetch()}>Reset</button> <button onClick={() => refetch()}>Reset</button>
<Show when={willUpdateValues()}>UNSAVED CHANGES</Show> <Show when={willUpdateValues()}>UNSAVED CHANGES</Show>
</section> </section>
</div>
</div> </div>
</div>
);
}
function config() {
return (
<Layout site="config">
<MyConfig />
</Layout> </Layout>
); );
} }