mocked server page and better navigation and overall layout

app/Http/Controllers/Server/ConsoleController.php

@@ -51,7 +51,8 @@ class ConsoleController extends Controller
             ],
         ]);
 
-        return view('server.index');
+        //return view('server.index');
+        return view('templates/base.core');
     }
 
     /**

gulpfile.js

@@ -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'),
         ]))

package.json

@@ -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"
+    }
 }

resources/assets/scripts/app.js

@@ -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 },
+            ]
+        }
     ]
 });
 

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -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">
+            <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="content">
-                    <div class="float-right">
+                        <div class="float-right">
-                        <div class="indicator online"></div>
+                            <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>
                         </div>
-                        <div class="usage">
+                        <div class="mb-4">
-                            <div class="indicator-title">Memory</div>
+                            <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">
+            </router-link>
-                        <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>
         </transition-group>
     </div>
 </template>

resources/assets/scripts/components/server/Server.vue

@@ -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>

resources/assets/scripts/components/server/ServerAllocations.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "ServerAllocations"
+    }
+</script>
+
+<style scoped>
+
+</style>

resources/assets/scripts/components/server/ServerConsole.vue

@@ -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>

resources/assets/scripts/components/server/ServerDatabases.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "ServerDatabases"
+    }
+</script>
+
+<style scoped>
+
+</style>

resources/assets/scripts/components/server/ServerFiles.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "ServerFiles.vue"
+    }
+</script>
+
+<style scoped>
+
+</style>

resources/assets/scripts/components/server/ServerSchedules.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "ServerSchedules"
+    }
+</script>
+
+<style scoped>
+
+</style>

resources/assets/scripts/components/server/ServerSettings.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "ServerSettings"
+    }
+</script>
+
+<style scoped>
+
+</style>

resources/assets/scripts/components/server/ServerSubusers.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "ServerSubusers"
+    }
+</script>
+
+<style scoped>
+
+</style>

resources/assets/scripts/components/server/index.js

@@ -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';

resources/assets/styles/components/buttons.css

@@ -1,5 +1,5 @@
 .btn {
-  @apply .rounded;
+  @apply .rounded .p-2;
 
   /**
    * Button Colors
@@ -12,9 +12,14 @@
     }
   }
 
-  /**
+  &.btn-red {
-   * Button Sizes
+    @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;
   }

resources/assets/styles/components/containers.css

@@ -0,0 +1 @@
+

resources/assets/styles/components/miscellaneous.css

@@ -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;

resources/assets/styles/components/navigation.css

@@ -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;
+         }
+    }
 }

resources/assets/styles/main.css

@@ -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";

resources/themes/pterodactyl/templates/auth/core.blade.php

@@ -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">

resources/themes/pterodactyl/templates/base/core.blade.php

@@ -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>