misc_pterodactyl-panel/resources/assets/scripts/components/dashboard/Dashboard.vue

118 lines
3.9 KiB
Vue
Raw Normal View History

<template>
<div>
<navigation/>
<div class="container">
<flash container="mt-4"/>
<div class="server-search animate fadein">
<input type="text"
:placeholder="$t('dashboard.index.search')"
@input="onChange"
2018-07-16 00:53:40 +00:00
v-model="searchTerm"
ref="search"
/>
</div>
<div v-if="this.loading" class="my-4 animate fadein">
<div class="text-center h-16">
<span class="spinner spinner-xl spinner-thick blue"></span>
</div>
</div>
<transition-group class="flex flex-wrap justify-center sm:justify-start" v-else>
<server-box
2018-06-06 06:42:34 +00:00
v-for="(server, index) in servers"
:key="index"
:server="server"
/>
</transition-group>
</div>
</div>
</template>
2018-12-30 01:00:50 +00:00
<script lang="ts">
import debounce from 'lodash/debounce';
import Flash from '../Flash';
import ServerBox from './ServerBox';
import Navigation from '../core/Navigation';
2018-07-16 00:53:40 +00:00
import isObject from 'lodash/isObject';
import { mapState } from 'vuex';
export default {
name: 'dashboard',
components: { Navigation, ServerBox, Flash },
data: function () {
return {
2018-06-16 21:11:58 +00:00
backgroundedAt: new Date(),
documentVisible: true,
2018-07-16 00:53:40 +00:00
loading: false,
}
},
/**
2018-07-16 00:53:40 +00:00
* Start loading the servers before the DOM $.el is created. If we already have servers
* stored in vuex shows those and don't fire another API call just to load them again.
*/
created: function () {
2018-07-16 00:53:40 +00:00
if (this.servers.length === 0) {
this.loadServers();
}
},
/**
2018-07-16 01:11:29 +00:00
* Once the page is mounted set a function to run every 10 seconds that will
* iterate through the visible servers and fetch their resource usage.
*/
mounted: function () {
this.$refs.search.focus();
},
2018-07-16 00:53:40 +00:00
computed: {
...mapState('dashboard', ['servers']),
searchTerm: {
get: function () {
return this.$store.getters['dashboard/getSearchTerm'];
},
set: function (value) {
this.$store.dispatch('dashboard/setSearchTerm', value);
},
},
2018-07-16 00:53:40 +00:00
},
methods: {
/**
* Load the user's servers and render them onto the dashboard.
*/
2018-07-16 00:53:40 +00:00
loadServers: function () {
this.loading = true;
2018-07-16 00:53:40 +00:00
this.$store.dispatch('dashboard/loadServers')
.finally(() => {
this.clearFlashes();
})
2018-07-16 00:53:40 +00:00
.then(() => {
if (this.servers.length === 0) {
this.info(this.$t('dashboard.index.no_matches'));
}
})
.catch(err => {
console.error(err);
const response = err.response;
2018-07-16 00:53:40 +00:00
if (response.data && isObject(response.data.errors)) {
2018-06-12 03:42:01 +00:00
response.data.errors.forEach(error => {
this.error(error.detail);
});
}
})
.finally(() => {
this.loading = false;
});
},
/**
* Handle a search for servers but only call the search function every 500ms
* at the fastest.
*/
onChange: debounce(function () {
2018-07-16 00:53:40 +00:00
this.loadServers();
}, 500),
},
};
</script>