127 lines
3.0 KiB
Vue
127 lines
3.0 KiB
Vue
<template>
|
||
<div class="content">
|
||
<team-header/>
|
||
<hr/>
|
||
<div v-if="loading" class="center" >
|
||
<loader/>
|
||
</div>
|
||
<section v-if="currentResult" class="last-quiz">
|
||
<div class="last-quiz-header">
|
||
<span class="date"> {{ currentResult.createdDate | formatDate }}</span>
|
||
<nuxt-link
|
||
class="link" :to="{ path: '/details', query: { quiz: currentResult.id }}">
|
||
+ Voir le détail
|
||
</nuxt-link>
|
||
</div>
|
||
<div v-if="currentResult && currentResult.scores" class="chart-area">
|
||
<polar-area-chart :data="currentResult.scores.map(value => value.scoreAvg)"/>
|
||
<Legend/>
|
||
</div>
|
||
</section>
|
||
<section v-if="quizzes.length > 0" class="history" >
|
||
<div v-for="q in quizzes" :key="q.id">
|
||
<button @click="setCurrent(q)"><span>Boussole - {{ q.createdDate | formatDate }}</span><span>❯</span></button>
|
||
</div>
|
||
</section>
|
||
<section v-else-if="!loading" class="center">
|
||
Aucune auto-évaluation n'a été faite. Veuillez en réaliser une première.
|
||
</section>
|
||
<div class="button-container">
|
||
<nuxt-link class="button orange" to="/quiz">Nouveau</nuxt-link>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import {Component, Vue} from "vue-property-decorator";
|
||
import {AxiosResponse} from "axios";
|
||
import {RepositoryFactory} from "~/repositories/RepositoryFactory";
|
||
import {RestResponse} from "~/repositories/models/rest-response.model";
|
||
import {Quiz} from "~/repositories/models/quiz.model";
|
||
|
||
@Component
|
||
export default class History extends Vue {
|
||
|
||
readonly quizRepository = RepositoryFactory.get('quiz');
|
||
|
||
private quizzes: Quiz[] = [];
|
||
private currentResult: Quiz | null = null;
|
||
private loading = true;
|
||
|
||
async mounted() {
|
||
await this.quizRepository.findMine().then((response: AxiosResponse<RestResponse<Quiz>>) => {
|
||
this.quizzes = response.data._embedded.quizzes;
|
||
});
|
||
this.currentResult = this.quizzes.length > 0 ? this.quizzes[0] : null;
|
||
this.loading = false;
|
||
}
|
||
|
||
private setCurrent(quiz: Quiz) {
|
||
this.currentResult = quiz;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "assets/css/color";
|
||
@import "assets/css/spacing";
|
||
@import "assets/css/font";
|
||
|
||
.last-quiz {
|
||
margin-bottom: $x_small 0;
|
||
}
|
||
|
||
.last-quiz-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: $tertiary-font-size;
|
||
|
||
.date {
|
||
color: $gray_4;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.link {
|
||
color: $blue;
|
||
}
|
||
}
|
||
|
||
.chart-area {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
margin: $x_small 0;
|
||
}
|
||
|
||
.history {
|
||
margin-top: $x_small;
|
||
}
|
||
|
||
.history button {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
padding: 16px;
|
||
margin: $xxx_small 0;
|
||
|
||
background: $gray_1;
|
||
border-radius: 8px;
|
||
border: none;
|
||
color: $gray_4;
|
||
font-weight: 700;
|
||
font-size: $tertiary-font-size;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
background: $gray_3;
|
||
color: $gray_1;
|
||
}
|
||
}
|
||
|
||
.button-container {
|
||
margin-bottom: $x_small;
|
||
}
|
||
|
||
</style>
|