From 220d7594d307bec4d42e8d2c95af3caf449111c9 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Sat, 9 Jan 2021 12:51:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20user=20dashboard=20UI=20eleme?=
 =?UTF-8?q?nts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Navbar.vue     |  14 ++--
 web/src/components/Sidebar.vue    | 102 +++++++++++++++++++++++++++---
 web/src/store/modules/athletes.ts |   7 ++
 web/src/store/modules/user.ts     |   5 +-
 web/src/views/Athlete.vue         |   4 +-
 web/src/views/Athletes.vue        |  32 ++++++----
 web/src/views/DashboardHome.vue   |   2 +-
 web/src/views/Profile.vue         |   2 +-
 8 files changed, 132 insertions(+), 36 deletions(-)

diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index 3083343..ae40d1c 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -22,11 +22,13 @@
     <div id="navbarBasicExample" class="navbar-menu">
       <div class="navbar-end">
         <a class="navbar-item">
-          <router-link :to="{ name: 'Profile', params: { username: user.username }}">
-                    <span class="icon mr-1 has-text-white">
+          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
+            <div class="icon-text">
+                    <span class="icon mr-1  has-text-white">
                         <i class="fa fa-user"></i>
                     </span>
-            <span class="has-text-white">{{ user.username }}</span>
+              <span class="has-text-white">{{ user.username }}</span>
+            </div>
           </router-link>
         </a>
         <a class="navbar-item has-text-danger mr-2" @click="logout">
@@ -35,12 +37,6 @@
                     </span>
           <span>Logout</span>
         </a>
-        <a class="navbar-item" href="https://github.com/xrazis/ichnaea" target="_blank">
-          <span class="icon mr-1">
-                        <i class="fas fa-book"></i>
-                    </span>
-          Documentation
-        </a>
       </div>
     </div>
   </nav>
diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
index 0b71c7d..684bafe 100644
--- a/web/src/components/Sidebar.vue
+++ b/web/src/components/Sidebar.vue
@@ -6,19 +6,24 @@
       </p>
       <ul class="menu-list">
         <li>
-          <router-link :to="{ name: 'DashboardHome', params: { username: $route.params.username }}">
+          <router-link :to="{ name: 'DashboardHome', params: { username: $route.params.username }}" :class="{
+            'has-background-white':
+           $route.name==='DashboardHome' }">
             <a>
-          <span class="icon-text">
-            <span class="icon">
+          <span class=" icon-text
+          ">
+          <span class="icon">
                <i class="fas fa-digital-tachograph"/>
             </span>
-              <span>&nbsp;Dashboard</span>
+          <span>&nbsp;Dashboard</span>
           </span>
             </a>
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
+          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}" :class="{
+            'has-background-white':
+           $route.name==='Profile' }">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -30,7 +35,10 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Athletes', params: { username: $route.params.username }}">
+          <router-link :to="{ name: 'Athletes', params: { username: $route.params.username }}"
+                       :class="{
+            'has-background-white':
+           $route.name==='Athletes' }">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -47,19 +55,48 @@
       </p>
       <ul class="menu-list">
         <li>
-          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
+          <router-link v-if="$store.getters.currentAthlete._id === ''" :to="{ name: 'Table', params: { id:
+          $store.getters.currentAthlete._id }}" :class="{
+            'has-background-white':
+           $route.name==='Table' }">
+            <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-table"/>
+            </span>
+              <span>&nbsp;Table</span>
+          </span>
+            </a>
+          </router-link>
+          <router-link v-else :to="{ name: 'Athletes', params: { id:
+          $route.params.username }}" :class="{
+            'disabled':
+           $store.getters.currentAthlete === '' }">
             <a>
           <span class="icon-text">
             <span class="icon">
                <i class="fas fa-table"/>
             </span>
-              <span>&nbsp;Tables</span>
+              <span>&nbsp;Table</span>
           </span>
             </a>
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Profile', params: { username:  $route.params.username }}">
+          <router-link v-if="$store.getters.currentAthlete === ''" :to="{ name: 'Chart', params: { id:
+          $store.getters.currentAthlete._id }}" :class="{
+            'has-background-white':
+           $route.name==='Chart' }">
+            <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-chart-area"/>
+            </span>
+              <span>&nbsp;Chart</span>
+          </span>
+            </a>
+          </router-link>
+          <router-link v-else :to="{ name: 'Athletes', params: { id:  $route.params.username }}">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -71,6 +108,53 @@
           </router-link>
         </li>
       </ul>
+      <p class="menu-label">
+        Help
+      </p>
+      <ul class="menu-list">
+        <li>
+          <router-link :to="{ name: 'Guide'}" :class="{
+            'has-background-white':
+           $route.name==='Guide' }">
+            <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-question-circle"/>
+            </span>
+              <span>&nbsp;Guide</span>
+          </span>
+            </a>
+          </router-link>
+        </li>
+        <li>
+          <router-link :to="{ name: 'Ticket'}" :class="{
+            'has-background-white':
+           $route.name==='Ticket' }">
+            <a>
+          <span class="icon-text">
+            <span class="icon">
+               <i class="fas fa-hands-helping"/>
+            </span>
+              <span>&nbsp;Ticket</span>
+          </span>
+            </a>
+          </router-link>
+        </li>
+        <li>
+          <router-link :to="{ name: 'Docs'}" :class="{
+            'has-background-white':
+           $route.name==='Docs' }">
+            <a href="" target="_blank">
+          <span class="icon-text">
+          <span class="icon mr-1">
+                        <i class="fas fa-book"></i>
+                    </span>
+          <span>Docs</span>
+            </span>
+            </a>
+          </router-link>
+        </li>
+      </ul>
     </div>
   </aside>
 </template>
diff --git a/web/src/store/modules/athletes.ts b/web/src/store/modules/athletes.ts
index f35b2e6..1b57d26 100644
--- a/web/src/store/modules/athletes.ts
+++ b/web/src/store/modules/athletes.ts
@@ -44,6 +44,13 @@ export default class Athletes extends VuexModule {
         this.athletes = athletes;
     }
 
+    @Mutation
+    private auth_logout() {
+        this.athlete = <AthleteInterface>{};
+        this.trainer = <UserInterface>{}
+        this.athletes = [<AthleteInterface>{}];
+    }
+
     @Action
     private getAthletes() {
         return new Promise((resolve, reject) => {
diff --git a/web/src/store/modules/user.ts b/web/src/store/modules/user.ts
index 472f8c6..1c71106 100644
--- a/web/src/store/modules/user.ts
+++ b/web/src/store/modules/user.ts
@@ -69,6 +69,7 @@ export default class User extends VuexModule {
             })
                 .then((resp: AxiosResponse) => {
                     this.context.commit('auth_logout');
+                    this.context.commit('athlete_logout');
                     resolve(resp)
                 })
                 .catch((err: Error) => {
@@ -114,11 +115,11 @@ export default class User extends VuexModule {
     }
 
     @Action
-    private specificUser(user: UserInterface) {
+    private specificUser(id: string) {
         return new Promise((resolve, reject) => {
             axios({
                 method: 'GET',
-                url: `/api/user/${user._id}`
+                url: `/api/user/${id}`
             })
                 .then((resp: AxiosResponse) => {
                     resolve(resp)
diff --git a/web/src/views/Athlete.vue b/web/src/views/Athlete.vue
index 8dc2cda..e4de06a 100644
--- a/web/src/views/Athlete.vue
+++ b/web/src/views/Athlete.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 class="title is-2">Athletes/{{ athlete.name }}</h1>
+  <h1 class="title is-2">/athletes/{{ athlete.name }}</h1>
   <div class="tile is-ancestor">
     <div class="tile is-6 is-vertical is-parent">
       <form @submit="update">
@@ -55,7 +55,7 @@
             <p>It seems that this athlete has no trainer attached to him!</p>
             <p>By adopting an athlete you can edit his personal details and view his performance stats.</p>
           </ul>
-          <button class="button is-large is-rounded is-primary is-light" @click="update">update</button>
+          <button class="button is-large is-rounded is-primary is-light" @click="update">Adopt</button>
         </div>
         <div v-else>
           <div class="field">
diff --git a/web/src/views/Athletes.vue b/web/src/views/Athletes.vue
index fea16a1..02ef6ca 100644
--- a/web/src/views/Athletes.vue
+++ b/web/src/views/Athletes.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 class="title is-2">Athletes</h1>
+  <h1 class="title is-2">/athletes</h1>
   <div class="tile">
     <table
         class="table
@@ -11,24 +11,22 @@ has-text-left"
     >
       <thead>
       <tr>
-        <th>Athlete id</th>
-        <th>Name</th>
+        <th><span class="icon mr-1"><i class="fa fa-id-card"></i></span>
+          Athlete id
+        </th>
+        <th><span class="icon mr-1"><i class="fas fa-running"></i></span>
+          Name
+        </th>
         <th>Trainer</th>
         <th>Actions</th>
       </tr>
       </thead>
       <tr v-for="(athlete, index) in athletes" :key="index">
         <td class="is-family-monospace">
-          <span class="icon-text">
-          <span class="icon mr-1"><i class="fa fa-id-card"></i></span>
           <span>{{ athlete.id }}</span>
-          </span>
         </td>
         <td>
-          <span class="icon-text">
-          <span class="icon mr-1"><i class="fa fa-signature"></i></span>
           <span>{{ athlete.name }}</span>
-          </span>
         </td>
         <td v-if="athlete._trainer">
           <span class="icon mr-1"><i class="fa fa-check"></i></span>
@@ -38,10 +36,21 @@ has-text-left"
         </td>
         <td>
           <router-link :to="{ name: 'Athlete', params: { id: athlete._id }}" @click="saveAthlete(athlete)">
-          <span class="icon has-text-primary-dark">
-          <i class="fa fa-2x fa-user-edit"></i>
+          <span class="icon is-medium has-background-warning has-text-white mr-1">
+          <i class="fa fa-lg fa-user-edit"></i>
         </span>
           </router-link>
+          <router-link :to="{ name: 'Table', params: { id: athlete._id }}" @click="saveAthlete(athlete)">
+          <span class="icon is-medium has-background-primary has-text-white mr-1">
+          <i class="fa fa-lg fa-table"></i>
+        </span>
+          </router-link>
+          <router-link :to="{ name: 'Chart', params: { id: athlete._id }}" @click="saveAthlete(athlete)">
+          <span class="icon is-medium has-background-primary has-text-white mr-1">
+          <i class="fa fa-lg fa-chart-area"></i>
+        </span>
+          </router-link>
+
         </td>
       </tr>
     </table>
@@ -51,7 +60,6 @@ has-text-left"
 <script lang="ts">
 import {Vue} from "vue-class-component";
 import {AthleteInterface} from "@/store/modules/athletes";
-import {UserInterface} from "@/store/modules/user";
 
 export default class Athletes extends Vue {
   private athletes = [<AthleteInterface>{}]
diff --git a/web/src/views/DashboardHome.vue b/web/src/views/DashboardHome.vue
index 3d63271..082beb5 100644
--- a/web/src/views/DashboardHome.vue
+++ b/web/src/views/DashboardHome.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 class="title is-2">Home</h1>
+  <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">
diff --git a/web/src/views/Profile.vue b/web/src/views/Profile.vue
index ffbc62c..0025eab 100644
--- a/web/src/views/Profile.vue
+++ b/web/src/views/Profile.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 class="title is-2">Profile</h1>
+  <h1 class="title is-2">/profile</h1>
   <form @submit="update">
     <div class="tile is-ancestor">
       <div class="tile is-4 is-vertical is-parent">