From 37b120d2bdf7d306df3b3b3c77983b9cd308f591 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Mon, 11 Jan 2021 13:18:46 +0200
Subject: [PATCH] Allow athlete adopting by providing ID

---
 client/services/socket.js         |   5 +
 server/routes/athletes.js         |  10 +-
 web/src/store/modules/athletes.ts |   2 +-
 web/src/views/Athlete.vue         |  68 ++++++++++--
 web/src/views/Athletes.vue        | 174 ++++++++++++++++++++++--------
 5 files changed, 204 insertions(+), 55 deletions(-)

diff --git a/client/services/socket.js b/client/services/socket.js
index 307f3c6..773cfa0 100644
--- a/client/services/socket.js
+++ b/client/services/socket.js
@@ -6,6 +6,11 @@ const getMAC = require('getmac').default
 const socket = io(server_url);
 const mac = getMAC();
 
+console.log(chalk.green(`
+    ID: ${mac}
+    Use this ID, to adopt the athlete on the user dashboard.
+`))
+
 socket.on('connect', () => {
     console.log(chalk.green('Connected to server!'));
 
diff --git a/server/routes/athletes.js b/server/routes/athletes.js
index 6a1bb35..a390e31 100644
--- a/server/routes/athletes.js
+++ b/server/routes/athletes.js
@@ -39,7 +39,15 @@ router.put('/api/athletes/:id',
         const {name, _trainer} = req.body
         const updateAthlete = {name, _trainer}
 
-        if (name || _trainer)
+        if (_trainer === '') {
+            updateAthlete._trainer = undefined
+            await Athlete.findByIdAndUpdate(req.params.id, updateAthlete, {}, (err, athlete) => {
+                if (err)
+                    return res.status(400).json({errors: 'Something went wrong!'});
+
+                return res.send(athlete)
+            })
+        } else if (name || _trainer)
             await Athlete.findByIdAndUpdate(req.params.id, updateAthlete, {}, (err, athlete) => {
                 if (err)
                     return res.status(400).json({errors: 'Something went wrong!'});
diff --git a/web/src/store/modules/athletes.ts b/web/src/store/modules/athletes.ts
index a65e47b..26569dc 100644
--- a/web/src/store/modules/athletes.ts
+++ b/web/src/store/modules/athletes.ts
@@ -8,7 +8,7 @@ export interface AthleteInterface {
     id: string,
     socketID: string,
     name: string,
-    _trainer: UserInterface
+    _trainer: string
 }
 
 @Module
diff --git a/web/src/views/Athlete.vue b/web/src/views/Athlete.vue
index 5398c2e..9860a39 100644
--- a/web/src/views/Athlete.vue
+++ b/web/src/views/Athlete.vue
@@ -1,5 +1,30 @@
 <template>
   <h1 class="title is-2">/athletes/{{ athlete.name }}</h1>
+  <div class="tile mb-5">
+    <article class="tile is-child box">
+      <nav class="level">
+        <div class="level-left">
+          <div class="level-item ">
+            <div class="title">Actions</div>
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item has-text-centered">
+            <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>
+          </div>
+        </div>
+      </nav>
+    </article>
+  </div>
   <div class="tile is-ancestor">
     <div class="tile is-6 is-vertical is-parent">
       <form @submit="update">
@@ -11,10 +36,6 @@
               <input v-model="athlete.name" class="input" type="text">
             </div>
           </div>
-          <div class="field">
-            <label class="label">ID</label>
-            <p>{{ athlete.id }}</p>
-          </div>
           <div class="field">
             <label class="label">Client Status</label>
             <p v-if="athlete.socketID">Online</p>
@@ -50,12 +71,25 @@
     <div class="tile is-parent">
       <div class="tile is-child box">
         <p class="title">Trainer Status</p>
-        <div v-if="!athlete._trainer" class="notification is-warning is-light mt-5">
-          <ul>
-            <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">Adopt</button>
+        <div v-if="!athlete._trainer">
+          <div class="notification is-primary is-light mt-5">
+            <ul>
+              <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>
+              <p>Enter the client id displayed in the clients terminal to adopt him!</p>
+            </ul>
+          </div>
+          <div class="field">
+            <label class="label">Athlete ID</label>
+            <div class="control">
+              <input v-model="clientID" class="input" type="text">
+            </div>
+          </div>
+          <div class="field">
+            <p class="control">
+              <button class="button is-medium is-rounded is-primary" @click="update('adopt')">Adopt</button>
+            </p>
+          </div>
         </div>
         <div v-else>
           <div class="field">
@@ -88,6 +122,7 @@ export default class Athlete extends Vue {
   private trainerLogin = '';
   private msgError = ''
   private msgSuccess = ''
+  private clientID = ''
 
   mounted() {
     this.athlete = this.$store.getters.currentAthlete
@@ -106,9 +141,20 @@ export default class Athlete extends Vue {
     }
   }
 
-  private update() {
+  private update(action: string) {
+    if (action === 'adopt' && this.clientID === '') {
+      this.msgError = 'Please give a valid athlete ID!';
+      return;
+    }
+
+    if (this.clientID != '' && this.clientID != this.athlete.id) {
+      this.msgError = 'Athlete ID does not match with current athlete!';
+      return;
+    }
+
     const user = {_trainer: this.$store.getters.currentUser._id}
     Object.assign(this.athlete, user)
+
     this.$store.dispatch('updateAthlete', this.athlete)
         .then((res: any) => {
           this.msgSuccess = 'Athlete updated'
diff --git a/web/src/views/Athletes.vue b/web/src/views/Athletes.vue
index 02ef6ca..cabf2db 100644
--- a/web/src/views/Athletes.vue
+++ b/web/src/views/Athletes.vue
@@ -1,73 +1,156 @@
 <template>
   <h1 class="title is-2">/athletes</h1>
-  <div class="tile">
-    <table
-        class="table
+
+  <div class="notification is-link is-light">
+    Your adopted athletes are displayed on this table. Choose an athlete and view his details, data.
+  </div>
+  <div class="section ">
+    <div class="table-container">
+      <table
+          class="table
         is-striped
         is-large
         is-hoverable
         is-fullwidth
-has-text-left"
-    >
-      <thead>
-      <tr>
-        <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>{{ athlete.id }}</span>
-        </td>
-        <td>
-          <span>{{ athlete.name }}</span>
-        </td>
-        <td v-if="athlete._trainer">
-          <span class="icon mr-1"><i class="fa fa-check"></i></span>
-        </td>
-        <td v-else>
-          <span class="icon mr-1"><i class="fa fa-times"></i></span>
-        </td>
-        <td>
-          <router-link :to="{ name: 'Athlete', params: { id: athlete._id }}" @click="saveAthlete(athlete)">
+        has-text-centered">
+        <thead>
+        <tr>
+          <th><span class="icon mr-1"><i class="fa fa-plug"></i></span>
+            Athlete status
+          </th>
+          <th><span class="icon mr-1"><i class="fas fa-running"></i></span>
+            Name
+          </th>
+          <th><span class="icon mr-1"><i class="fas fa-id-badge"></i></span>
+            ID
+          </th>
+          <th>Actions</th>
+        </tr>
+        </thead>
+        <tr v-for="(athlete, index) in myAthletes" :key="index">
+          <td class="is-family-monospace" v-if="athlete.name">
+            <span v-if="athlete.socketID">Online</span>
+            <span v-else>Offline</span>
+          </td>
+          <td v-if="athlete.name">
+            <span>{{ athlete.name }}</span>
+          </td>
+          <td v-if="athlete.name">
+            <span>{{ athlete.id }}</span>
+          </td>
+          <td v-if="athlete.name">
+            <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>
+            <router-link :to="{ name: 'Athlete', params: { id: athlete._id }}" @click="saveAthlete(athlete)">
           <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)">
+            </router-link>
+            <a @click="removeMyAthlete(athlete, index)">
+          <span class="icon is-medium has-background-danger has-text-white mr-1">
+          <i class="fa fa-lg fa-user-times"></i>
+        </span>
+            </a>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+  <div class="section is-medium">
+    <div class="container">
+      <h3 class="title is-4">Search all athletes</h3>
+      <p class="subtitle">All athletes are displayed on this table.</p>
+      <div class="control">
+        <input class="input is-focused" placeholder="Search Athletes" type="text">
+      </div>
+    </div>
+    <div class="table-container">
+      <table
+          class="table
+        is-striped
+        is-large
+        is-hoverable
+        is-fullwidth
+        has-text-centered">
+        <thead>
+        <tr>
+          <th><span class="icon mr-1"><i class="fa fa-plug"></i></span>
+            Athlete status
+          </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 v-if="athlete.socketID">Online</span>
+            <span v-else>Offline</span>
+          </td>
+          <td>
+            <span>{{ athlete.name }}</span>
+          </td>
+          <td v-if="athlete._trainer">
+            <span class="icon mr-1"><i class="fa fa-check"></i></span>
+          </td>
+          <td v-else>
+            <span class="icon mr-1"><i class="fa fa-times"></i></span>
+          </td>
+          <td>
+            <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)">
+            </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>
+            </router-link>
+            <router-link :to="{ name: 'Athlete', params: { id: athlete._id }}" @click="saveAthlete(athlete)">
+          <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>
+          </td>
+        </tr>
+      </table>
+    </div>
   </div>
 </template>
 
 <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>{}]
+  private myAthletes = [<AthleteInterface>{}]
+  private user = <UserInterface>{}
   private msg = ''
 
   mounted() {
+    this.myAthletes = [<AthleteInterface>{}]
     this.$store.dispatch('getAthletes')
-        .then((res: any) => this.athletes = res.data)
+        .then((res: any) => {
+          this.athletes = res.data;
+          this.user = this.$store.getters.currentUser
+          for (const athlete of this.athletes) {
+            if (athlete._trainer === this.user._id)
+              this.myAthletes.push(athlete)
+          }
+        })
         .catch((err: any) => this.msg = err.response.data.errors.message || err.message || 'Something went wrong!')
   }
 
@@ -75,6 +158,13 @@ export default class Athletes extends Vue {
     this.$store.dispatch('saveAthlete', athlete)
   }
 
+  private removeMyAthlete(athlete: AthleteInterface, index: number) {
+    athlete._trainer = ''
+    this.$store.dispatch('updateAthlete', athlete)
+        .then(() => this.myAthletes.splice(index, 1))
+  }
+
+
 }
 </script>