From af2c43a8aea68d5b6b3eab2c212edc64462799b3 Mon Sep 17 00:00:00 2001
From: ConfusedPolarBear <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sun, 17 Jul 2022 02:13:02 -0500
Subject: [PATCH] Reorganize config page

---
 .../Configuration/configPage.html             | 91 +++++++++++--------
 1 file changed, 53 insertions(+), 38 deletions(-)

diff --git a/ConfusedPolarBear.Plugin.IntroSkipper/Configuration/configPage.html b/ConfusedPolarBear.Plugin.IntroSkipper/Configuration/configPage.html
index 9a9587c..1055234 100644
--- a/ConfusedPolarBear.Plugin.IntroSkipper/Configuration/configPage.html
+++ b/ConfusedPolarBear.Plugin.IntroSkipper/Configuration/configPage.html
@@ -218,8 +218,45 @@
             </details>
 
             <details id="visualizer">
-                <summary>Fingerprint Visualizer</summary>
+                <summary>Advanced</summary>
 
+                <h3 style="margin:0">Select episodes to manage</h3>
+                <select id="troubleshooterShow"></select>
+                <select id="troubleshooterSeason"></select>
+                <br />
+
+                <select id="troubleshooterEpisode1"></select>
+                <select id="troubleshooterEpisode2"></select>
+                <br />
+                <br />
+
+                <div id="timestampEditor" style="display:none">
+                    <h3 style="margin:0">Introduction timestamp editor</h3>
+                    <p style="margin:0">All times are in seconds.</p>
+
+                    <p id="editLeftEpisodeTitle" style="margin-bottom:0"></p>
+                    <input style="width:4em" type="number" min="0" id="editLeftEpisodeStart"> to
+                    <input style="width:4em;margin-bottom:10px" type="number" min="0" id="editLeftEpisodeEnd">
+
+                    <p id="editRightEpisodeTitle" style="margin-top:0;margin-bottom:0"></p>
+                    <input style="width:4em" type="number" min="0" id="editRightEpisodeStart"> to
+                    <input style="width:4em;margin-bottom:10px" type="number" min="0" id="editRightEpisodeEnd">
+                    <br />
+
+                    <button id="btnUpdateTimestamps" type="button">
+                        Update timestamps
+                    </button>
+                    <br />
+                    <br />
+
+                    <button id="btnEraseSeasonTimestamps" type="button">
+                        Erase all timestamps for this season
+                    </button>
+                </div>
+                <br />
+                <br />
+
+                <h3>Fingerprint Visualizer</h3>
                 <p>
                     Interactively compare the audio fingerprints of two episodes. <br />
                     The blue and red bar to the right of the fingerprint diff turns blue
@@ -257,14 +294,6 @@
                 </table>
                 <br />
 
-                <select id="troubleshooterShow"></select>
-                <select id="troubleshooterSeason"></select>
-                <br />
-
-                <select id="troubleshooterEpisode1"></select>
-                <select id="troubleshooterEpisode2"></select>
-                <br />
-
                 <span>Shift amount:</span>
                 <input type="number" min="-3000" max="3000" value="0" id="offset">
                 <br />
@@ -272,30 +301,6 @@
                 <br />
                 <br />
 
-                <button id="btnEraseSeasonTimestamps" type="button">
-                    Erase Season Timestamps
-                </button>
-                <br />
-                <br />
-
-                <div id="timestampEditor" style="display:none">
-                    <p>Introduction timestamp editor. All times are in seconds.</p>
-                    <p id="editLeftEpisodeTitle" style="margin-bottom:0"></p>
-                    <input style="width:4em" type="number" min="0" id="editLeftEpisodeStart"> to
-                    <input style="width:4em;margin-bottom:10px" type="number" min="0" id="editLeftEpisodeEnd">
-
-                    <p id="editRightEpisodeTitle" style="margin-top:0;margin-bottom:0"></p>
-                    <input style="width:4em" type="number" min="0" id="editRightEpisodeStart"> to
-                    <input style="width:4em;margin-bottom:10px" type="number" min="0" id="editRightEpisodeEnd">
-                    <br />
-
-                    <button id="btnUpdateTimestamps" type="button">
-                        Update timestamps
-                    </button>
-                </div>
-                <br />
-                <br />
-
                 <canvas id="troubleshooter"></canvas>
                 <span id="timestampContainer">
                     <span id="timestamps"></span> <br />
@@ -682,13 +687,23 @@
                 e.preventDefault();
             });
             btnSeasonEraseTimestamps.addEventListener("click", () => {
-                const show = selectShow.value;
-                const season = selectSeason.value;
+                Dashboard.confirm(
+                    "Are you sure you want to erase all timestamps for this season?",
+                    "Confirm timestamp erasure",
+                    (result) => {
+                        if (!result) {
+                            return;
+                        }
 
-                const url = "Intros/Show/" + encodeURIComponent(show) + "/" + encodeURIComponent(season);
-                getJson(url, "DELETE");
+                        const show = selectShow.value;
+                        const season = selectSeason.value;
 
-                Dashboard.alert("Erased timestamps for " + season + " of " + show);
+                        const url = "Intros/Show/" + encodeURIComponent(show) + "/" + encodeURIComponent(season);
+                        getJson(url, "DELETE");
+
+                        Dashboard.alert("Erased timestamps for " + season + " of " + show);
+                    }
+                );
             });
             btnUpdateTimestamps.addEventListener("click", () => {
                 const lhsId = selectEpisode1.options[selectEpisode1.selectedIndex].value;