xrazis
/
ichnaea
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Allow athlete adopting by providing ID

main
Haris Razis 4 years ago
parent
1fd3bb9b47
commit
37b120d2bd
5 changed files with 204 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      client/services/socket.js
  2. 10
      server/routes/athletes.js
  3. 2
      web/src/store/modules/athletes.ts
  4. 60
      web/src/views/Athlete.vue
  5. 116
      web/src/views/Athletes.vue

5
client/services/socket.js
View File

@ -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!'));

10
server/routes/athletes.js
View File

@ -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!'});

2
web/src/store/modules/athletes.ts
View File

@ -8,7 +8,7 @@ export interface AthleteInterface {
id: string,
socketID: string,
name: string,
_trainer: UserInterface
_trainer: string
}
@Module

60
web/src/views/Athlete.vue
View File

@ -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">
<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>
<button class="button is-large is-rounded is-primary is-light" @click="update">Adopt</button>
</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'

116
web/src/views/Athletes.vue
View File

@ -1,18 +1,89 @@
<template>
<h1 class="title is-2">/athletes</h1>
<div class="tile">
<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"
>
has-text-centered">
<thead>
<tr>
<th><span class="icon mr-1"><i class="fa fa-id-card"></i></span>
Athlete id
<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>
<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
@ -23,7 +94,8 @@ has-text-left"
</thead>
<tr v-for="(athlete, index) in athletes" :key="index">
<td class="is-family-monospace">
<span>{{ athlete.id }}</span>
<span v-if="athlete.socketID">Online</span>
<span v-else>Offline</span>
</td>
<td>
<span>{{ athlete.name }}</span>
@ -35,11 +107,6 @@ has-text-left"
<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)">
<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>
@ -50,24 +117,40 @@ has-text-left"
<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>
</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>

Write Preview
Loading…
Cancel
Save