StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'feature/vuejs-serverlist' into feature/vue-serverview

Browse source
This commit is contained in:
Jakob Schrettenbrunner 2018-05-31 18:26:07 +02:00
commit c58ef1f8a8
7 changed files with 117 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

42
resources/assets/scripts/components/dashboard/Dashboard.vue
View file

@ -1,13 +1,21 @@
<template>
<div>
<flash container="mt-4"/>
<div class="server-search animate fadein">
<input type="text" placeholder="search for servers..."
<input type="text"
:placeholder="$t('dashboard.index.search')"
@input="onChange"
v-model="search"
ref="search"
/>
</div>
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start"><div class="server-box" :key="index" v-for="(server, index) in servers.models">
<div v-if="this.loading" class="my-4 animate fadein">
<div class="text-center h-16">
<span class="spinner spinner-xl"></span>
</div>
</div>
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
<div class="server-box animate fadein" :key="index" v-for="(server, index) in servers.models">
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
<div class="float-right">
<div class="indicator"></div>
@ -19,10 +27,10 @@
</div>
<div class="mb-0 flex">
<div class="usage">
<div class="indicator-title">CPU</div>
<div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
</div>
<div class="mb-4">
<div class="text-black font-bold text-xl">{{ server.name }}</div>
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</div>
</div>
<div class="mb-0 flex">
<div class="usage">
@ -58,11 +66,14 @@
<script>
import { ServerCollection } from '../../models/server';
import _ from 'lodash';
import Flash from '../Flash';
export default {
name: 'dashboard',
components: { Flash },
data: function () {
return {
loading: true,
search: '',
servers: new ServerCollection,
}
@ -79,17 +90,34 @@
* @param {string} query
*/
loadServers: function (query = '') {
this.loading = true;
window.axios.get(this.route('api.client.index'), {
params: { query },
})
.finally(() => {
this.clearFlashes();
})
.then(response => {
this.servers = new ServerCollection;
response.data.data.forEach(obj => {
this.servers.add(obj.attributes);
});
if (this.servers.models.length === 0) {
this.info(this.$t('dashboard.index.no_matches'));
}
})
.catch(error => {
console.error(error);
.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;
});
},