From ede764b6f3621d9a5a7c90fcab81b416d70e878f Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Wed, 27 Mar 2024 14:12:19 +0100
Subject: [PATCH] chore: Improved loading

---
 src/routes/config/[guildId].tsx | 455 ++++++++++++++++----------------
 1 file changed, 233 insertions(+), 222 deletions(-)

diff --git a/src/routes/config/[guildId].tsx b/src/routes/config/[guildId].tsx
index 5f1ab80..741dcb3 100644
--- a/src/routes/config/[guildId].tsx
+++ b/src/routes/config/[guildId].tsx
@@ -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&apos;l Judd in</h3>
+    <div class="group">
+      <h3>Configure li&apos;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>
   );
 }