🔨 Change routing

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>
 

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>

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="/">
+      <router-link to="/">
+        <a class="navbar-item">
           <img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/>
-        <h3 class="is-size-4">Ichnaea</h3>
+          <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
   }
 

web/src/components/Sidebar.vue

@@ -6,6 +6,7 @@
       </p>
       <ul class="menu-list">
         <li>
+          <router-link :to="{ name: 'DashboardHome', params: { username: $route.params.username }}">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -14,8 +15,22 @@
               <span>&nbsp;Dashboard</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-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">
@@ -24,6 +39,7 @@
               <span>&nbsp;Athletes</span>
           </span>
             </a>
+          </router-link>
         </li>
       </ul>
       <p class="menu-label">
@@ -31,6 +47,7 @@
       </p>
       <ul class="menu-list">
         <li>
+          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -39,8 +56,10 @@
               <span>&nbsp;Tables</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">
@@ -49,6 +68,7 @@
               <span>&nbsp;Charts</span>
           </span>
             </a>
+          </router-link>
         </li>
       </ul>
     </div>

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

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: {}) => {

web/src/components/Tile.vue → 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;
 

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')