update console components

et-nik · May 25, 2024 · 12d0bde · 12d0bde
1 parent 1149df1
commit 12d0bde
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/resources/assets/js/components/rcon/RconConsole.vue b/resources/assets/js/components/rcon/RconConsole.vue
@@ -3,14 +3,20 @@
       <div class="coding inverse-toggle px-5 pt-4 shadow-lg text-stone-100 text-sm font-mono subpixel-antialiased
               bg-stone-800  pb-6 pt-4 rounded-lg leading-normal overflow-hidden">
         <div ref="consoleRef" class="whitespace-pre-wrap mt-4 flex h-[40vh] overflow-y-scroll overscroll-contain">
-          {{ output }}
+          <div v-if="loading" class="flex w-full items-center justify-center">
+            <Loading></Loading>
+          </div>
+          <div v-else>
+            {{ output }}
+          </div>
         </div>
       </div>
 
         <div class="grid grid-cols-12 gap-4 mt-2">
           <NInput
               v-model:value="inputText"
               v-on:keyup.enter="sendCommand"
+              :disabled="loading"
               class="col-span-11"
               type="text"
               placeholder=""
@@ -31,25 +37,30 @@
     } from "naive-ui";
     import GButton from "../GButton.vue";
     import {errorNotification} from "../../parts/dialogs";
+    import Loading from "../Loading.vue";
 
     export default {
         name: "RconConsole",
-      components: {GButton},
+        components: {Loading, GButton},
         props: {
             serverId: Number
         },
         data: function () {
             return {
                 inputText: null,
+                loading: false,
             };
         },
         methods: {
             async sendCommand() {
+                this.loading = true;
                 await this.$store.dispatch('rconConsole/sendCommand', this.inputText).then(() => {
                     this.inputText = '';
                 }).catch((error) => {
                     errorNotification(error);
                     console.log(error);
+                }).finally(() => {
+                    this.loading = false;
                 });
             },
         },

diff --git a/resources/assets/js/views/servertabs/ServerConsole.vue b/resources/assets/js/views/servertabs/ServerConsole.vue
@@ -26,7 +26,7 @@
                     v-model="inputText"
                     type="text"
                     ref="inputRef"
-                    class="terminal-input m-0 p-0 inline w-full"
+                    class="terminal-input inline md:w-[40vw] lg:w-[50vw]"
                     :placeholder="trans('servers.enter_command') +' ...'"
                 >
               </div>