invite bot warning & back button

apps/static/js/home/servers.js

@@ -1,3 +1,6 @@
+
+// #region Loaded Servers
+
 var loadedServers = {};
 
 // Returns the currently active server, or null if none are active.
@@ -44,9 +47,21 @@ function removeFromLoadedServers(serverPrimaryKey) {
     delete loadedServers[serverPrimaryKey];
     removeServerTemplate(serverPrimaryKey);
 
+    $("#backToSelectServer").click();
+}
+
+// #endregion
+
+// #region Server Back Btn
+
+$("#backToSelectServer").on("click", function() {
     $("#noSelectedServer").show();
     $("#selectedServerContainer").hide();
-}
+});
+
+// #endregion
+
+// #region Server Modal
 
 $("#serverOptionsRefreshBtn").on("click", async function() {
     await loadServerOptions();
@@ -94,6 +109,10 @@ async function loadServerOptions() {
 
 }
 
+// #endregion
+
+// #region Server Sidebar
+
 // Load any existing 'saved guilds' from the database
 async function loadSavedGuilds() {
     try {
@@ -144,6 +163,10 @@ function newServerModal() {
     $("#serverFormModal").modal("show");
 }
 
+// #endregion
+
+// #region New Server
+
 // Submit 'Add Server' Form
 $("#serverForm").on("submit", async function(event) {
     event.preventDefault();
@@ -186,6 +209,10 @@ async function registerNewServer(serverName, serverGuildId, serverIconHash, serv
     return response.id;
 }
 
+// #endregion
+
+// #region Select Server
+
 function selectServer(primaryKey) {
     var server = loadedServers[primaryKey];
     
@@ -212,6 +239,10 @@ function selectServer(primaryKey) {
     $(document).trigger("selectedServerChange");
 }
 
+// #endregion
+
+// #region Delete Server Btn
+
 $("#deleteSelectedServerBtn").on("click", async function() {
     var activeServer = getCurrentlyActiveServer();
 
@@ -231,4 +262,38 @@ $("#deleteSelectedServerBtn").on("click", async function() {
         alert(JSON.stringify(error, null, 4))
     }
 
-});
+});
+
+// #endregion
+
+$(document).on("selectedServerChange", function() {
+    resolveServerStrings();
+    $("#serverJoinAlert").hide();
+})
+
+// #region Resolve Strings
+
+function resolveServerStrings() {
+    const server = getCurrentlyActiveServer();
+
+    // Server names
+    $(".resolve-to-server-name").text(server.name);
+
+    // Server Guild Ids
+    $(".resolve-to-server-id").text(server.guild_id)
+
+    // Bot Invite links
+    $(".resolve-to-invite-link").attr("href", `https://discord.com/oauth2/authorize
+?client_id=1129345991758336020
+&permissions=2147534848
+&scope=bot+applications.commands
+&guild_id=${server.guild_id}
+&disable_guild_select=true`);
+
+}
+
+$("#backToSelectServer").on("click", function() {
+
+});
+
+// #endregion

apps/static/js/home/subscriptions.js

@@ -371,19 +371,14 @@ async function loadSubscriptions(guildId) {
 // #region Server Change Event Handler
 
 $(document).on("selectedServerChange", async function() {
+    let server = getCurrentlyActiveServer();
+        guildId = server.guild_id;
 
-    // Hide alerts
+    $("#subEmbedColour .colour-reset").attr("data-defaultcolour", "#" + server.default_embed_colour);
-    $("#serverJoinAlert").attr("style", "display: none !important");
 
-    updateBotInviteLink();
+    await loadSubscriptions(guildId);
-
+    await loadChannelOptions(guildId);
-    const activeServer = getCurrentlyActiveServer();
+    await loadFilterOptions(guildId);
-
-    $("#subEmbedColour .colour-reset").attr("data-defaultcolour", "#" + activeServer.default_embed_colour);
-
-    await loadSubscriptions(activeServer.guild_id);
-    await loadChannelOptions(activeServer.guild_id);
-    await loadFilterOptions(activeServer.guild_id);
     await loadMutatorOptions();
 })
 
@@ -479,7 +474,7 @@ async function loadChannelOptions(guildId) {
             // Also check that the user hasn't changed the currently active guild, otherwise
             // the alert will show under the wrong server.
             if (getCurrentlyActiveServer().guild_id === guildId)
-                showServerJoinAlert();
+                $("#serverJoinAlert").show();
 
             const guildName = getServerFromSnowflake(guildId).name;
 
@@ -587,29 +582,3 @@ async function loadFilterOptions(guildId) {
 }
 
 // #endregion
-
-
-// #region Bot Not in Server Alert
-function showServerJoinAlert() {
-    const guildId = getCurrentlyActiveServer().guild_id;
-    const inviteUrl = `https://discord.com/oauth2/authorize
-?client_id=1129345991758336020
-&permissions=2147534848&scope=bot+applications.commands
-&guild_id=${guildId}
-&disable_guild_select=true`
-
-    $("#serverJoinAlert a.alert-link").attr("href", inviteUrl);
-    $("#serverJoinAlert").show();
-}
-// #endregion
-
-function updateBotInviteLink() {
-    const guildId = getCurrentlyActiveServer().guild_id;
-    const inviteUrl = `https://discord.com/oauth2/authorize
-?client_id=1129345991758336020
-&permissions=2147534848&scope=bot+applications.commands
-&guild_id=${guildId}
-&disable_guild_select=true`
-
-    $("#invitePyrssToServerBtn").attr("href", inviteUrl);
-}

apps/templates/home/index.html

@@ -45,29 +45,29 @@
                     <div class="px-3 py-4 d-flex justify-content-start align-items-center">
                         <img alt="Selected Server Icon" class="rounded-3 selected-server-icon">
                         <div class="ms-3" style="min-width: 0">
-                            <h3 class="mb-0 selected-server-name text-truncate"></h3>
+                            <h3 class="mb-0 resolve-to-server-name text-truncate"></h3>
-                            <h5 class="mb-0 selected-server-id text-truncate text-body-secondary"></h5>
+                            <h5 class="mb-0 resolve-to-server-id text-truncate text-body-secondary"></h5>
                         </div>
                         <div class="ms-auto">
-                            <a href="" id="invitePyrssToServerBtn" class="btn btn-outline-info rounded-1" target="_blank" data-bs-toggle="tooltip" data-bs-title="Invite @PYRSS Bot">
+                            <button type="button" id="deleteSelectedServerBtn" class="btn btn-outline-danger rounded-1 ms-3" data-bs-toggle="tooltip" data-bs-title="Close this server">
-                                <i class="bi bi-envelope"></i>
-                            </a>
-                            <button type="button" id="deleteSelectedServerBtn" class="btn btn-outline-danger rounded-1 ms-3">
                                 <i class="bi bi-x-lg"></i>
                             </button>
+                            <button type="button" id="backToSelectServer" class="btn btn-outline-secondary rounded-1 ms-3" data-bs-toggle="tooltip" data-bs-title="Go back">
+                                <i class="bi bi-box-arrow-right"></i>
+                            </button>
                         </div>
                     </div>
                 </div>
 
-                <div class="col-12 m-0">
+                <div id="serverJoinAlert" class="col-12 m-0">
-                    <div id="serverJoinAlert" class="alert alert-warning alert-dismissable fade show mt-4 mx-2 d-flex align-items-center" role="alert" style="display: none !important">
+                    <div class="px-3 mt-4 mx-2 alert alert-warning fade show rounded-1 d-flex align-items-center">
-                        <i class="bi bi-warning"></i>
+                        <div class="me-4">
-                        <span>
                             <strong>Warning:</strong>
-                            The Bot isn't a member of this server, please <a href="" class="alert-link" target="_blank">invite the bot</a> to use it.
+                            The Bot isn't a member of
-                        </span>
+                            <span class="resolve-to-server-name"></span>,
-
+                            features here will not function properly, please add the bot before proceeding.
-                        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <a class="ms-auto btn btn-warning rounded-1 text-nowrap resolve-to-invite-link">Add PYRSS</a>
                     </div>
                 </div>