mocked server page and better navigation and overall layout
This commit is contained in:
Jakob Schrettenbrunner
parent
d2c770d218
commit
89f47c6dbb
23 changed files with 12718 additions and 47 deletions
|
|
@ -8,11 +8,17 @@ import { Ziggy } from './helpers/ziggy';
|
|||
import Locales from './../../../resources/lang/locales';
|
||||
import { flash } from './mixins/flash';
|
||||
|
||||
import fontawesome from '@fortawesome/fontawesome';
|
||||
import faSolid from '@fortawesome/fontawesome-free-solid';
|
||||
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
|
||||
fontawesome.library.add(faSolid);
|
||||
|
||||
// Base Vuejs Templates
|
||||
import Login from './components/auth/Login';
|
||||
import Dashboard from './components/dashboard/Dashboard';
|
||||
import Account from './components/dashboard/Account';
|
||||
import ResetPassword from './components/auth/ResetPassword';
|
||||
import { Server, ServerConsole, ServerAllocations, ServerDatabases, ServerFiles, ServerSchedules, ServerSettings, ServerSubusers } from './components/server';
|
||||
|
||||
window.events = new Vue;
|
||||
window.Ziggy = Ziggy;
|
||||
|
|
@ -32,6 +38,8 @@ Vue.use(vuexI18n.plugin, store);
|
|||
Vue.i18n.add('en', Locales.en);
|
||||
Vue.i18n.set('en');
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon);
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
|
|
@ -50,6 +58,17 @@ const router = new VueRouter({
|
|||
{ name : 'account', path: '/account', component: Account },
|
||||
{ name : 'account-api', path: '/account/api', component: Account },
|
||||
{ name : 'account-security', path: '/account/security', component: Account },
|
||||
{ path: '/server/:id', component: Server,
|
||||
children: [
|
||||
{ name: 'server', path: '', component: ServerConsole },
|
||||
{ name: 'server-files', path: 'files', component: ServerFiles },
|
||||
{ name: 'server-subusers', path: 'subusers', component: ServerSubusers },
|
||||
{ name: 'server-schedules', path: 'schedules', component: ServerSchedules },
|
||||
{ name: 'server-databases', path: 'databases', component: ServerDatabases },
|
||||
{ name: 'server-allocations', path: 'allocations', component: ServerAllocations },
|
||||
{ name: 'server-settings', path: 'settings', component: ServerSettings },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -8,40 +8,40 @@
|
|||
/>
|
||||
</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">
|
||||
<div class="content">
|
||||
<div class="float-right">
|
||||
<div class="indicator online"></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">CPU</div>
|
||||
<router-link class="server-box" :to="{name: 'server', params: { id: server.uuidShort }}" :key="index" v-for="(server, index) in servers">
|
||||
<div class="content">
|
||||
<div class="float-right">
|
||||
<div class="indicator online"></div>
|
||||
</div>
|
||||
<div class="usage">
|
||||
<div class="indicator-title">Memory</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">CPU</div>
|
||||
</div>
|
||||
<div class="usage">
|
||||
<div class="indicator-title">Memory</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_name }}</p>
|
||||
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
|
||||
</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_name }}</p>
|
||||
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
53
resources/assets/scripts/components/server/Server.vue
Normal file
53
resources/assets/scripts/components/server/Server.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="container mx-auto p-2 flex flex-no-shrink rounded">
|
||||
<div class="sidebar border-grey-lighter flex-no-shrink w-1/4">
|
||||
<div class="pt-6 px-6 pb-4 text-center">
|
||||
<h3 class="mb-2 text-blue">Pterodactylcraft</h3>
|
||||
<span class="text-grey-dark">Minecraft / Vanilla</span>
|
||||
<div class="text-lg my-4"><span class="text-green">●</span> Running</div>
|
||||
<div>
|
||||
<button class="btn btn-red">Stop</button>
|
||||
<button class="btn btn-blue">Restart</button>
|
||||
<button class="btn btn-red">Kill</button>
|
||||
</div>
|
||||
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-lighter usage">
|
||||
<span class="indicator-title">CPU - 2 Cores</span>
|
||||
<div class="rounded border-grey-lighter 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-lighter usage">
|
||||
<span class="indicator-title">RAM - 4 GB</span>
|
||||
<div class="rounded border-grey-lighter 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-lighter usage">
|
||||
<span class="indicator-title">Disk - 20 GB</span>
|
||||
<div class="rounded border-grey-lighter border mt-3 h-4">
|
||||
<div class="rounded bg-blue h-4 w-1/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidenav">
|
||||
<router-link :to="{ name: 'server' }"><font-awesome-icon class="mr-2" fixed-with icon="terminal" />Console</router-link>
|
||||
<router-link :to="{ name: 'server-files' }"><font-awesome-icon class="mr-2" fixed-with icon="folder-open" />Files</router-link>
|
||||
<router-link :to="{ name: 'server-subusers' }"><font-awesome-icon class="mr-2" fixed-with icon="users" />Subusers</router-link>
|
||||
<router-link :to="{ name: 'server-schedules' }"><font-awesome-icon class="mr-2" fixed-with icon="calendar-alt" />Schedules</router-link>
|
||||
<router-link :to="{ name: 'server-databases' }"><font-awesome-icon class="mr-2" fixed-with icon="database" />Databases</router-link>
|
||||
<router-link :to="{ name: 'server-allocations' }"><font-awesome-icon class="mr-2" fixed-with icon="globe" />Allocations</router-link>
|
||||
<router-link :to="{ name: 'server-settings' }"><font-awesome-icon class="mr-2" fixed-with icon="cog" />Settings</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ServerConsole from "./ServerConsole";
|
||||
export default {
|
||||
components: {ServerConsole}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerAllocations"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
44
resources/assets/scripts/components/server/ServerConsole.vue
Normal file
44
resources/assets/scripts/components/server/ServerConsole.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="text-xs font-mono">
|
||||
<div class="rounded-t p-2 bg-black text-grey-lightest" style="height: 400px;">openjdk version "1.8.0_151"<br/>
|
||||
OpenJDK Runtime Environment (IcedTea 3.6.0) (Alpine 8.151.12-r0)<br/>
|
||||
OpenJDK 64-Bit Server VM (build 25.151-b12, mixed mode)<br/>
|
||||
:/home/container$ java -Xms128M -Xmx512M -jar server.jar<br/>
|
||||
[14:07:28] [Server thread/INFO]: Starting minecraft server version 1.12.2<br/>
|
||||
[14:07:28] [Server thread/WARN]: To start the server with more ram, launch it as "java -Xmx1024M
|
||||
-Xms1024M -jar minecraft_server.jar"<br/>
|
||||
[14:07:28] [Server thread/INFO]: Loading properties<br/>
|
||||
[14:07:29] [Server thread/INFO]: Default game type: SURVIVAL<br/>
|
||||
[14:07:29] [Server thread/INFO]: Generating keypair<br/>
|
||||
[14:07:29] [Server thread/INFO]: Starting Minecraft server on 0.0.0.0:25565<br/>
|
||||
[14:07:29] [Server thread/INFO]: Using epoll channel type<br/>
|
||||
[14:07:29] [Server thread/INFO]: Preparing level "world"<br/>
|
||||
[14:07:30] [Server thread/INFO]: Loaded 488 advancements<br/>
|
||||
[14:07:30] [Server thread/INFO]: Preparing start region for level 0<br/>
|
||||
[14:07:31] [Server thread/INFO]: Preparing spawn area: 4%<br/>
|
||||
[14:07:32] [Server thread/INFO]: Preparing spawn area: 33%<br/>
|
||||
[14:07:33] [Server thread/INFO]: Preparing spawn area: 99%<br/>
|
||||
[14:07:33] [Server thread/INFO]: Done (3.856s)! For help, type "help" or "?"<br/>
|
||||
[14:07:33] [Server thread/INFO]: Starting GS4 status listener<br/>
|
||||
[14:07:33] [Query Listener #1/INFO]: Query running on 0.0.0.0:25565<br/></div>
|
||||
<div class="rounded-b p-2 bg-grey-darkest text-white">$</div>
|
||||
</div>
|
||||
<div class="flex mt-8">
|
||||
<div class="flex-1 p-4 mr-4 border border-grey-lighter rounded"><h3 class="mb-4 text-center">CPU Usage in
|
||||
%</h3>
|
||||
<canvas class="w-1/2" id="chartCPU"></canvas>
|
||||
</div>
|
||||
<div class="flex-1 p-4 ml-4 border border-grey-lighter rounded"><h3 class="mb-4 text-center">Memory Usage in
|
||||
GB</h3>
|
||||
<canvas class="w-1/2" id="chartMemory"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerConsole"
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerDatabases"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
resources/assets/scripts/components/server/ServerFiles.vue
Normal file
13
resources/assets/scripts/components/server/ServerFiles.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerFiles.vue"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerSchedules"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerSettings"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerSubusers"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
8
resources/assets/scripts/components/server/index.js
Normal file
8
resources/assets/scripts/components/server/index.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export {default as Server} from './Server';
|
||||
export {default as ServerAllocations} from './ServerAllocations';
|
||||
export {default as ServerConsole} from './ServerConsole';
|
||||
export {default as ServerDatabases} from './ServerDatabases';
|
||||
export {default as ServerFiles} from './ServerFiles';
|
||||
export {default as ServerSchedules} from './ServerSchedules';
|
||||
export {default as ServerSettings} from './ServerSettings';
|
||||
export {default as ServerSubusers} from './ServerSubusers';
|
||||
File diff suppressed because one or more lines are too long
Reference in a new issue