From e5240d1871a440a875a644e36354dd49e310d0b6 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Thu, 7 Jan 2021 10:59:05 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Change=20routing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue                               |  7 ----
 web/src/components/Footer.vue                 | 21 +++++++++++
 web/src/components/Navbar.vue                 | 18 ++++++----
 web/src/components/Sidebar.vue                | 36 ++++++++++++++-----
 web/src/router/index.ts                       | 21 ++++++++---
 web/src/views/Dashboard.vue                   | 13 ++++---
 .../Tile.vue => views/DashboardHome.vue}      |  8 +++--
 web/src/views/Login.vue                       |  4 +--
 8 files changed, 90 insertions(+), 38 deletions(-)
 create mode 100644 web/src/components/Footer.vue
 rename web/src/{components/Tile.vue => views/DashboardHome.vue} (86%)

diff --git a/web/src/App.vue b/web/src/App.vue
index 4459ca4..36420c5 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,11 +1,4 @@
 <template>
-  <!--  <div id="nav">-->
-  <!--    <router-link to="/">Home</router-link>-->
-  <!--    |-->
-  <!--    <router-link to="/about">About</router-link>-->
-  <!--    |-->
-  <!--    <router-link to="/login">Login</router-link>-->
-  <!--  </div>-->
   <router-view/>
 </template>
 
diff --git a/web/src/components/Footer.vue b/web/src/components/Footer.vue
new file mode 100644
index 0000000..ec70378
--- /dev/null
+++ b/web/src/components/Footer.vue
@@ -0,0 +1,21 @@
+<template>
+  <footer class="footer">
+    <div class="content has-text-centered">
+      <p class="menu-label">
+        A Project by Haris Razis
+        <br>
+        ichnaea © {{ new Date().getFullYear() }}
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'Footer'
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index 2db61fb..91b8202 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -1,10 +1,12 @@
 <template>
   <nav class="navbar is-fixed-top is-black" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-      <a class="navbar-item" href="/">
-        <img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/>
-        <h3 class="is-size-4">Ichnaea</h3>
-      </a>
+      <router-link to="/">
+        <a class="navbar-item">
+          <img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/>
+          <h3 class="is-size-4 has-text-white">Ichnaea</h3>
+        </a>
+      </router-link>
       <a
           role="button"
           class="navbar-burger burger"
@@ -20,10 +22,12 @@
     <div id="navbarBasicExample" class="navbar-menu">
       <div class="navbar-end">
         <a class="navbar-item">
-                    <span class="icon mr-1">
+          <router-link :to="{ name: 'Profile', params: { username: username }}">
+                    <span class="icon mr-1 has-text-white">
                         <i class="fa fa-user"></i>
                     </span>
-          <span>{{ username }}</span>
+            <span class="has-text-white">{{ username }}</span>
+          </router-link>
         </a>
         <a class="navbar-item has-text-danger mr-2" @click="logout">
                     <span class="icon mr-1">
@@ -47,7 +51,7 @@ import {Vue} from "vue-class-component";
 export default class Navbar extends Vue {
   private username = '';
 
-  mounted() {
+  created() {
     this.username = this.$store.getters.user.username
   }
 
diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
index 0ccc92b..a257751 100644
--- a/web/src/components/Sidebar.vue
+++ b/web/src/components/Sidebar.vue
@@ -6,24 +6,40 @@
       </p>
       <ul class="menu-list">
         <li>
-          <a>
+          <router-link :to="{ name: 'DashboardHome', params: { username: $route.params.username }}">
+            <a>
           <span class="icon-text">
             <span class="icon">
                <i class="fas fa-digital-tachograph"/>
             </span>
               <span>&nbsp;Dashboard</span>
           </span>
-          </a>
+            </a>
+          </router-link>
         </li>
         <li>
-          <a>
+          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
+            <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-user"/>
+            </span>
+              <span>&nbsp;Profile</span>
+          </span>
+            </a>
+          </router-link>
+        </li>
+        <li>
+          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
+            <a>
           <span class="icon-text">
             <span class="icon">
                <i class="fas fa-users"/>
             </span>
               <span>&nbsp;Athletes</span>
           </span>
-          </a>
+            </a>
+          </router-link>
         </li>
       </ul>
       <p class="menu-label">
@@ -31,24 +47,28 @@
       </p>
       <ul class="menu-list">
         <li>
-          <a>
+          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
+            <a>
           <span class="icon-text">
             <span class="icon">
                <i class="fas fa-table"/>
             </span>
               <span>&nbsp;Tables</span>
           </span>
-          </a>
+            </a>
+          </router-link>
         </li>
         <li>
-          <a>
+          <router-link :to="{ name: 'Profile', params: { username:  $route.params.username }}">
+            <a>
           <span class="icon-text">
             <span class="icon">
                <i class="fas fa-chart-area"/>
             </span>
               <span>&nbsp;Charts</span>
           </span>
-          </a>
+            </a>
+          </router-link>
         </li>
       </ul>
     </div>
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 0d6aa45..b4d49c6 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,6 +1,7 @@
 import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
-import Home from '../views/Home.vue'
 import store from '../store/index'
+import Home from '../views/Home.vue'
+import Login from "@/views/Login.vue";
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -11,15 +12,27 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/login',
         name: 'Login',
-        component: () => import('../views/Login.vue'),
+        component: Login
     },
     {
-        path: '/dashboard',
+        path: '/:username/dashboard',
         name: 'Dashboard',
         component: () => import('../views/Dashboard.vue'),
+        children: [
+            {
+                path: '',
+                name: 'DashboardHome',
+                component: () => import('../views/DashboardHome.vue')
+            },
+            {
+                path: 'profile',
+                name: 'Profile',
+                component: () => import('../views/Profile.vue')
+            }
+        ],
         meta: {
             requiresAuth: true
-        }
+        },
     }
 ]
 
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index 02a243e..093d5e0 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -2,8 +2,9 @@
   <Navbar/>
   <Sidebar/>
   <div class="content">
-    <Tile/>
+    <router-view></router-view>
   </div>
+  <Footer/>
 </template>
 
 <script lang="ts">
@@ -11,13 +12,13 @@ import {Options, Vue} from 'vue-class-component';
 import {io} from 'socket.io-client'
 import Navbar from '@/components/Navbar.vue'
 import Sidebar from '@/components/Sidebar.vue'
-import Tile from '@/components/Tile.vue'
+import Footer from '@/components/Footer.vue'
 
 @Options({
   components: {
     Navbar,
     Sidebar,
-    Tile,
+    Footer
   }
 })
 
@@ -32,15 +33,13 @@ export default class Dashboard extends Vue {
     this.socket = io('/')
 
     this.socket.on('connect', () => {
+      this.$store.commit("serverConnected", true);
     });
 
     this.socket.on('disconnect', (reason: string) => {
+      this.$store.commit("serverConnected", false);
 
       if (reason === 'io server disconnect') this.socket.connect();
-
-      if (reason === 'io client disconnect') {
-      }
-
     });
 
     this.socket.on('console', (data: {}) => {
diff --git a/web/src/components/Tile.vue b/web/src/views/DashboardHome.vue
similarity index 86%
rename from web/src/components/Tile.vue
rename to web/src/views/DashboardHome.vue
index 0d9b1b2..7940454 100644
--- a/web/src/components/Tile.vue
+++ b/web/src/views/DashboardHome.vue
@@ -1,4 +1,5 @@
 <template>
+  <h1 class="title is-2">Home</h1>
   <div class="tile">
     <article class="tile is-child notification has-background-primary-dark has-text-white">
       <nav class="level">
@@ -31,8 +32,9 @@
         </div>
         <div class="level-item has-text-centered">
           <div>
-            <p class="heading">Followers</p>
-            <p class="title">456K</p>
+            <p class="heading">Server</p>
+            <p class="title" v-if="this.$store.getters.serverStatus">Connected</p>
+            <p class="title" v-else>Disconnected</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
@@ -54,7 +56,7 @@ interface User {
   lastLogin: string
 }
 
-export default class Tile extends Vue {
+export default class DashboardHome extends Vue {
   private user!: User;
   private date!: string;
 
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index c213212..48ec35f 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -61,7 +61,7 @@ export default class Login extends Vue {
 
   private getCurrentUser() {
     this.$store.dispatch('getCurrentUser')
-        .then(() => this.$router.push('/dashboard'))
+        .then((res: any) => this.$router.push({name: 'Dashboard', params: {username: res.data.username}}))
         .catch((err: any) => {
           this.$router.push('/login')
         })
@@ -71,7 +71,7 @@ export default class Login extends Vue {
     let user = {username: this.username, password: this.password}
 
     this.$store.dispatch('login', user)
-        .then(() => this.$router.push('/dashboard'))
+        .then(() => this.$router.push({name: 'Dashboard', params: {username: this.username}}))
         .catch((err: any) => {
           this.msg = err.response.data.errors.message || err.message || 'Something went wrong!'
           this.$router.push('/login')