Nicolas Doby
5d884b1be6
- update to the latest version of Java/SpringBoot - update to the latest version NuxtJS - add account/password update - add account creation - add account password reset - add bundle to regroup questions and add default questions on user creation - add bundle creation
126 lines
2.9 KiB
Vue
126 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
||
|
||
import {type Quiz, useQuizStore} from "~/store/quiz";
|
||
import {useBundleStore} from "~/store/bundle";
|
||
|
||
const quizzes = ref<Quiz[]>([]);
|
||
const currentResult = ref<Quiz>();
|
||
|
||
onMounted(() => {
|
||
useQuizStore().findQuizzes(useBundleStore().selectedBundle).then((response: Page<Quiz>) => {
|
||
quizzes.value = response.content;
|
||
currentResult.value = quizzes.value.length > 0 ? quizzes.value[0] : null;
|
||
});
|
||
});
|
||
|
||
function toDisplayDate(q: Quizz) {
|
||
const date = new Date(q.createdDate);
|
||
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
|
||
}
|
||
|
||
function setCurrent(quiz: Quiz) {
|
||
currentResult.value = quiz;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section v-if="currentResult" class="last-quiz">
|
||
<div class="last-quiz-header">
|
||
<span class="date"> {{ toDisplayDate(currentResult) }}</span>
|
||
<nuxt-link
|
||
class="link" :to="{ path: '/details', query: { quiz: currentResult.id }}">
|
||
+ Voir le détail
|
||
</nuxt-link>
|
||
</div>
|
||
<div v-if="currentResult && currentResult.axes" class="chart-area">
|
||
<polar-area-chart :data="currentResult.axes.map(value => value.average)"/>
|
||
<Legend/>
|
||
</div>
|
||
</section>
|
||
<section v-if="quizzes.length > 0">
|
||
<ul class="history">
|
||
<li class="history__item" v-for="q in quizzes">
|
||
<input :id="q.id" type="radio" @change="setCurrent(q)" :checked="q === currentResult" name="quiz"/>
|
||
<label :for="q.id">
|
||
<span>Boussole - {{ toDisplayDate(q) }}</span><span>❯</span>
|
||
</label>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section v-else 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 gray button-back" to="/bundle" aria-label="Retour à la page précédente">❮</nuxt-link>
|
||
<nuxt-link class="button orange" to="/quiz">Nouveau</nuxt-link>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
.last-quiz {
|
||
margin: $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;
|
||
gap: $x_small;
|
||
}
|
||
|
||
.history {
|
||
margin-top: $x_small;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: $xxx_small;
|
||
list-style: none;
|
||
|
||
.history__item {
|
||
|
||
input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
|
||
&:checked + label {
|
||
outline: 3px solid $gray_4;
|
||
}
|
||
}
|
||
|
||
label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px;
|
||
background: $gray_1;
|
||
border-radius: 8px;
|
||
color: $gray_4;
|
||
font-weight: 700;
|
||
font-size: $tertiary-font-size;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
background: $gray_3;
|
||
color: $gray_1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|