Skip to content

Commit 2ab66ba

Browse files
DaneEverittDaneEveritt
committed
Add logic to load server data into vuex for the request when visiting a server page
1 parent a42280d commit 2ab66ba

File tree

6 files changed

+80
-97
lines changed

6 files changed

+80
-97
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</div>
1414
<div v-if="this.loading" class="my-4 animate fadein">
1515
<div class="text-center h-16">
16-
<span class="spinner spinner-xl"></span>
16+
<span class="spinner spinner-xl spinner-thick blue"></span>
1717
</div>
1818
</div>
1919
<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‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
<template>
22
<div>
33
<navigation></navigation>
4-
<div class="m-6 flex flex-no-shrink rounded">
4+
<div v-if="loadingServerData">
5+
<div class="mt-6 h-16">
6+
<div class="spinner spinner-xl spinner-thick blue"></div>
7+
</div>
8+
</div>
9+
<div class="m-6 flex flex-no-shrink rounded animate fadein" v-else>
510
<div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
611
<div class="mr-6">
712
<div class="p-6 text-center bg-white border rounded">
8-
<h3 class="mb-2 text-blue font-medium">Pterodactylcraft</h3>
9-
<span class="text-grey-dark text-sm">Minecraft / Vanilla</span>
13+
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
14+
<span class="text-grey-dark text-sm">{{server.node}}</span>
1015
</div>
1116
<div class="mt-6 p-4 text-center bg-white border rounded">
1217
<button class="btn btn-red uppercase text-xs px-4 py-2">Stop</button>
@@ -19,30 +24,8 @@
1924
<progress-bar title="Disk" percent="97" class="mt-4"></progress-bar>
2025
</div>
2126
</div>
22-
<div class="pt-6 px-6 pb-4 text-center">
23-
<!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
24-
<!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
25-
<!--<span class="bg-grey-lighter">CPU - 2 Cores</span>-->
26-
<!--<div class="rounded border-grey-light border mt-3 h-4">-->
27-
<!--<div class="rounded bg-blue h-4 w-1/6"></div>-->
28-
<!--</div>-->
29-
<!--</div>-->
30-
<!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
31-
<!--<span class="bg-grey-lighter">RAM - 4 GB</span>-->
32-
<!--<div class="rounded border-grey-light border mt-3 h-4">-->
33-
<!--<div class="rounded bg-blue h-4 w-2/3"></div>-->
34-
<!--</div>-->
35-
<!--</div>-->
36-
<!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
37-
<!--<span class="bg-grey-lighter">Disk - 20 GB</span>-->
38-
<!--<div class="rounded border-grey-light border mt-3 h-4">-->
39-
<!--<div class="rounded bg-blue h-4 w-1/3"></div>-->
40-
<!--</div>-->
41-
<!--</div>-->
42-
<!--</div>-->
43-
</div>
4427
<div class="sidenav">
45-
<router-link :to="{ name: 'server', params: { serverID: this.$route.params.serverID } }">
28+
<router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
4629
<terminal-icon style="height: 1em;"></terminal-icon>
4730
Console
4831
</router-link>
@@ -72,25 +55,50 @@
7255
</router-link>
7356
</div>
7457
</div>
75-
<div class="main bg-white p-6 rounded border border-grey-lighter flex-grow">
76-
<!--h1.text-blue.mb-6 Server Console-->
77-
<router-view></router-view>
78-
</div>
58+
<div class="main bg-white p-6 rounded border border-grey-lighter flex-grow">
59+
<router-view></router-view>
7960
</div>
61+
</div>
8062
</div>
8163
</template>
8264

8365
<script>
84-
import { TerminalIcon, OctagonIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
66+
import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
8567
import ServerConsole from "./ServerConsole";
8668
import Navigation from '../core/Navigation';
8769
import ProgressBar from './components/ProgressBar';
70+
import {mapState} from 'vuex';
8871
8972
export default {
9073
components: {
91-
ProgressBar,
92-
OctagonIcon, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
74+
ProgressBar, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
9375
CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
76+
},
77+
78+
computed: {
79+
...mapState('server', ['server']),
80+
},
81+
82+
mounted: function () {
83+
this.loadServer();
84+
},
85+
86+
data: function () {
87+
return {
88+
loadingServerData: true,
89+
};
90+
},
91+
92+
methods: {
93+
loadServer: function () {
94+
this.$store.dispatch('server/getServer', {server: this.$route.params.id})
95+
.then(() => {
96+
this.loadingServerData = false;
97+
})
98+
.catch(err => {
99+
console.error(err);
100+
});
101+
},
94102
}
95103
}
96104
</script>

‎resources/assets/scripts/models/loadingStates.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎resources/assets/scripts/store/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,23 @@ import Vue from 'vue';
22
import Vuex from 'vuex';
33
import auth from './modules/auth';
44
import dashboard from './modules/dashboard';
5+
import server from './modules/server';
56

67
Vue.use(Vuex);
78

89
const store = new Vuex.Store({
910
strict: process.env.NODE_ENV !== 'production',
10-
modules: { auth, dashboard },
11+
modules: {auth, dashboard, server},
1112
});
1213

1314
if (module.hot) {
1415
module.hot.accept(['./modules/auth'], () => {
1516
const newAuthModule = require('./modules/auth').default;
1617
const newDashboardModule = require('./modules/dashboard').default;
18+
const newServerModule = require('./modules/server').default;
1719

1820
store.hotUpdate({
19-
modules: { newAuthModule, newDashboardModule },
21+
modules: {newAuthModule, newDashboardModule, newServerModule},
2022
});
2123
});
2224
}

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

Lines changed: 33 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,43 @@
1-
import LoadingState from '../../models/loadingStates';
21
import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
2+
import Server from '../../models/server';
33

44
export default {
5+
namespaced: true,
56
state: {
6-
servers: {},
7-
serverIDs: [],
8-
currentServerID: '',
9-
serverLoadingState: '',
7+
server: {},
108
},
11-
mutations: {
12-
setCurrentServer (state, serverID) {
13-
state.currentServerID = serverID;
14-
},
15-
setServers (state, servers) {
16-
servers.forEach(s => {
17-
state.servers[s.identifier] = s;
18-
if (!!state.serverIDs.indexOf(s.identifier)) {
19-
state.serverIDs.push(s.identifier)
20-
}
21-
});
22-
},
23-
removeServer (state, serverID) {
24-
delete state.servers[serverID];
25-
state.serverIDs.remove(serverID);
26-
},
27-
setServerLoadingState (state, s) {
28-
state.serverLoadingState = s;
29-
}
9+
getters: {
3010
},
3111
actions: {
32-
loadServers({ commit }) {
33-
commit('setServerLoadingState', LoadingState.LOADING);
34-
window.axios.get(route('api.client.index'))
35-
.then(response => {
36-
commit('setServers', response.data.data.map(o => o.attributes));
37-
commit('setServerLoadingState', LoadingState.DONE);
38-
})
39-
.catch(err => {
40-
console.error(err);
41-
const response = err.response;
42-
if (response.data && _.isObject(response.data.errors)) {
43-
response.data.errors.forEach(function (error) {
44-
this.error(error.detail);
45-
});
46-
}
47-
})
48-
.finally(() => {
49-
this.loading = false;
50-
});
12+
/**
13+
*
14+
* @param commit
15+
* @param {String} server
16+
* @returns {Promise<any>}
17+
*/
18+
getServer: ({commit}, {server}) => {
19+
return new Promise((resolve, reject) => {
20+
window.axios.get(route('api.client.servers.view', { server }))
21+
.then(response => {
22+
// If there is a 302 redirect or some other odd behavior (basically, response that isnt
23+
// in JSON format) throw an error and don't try to continue with the login.
24+
if (!(response.data instanceof Object)) {
25+
return reject(new Error('An error was encountered while processing this request.'));
26+
}
27+
28+
if (response.data.object === 'server' && response.data.attributes) {
29+
commit('SERVER_DATA', response.data.attributes)
30+
}
31+
32+
return resolve();
33+
})
34+
.catch(reject);
35+
});
5136
},
5237
},
53-
getters: {
54-
currentServer (state) {
55-
return state.servers[state.route.params.serverID];
56-
},
57-
isServersLoading (state) {
58-
return state.serverLoadingState === LoadingState.LOADING;
59-
},
60-
serverList (state) {
61-
return state.serverIDs.map(k => state.servers[k]);
38+
mutations: {
39+
SERVER_DATA: function (state, data) {
40+
state.server = data;
6241
}
63-
}
64-
};
42+
},
43+
}

‎webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const productionPlugins = [
6868

6969
module.exports = {
7070
mode: process.env.NODE_ENV,
71-
devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
71+
devtool: process.env.NODE_ENV === 'production' ? false : 'eval-source-map',
7272
performance: {
7373
hints: false,
7474
},

0 commit comments

Comments
 (0)