forked from Alex/Pterodactyl-Panel
Add logic to load server data into vuex for the request when visiting a server page
This commit is contained in:
Dane Everitt
parent
a42280dd84
commit
2ab66ba8c8
@ -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>
|
||||
|
||||
@ -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>
|
||||
<span class="text-grey-dark text-sm">Minecraft / Vanilla</span>
|
||||
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
|
||||
<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">
|
||||
<!--h1.text-blue.mb-6 Server Console-->
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div class="main bg-white p-6 rounded border border-grey-lighter flex-grow">
|
||||
<router-view></router-view>
|
||||
</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,
|
||||
OctagonIcon, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
|
||||
ProgressBar, 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>
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
const LoadingState = {
|
||||
LOADING: 'loading',
|
||||
DONE: 'done',
|
||||
ERROR: 'error',
|
||||
};
|
||||
export default LoadingState;
|
||||
@ -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},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -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: {},
|
||||
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;
|
||||
});
|
||||
},
|
||||
server: {},
|
||||
},
|
||||
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;
|
||||
},
|
||||
serverList (state) {
|
||||
return state.serverIDs.map(k => state.servers[k]);
|
||||
},
|
||||
mutations: {
|
||||
SERVER_DATA: function (state, data) {
|
||||
state.server = data;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
@ -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,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user