Add logic to load server data into vuex for the request when visiting a server page

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -13,7 +13,7 @@
             </div>
             <div v-if="this.loading" class="my-4 animate fadein">
                 <div class="text-center h-16">
-                    <span class="spinner spinner-xl"></span>
+                    <span class="spinner spinner-xl spinner-thick blue"></span>
                 </div>
             </div>
             <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>

resources/assets/scripts/components/server/Server.vue

@@ -1,12 +1,17 @@
 <template>
     <div>
         <navigation></navigation>
-        <div class="m-6 flex flex-no-shrink rounded">
+        <div v-if="loadingServerData">
+            <div class="mt-6 h-16">
+                <div class="spinner spinner-xl spinner-thick blue"></div>
+            </div>
+        </div>
+        <div class="m-6 flex flex-no-shrink rounded animate fadein" v-else>
             <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
                 <div class="mr-6">
                     <div class="p-6 text-center bg-white border rounded">
-                        <h3 class="mb-2 text-blue font-medium">Pterodactylcraft</h3>
+                        <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
-                        <span class="text-grey-dark text-sm">Minecraft / Vanilla</span>
+                        <span class="text-grey-dark text-sm">{{server.node}}</span>
                     </div>
                     <div class="mt-6 p-4 text-center bg-white border rounded">
                         <button class="btn btn-red uppercase text-xs px-4 py-2">Stop</button>
@@ -19,30 +24,8 @@
                         <progress-bar title="Disk" percent="97" class="mt-4"></progress-bar>
                     </div>
                 </div>
-                <div class="pt-6 px-6 pb-4 text-center">
-                    <!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
-                        <!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
-                            <!--<span class="bg-grey-lighter">CPU - 2 Cores</span>-->
-                            <!--<div class="rounded border-grey-light border mt-3 h-4">-->
-                                <!--<div class="rounded bg-blue h-4 w-1/6"></div>-->
-                            <!--</div>-->
-                        <!--</div>-->
-                        <!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
-                            <!--<span class="bg-grey-lighter">RAM - 4 GB</span>-->
-                            <!--<div class="rounded border-grey-light border mt-3 h-4">-->
-                                <!--<div class="rounded bg-blue h-4 w-2/3"></div>-->
-                            <!--</div>-->
-                        <!--</div>-->
-                        <!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
-                            <!--<span class="bg-grey-lighter">Disk - 20 GB</span>-->
-                            <!--<div class="rounded border-grey-light border mt-3 h-4">-->
-                                <!--<div class="rounded bg-blue h-4 w-1/3"></div>-->
-                            <!--</div>-->
-                        <!--</div>-->
-                    <!--</div>-->
-                </div>
                 <div class="sidenav">
-                    <router-link :to="{ name: 'server', params: { serverID: this.$route.params.serverID } }">
+                    <router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
                         <terminal-icon style="height: 1em;"></terminal-icon>
                         Console
                     </router-link>
@@ -72,25 +55,50 @@
                     </router-link>
                 </div>
             </div>
-                <div class="main bg-white p-6 rounded border border-grey-lighter flex-grow">
+            <div class="main bg-white p-6 rounded border border-grey-lighter flex-grow">
-                    <!--h1.text-blue.mb-6 Server Console-->
+                <router-view></router-view>
-                    <router-view></router-view>
-                </div>
             </div>
+        </div>
     </div>
 </template>
 
 <script>
-    import { TerminalIcon, OctagonIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
+    import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
     import ServerConsole from "./ServerConsole";
     import Navigation from '../core/Navigation';
     import ProgressBar from './components/ProgressBar';
+    import {mapState} from 'vuex';
 
     export default {
         components: {
-            ProgressBar,
+            ProgressBar, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
-            OctagonIcon, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
             CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
+        },
+
+        computed: {
+            ...mapState('server', ['server']),
+        },
+
+        mounted: function () {
+            this.loadServer();
+        },
+
+        data: function () {
+            return {
+                loadingServerData: true,
+            };
+        },
+
+        methods: {
+            loadServer: function () {
+                this.$store.dispatch('server/getServer', {server: this.$route.params.id})
+                    .then(() => {
+                        this.loadingServerData = false;
+                    })
+                    .catch(err => {
+                        console.error(err);
+                    });
+            },
         }
     }
 </script>

resources/assets/scripts/models/loadingStates.js

@@ -1,6 +0,0 @@
-const LoadingState = {
-    LOADING: 'loading',
-    DONE: 'done',
-    ERROR: 'error',
-};
-export default LoadingState;

resources/assets/scripts/store/index.js

@@ -2,21 +2,23 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import auth from './modules/auth';
 import dashboard from './modules/dashboard';
+import server from './modules/server';
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
     strict: process.env.NODE_ENV !== 'production',
-    modules: { auth, dashboard },
+    modules: {auth, dashboard, server},
 });
 
 if (module.hot) {
     module.hot.accept(['./modules/auth'], () => {
         const newAuthModule = require('./modules/auth').default;
         const newDashboardModule = require('./modules/dashboard').default;
+        const newServerModule = require('./modules/server').default;
 
         store.hotUpdate({
-            modules: { newAuthModule, newDashboardModule },
+            modules: {newAuthModule, newDashboardModule, newServerModule},
         });
     });
 }

resources/assets/scripts/store/modules/server.js

@@ -1,64 +1,43 @@
-import LoadingState from '../../models/loadingStates';
 import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
+import Server from '../../models/server';
 
 export default {
+    namespaced: true,
     state: {
-        servers: {},
+        server: {},
-        serverIDs: [],
-        currentServerID: '',
-        serverLoadingState: '',
-    },
-    mutations: {
-        setCurrentServer (state, serverID) {
-            state.currentServerID = serverID;
-        },
-        setServers (state, servers) {
-            servers.forEach(s => {
-                state.servers[s.identifier] = s;
-                if (!!state.serverIDs.indexOf(s.identifier)) {
-                    state.serverIDs.push(s.identifier)
-                }
-            });
-        },
-        removeServer (state, serverID) {
-            delete state.servers[serverID];
-            state.serverIDs.remove(serverID);
-        },
-        setServerLoadingState (state, s) {
-            state.serverLoadingState = s;
-        }
-    },
-    actions: {
-        loadServers({ commit }) {
-            commit('setServerLoadingState', LoadingState.LOADING);
-            window.axios.get(route('api.client.index'))
-                .then(response => {
-                    commit('setServers', response.data.data.map(o => o.attributes));
-                    commit('setServerLoadingState', LoadingState.DONE);
-                })
-                .catch(err => {
-                    console.error(err);
-                    const response = err.response;
-                    if (response.data && _.isObject(response.data.errors)) {
-                        response.data.errors.forEach(function (error) {
-                            this.error(error.detail);
-                        });
-                    }
-                })
-                .finally(() => {
-                    this.loading = false;
-                });
-        },
     },
     getters: {
-        currentServer (state) {
+    },
-            return state.servers[state.route.params.serverID];
+    actions: {
+        /**
+         *
+         * @param commit
+         * @param {String} server
+         * @returns {Promise<any>}
+         */
+        getServer: ({commit}, {server}) => {
+            return new Promise((resolve, reject) => {
+                window.axios.get(route('api.client.servers.view', { server }))
+                    .then(response => {
+                        // If there is a 302 redirect or some other odd behavior (basically, response that isnt
+                        // in JSON format) throw an error and don't try to continue with the login.
+                        if (!(response.data instanceof Object)) {
+                            return reject(new Error('An error was encountered while processing this request.'));
+                        }
+
+                        if (response.data.object === 'server' && response.data.attributes) {
+                            commit('SERVER_DATA', response.data.attributes)
+                        }
+
+                        return resolve();
+                    })
+                    .catch(reject);
+            });
         },
-        isServersLoading (state) {
+    },
-            return state.serverLoadingState === LoadingState.LOADING;
+    mutations: {
-        },
+        SERVER_DATA: function (state, data) {
-        serverList (state) {
+            state.server = data;
-            return state.serverIDs.map(k => state.servers[k]);
         }
-    }
+    },
-};
+}

webpack.config.js

@@ -68,7 +68,7 @@ const productionPlugins = [
 
 module.exports = {
     mode: process.env.NODE_ENV,
-    devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
+    devtool: process.env.NODE_ENV === 'production' ? false : 'eval-source-map',
     performance: {
         hints: false,
     },