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

➕ Add user dashboard UI elements

main
Haris Razis 4 years ago
parent
ab352ee800
commit
220d7594d3
8 changed files with 132 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      web/src/components/Navbar.vue
  2. 102
      web/src/components/Sidebar.vue
  3. 7
      web/src/store/modules/athletes.ts
  4. 5
      web/src/store/modules/user.ts
  5. 4
      web/src/views/Athlete.vue
  6. 32
      web/src/views/Athletes.vue
  7. 2
      web/src/views/DashboardHome.vue
  8. 2
      web/src/views/Profile.vue

14
web/src/components/Navbar.vue
View File

@ -22,11 +22,13 @@
<div id="navbarBasicExample" class="navbar-menu"> <div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end"> <div class="navbar-end">
<a class="navbar-item"> <a class="navbar-item">
<router-link :to="{ name: 'Profile', params: { username: user.username }}"> <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
<span class="icon mr-1 has-text-white"> <div class="icon-text">
<span class="icon mr-1 has-text-white">
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
</span> </span>
<span class="has-text-white">{{ user.username }}</span> <span class="has-text-white">{{ user.username }}</span>
</div>
</router-link> </router-link>
</a> </a>
<a class="navbar-item has-text-danger mr-2" @click="logout"> <a class="navbar-item has-text-danger mr-2" @click="logout">
@ -35,12 +37,6 @@
</span> </span>
<span>Logout</span> <span>Logout</span>
</a> </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>
</div> </div>
</nav> </nav>

102
web/src/components/Sidebar.vue
View File

@ -6,19 +6,24 @@
</p> </p>
<ul class="menu-list"> <ul class="menu-list">
<li> <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> <a>
<span class="icon-text"> <span class=" icon-text
<span class="icon"> ">
<span class="icon">
<i class="fas fa-digital-tachograph"/> <i class="fas fa-digital-tachograph"/>
</span> </span>
<span>&nbsp;Dashboard</span> <span>&nbsp;Dashboard</span>
</span> </span>
</a> </a>
</router-link> </router-link>
</li> </li>
<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> <a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
@ -30,7 +35,10 @@
</router-link> </router-link>
</li> </li>
<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> <a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
@ -47,19 +55,48 @@
</p> </p>
<ul class="menu-list"> <ul class="menu-list">
<li> <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> <a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
<i class="fas fa-table"/> <i class="fas fa-table"/>
</span> </span>
<span>&nbsp;Tables</span> <span>&nbsp;Table</span>
</span> </span>
</a> </a>
</router-link> </router-link>
</li> </li>
<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> <a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
@ -71,6 +108,53 @@
</router-link> </router-link>
</li> </li>
</ul> </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> </div>
</aside> </aside>
</template> </template>

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

@ -44,6 +44,13 @@ export default class Athletes extends VuexModule {
this.athletes = athletes; this.athletes = athletes;
} }
@Mutation
private auth_logout() {
this.athlete = <AthleteInterface>{};
this.trainer = <UserInterface>{}
this.athletes = [<AthleteInterface>{}];
}
@Action @Action
private getAthletes() { private getAthletes() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

5
web/src/store/modules/user.ts
View File

@ -69,6 +69,7 @@ export default class User extends VuexModule {
}) })
.then((resp: AxiosResponse) => { .then((resp: AxiosResponse) => {
this.context.commit('auth_logout'); this.context.commit('auth_logout');
this.context.commit('athlete_logout');
resolve(resp) resolve(resp)
}) })
.catch((err: Error) => { .catch((err: Error) => {
@ -114,11 +115,11 @@ export default class User extends VuexModule {
} }
@Action @Action
private specificUser(user: UserInterface) { private specificUser(id: string) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios({ axios({
method: 'GET', method: 'GET',
url: `/api/user/${user._id}` url: `/api/user/${id}`
}) })
.then((resp: AxiosResponse) => { .then((resp: AxiosResponse) => {
resolve(resp) resolve(resp)

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

@ -1,5 +1,5 @@
<template> <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-ancestor">
<div class="tile is-6 is-vertical is-parent"> <div class="tile is-6 is-vertical is-parent">
<form @submit="update"> <form @submit="update">
@ -55,7 +55,7 @@
<p>It seems that this athlete has no trainer attached to him!</p> <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>By adopting an athlete you can edit his personal details and view his performance stats.</p>
</ul> </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>
<div v-else> <div v-else>
<div class="field"> <div class="field">

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

@ -1,5 +1,5 @@
<template> <template>
<h1 class="title is-2">Athletes</h1> <h1 class="title is-2">/athletes</h1>
<div class="tile"> <div class="tile">
<table <table
class="table class="table
@ -11,24 +11,22 @@ has-text-left"
> >
<thead> <thead>
<tr> <tr>
<th>Athlete id</th> <th><span class="icon mr-1"><i class="fa fa-id-card"></i></span>
<th>Name</th> Athlete id
</th>
<th><span class="icon mr-1"><i class="fas fa-running"></i></span>
Name
</th>
<th>Trainer</th> <th>Trainer</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tr v-for="(athlete, index) in athletes" :key="index"> <tr v-for="(athlete, index) in athletes" :key="index">
<td class="is-family-monospace"> <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>{{ athlete.id }}</span>
</span>
</td> </td>
<td> <td>
<span class="icon-text">
<span class="icon mr-1"><i class="fa fa-signature"></i></span>
<span>{{ athlete.name }}</span> <span>{{ athlete.name }}</span>
</span>
</td> </td>
<td v-if="athlete._trainer"> <td v-if="athlete._trainer">
<span class="icon mr-1"><i class="fa fa-check"></i></span> <span class="icon mr-1"><i class="fa fa-check"></i></span>
@ -38,10 +36,21 @@ has-text-left"
</td> </td>
<td> <td>
<router-link :to="{ name: 'Athlete', params: { id: athlete._id }}" @click="saveAthlete(athlete)"> <router-link :to="{ name: 'Athlete', params: { id: athlete._id }}" @click="saveAthlete(athlete)">
<span class="icon has-text-primary-dark"> <span class="icon is-medium has-background-warning has-text-white mr-1">
<i class="fa fa-2x fa-user-edit"></i> <i class="fa fa-lg fa-user-edit"></i>
</span> </span>
</router-link> </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> </td>
</tr> </tr>
</table> </table>
@ -51,7 +60,6 @@ has-text-left"
<script lang="ts"> <script lang="ts">
import {Vue} from "vue-class-component"; import {Vue} from "vue-class-component";
import {AthleteInterface} from "@/store/modules/athletes"; import {AthleteInterface} from "@/store/modules/athletes";
import {UserInterface} from "@/store/modules/user";
export default class Athletes extends Vue { export default class Athletes extends Vue {
private athletes = [<AthleteInterface>{}] private athletes = [<AthleteInterface>{}]

2
web/src/views/DashboardHome.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<h1 class="title is-2">Home</h1> <h1 class="title is-2">/home</h1>
<div class="tile"> <div class="tile">
<article class="tile is-child notification has-background-primary-dark has-text-white"> <article class="tile is-child notification has-background-primary-dark has-text-white">
<nav class="level"> <nav class="level">

2
web/src/views/Profile.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<h1 class="title is-2">Profile</h1> <h1 class="title is-2">/profile</h1>
<form @submit="update"> <form @submit="update">
<div class="tile is-ancestor"> <div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent"> <div class="tile is-4 is-vertical is-parent">

Write Preview
Loading…
Cancel
Save