chore: Improved loading
This commit is contained in:
parent
04fb5709a1
commit
ede764b6f3
GPG key ID:
816B7707426FC612
1 changed files with 233 additions and 222 deletions
|
|
@ -148,7 +148,7 @@ const saveConfig = async (
|
||||||
return { success: true };
|
return { success: true };
|
||||||
};
|
};
|
||||||
|
|
||||||
function config() {
|
function MyConfig() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const navigator = useNavigate();
|
const navigator = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
@ -285,243 +285,254 @@ function config() {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout site="config">
|
<div class="group">
|
||||||
<div class="group">
|
<h3>Configure li'l Judd in</h3>
|
||||||
<h3>Configure li'l Judd in</h3>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div class="flex-row centered">
|
||||||
<div class="flex-row centered">
|
<img
|
||||||
<img
|
class="guildpfp"
|
||||||
class="guildpfp"
|
src={
|
||||||
src={
|
payload()?.guild.icon
|
||||||
payload()?.guild.icon
|
? `https://cdn.discordapp.com/icons/${payload()?.guild.id}/${
|
||||||
? `https://cdn.discordapp.com/icons/${payload()?.guild.id}/${
|
payload()?.guild.icon
|
||||||
payload()?.guild.icon
|
}.webp?size=240`
|
||||||
}.webp?size=240`
|
: "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.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)}
|
|
||||||
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
|
||||||
hidden
|
type="text"
|
||||||
type="checkbox"
|
list="timezones"
|
||||||
id="timePlanning"
|
id="timezone"
|
||||||
ref={(e) => setTpEnabledRef(e)}
|
ref={(e) => setTimezoneRef(e)}
|
||||||
|
value={payload()?.guild.timezone}
|
||||||
onInput={(e) =>
|
onInput={(e) =>
|
||||||
setConfig(
|
setConfig(
|
||||||
"features",
|
"features",
|
||||||
"timePlanning",
|
"timePlanning",
|
||||||
"enabled",
|
"timezone",
|
||||||
e.target.checked,
|
e.target.value,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<div
|
|
||||||
class="sub"
|
|
||||||
classList={{ disabled: !config.features.timePlanning.enabled }}
|
|
||||||
>
|
|
||||||
<div class="flex-row">
|
|
||||||
<label>Target channel:</label>
|
|
||||||
<select
|
|
||||||
ref={(e) => setChannelRef(e)}
|
|
||||||
onInput={(e) =>
|
|
||||||
setConfig(
|
|
||||||
"features",
|
|
||||||
"timePlanning",
|
|
||||||
"channelId",
|
|
||||||
e.target.value,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option disabled value="">
|
|
||||||
--Select a Channel--
|
|
||||||
</option>
|
|
||||||
<For each={payload()?.guild.channels}>
|
|
||||||
{(channel) => (
|
|
||||||
<option value={channel.id}>{channel.name}</option>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</select>
|
|
||||||
<Show
|
|
||||||
when={
|
|
||||||
config.features.timePlanning.enabled &&
|
|
||||||
!config.features.timePlanning.channelId
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{"<-- or changes won't be saved"}
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
<div class="flex-row">
|
|
||||||
<label>Target Interval:</label>
|
|
||||||
<select
|
|
||||||
ref={(e) => setTargetDayRef(e)}
|
|
||||||
onInput={(e) =>
|
|
||||||
setConfig(
|
|
||||||
"features",
|
|
||||||
"timePlanning",
|
|
||||||
"targetDay",
|
|
||||||
Number(e.target.value),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Index each={Array.from(Array(7)).map((_e, i) => i)}>
|
|
||||||
{(id) => {
|
|
||||||
const weekdays = [
|
|
||||||
"Sunday",
|
|
||||||
"Monday",
|
|
||||||
"Tuesday",
|
|
||||||
"Wednesday",
|
|
||||||
"Thursday",
|
|
||||||
"Friday",
|
|
||||||
"Saturday",
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<option value={String(id())}>{weekdays[id()]}</option>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Index>
|
|
||||||
</select>
|
|
||||||
at
|
|
||||||
<select
|
|
||||||
ref={(e) => setTargetHourRef(e)}
|
|
||||||
onInput={(e) =>
|
|
||||||
setConfig(
|
|
||||||
"features",
|
|
||||||
"timePlanning",
|
|
||||||
"targetHour",
|
|
||||||
Number(e.target.value),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Index each={Array.from(Array(24)).map((_e, i) => i)}>
|
|
||||||
{(id) => (
|
|
||||||
<option value={String(id())}>{String(id())}</option>
|
|
||||||
)}
|
|
||||||
</Index>
|
|
||||||
</select>
|
|
||||||
:
|
|
||||||
<select
|
|
||||||
ref={(e) => setTargetMinuteRef(e)}
|
|
||||||
onInput={(e) =>
|
|
||||||
setConfig(
|
|
||||||
"features",
|
|
||||||
"timePlanning",
|
|
||||||
"targetMinute",
|
|
||||||
Number(e.target.value),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Index each={Array.from(Array(60)).map((_e, i) => i)}>
|
|
||||||
{(id) => (
|
|
||||||
<option value={String(id())}>
|
|
||||||
{String(id()).padStart(2, "0")}
|
|
||||||
</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>
|
|
||||||
<input
|
|
||||||
hidden
|
|
||||||
type="checkbox"
|
|
||||||
id="pingableRoles"
|
|
||||||
ref={(e) => setPingableRolesRef(e)}
|
|
||||||
onInput={(e) =>
|
|
||||||
setConfig(
|
|
||||||
"features",
|
|
||||||
"timePlanning",
|
|
||||||
"pingableRoles",
|
|
||||||
e.target.checked,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="box">
|
<datalist id="timezones">
|
||||||
|
<Index each={payload()?.tzNames}>
|
||||||
|
{(zone) => <option value={zone()} />}
|
||||||
|
</Index>
|
||||||
|
</datalist>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={async () => {
|
disabled={guessTZ() === config.features.timePlanning.timezone}
|
||||||
const id = payload()?.guild.id;
|
title={"Detected: " + guessTZ()}
|
||||||
if (!id || !willUpdateValues()) return;
|
onClick={() =>
|
||||||
await saveConfig(id, updateValues());
|
setConfig("features", "timePlanning", "timezone", guessTZ())
|
||||||
refetch();
|
}
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Apply
|
Auto-detect
|
||||||
</button>
|
</button>
|
||||||
<button onClick={() => navigator("/config")}>Back</button>
|
</div>
|
||||||
<Show when={willUpdateValues()}>UNSAVED CHANGES</Show>
|
</section>
|
||||||
</section>
|
|
||||||
</div>
|
<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
|
||||||
|
hidden
|
||||||
|
type="checkbox"
|
||||||
|
id="timePlanning"
|
||||||
|
ref={(e) => setTpEnabledRef(e)}
|
||||||
|
checked={!!payload()?.guild.tpChannelId}
|
||||||
|
onInput={(e) =>
|
||||||
|
setConfig("features", "timePlanning", "enabled", e.target.checked)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="sub"
|
||||||
|
classList={{ disabled: !config.features.timePlanning.enabled }}
|
||||||
|
>
|
||||||
|
<div class="flex-row">
|
||||||
|
<label>Target channel:</label>
|
||||||
|
<select
|
||||||
|
ref={(e) => setChannelRef(e)}
|
||||||
|
value={payload()?.guild.tpChannelId}
|
||||||
|
onInput={(e) =>
|
||||||
|
setConfig(
|
||||||
|
"features",
|
||||||
|
"timePlanning",
|
||||||
|
"channelId",
|
||||||
|
e.target.value,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option disabled value="">
|
||||||
|
--Select a Channel--
|
||||||
|
</option>
|
||||||
|
<For each={payload()?.guild.channels}>
|
||||||
|
{(channel) => (
|
||||||
|
<option value={channel.id}>{channel.name}</option>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</select>
|
||||||
|
<Show
|
||||||
|
when={
|
||||||
|
config.features.timePlanning.enabled &&
|
||||||
|
!config.features.timePlanning.channelId
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{"<-- or changes won't be saved"}
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row">
|
||||||
|
<label>Target Interval:</label>
|
||||||
|
<select
|
||||||
|
ref={(e) => setTargetDayRef(e)}
|
||||||
|
value={
|
||||||
|
splitInterval(payload()?.guild.tpInterval ?? 0).targetDay
|
||||||
|
}
|
||||||
|
onInput={(e) =>
|
||||||
|
setConfig(
|
||||||
|
"features",
|
||||||
|
"timePlanning",
|
||||||
|
"targetDay",
|
||||||
|
Number(e.target.value),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Index each={Array.from(Array(7)).map((_e, i) => i)}>
|
||||||
|
{(id) => {
|
||||||
|
const weekdays = [
|
||||||
|
"Sunday",
|
||||||
|
"Monday",
|
||||||
|
"Tuesday",
|
||||||
|
"Wednesday",
|
||||||
|
"Thursday",
|
||||||
|
"Friday",
|
||||||
|
"Saturday",
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<option value={String(id())}>{weekdays[id()]}</option>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Index>
|
||||||
|
</select>
|
||||||
|
at
|
||||||
|
<select
|
||||||
|
ref={(e) => setTargetHourRef(e)}
|
||||||
|
value={
|
||||||
|
splitInterval(payload()?.guild.tpInterval ?? 0).targetHour
|
||||||
|
}
|
||||||
|
onInput={(e) =>
|
||||||
|
setConfig(
|
||||||
|
"features",
|
||||||
|
"timePlanning",
|
||||||
|
"targetHour",
|
||||||
|
Number(e.target.value),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Index each={Array.from(Array(24)).map((_e, i) => i)}>
|
||||||
|
{(id) => <option value={String(id())}>{String(id())}</option>}
|
||||||
|
</Index>
|
||||||
|
</select>
|
||||||
|
:
|
||||||
|
<select
|
||||||
|
ref={(e) => setTargetMinuteRef(e)}
|
||||||
|
value={
|
||||||
|
splitInterval(payload()?.guild.tpInterval ?? 0).targetMinute
|
||||||
|
}
|
||||||
|
onInput={(e) =>
|
||||||
|
setConfig(
|
||||||
|
"features",
|
||||||
|
"timePlanning",
|
||||||
|
"targetMinute",
|
||||||
|
Number(e.target.value),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Index each={Array.from(Array(60)).map((_e, i) => i)}>
|
||||||
|
{(id) => (
|
||||||
|
<option value={String(id())}>
|
||||||
|
{String(id()).padStart(2, "0")}
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="box">
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
const id = payload()?.guild.id;
|
||||||
|
if (!id || !willUpdateValues()) return;
|
||||||
|
await saveConfig(id, updateValues());
|
||||||
|
refetch();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
|
<button onClick={() => navigator("/config")}>Back</button>
|
||||||
|
<button onClick={() => refetch()}>Reset</button>
|
||||||
|
<Show when={willUpdateValues()}>UNSAVED CHANGES</Show>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function config() {
|
||||||
|
return (
|
||||||
|
<Layout site="config">
|
||||||
|
<MyConfig />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue