Weko
/
ceiba-scores
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Modification de l'échelle de résultat
continuous-integration/drone/push Build is passing Details
continuous-integration/drone Build is passing Details

This commit is contained in:
Simon 2024-02-21 14:29:41 +01:00
parent d2f5d7d840
commit d7922166ba
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Question.vue
View File

@ -137,7 +137,7 @@ const d = ref(0);
<label for="D">D (cm)</label> <label for="D">D (cm)</label>
<input v-model="d" type="number" name="D" /> <input v-model="d" type="number" name="D" />
<p v-if="d != 0">≃ {{ Math.round((h * 100) / d) }}</p> <p v-if="d != 0">≃ {{ Math.round((h * 100) / d) }}</p>
<p v-if="d == 0" class="no-visible"> </p> <p v-if="d == 0" class="no-visible"></p>
<button class="btn equal" @click="validatePopup"> <button class="btn equal" @click="validatePopup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path <path

34
src/components/Score.vue
View File

@ -61,7 +61,7 @@ function formatScore(score) {
function getTranslation(translations, key) { function getTranslation(translations, key) {
return translations.find((translation) => translation[key] == store.language); return translations.find((translation) => translation[key] == store.language);
} }
const trad = getTranslation(score.translations, "languages_id") const trad = getTranslation(score.translations, "languages_id");
const title = score ? trad.title : ""; const title = score ? trad.title : "";
const questions = ref(formatScore(score)); const questions = ref(formatScore(score));
@ -88,8 +88,10 @@ function getResultsFromScore(score) {
effets: translation.length > 0 ? translation[0].effets : "", effets: translation.length > 0 ? translation[0].effets : "",
facteur: translation.length > 0 ? translation[0].facteur : "", facteur: translation.length > 0 ? translation[0].facteur : "",
pde: translation.length > 0 ? translation[0].pde : "", pde: translation.length > 0 ? translation[0].pde : "",
title: translation.length > 0 ? translation[0].title : "",
}; };
}); })
.reverse();
} }
const results = ref(getResultsFromScore(score)); const results = ref(getResultsFromScore(score));
const result = computed(() => const result = computed(() =>
@ -151,7 +153,11 @@ async function share() {
body.classList.add("print"); body.classList.add("print");
const dataUrl = await toPng(body, { filter: filter }); const dataUrl = await toPng(body, { filter: filter });
body.classList.remove("print"); body.classList.remove("print");
const fileName = new Date().toISOString().replace(/T/, '_').replace(/\..+/, '').replaceAll(':', '-') const fileName = new Date()
.toISOString()
.replace(/T/, "_")
.replace(/\..+/, "")
.replaceAll(":", "-");
saveAs(dataUrl, `Ceiba-score-${fileName}.png`); saveAs(dataUrl, `Ceiba-score-${fileName}.png`);
sharing.value = false; sharing.value = false;
} }
@ -185,14 +191,14 @@ async function share() {
<div> <div>
<h2 class="center">{{ trad.result_title }}</h2> <h2 class="center">{{ trad.result_title }}</h2>
<h2 class="center">{{ result.pde_qtra }}</h2> <h2 class="center">{{ result.pde_qtra }}</h2>
<div class="gradient"> <div :class="'gradient size-' + results.length">
<div <div
v-for="(item, index) in [...Array(7).keys()]" v-for="item in results"
:class="{ active: result && result.pde_qtra === index + 1 }" :class="{ active: result && result.pde_qtra === item.pde_qtra }"
:key="item" :key="item"
:data-title=trad.result_sigle :data-title="trad.result_sigle"
> >
{{ index + 1 }} {{ item.title }}
</div> </div>
</div> </div>
<div class="details"> <div class="details">
@ -381,8 +387,18 @@ label
text-shadow: 1px 1px 4px var(--color-highlight-text-invert),-1px -1px 4px var(--color-highlight-text-invert), -1px 1px 4px var(--color-highlight-text-invert), 1px -1px 4px var(--color-highlight-text-invert) text-shadow: 1px 1px 4px var(--color-highlight-text-invert),-1px -1px 4px var(--color-highlight-text-invert), -1px 1px 4px var(--color-highlight-text-invert), 1px -1px 4px var(--color-highlight-text-invert)
color: var(--color-highlight-text) color: var(--color-highlight-text)
div &.size-3 div
width: calc(100%/3)
&.size-4 div
width: calc(100%/4)
&.size-5 div
width: calc(100%/5)
&.size-6 div
width: calc(100%/6)
&.size-7 div
width: calc(100%/7) width: calc(100%/7)
div
text-align: center text-align: center
align-self: center align-self: center
font-weight: bold font-weight: bold