feat(static): Scroll selected server list item into view

TaserudConsulting · Jun 29, 2024 · 850750d · 850750d
1 parent cbf233b
commit 850750d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/static/index.html b/static/index.html
@@ -14,7 +14,7 @@
                     <h1 @click="selectedServer = null">goprocmgr</h1>
                     <ul class="server-list">
                         <template x-for="server in serverList" :key="server.name">
-                            <li :class="selectedServer === server.name ? 'server-item selected' : 'server-item'" @click="selectedServer = server.name">
+                            <li :class="selectedServer === server.name ? 'server-item selected' : 'server-item'" @click="selectedServer = server.name" :data-list-item-server-name="server.name">
                                 <template x-if="server.is_running">
                                     <a :href="`http://${window.location.hostname}:${server.port}`" target="_blank" x-text="server.name"></a>
                                 </template>

diff --git a/static/script.js b/static/script.js
@@ -39,6 +39,7 @@ document.addEventListener('alpine:init', () => {
                 localStorage.setItem('selectedServer', value)
                 this.serverLogs = []
                 this.subscribeToServer(value)
+                this.scrollServerItemIntoViewIfNeeded(value)
             })
 
             // Watch for changes in the serverLogs array
@@ -71,6 +72,11 @@ document.addEventListener('alpine:init', () => {
 
                     // Count servers that has the is_running flag set to true
                     document.title = 'goprocmgr (' + this.serverList.filter(item => item.is_running).length + ')'
+
+                    // Scroll into view.
+                    if (this.selectedServer) {
+                        this.scrollServerItemIntoViewIfNeeded(this.selectedServer)
+                    }
                 } else if (data.server && data.logs) {
                     // Specific server update
                     this.serverLogs = data.logs
@@ -99,12 +105,25 @@ document.addEventListener('alpine:init', () => {
             this.autoScroll = logsWrapper.scrollTop + logsWrapper.clientHeight >= logsWrapper.scrollHeight - 10
         },
 
+        // Scroll to the bottom of the logs
         scrollToBottom() {
             if (this.$refs.logsWrapper) {
                 this.$refs.logsWrapper.scrollTop = this.$refs.logsWrapper.scrollHeight
             }
         },
 
+        // Scroll the server item into view
+        scrollServerItemIntoViewIfNeeded(serverName) {
+            this.$nextTick(() => {
+                // Use querySelector to find the element with the matching data-list-item-server-name attribute
+                const serverItem = document.querySelector(`[data-list-item-server-name="${serverName}"]`);
+
+                if (serverItem) {
+                    serverItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+                }
+            })
+        },
+
         // Subscribe to updates for a specific server
         subscribeToServer(serverName) {
             if (this.ws && this.ws.readyState === WebSocket.OPEN && serverName) {
@@ -161,6 +180,7 @@ document.addEventListener('alpine:init', () => {
 
                 if (nextIndex < this.serverList.length) {
                     this.selectedServer = this.serverList[nextIndex].name
+                    this.scrollServerItemIntoViewIfNeeded(this.selectedServer)
                 }
             }
 
@@ -170,6 +190,7 @@ document.addEventListener('alpine:init', () => {
 
                 if (previousIndex >= 0) {
                     this.selectedServer = this.serverList[previousIndex].name
+                    this.scrollServerItemIntoViewIfNeeded(this.selectedServer)
                 }
             }