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
|
|
@ -51,7 +51,8 @@ class ConsoleController extends Controller
|
|||
],
|
||||
]);
|
||||
|
||||
return view('server.index');
|
||||
//return view('server.index');
|
||||
return view('templates/base.core');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ function styles() {
|
|||
.pipe(postcss([
|
||||
require('postcss-import'),
|
||||
require('tailwindcss')('./tailwind.js'),
|
||||
require('precss'),
|
||||
require('postcss-preset-env')({stage: 0}),
|
||||
require('autoprefixer'),
|
||||
]))
|
||||
|
|
|
|||
12401
package-lock.json
generated
Normal file
12401
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -50,5 +50,10 @@
|
|||
"build:styles": "./node_modules/gulp-cli/bin/gulp.js styles",
|
||||
"build:scripts": "./node_modules/gulp-cli/bin/gulp.js scripts"
|
||||
},
|
||||
"dependencies": {}
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^1.1.8",
|
||||
"@fortawesome/fontawesome-free-solid": "^5.0.13",
|
||||
"@fortawesome/vue-fontawesome": "0.0.22",
|
||||
"precss": "^3.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -1,5 +1,5 @@
|
|||
.btn {
|
||||
@apply .rounded;
|
||||
@apply .rounded .p-2;
|
||||
|
||||
/**
|
||||
* Button Colors
|
||||
|
|
@ -12,9 +12,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Button Sizes
|
||||
*/
|
||||
&.btn-red {
|
||||
@apply .bg-red .border-red-dark .border .text-white;
|
||||
|
||||
&:hover:enabled {
|
||||
@apply .bg-red-dark .border-red-darker;
|
||||
}
|
||||
}
|
||||
/* Button Sizes */
|
||||
&.btn-jumbo {
|
||||
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
|
||||
}
|
||||
|
|
|
|||
1
resources/assets/styles/components/containers.css
Normal file
1
resources/assets/styles/components/containers.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -46,7 +46,7 @@ code {
|
|||
* Flex boxes for server listing on user dashboard.
|
||||
*/
|
||||
.server-box {
|
||||
@apply .pb-4;
|
||||
@apply .block .pb-4 .no-underline;
|
||||
|
||||
@screen smx {
|
||||
@apply .w-1/2 .pr-4;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,24 @@
|
|||
.nav {
|
||||
@apply .flex;
|
||||
|
||||
a {
|
||||
@apply .py-6 .px-6 .text-white .no-underline;
|
||||
|
||||
&:hover {
|
||||
@apply .bg-blue-dark;
|
||||
}
|
||||
|
||||
&.router-link-active {
|
||||
@apply .bg-blue-dark;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@apply mr-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*.nav {
|
||||
@apply .bg-blue;
|
||||
height: 48px;
|
||||
|
||||
|
|
@ -25,4 +45,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
.sidenav {
|
||||
@apply .mb-2;
|
||||
|
||||
a {
|
||||
@apply .block .py-3 .px-8 .text-grey-darkest .no-underline;
|
||||
|
||||
&:hover {
|
||||
@apply .border-r-4 .border-blue-lightest;
|
||||
}
|
||||
|
||||
&.router-link-exact-active {
|
||||
@apply .text-blue .border-r-4 .border-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
@import "components/animations.css";
|
||||
@import "components/authentication.css";
|
||||
@import "components/buttons.css";
|
||||
@import "components/containers.css";
|
||||
@import "components/forms.css";
|
||||
@import "components/miscellaneous.css";
|
||||
@import "components/navigation.css";
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
@section('container')
|
||||
<div class="w-full max-w-xs sm:max-w-sm m-auto mt-8">
|
||||
<div class="text-center">
|
||||
<img src="/favicons/android-chrome-512x512.png" class="max-w-xxs">
|
||||
<img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs">
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
<p class="text-center text-grey text-xs">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,30 @@
|
|||
@extends('templates/wrapper')
|
||||
|
||||
@section('above-container')
|
||||
<div class="nav">
|
||||
<header class="bg-blue text-white text-xl rounded-b fixed pin-t w-full z-40 shadow-md">
|
||||
<div class="container h-16 mx-auto flex">
|
||||
<img class="h-12 mt-2 mr-3" src="/assets/img/pterodactyl-flat.svg">
|
||||
<div class="py-6">PTERODACTYL</div>
|
||||
<div class="flex-grow"></div>
|
||||
<nav class="nav text-lg">
|
||||
<router-link to="/"><font-awesome-icon class="mr-2" fixed-with icon="server"></font-awesome-icon>Servers</router-link>
|
||||
<a href="#"><font-awesome-icon class="mr-2" fixed-with icon="cogs"></font-awesome-icon>Admin</a>
|
||||
<a href="#"><font-awesome-icon class="mr-2" fixed-with icon="user"></font-awesome-icon>schrej</a>
|
||||
<a href="#"><font-awesome-icon fixed-with icon="sign-out-alt"></font-awesome-icon></a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="h-16 mb-6"></div>
|
||||
{{--<div class="nav">
|
||||
<div class="logo">
|
||||
Pterodactyl
|
||||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<router-link to="/">
|
||||
<span>Your Servers</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
|
|
@ -29,12 +43,16 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>--}}
|
||||
@endsection
|
||||
|
||||
@section('container')
|
||||
<router-view></router-view>
|
||||
<div class="w-full m-auto mt-0">
|
||||
@endsection
|
||||
|
||||
@section('below-container')
|
||||
<div class="flex-grow"></div>
|
||||
<div class="container py-4">
|
||||
<p class="text-right text-grey-dark text-xs">
|
||||
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue