Break console page into a component

Author: DaneEveritt

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

@@ -25,7 +25,7 @@
                     </div>
                 </div>
                 <div class="sidenav">
-                    <router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
+                    <router-link :to="{ name: '', params: { id: this.$route.params.id } }">
                         <terminal-icon style="height: 1em;"></terminal-icon>
                         Console
                     </router-link>
@@ -64,14 +64,14 @@
 
 <script>
     import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
-    import ServerConsole from "./ServerConsole";
     import Navigation from '../core/Navigation';
     import ProgressBar from './components/ProgressBar';
     import {mapState} from 'vuex';
+    import { ConsolePage } from './subpages/ConsolePage';
 
     export default {
         components: {
-            ProgressBar, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
+            ProgressBar, Navigation, ConsolePage, TerminalIcon, FolderIcon, UsersIcon,
             CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
         },
 

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

@@ -1,6 +1,6 @@
 export {default as Server} from './Server';
 export {default as ServerAllocations} from './ServerAllocations';
-export {default as ServerConsole} from './ServerConsole';
+export {default as ConsolePage} from './subpages/ConsolePage';
 export {default as ServerDatabases} from './ServerDatabases';
 export {default as ServerFiles} from './ServerFiles';
 export {default as ServerSchedules} from './ServerSchedules';

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

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div class="text-xs font-mono">
+            <div class="rounded-t p-2 bg-black text-grey-lightest h-48">
+
+            </div>
+            <div class="rounded-b p-2 bg-grey-darkest text-white">$</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'console-page',
+
+        data: function () {
+            return {
+                lines: [],
+            };
+        }
+    };
+</script>

resources/assets/scripts/components/server/subpages/ConsolePage.vue

@@ -12,7 +12,8 @@ import User from './models/user';
 import {
     Server,
     ServerAllocations,
-    ServerConsole, ServerDatabases,
+    ConsolePage,
+    ServerDatabases,
     ServerFiles,
     ServerSchedules,
     ServerSettings,
@@ -39,7 +40,7 @@ const routes = [
 
     { path: '/server/:id', component: Server,
         children: [
-            { name: 'server', path: '', component: ServerConsole },
+            { name: 'server', path: '', component: ConsolePage },
             { name: 'server-files', path: 'files', component: ServerFiles },
             { name: 'server-subusers', path: 'subusers', component: ServerSubusers },
             { name: 'server-schedules', path: 'schedules', component: ServerSchedules },