fix(static): Minor fixes to html and js

TaserudConsulting · Jun 29, 2024 · 37b1c53 · 37b1c53
1 parent b1b7ab4
commit 37b1c53
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/static/index.html b/static/index.html
@@ -13,7 +13,7 @@
                 <nav id="nav">
                     <h1 @click="selectedServer = null">goprocmgr</h1>
                     <ul class="server-list">
-                        <template x-for="server in serverList">
+                        <template x-for="server in serverList" :key="server.name">
                             <li :class="selectedServer === server.name ? 'server-item selected' : 'server-item'" @click="selectedServer = server.name">
                                 <template x-if="server.is_running">
                                     <a :href="`http://${window.location.hostname}:${server.port}`" target="_blank" x-text="server.name"></a>
@@ -40,7 +40,7 @@ <h1 @click="selectedServer = null">goprocmgr</h1>
                     <div x-show="selectedServer && !getServer(selectedServer)?.is_running" id="frontpage" x-text="'Server &ldquo;' + selectedServer + '&rdquo; is currently not started :&rpar;'"></div>
                     <div x-show="selectedServer && getServer(selectedServer)?.is_running">
                         <ul id="logs-wrapper">
-                            <template x-for="line in serverLogs.reverse()">
+                            <template x-for="line in serverLogs.slice().reverse()" :key="line.timestamp">
                                 <li :class="{ 'stdout': line.output === 'stdout', 'stderr': line.output === 'stderr' }">
                                     <span x-text="formatTimestamp(line.timestamp)" class="timestamp"></span> |
                                     <span x-text="line.message" class="message"></span>

diff --git a/static/script.js b/static/script.js
@@ -7,10 +7,11 @@ document.addEventListener('alpine:init', () => {
         serverLogs: [],
 
         // The selected server, this is used to show the logs for a specific server.
-        selectedServer: localStorage.getItem('selectedServer') === 'null' ? null : localStorage.getItem('selectedServer'),
+        selectedServer: localStorage.getItem('selectedServer') === 'null' ? null : localStorage.getItem('selectedServer') || null,
 
         // The key event, this is used to listen for key events and trigger actions.
         keyEvent: new KeyboardEvent("keydown"),
+        keyEventHandled: false,
 
         // Show the keybinds, this is used to show the keybinds on the page.
         showKeybinds: false,
@@ -41,7 +42,7 @@ document.addEventListener('alpine:init', () => {
         // Setup the WebSocket connection to get data from the server.
         setupWebSocket() {
             // Create a new WebSocket connection to the server.
-            this.ws = new WebSocket('ws://' + window.location.host + '/api/ws')
+            this.ws = new WebSocket(`ws://${window.location.host}/api/ws`)
 
             // On open, subscribe to the currently selected server.
             this.ws.onopen = () => {
@@ -109,12 +110,18 @@ document.addEventListener('alpine:init', () => {
 
         // Handle key events for keyboard shortcuts
         handleKeyEvents() {
+            if (this.keyEventHandled) return;
+            this.keyEventHandled = true;
+
+            setTimeout(() => {
+                this.keyEventHandled = false;
+            }, 100);
+
             if (this.keyEvent.key === 'Escape') {
                 this.selectedServer = null
             }
 
             if (this.keyEvent.key === 't' && this.selectedServer) {
-                this.keyEvent = new KeyboardEvent("keydown")
                 this.toggleServer(this.selectedServer)
             }