Make server blocks clickable, break out routes into their own file

Author: DaneEveritt

resources/assets/scripts/app.js

@@ -7,12 +7,7 @@ import VueRouter from 'vue-router';
 import { Ziggy } from './helpers/ziggy';
 import Locales from './../../../resources/lang/locales';
 import { flash } from './mixins/flash';
-
-// 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 { routes } from './routes';
 
 window.events = new Vue;
 window.Ziggy = Ziggy;
@@ -33,24 +28,7 @@ Vue.i18n.add('en', Locales.en);
 Vue.i18n.set('en');
 
 const router = new VueRouter({
-    mode: 'history',
-    routes: [
-        { name: 'login', path: '/auth/login', component: Login },
-        { name: 'forgot-password', path: '/auth/password', component: Login },
-        { name: 'checkpoint', path: '/checkpoint', component: Login },
-        {
-            name: 'reset-password',
-            path: '/auth/password/reset/:token',
-            component: ResetPassword,
-            props: function (route) {
-                return { token: route.params.token, email: route.query.email || '' };
-            }
-        },
-        { name : 'index', path: '/', component: Dashboard },
-        { name : 'account', path: '/account', component: Account },
-        { name : 'account-api', path: '/account/api', component: Account },
-        { name : 'account-security', path: '/account/security', component: Account },
-    ]
+    mode: 'history', routes
 });
 
 require('./bootstrap');

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

@@ -9,12 +9,14 @@
         </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">
+                <router-link :to="{ name: 'server', params: { id: server.uuidShort }}" class="content">
                     <div class="float-right">
-                        <div class="indicator online"></div>
+                        <div class="indicator"></div>
                     </div>
                     <div class="mb-4">
-                        <div class="text-black font-bold text-xl">{{ server.name }}</div>
+                        <div class="text-black font-bold text-xl">
+                            {{ server.name }}
+                        </div>
                     </div>
                     <div class="mb-0 flex">
                         <div class="usage">
@@ -40,7 +42,7 @@
                             <p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
                         </div>
                     </div>
-                </div>
+                </router-link>
             </div>
         </transition-group>
     </div>

resources/assets/scripts/routes.js

@@ -0,0 +1,33 @@
+// 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';
+
+export const routes = [
+    { name: 'login', path: '/auth/login', component: Login },
+    { name: 'forgot-password', path: '/auth/password', component: Login },
+    { name: 'checkpoint', path: '/checkpoint', component: Login },
+    {
+        name: 'reset-password',
+        path: '/auth/password/reset/:token',
+        component: ResetPassword,
+        props: function (route) {
+            return { token: route.params.token, email: route.query.email || '' };
+        }
+    },
+
+    { name : 'index', path: '/', component: Dashboard },
+    { name : 'account', path: '/account', component: Account },
+    { name : 'account.api', path: '/account/api', component: Account },
+    { name : 'account.security', path: '/account/security', component: Account },
+
+    {
+        name: 'server',
+        path: '/server/:id',
+        // component: Server,
+        // children: [
+        //     { path: 'files', component: ServerFileManager }
+        // ],
+    }
+];

resources/assets/styles/components/miscellaneous.css

@@ -65,7 +65,11 @@ code {
     }
 
     & > .content {
-        @apply .border .border-grey-light .bg-white .rounded .p-4 .justify-between .leading-normal;
+        @apply .border .border-grey-light .bg-white .rounded .p-4 .justify-between .leading-normal .no-underline .block .text-black;
+
+        &:visited {
+            @apply .text-black;
+        }
     }
 }