Refresh button for servers dropdown

apps/static/css/index.css

@@ -251,3 +251,17 @@ body {
     from { width: 100%; }
     to { width: 0%; }
 }
+
+/* Spinning */
+
+@keyframes spinning-360-anim {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.spinning-360 {
+    animation: spinning-360-anim 1s ease-in-out infinite;
+    -moz-animation: spinning-360-anim 1s ease-in-out infinite;
+    -webkit-animation: spinning-360-anim 1s ease-in-out infinite;  
+}

apps/static/js/home.js

@@ -13,11 +13,23 @@ $(document).ready(async function() {
     await loadSavedGuilds();
 });
 
+$("#serverOptionsRefreshBtn").on("click", async function() {
+    await loadServerOptions();
+});
+
 // Load server options into the 'Add Server' dropdown
 async function loadServerOptions() {
 
+    // Disable controls while loading
+    $("#serverOptions").prop("disabled", true);
+    $("#serverOptionsRefreshBtn").prop("disabled", true).find("i.bi").addClass("spinning-360");
+
     // Remove existing options
-    $("#serverOptions").empty();
+    $("#serverOptions option").each(function() {
+        if ($(this).val()) {
+            $(this).remove();
+        }
+    });
 
     // Deselect any selected option
     $("#serverOptions").val(null).trigger("change");
@@ -38,6 +50,10 @@ async function loadServerOptions() {
         console.error(JSON.stringify(error, null, 4));
         showToast("danger", `Error Loading Guilds: HTTP ${error.status}`, error.responseJSON.message, 15000);
     }
+
+    // Re-enable controls
+    $("#serverOptions").prop("disabled", false);
+    $("#serverOptionsRefreshBtn").prop("disabled", false).find("i.bi").removeClass("spinning-360");
 }
 
 // Load any existing 'saved guilds' from the database
@@ -92,7 +108,7 @@ $("#serverForm").on("submit", function(event) {
         serverId = selectedOption.attr("data-id");
         serverIconHash = selectedOption.attr("data-icon");
 
-    addServer(serverName, serverGuildId, serverIconHash);
+    registerNewServer(serverName, serverGuildId, serverIconHash);
     addToLoadedServers({
         id: serverId,
         name: serverName,
@@ -104,13 +120,15 @@ $("#serverForm").on("submit", function(event) {
 });
 
 // Add a new 'saved guild' based on the info provided
-async function addServer(serverName, serverId, serverIconHash) {
+async function registerNewServer(serverName, serverId, serverIconHash) {
     var formData = new FormData();
     formData.append("name", serverName);
     formData.append("guild_id", serverId);
     formData.append("icon", serverIconHash);
 
-    try { response = await newSavedGuild(serverId, ServerName, serverIconHash); }
+    alert(JSON.stringify(formData, null, 4))
+
+    try { response = await newSavedGuild(formData); }
     catch (err) { alert(err) }
 }
 

apps/templates/home/includes/servermodal.html

@@ -9,7 +9,18 @@
                     </h5>
                 </div>
                 <div class="modal-body">
-                    <select name="serverOptions" id="serverOptions" class="select-2" data-dropdownparent="#serverForm .modal"></select>
+                    <div class="peers">
+                        <div class="peer-greed">
+                            <select name="serverOptions" id="serverOptions" class="select-2" data-dropdownparent="#serverForm .modal">
+                                <option value="">-- Select a Server --</option>
+                            </select>
+                        </div>
+                        <div class="peer">
+                            <button type="button" id="serverOptionsRefreshBtn" class="btn btn-secondary ms-2">
+                                <i class="bi bi-arrow-clockwise d-block"></i>
+                            </button>
+                        </div>
+                    </div>
                 </div>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn-primary">Submit</button>