2022-10-07 14:15:53 +00:00
|
|
|
|
<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
|
2022-10-10 08:29:25 +00:00
|
|
|
|
class="link" :to="{ path: '/details', query: { quiz: currentResult.id }}">
|
2022-10-07 14:15:53 +00:00
|
|
|
|
+ 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>Bousolle - {{ 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";
|
2022-11-02 10:16:17 +00:00
|
|
|
|
import {Quiz} from "~/repositories/models/quiz.model";
|
2022-10-07 14:15:53 +00:00
|
|
|
|
|
|
|
|
|
@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>
|