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 };
|
||||
};
|
||||
|
||||
function config() {
|
||||
function MyConfig() {
|
||||
const params = useParams();
|
||||
const navigator = useNavigate();
|
||||
const location = useLocation();
|
||||
|
|
@ -285,243 +285,254 @@ function config() {
|
|||
});
|
||||
|
||||
return (
|
||||
<Layout site="config">
|
||||
<div class="group">
|
||||
<h3>Configure li'l Judd in</h3>
|
||||
<div class="group">
|
||||
<h3>Configure li'l Judd in</h3>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="flex-row centered">
|
||||
<img
|
||||
class="guildpfp"
|
||||
src={
|
||||
payload()?.guild.icon
|
||||
? `https://cdn.discordapp.com/icons/${payload()?.guild.id}/${
|
||||
payload()?.guild.icon
|
||||
}.webp?size=240`
|
||||
: "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
|
||||
}
|
||||
alt="Server pfp"
|
||||
/>
|
||||
<h1>{payload()?.guild.name}</h1>
|
||||
</div>
|
||||
<div class="flex-row centered">
|
||||
<img
|
||||
class="guildpfp"
|
||||
src={
|
||||
payload()?.guild.icon
|
||||
? `https://cdn.discordapp.com/icons/${payload()?.guild.id}/${
|
||||
payload()?.guild.icon
|
||||
}.webp?size=240`
|
||||
: "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
|
||||
}
|
||||
alt="Server pfp"
|
||||
/>
|
||||
<h1>{payload()?.guild.name}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="box">
|
||||
<h2>Guild</h2>
|
||||
<p>General settings for this guild.</p>
|
||||
<div class="flex-row">
|
||||
<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>
|
||||
<section class="box">
|
||||
<h2>Guild</h2>
|
||||
<p>General settings for this guild.</p>
|
||||
<div class="flex-row">
|
||||
<label for="timezone">Timezone for your server:</label>
|
||||
<input
|
||||
hidden
|
||||
type="checkbox"
|
||||
id="timePlanning"
|
||||
ref={(e) => setTpEnabledRef(e)}
|
||||
type="text"
|
||||
list="timezones"
|
||||
id="timezone"
|
||||
ref={(e) => setTimezoneRef(e)}
|
||||
value={payload()?.guild.timezone}
|
||||
onInput={(e) =>
|
||||
setConfig(
|
||||
"features",
|
||||
"timePlanning",
|
||||
"enabled",
|
||||
e.target.checked,
|
||||
"timezone",
|
||||
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
|
||||
onClick={async () => {
|
||||
const id = payload()?.guild.id;
|
||||
if (!id || !willUpdateValues()) return;
|
||||
await saveConfig(id, updateValues());
|
||||
refetch();
|
||||
}}
|
||||
disabled={guessTZ() === config.features.timePlanning.timezone}
|
||||
title={"Detected: " + guessTZ()}
|
||||
onClick={() =>
|
||||
setConfig("features", "timePlanning", "timezone", guessTZ())
|
||||
}
|
||||
>
|
||||
Apply
|
||||
Auto-detect
|
||||
</button>
|
||||
<button onClick={() => navigator("/config")}>Back</button>
|
||||
<Show when={willUpdateValues()}>UNSAVED CHANGES</Show>
|
||||
</section>
|
||||
</div>
|
||||
</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
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
function config() {
|
||||
return (
|
||||
<Layout site="config">
|
||||
<MyConfig />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue