spa fixes

et-nik · May 25, 2024 · 7fa607a · 7fa607a
1 parent c8e98ba
commit 7fa607a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 67 deletions.
diff --git a/resources/assets/js/components/servers/DsIpSelector.vue b/resources/assets/js/components/servers/DsIpSelector.vue
@@ -1,11 +1,11 @@
 <template>
     <div>
-        <input type="hidden" :name="dsIdFieldName" v-model="selectedDs" />
-        <input type="hidden" :name="serverIpFieldName" v-model="selectedIp" />
+        <input type="hidden" :name="dsIdFieldName" v-model="nodeIdModel" />
+        <input type="hidden" :name="serverIpFieldName" v-model="ipModel" />
 
         <n-form-item :path="nodeIdPath">
           <n-select
-              v-model:value="selectedDs"
+              v-model:value="nodeIdModel"
               :disabled="nodeSelectDisabled"
               :options="nodesOptions"
               :placeholder="trans('labels.ds_id')"
@@ -14,8 +14,8 @@
 
         <n-form-item :path="ipPath" :show-label="false">
           <n-select
-              v-model:value="selectedIp"
-              :disabled="!selectedDs"
+              v-model:value="ipModel"
+              :disabled="!nodeIdModel"
               :options="ipListOptions"
               :placeholder="trans('labels.ip')"
           />
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-  import { computed, watch, onMounted } from 'vue'
+  import { computed, watch } from 'vue'
   import { useStore } from 'vuex'
   import {NFormItem} from "naive-ui"
 
@@ -61,45 +61,18 @@
     return ipList.value.map((ip) => ({ value: ip, label: ip }));
   });
 
-  const selectedDs = computed({
-    get: () => {
-      if (
-          !store.state.dedicatedServers.dsId ||
-          store.state.dedicatedServers.dsId === ""
-      ) {
-        return null;
-      }
-
-      return store.state.dedicatedServers.dsId
-    },
-    set: (dsId) => store.dispatch('dedicatedServers/setDsId', dsId)
-  });
-
-  const selectedIp = computed({
-    get: () => store.state.servers.ip,
-    set: (ip) => store.dispatch('servers/setIp', ip)
-  });
-
   watch(ipList, (list) => {
-    if (list.length >= 1 && !list.includes(selectedIp.value)) {
-      selectedIp.value = list[0];
+    if (list.length >= 1 && !list.includes(ipModel.value)) {
+      ipModel.value = list[0];
     }
   });
 
-  watch(selectedDs, (val) => {
-    nodeIdModel.value = val;
-    store.dispatch('dedicatedServers/fetchIpList');
-  });
-
-  watch(selectedIp, (val) => {
-    ipModel.value = val;
-  });
-
   watch(nodeIdModel, (val) => {
-    selectedDs.value = val;
+    store.dispatch('dedicatedServers/setDsId', nodeIdModel.value);
+    store.dispatch('dedicatedServers/fetchIpList');
   });
 
   watch(ipModel, (val) => {
-    selectedIp.value = val;
+    store.dispatch('servers/setIp', ipModel.value)
   });
 </script>
diff --git a/resources/assets/js/components/servers/GameModSelector.vue b/resources/assets/js/components/servers/GameModSelector.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-  import { computed, watch, defineModel } from 'vue';
+  import { computed, watch, defineModel, onUnmounted } from 'vue';
   import { useStore } from 'vuex';
   import {trans} from "../../i18n/i18n";
   import {NFormItem} from "naive-ui";
@@ -51,6 +51,11 @@
 
   const gameModsList = computed(() => store.state.gameMods.gameModsList);
 
+  onUnmounted(() => {
+    store.dispatch('gameMods/setGameMod', null)
+    store.dispatch('games/setGameCode', null)
+  });
+
   const renderGameLabel = (option) => {
     return [
       h(GameIcon, {game: option.value, class: 'mr-2'}),
@@ -67,9 +72,14 @@
   });
 
   watch(gameModel, () => {
+    store.dispatch('games/setGameCode', gameModel.value)
     store.dispatch('gameMods/fetchGameModsList', gameModel.value);
   });
 
+  watch(gameModModel, () => {
+    store.dispatch('gameMods/setGameMod', gameModModel.value)
+  });
+
   watch(gameModsList, (val) => {
     let mod = null
     if (val.length > 0) {

diff --git a/resources/assets/js/components/servers/SmartPortSelector.vue b/resources/assets/js/components/servers/SmartPortSelector.vue
@@ -1,11 +1,11 @@
 <template>
     <div>
-        <n-form-item :label="trans('labels.server_port')" :path="serverPortPath">
-          <input class="block appearance-none w-full py-1 px-2 mb-1 leading-normal bg-white text-gray-800 border border-gray-200 rounded" name="server_port" type="number" id="server_port" min="1024" max="65535" v-model="serverPort">
-          <template #feedback>
-            <span v-if="serverPortWarning" class="help-block"><strong>{{ serverPortWarning }}</strong></span>
-          </template>
-        </n-form-item>
+      <n-form-item :label="trans('labels.server_port')" :path="serverPortPath">
+        <input class="block appearance-none w-full py-1 px-2 mb-1 leading-normal bg-white text-gray-800 border border-gray-200 rounded" name="server_port" type="number" id="server_port" min="1024" max="65535" v-model="serverPort">
+        <template #feedback>
+          <span v-if="serverPortWarning" class="help-block"><strong>{{ serverPortWarning }}</strong></span>
+        </template>
+      </n-form-item>
 
       <n-form-item :label="trans('labels.query_port')" :path="queryPortPath">
         <input class="block appearance-none w-full py-1 px-2 mb-1 leading-normal bg-white text-gray-800 border border-gray-200 rounded" name="query_port" type="number" id="server_port" min="1024" max="65535" v-model="queryPort">
@@ -80,30 +80,18 @@ const rconPort = defineModel('rconPort')
 
 const serverPortWarning = ref('');
 
-const selectedIp = computed({
-  get() {
-    return store.state.servers.ip || null;
-  },
-  set(value) {
-    store.dispatch('servers/setIp', value);
-  },
-});
+const selectedIp = computed(() => store.state.servers.ip);
 
 const dsId = computed(() => store.state.dedicatedServers.dsId);
 const busyPorts = computed(() => store.state.dedicatedServers.busyPorts);
 const gameCode = computed(() => store.state.games.gameCode);
 
-function initPorts() {
-  if (!props.initialServerPort) {
-    setPorts();
-  }
-}
-
 function setPorts() {
   if (props.initialServerIp === selectedIp.value) {
     serverPort.value = parseInt(props.initialServerPort) || 27015;
     queryPort.value = parseInt(props.initialQueryPort) || 27015;
     rconPort.value = parseInt(props.initialRconPort) || 27015;
+    return
   }
 
   const gameCode = getExistsPortGameCode();
@@ -136,6 +124,10 @@ function isBusy(serverIp, serverPort) {
 }
 
 function checkPorts() {
+  if (selectedIp.value === props.initialServerIp && serverPort.value === props.initialServerPort) {
+    serverPortWarning.value = '';
+  }
+
   if (isBusy(selectedIp.value, serverPort.value)) {
     serverPortWarning.value = trans('validation.unique', { attribute: trans('labels.server_port') });
   } else {
@@ -144,15 +136,11 @@ function checkPorts() {
 }
 
 onMounted(() => {
-  store.dispatch('dedicatedServers/fetchBusyPorts', initPorts);
+  store.dispatch('dedicatedServers/fetchBusyPorts', checkPorts);
 });
 
 watch(dsId, () => {
-  store.dispatch('dedicatedServers/fetchBusyPorts', setPorts);
-});
-
-watch(gameCode, () => {
-  setPorts();
+  store.dispatch('dedicatedServers/fetchBusyPorts', checkPorts);
 });
 
 watch(serverPort, (newVal, oldVal) => {
@@ -170,4 +158,16 @@ watch(queryPort, (newVal) => {
   emit('update:queryPort', queryPort.value);
 });
 
+watch(selectedIp, (newIp, oldIp) => {
+  if (oldIp) {
+    setPorts();
+  }
+
+  checkPorts();
+});
+
+watch(gameCode, () => {
+  setPorts();
+});
+
 </script>
diff --git a/resources/assets/js/views/adminviews/AdminServersCreate.vue b/resources/assets/js/views/adminviews/AdminServersCreate.vue
@@ -252,7 +252,7 @@ const createServer = () => {
     game_mod_id: serverForm.value.gameMod,
     install: serverForm.value.install,
     rcon: serverForm.value.rcon,
-    user: serverForm.value.user,
+    su_user: serverForm.value.user,
     ds_id: serverForm.value.nodeId,
     server_ip: serverForm.value.ip,
     server_port: serverForm.value.serverPort,

diff --git a/resources/assets/js/views/adminviews/AdminServersEdit.vue b/resources/assets/js/views/adminviews/AdminServersEdit.vue
@@ -389,7 +389,6 @@ const saveServer = () => {
     blocked: serverForm.value.blocked,
     installed: serverForm.value.status,
     rcon: serverForm.value.rcon,
-    user: serverForm.value.user,
     ds_id: server.value.ds_id,
     server_ip: serverForm.value.ip,
     server_port: serverForm.value.serverPort,