diff --git a/client/services/socket.js b/client/services/socket.js index 773cfa0..fae1e77 100644 --- a/client/services/socket.js +++ b/client/services/socket.js @@ -9,7 +9,7 @@ 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!')); @@ -35,6 +35,5 @@ socket.on('closeConn', () => { }); setInterval(() => { - socket.emit('data', {measurement: 5, mac, pointName: 'leg-measurement'}); + socket.emit('data', {measurement: Date.now(), mac, pointName: 'test-measure'}); }, 3 * 1000); - diff --git a/server/routes/data.js b/server/routes/data.js index 5fafa03..0afd02f 100644 --- a/server/routes/data.js +++ b/server/routes/data.js @@ -1,11 +1,13 @@ const express = require('express') const router = express.Router(); const mongoose = require('mongoose'); -const {requireAuth} = require('../middlewares/middleware'); +const {celebrate} = require('celebrate'); +const {requireAuth} = require('../middlewares/middleware'); const Athlete = mongoose.model('Athlete'); const {influx_bucket} = require('../config/keys') const {iQuery} = require('../actions/influx_actions') +const {guid} = require('../schemas/joi') router.get('/api/data', requireAuth, @@ -18,6 +20,7 @@ router.get('/api/data', router.get('/api/data/:id', requireAuth, + celebrate(guid), async (req, res) => { const athlete = await Athlete.findById(req.params.id); diff --git a/server/schemas/joi.js b/server/schemas/joi.js index 8cf895f..d63b724 100644 --- a/server/schemas/joi.js +++ b/server/schemas/joi.js @@ -34,7 +34,7 @@ const athleteUpdateSchema = { socketID: Joi.string().required(), name: Joi.string().required(), __v: Joi.number().integer(), - _trainer: Joi.string().allow(''), + _trainer: Joi.string().allow('').default(''), } } diff --git a/server/services/socket.js b/server/services/socket.js index 4e2bf4e..ccd69c8 100644 --- a/server/services/socket.js +++ b/server/services/socket.js @@ -39,7 +39,7 @@ module.exports = (server) => { socket.on('data', (data) => { const {measurement, pointName, mac} = data; - io.emit('console', {measurement}) + io.emit('console', {measurement, pointName}) iWrite(pointName, mac, measurement) }); diff --git a/web/src/assets/undraw_data_trends_b0wg.svg b/web/src/assets/undraw_data_trends_b0wg.svg new file mode 100644 index 0000000..73fbcb6 --- /dev/null +++ b/web/src/assets/undraw_data_trends_b0wg.svg @@ -0,0 +1 @@ +data trends \ No newline at end of file diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue index 50606a7..9bbc665 100644 --- a/web/src/components/Navbar.vue +++ b/web/src/components/Navbar.vue @@ -3,7 +3,7 @@
- +

Ichnaea

 @@ -47,16 +47,13 @@ export default class Navbar extends Vue { private user = {}; created() { - this.user = this.$store.getters.currentUser + this.user = this.$store.getters.user_current } private logout() { this.$store.dispatch('logout') .then(() => this.$router.push('/')) - .catch((err: any) => { - console.log(err) - this.$router.push('/') - }) + .catch(() => this.$router.push('/')); } } diff --git a/web/src/router/index.ts b/web/src/router/index.ts index 656d8eb..f74f42f 100644 --- a/web/src/router/index.ts +++ b/web/src/router/index.ts @@ -80,13 +80,13 @@ const router = createRouter({ router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { - if (store.getters.isLoggedIn) { - next() - return + if (store.getters.user_loggedIn) { + next(); + return; } - next('/login') + next('/login'); } else { - next() + next(); } }) diff --git a/web/src/store/index.ts b/web/src/store/index.ts index f62cb96..f1aac61 100644 --- a/web/src/store/index.ts +++ b/web/src/store/index.ts @@ -4,6 +4,7 @@ import createPersistedState from "vuex-persistedstate"; import user from './modules/user' import backend from './modules/backend' import athletes from './modules/athletes' +import axios, {AxiosResponse} from "axios"; export default createStore({ modules: { @@ -11,5 +12,24 @@ export default createStore({ backend, athletes, }, + actions: { + logout({commit}) { + return new Promise((resolve, reject) => { + axios({ + method: 'POST', + url: '/auth/logout', + }) + .then((resp: AxiosResponse) => { + commit('auth_logout'); + commit('athletes_logout'); + commit('server_logout'); + resolve(resp); + }) + .catch((err: Error) => { + reject(err); + }); + }); + } + }, plugins: [createPersistedState()] }) diff --git a/web/src/store/modules/athletes.ts b/web/src/store/modules/athletes.ts index 2ce2721..a3a15da 100644 --- a/web/src/store/modules/athletes.ts +++ b/web/src/store/modules/athletes.ts @@ -16,30 +16,30 @@ export default class Athletes extends VuexModule { private athlete = {}; private trainer = {}; private athletes = [{}]; - private err = {} + private err = {}; - get currentAthlete() { + get athlete_current() { return this.athlete; } - get currentTrainer() { + get athlete_trainer() { return this.trainer; } - get currentAthletes() { + get athlete_currents() { return this.athletes; } - get getErrAthlete() { - return this.err + get athlete_err() { + return this.err; } - @Mutation save_trainer(trainer: UserInterface) { + @Mutation api_trainer(trainer: UserInterface) { this.trainer = trainer; } @Mutation - private save_athlete(athlete: AthleteInterface) { + private api_athlete(athlete: AthleteInterface) { this.athlete = athlete; } @@ -49,36 +49,36 @@ export default class Athletes extends VuexModule { } @Mutation - private auth_logout() { + private athletes_logout() { this.athlete = {}; - this.trainer = {} + this.trainer = {}; this.athletes = [{}]; } @Mutation - private update_error(err: Error) { - this.err = err + private update_err(err: Error) { + this.err = err; } @Action - private getAthletes() { + private athlete_getAll() { return new Promise((resolve, reject) => { axios({ method: 'GET', url: '/api/athletes' }) .then((resp: AxiosResponse) => { - this.context.commit('api_athletes', resp.data) - resolve(resp) + this.context.commit('api_athletes', resp.data); + resolve(resp); }) .catch((err: Error) => { - reject(err) - }) - }) + reject(err); + }); + }); } @Action - private updateAthlete(athlete: AthleteInterface) { + private athlete_update(athlete: AthleteInterface) { return new Promise((resolve, reject) => { axios({ method: 'PUT', @@ -86,22 +86,22 @@ export default class Athletes extends VuexModule { data: {...athlete} }) .then((resp: AxiosResponse) => { - this.context.commit('save_athlete', resp.data) - resolve(resp) + this.context.commit('api_athlete', resp.data); + resolve(resp); }) .catch((err: Error) => { - reject(err) - }) - }) + reject(err); + }); + }); } @Action - private saveTrainer(trainer: UserInterface) { - this.context.commit('save_trainer', trainer) + private athlete_saveLocalTrainer(trainer: UserInterface) { + this.context.commit('api_trainer', trainer); } @Action - private saveAthlete(athlete: AthleteInterface) { - this.context.commit('save_athlete', athlete) + private athlete_saveLocal(athlete: AthleteInterface) { + this.context.commit('api_athlete', athlete); } } \ No newline at end of file diff --git a/web/src/store/modules/backend.ts b/web/src/store/modules/backend.ts index 2210116..10fe52c 100644 --- a/web/src/store/modules/backend.ts +++ b/web/src/store/modules/backend.ts @@ -1,15 +1,82 @@ -import {Module, Mutation, VuexModule} from 'vuex-module-decorators' +import {Action, Module, Mutation, VuexModule} from 'vuex-module-decorators' +import axios, {AxiosResponse} from "axios"; + +export interface AthleteData { + measurement: Date, + pointName: string, +} @Module export default class Backend extends VuexModule { - private serverStatus = false + private serverStatus = false; + private liveAthData: AthleteData[] = []; + + get server_status() { + return this.serverStatus; + } + + get server_liveData() { + return this.liveAthData; + } + + @Mutation + private socket_connection(status: boolean) { + this.serverStatus = status; + } + + @Mutation + private server_queueData(data: AthleteData) { + this.liveAthData.push(data); + } - get currentServerStatus() { - return this.serverStatus + @Mutation + private server_dequeueData() { + this.liveAthData.shift(); } @Mutation - private serverConnected(status: boolean) { - this.serverStatus = status + private server_logout() { + this.liveAthData = [] } + + @Action + private server_saveLiveData(data: AthleteData) { + console.log(this.liveAthData); + this.context.commit('server_queueData', data); + if (this.liveAthData.length > 15) + this.context.commit('server_dequeueData'); + } //Too "expensive" of an action? To be refactored. + + @Action + private server_getAll() { + return new Promise((resolve, reject) => { + axios({ + method: 'GET', + url: `/api/data/` + }) + .then((resp: AxiosResponse) => { + resolve(resp) + }) + .catch((err: Error) => { + reject(err) + }); + }); + } + + @Action + private server_getOne(id: string) { + return new Promise((resolve, reject) => { + axios({ + method: 'GET', + url: `/api/data/${id}` + }) + .then((resp: AxiosResponse) => { + resolve(resp) + }) + .catch((err: Error) => { + reject(err) + }); + }); + } + } \ No newline at end of file diff --git a/web/src/store/modules/user.ts b/web/src/store/modules/user.ts index fe5a2ba..78da540 100644 --- a/web/src/store/modules/user.ts +++ b/web/src/store/modules/user.ts @@ -17,16 +17,16 @@ export default class User extends VuexModule { private userStatus = false; private err = {}; - get currentUser() { + get user_current() { return this.user; } - get isLoggedIn() { + get user_loggedIn() { return this.userStatus; } - get getErrUser() { - return this.err + get user_err() { + return this.err; } @Mutation @@ -38,7 +38,7 @@ export default class User extends VuexModule { @Mutation private auth_error(err: Error) { this.userStatus = false; - this.err = err + this.err = err; } @Mutation @@ -48,17 +48,17 @@ export default class User extends VuexModule { } @Mutation - private update_error(err: Error) { - this.err = err + private update_err(err: Error) { + this.err = err; } @Mutation private update_user(user: UserInterface) { - this.user = user + this.user = user; } @Action - private login(user: UserInterface) { + private user_login(user: UserInterface) { return new Promise((resolve, reject) => { axios({ method: 'POST', @@ -66,18 +66,18 @@ export default class User extends VuexModule { data: qs.stringify({...user}) }) .then((resp: AxiosResponse) => { - this.context.commit('auth_success', resp.data.user) - resolve(resp) + this.context.commit('auth_success', resp.data.user); + resolve(resp); }) .catch((err: Error) => { - this.context.commit('auth_error', err) - reject(err) - }) - }) + this.context.commit('auth_error', err); + reject(err); + }); + }); } @Action - private logout() { + private user_logout() { return new Promise((resolve, reject) => { axios({ method: 'POST', @@ -86,16 +86,16 @@ export default class User extends VuexModule { .then((resp: AxiosResponse) => { this.context.commit('auth_logout'); this.context.commit('athlete_logout'); - resolve(resp) + resolve(resp); }) .catch((err: Error) => { - reject(err) - }) - }) + reject(err); + }); + }); } @Action - private getCurrentUser() { + private user_currentSession() { return new Promise((resolve, reject) => { axios({ method: 'GET', @@ -103,49 +103,49 @@ export default class User extends VuexModule { }) .then((resp: AxiosResponse) => { this.context.commit('auth_success', resp.data); - resolve(resp) + resolve(resp); }) .catch((err: Error) => { this.context.commit('auth_error') - reject(err) - }) - }) + reject(err); + }); + }); } + @Action - private specificUser(id: string) { + private user_update(user: UserInterface) { return new Promise((resolve, reject) => { axios({ - method: 'GET', - url: `/api/user/${id}` + method: 'PUT', + url: `/api/user/${user._id}`, + data: {...user} }) .then((resp: AxiosResponse) => { - resolve(resp) + this.context.commit('update_user', resp.data); + resolve(resp); }) .catch((err: Error) => { - reject(err) - }) - }) + this.context.commit('update_err', err) + reject(err); + }); + }); } @Action - private updateUser(user: UserInterface) { + private user_getOne(id: string) { return new Promise((resolve, reject) => { axios({ - method: 'PUT', - url: `/api/user/${user._id}`, - data: {...user} + method: 'GET', + url: `/api/user/${id}` }) .then((resp: AxiosResponse) => { - console.log(resp.data) - this.context.commit('update_user', resp.data); - resolve(resp) + resolve(resp); }) .catch((err: Error) => { - this.context.commit('update_error', err) - reject(err) - }) - }) + reject(err); + }); + }); } -} +} diff --git a/web/src/views/Athlete.vue b/web/src/views/Athlete.vue index 9860a39..7172196 100644 --- a/web/src/views/Athlete.vue +++ b/web/src/views/Athlete.vue @@ -10,12 +10,12 @@
- + - + @@ -27,7 +27,7 @@
-
+

Personal Details

@@ -87,7 +87,7 @@

- +

@@ -117,31 +117,32 @@ import {AthleteInterface} from "@/store/modules/athletes"; import {UserInterface} from "@/store/modules/user"; export default class Athlete extends Vue { - private athlete = {} - private trainer = {} + private athlete = {}; + private trainer = {}; private trainerLogin = ''; - private msgError = '' - private msgSuccess = '' - private clientID = '' + private msgError = ''; + private msgSuccess = ''; + private clientID = ''; mounted() { - this.athlete = this.$store.getters.currentAthlete + this.athlete = this.$store.getters.athlete_current; - if (this.athlete._trainer && (this.athlete._trainer != this.$store.getters.currentUser._id)) { - this.$store.dispatch('specificUser', this.athlete._trainer) + if (this.athlete._trainer && (this.athlete._trainer != this.$store.getters.user_current._id)) { + this.$store.dispatch('user_getOne', this.athlete._trainer) .then((res: any) => this.trainer === res.data) - .catch((err: any) => this.msgError = err.response.data.errors.message || err.message || 'Something went wrong!') - } else if (this.athlete._trainer === this.$store.getters.currentUser._id) { - this.trainer = this.$store.getters.currentUser + .catch((err: any) => this.msgError = err.response.data.errors.message || err.message || + 'Something went wrong!'); + } else if (this.athlete._trainer === this.$store.getters.user_current._id) { + this.trainer = this.$store.getters.user_current; } if (this.trainer) { - this.trainerLogin = new Date(this.trainer.lastLogin).toLocaleString() - this.$store.dispatch('saveTrainer', this.trainer) + this.trainerLogin = new Date(this.trainer.lastLogin).toLocaleString(); + this.$store.dispatch('athlete_saveLocalTrainer', this.trainer); } } - private update(action: string) { + private athlete_update(action: string) { if (action === 'adopt' && this.clientID === '') { this.msgError = 'Please give a valid athlete ID!'; return; @@ -152,16 +153,19 @@ export default class Athlete extends Vue { return; } - const user = {_trainer: this.$store.getters.currentUser._id} - Object.assign(this.athlete, user) + if (action === 'adopt') { + Object.assign(this.athlete, {_trainer: this.$store.getters.user_current._id}); + } else { + Object.assign(this.athlete, {_trainer: ''}); + } - this.$store.dispatch('updateAthlete', this.athlete) + this.$store.dispatch('athlete_update', this.athlete) .then((res: any) => { this.msgSuccess = 'Athlete updated' this.athlete = res.data; }) - .catch(() => this.msgError = this.$store.getters.getErrAthlete.response.data.errors.message || - 'Something went wrong!') + .catch(() => this.msgError = this.$store.getters.athlete_err.response.data.errors.message || + 'Something went wrong!'); } } diff --git a/web/src/views/Athletes.vue b/web/src/views/Athletes.vue index 3d12833..89b2a86 100644 --- a/web/src/views/Athletes.vue +++ b/web/src/views/Athletes.vue @@ -4,29 +4,26 @@
Your adopted athletes are displayed on this table. Choose an athlete and view his details, data.
-
+ +
- +
+ - - - + +
- Athlete status + + Athlete status - Name + + Name - ID + + ID Actions
Online @@ -39,47 +36,48 @@ {{ athlete.id }} - + - + - + - + - +
+

Search all athletes

All athletes are displayed on this table.

- +
+
+ class="table is-striped is-large is-hoverable is-fullwidth has-text-centered"> + + +
@@ -92,6 +90,7 @@ Actions
Online @@ -107,23 +106,24 @@ - + - + - +
@@ -135,32 +135,32 @@ import {AthleteInterface} from "@/store/modules/athletes"; import {UserInterface} from "@/store/modules/user"; export default class Athletes extends Vue { - private athletes = [{}] - private myAthletes = [{}] - private user = {} - private msg = '' + private athletes = [{}]; + private myAthletes = [{}]; + private user = {}; + private msg = ''; mounted() { - this.$store.dispatch('getAthletes') + this.$store.dispatch('athlete_getAll') .then((res: any) => { this.athletes = res.data; - this.user = this.$store.getters.currentUser + this.user = this.$store.getters.user_current for (const athlete of this.athletes) { if (athlete._trainer === this.user._id) - this.myAthletes.push(athlete) + this.myAthletes.push(athlete); } }) - .catch((err: any) => this.msg = err.response.data.errors.message || err.message || 'Something went wrong!') + .catch((err: any) => this.msg = err.response.data.errors.message || err.message || 'Something went wrong!'); } - private saveAthlete(athlete: AthleteInterface) { - this.$store.dispatch('saveAthlete', athlete) + private athlete_save(athlete: AthleteInterface) { + this.$store.dispatch('athlete_saveLocal', athlete); } - private removeMyAthlete(athlete: AthleteInterface, index: number) { - athlete._trainer = undefined - this.$store.dispatch('updateAthlete', athlete) - .then(() => this.myAthletes.splice(index, 1)) + private athlete_delete(athlete: AthleteInterface, index: number) { + athlete._trainer = undefined; + this.$store.dispatch('athlete_update', athlete) + .then(() => this.myAthletes.splice(index, 1)); } } diff --git a/web/src/views/Chart.vue b/web/src/views/Chart.vue index 0ff8213..5c4a34e 100644 --- a/web/src/views/Chart.vue +++ b/web/src/views/Chart.vue @@ -11,7 +11,7 @@ export default class Chart extends Vue { private athlete = {} mounted() { - this.athlete = this.$store.getters.currentAthlete + this.athlete = this.$store.getters.athlete_current } } diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue index 093d5e0..ac8495f 100644 --- a/web/src/views/Dashboard.vue +++ b/web/src/views/Dashboard.vue @@ -13,6 +13,7 @@ import {io} from 'socket.io-client' import Navbar from '@/components/Navbar.vue' import Sidebar from '@/components/Sidebar.vue' import Footer from '@/components/Footer.vue' +import {AthleteData} from "@/store/modules/backend"; @Options({ components: { @@ -26,24 +27,29 @@ export default class Dashboard extends Vue { private socket!: any; created() { - this.io() + this.io(); + } + + beforeUnmount() { + this.socket.close() } private io() { - this.socket = io('/') + this.socket = io('/'); this.socket.on('connect', () => { - this.$store.commit("serverConnected", true); + this.$store.commit("socket_connection", true); }); this.socket.on('disconnect', (reason: string) => { - this.$store.commit("serverConnected", false); + this.$store.commit("socket_connection", false); if (reason === 'io server disconnect') this.socket.connect(); }); - this.socket.on('console', (data: {}) => { - }) + this.socket.on('console', (data: AthleteData) => { + this.$store.dispatch('server_saveLiveData', data); + }); } } diff --git a/web/src/views/DashboardHome.vue b/web/src/views/DashboardHome.vue index 6fe56e0..f1e659a 100644 --- a/web/src/views/DashboardHome.vue +++ b/web/src/views/DashboardHome.vue @@ -25,7 +25,7 @@

System status

-

All systems operational

+

All systems operational

Something does not seem right

@@ -82,8 +82,8 @@ export default class DashboardHome extends Vue { private date: string = ''; created() { - this.user = this.$store.getters.currentUser - this.date = new Date(this.user.lastLogin).toLocaleString() + this.user = this.$store.getters.user_current; + this.date = new Date(this.user.lastLogin).toLocaleString(); } } diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue index 5051389..cbeb789 100644 --- a/web/src/views/Login.vue +++ b/web/src/views/Login.vue @@ -4,7 +4,7 @@

Login

- +

@@ -56,25 +56,22 @@ export default class Login extends Vue { private password = ''; mounted() { - this.getCurrentUser(); + this.currentSession(); } - private getCurrentUser() { - this.$store.dispatch('getCurrentUser') + private currentSession() { + this.$store.dispatch('user_currentSession') .then((res: any) => this.$router.push({name: 'Dashboard', params: {username: res.data.username}})) .catch(() => { - this.$router.push('/login') - }) + }); } - private login() { - let user = {username: this.username, password: this.password} - - this.$store.dispatch('login', user) + private user_login() { + this.$store.dispatch('user_login', {username: this.username, password: this.password}) .then(() => this.$router.push({name: 'Dashboard', params: {username: this.username}})) .catch(() => { - this.msg = this.$store.getters.getErrUser.response.data.errors.message || 'Something went wrong!' - }) + this.msg = this.$store.getters.user_err.response.data.errors.message || 'Something went wrong!' + }); } } diff --git a/web/src/views/Profile.vue b/web/src/views/Profile.vue index 27d4511..a6ff50f 100644 --- a/web/src/views/Profile.vue +++ b/web/src/views/Profile.vue @@ -1,6 +1,6 @@