From 47c1ecc9bcc54f03d6d4d5238ec19254a2978a95 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Mon, 28 May 2018 11:34:24 -0700
Subject: [PATCH] Make server blocks clickable, break out routes into their own
 file

---
 resources/assets/scripts/app.js               | 26 ++-------------
 .../components/dashboard/Dashboard.vue        | 10 +++---
 resources/assets/scripts/routes.js            | 33 +++++++++++++++++++
 .../styles/components/miscellaneous.css       |  6 +++-
 4 files changed, 46 insertions(+), 29 deletions(-)
 create mode 100644 resources/assets/scripts/routes.js

diff --git a/resources/assets/scripts/app.js b/resources/assets/scripts/app.js
index 15fb4af18..d2a5be98e 100644
--- a/resources/assets/scripts/app.js
+++ b/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');
diff --git a/resources/assets/scripts/components/dashboard/Dashboard.vue b/resources/assets/scripts/components/dashboard/Dashboard.vue
index 1da8cf667..f12f2fd02 100644
--- a/resources/assets/scripts/components/dashboard/Dashboard.vue
+++ b/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>
diff --git a/resources/assets/scripts/routes.js b/resources/assets/scripts/routes.js
new file mode 100644
index 000000000..64b255463
--- /dev/null
+++ b/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 }
+        // ],
+    }
+];
diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css
index 9007161bf..23bec3473 100644
--- a/resources/assets/styles/components/miscellaneous.css
+++ b/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;
+        }
     }
 }