Show game list for GameDig monitor

src/pages/EditMonitor.vue

@@ -114,7 +114,11 @@
                             <!-- GameDig only -->
                             <div v-if="monitor.type === 'gamedig'" class="my-3">
                                 <label for="game" class="form-label"> {{ $t("Game") }} </label>
-                                <input id="game" v-model="monitor.game" type="text" class="form-control" required>
+                                <select id="game" v-model="monitor.game" class="form-select" required>
+                                    <option v-for="game in gameList" :key="game.keys[0]" :value="game.keys[0]">
+                                        {{ game.pretty }}
+                                    </option>
+                                </select>
                             </div>
 
                             <!-- Hostname -->
@@ -636,7 +640,8 @@ export default {
             acceptedStatusCodeOptions: [],
             dnsresolvetypeOptions: [],
             ipOrHostnameRegexPattern: hostNameRegexPattern(),
-            mqttIpOrHostnameRegexPattern: hostNameRegexPattern(true)
+            mqttIpOrHostnameRegexPattern: hostNameRegexPattern(true),
+            gameList: null,
         };
     },
 
@@ -713,7 +718,18 @@ message HealthCheckResponse {
 {
     "HeaderName": "HeaderValue"
 }` ]);
-        }
+        },
+
+        currentGameObject() {
+            if (this.gameList) {
+                for (let game of this.gameList) {
+                    if (game.keys[0] === this.monitor.game) {
+                        return game;
+                    }
+                }
+            }
+            return null;
+        },
 
     },
     watch: {
@@ -757,6 +773,24 @@ message HealthCheckResponse {
                     this.monitor.port = undefined;
                 }
             }
+
+            // Get the game list from server
+            if (this.monitor.type === "gamedig") {
+                this.$root.getSocket().emit("getGameList", (res) => {
+                    if (res.ok) {
+                        this.gameList = res.gameList;
+                    } else {
+                        toast.error(res.msg);
+                    }
+                });
+            }
+        },
+
+        currentGameObject(newGameObject, previousGameObject) {
+            if (!this.monitor.port || (previousGameObject && previousGameObject.options.port === this.monitor.port)) {
+                this.monitor.port = newGameObject.options.port;
+            }
+            this.monitor.game = newGameObject.keys[0];
         }
 
     },
@@ -947,7 +981,7 @@ message HealthCheckResponse {
         // Enable it if the Docker Host is added in EditMonitor.vue
         addedDockerHost(id) {
             this.monitor.docker_host = id;
-        }
+        },
     },
 };
 </script>