Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Break out the server box into a component

Browse source
This commit is contained in:
Dane Everitt 2018-06-02 17:41:06 -07:00
parent 0d56ed19a7
commit bcd3b055dd
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 60 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,42 +15,12 @@
</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>
</div>
<div class="mb-4">
<div class="text-black font-bold text-xl">
{{ server.name }}
</div>
</div>
<div class="mb-0 flex">
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
</div>
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</div>
</div>
</div>
<div class="mb-4 flex text-center">
<div class="inline-block border border-grey-lighter border-l-0 p-4 flex-1">
<span class="font-bold text-xl">---</span>
<span class="font-light text-sm">%</span>
</div>
<div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
<span class="font-bold text-xl">---</span>
<span class="font-light text-sm">Mb</span>
</div>
</div>
<div class="flex items-center">
<div class="text-sm">
<p class="text-grey">{{ server.node }}</p>
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
</div>
</div>
</router-link>
</div>
<server-box
v-for="(server, index) in servers.models"
v-bind:key="index"
v-bind:server="server"
v-bind:resources="resources[server.uuid]"
/>
</transition-group>
</div>
</template>
@ -59,15 +29,17 @@
import { ServerCollection } from '../../models/server';
import _ from 'lodash';
import Flash from '../Flash';
import ServerBox from './ServerBox';
export default {
name: 'dashboard',
components: { Flash },
components: { ServerBox, Flash },
data: function () {
return {
loading: true,
search: '',
servers: new ServerCollection,
resources: {},
}
},
@ -92,6 +64,7 @@
.then(response => {
this.servers = new ServerCollection;
response.data.data.forEach(obj => {
this.resources[obj.attributes.uuid] = { cpu: 0, memory: 0 };
this.servers.add(obj.attributes);
});

50
resources/assets/scripts/components/dashboard/ServerBox.vue Normal file
View file

@ -0,0 +1,50 @@
<template>
<div class="server-box animate fadein">
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
<div class="float-right">
<div class="indicator"></div>
</div>
<div class="mb-4">
<div class="text-black font-bold text-xl">
{{ server.name }}
</div>
</div>
<div class="mb-0 flex">
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
</div>
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</div>
</div>
</div>
<div class="mb-4 flex text-center">
<div class="inline-block border border-grey-lighter border-l-0 p-4 flex-1">
<span class="font-bold text-xl">{{ resources.cpu > 0 ? resources.cpu : '&mdash;' }}</span>
<span class="font-light text-sm">%</span>
</div>
<div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
<span class="font-bold text-xl">{{ resources.memory > 0 ? resources.memory : '&mdash;' }}</span>
<span class="font-light text-sm">Mb</span>
</div>
</div>
<div class="flex items-center">
<div class="text-sm">
<p class="text-grey">{{ server.node }}</p>
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
</div>
</div>
</router-link>
</div>
</template>
<script>
import { Server } from '../../models/server';
export default {
name: 'server-box',
props: {
server: { type: Server, required: true },
resources: { type: Object, required: true },
}
};
</script>