feat: Ajout du design de la calculette
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
3e0225f84e
commit
bd1e7c4030
|
|
@ -31,8 +31,30 @@ const displayPopup = ref(false);
|
||||||
function showHidePopup() {
|
function showHidePopup() {
|
||||||
displayPopup.value = !displayPopup.value;
|
displayPopup.value = !displayPopup.value;
|
||||||
}
|
}
|
||||||
const h = ref();
|
function validatePopup() {
|
||||||
const d = ref();
|
const calcule = Math.round((h.value * 100) / d.value);
|
||||||
|
const regexp = /[^0-9]*([0-9]{2})/g;
|
||||||
|
const answersLength = props.question.answers.length;
|
||||||
|
const answerIndex = props.question.answers.find((answer, index) => {
|
||||||
|
const values = Array.from(answer.title.matchAll(regexp), (m) => m[1]);
|
||||||
|
if (values.length > 0) {
|
||||||
|
const min = values.length == 1 ? 0 : values[0];
|
||||||
|
const max = values.length == 1 ? values[0] : values[1];
|
||||||
|
if (calcule >= min && calcule <= max) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (answersLength == index + 1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelector(
|
||||||
|
"input[id=" + `question_${props.question.id}_answer_${answerIndex.id}` + "]"
|
||||||
|
).checked = true;
|
||||||
|
showHidePopup();
|
||||||
|
}
|
||||||
|
const h = ref(0);
|
||||||
|
const d = ref(0);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -80,24 +102,34 @@ const d = ref();
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="!isProduction">
|
<template v-if="question.function == 'rapport_hd'">
|
||||||
<template v-if="question.function == 'rapport_hd'">
|
<button class="btn calculette" @click="showHidePopup">
|
||||||
<button class="btn calculette" @click="showHidePopup">
|
<img src="/abacus.svg" alt="" />
|
||||||
<img src="/abacus.svg" alt="" />
|
</button>
|
||||||
</button>
|
<template v-if="displayPopup">
|
||||||
<template v-if="displayPopup">
|
<div class="popup">
|
||||||
<div class="popup">
|
<button class="btn close" @click="showHidePopup">
|
||||||
<button @click="showHidePopup">X</button>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
|
||||||
<label for="H">H (m)</label>
|
<path
|
||||||
<p>{{ h }}</p>
|
d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
|
||||||
<input v-model="h" type="number" name="H" />
|
fill="#000"
|
||||||
<label for="D">D (cm)</label>
|
/>
|
||||||
<input v-model="d" type="number" name="D" />
|
</svg>
|
||||||
<button clas="btn equal" @click="showHidePopup">
|
</button>
|
||||||
= {{ Math.round((h * 100) / d) }}
|
<label for="H">H (m)</label>
|
||||||
</button>
|
<input v-model="h" type="number" name="H" />
|
||||||
</div>
|
<label for="D">D (cm)</label>
|
||||||
</template>
|
<input v-model="d" type="number" name="D" />
|
||||||
|
<p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p>
|
||||||
|
<button class="btn equal" @click="validatePopup">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
|
||||||
|
<path
|
||||||
|
fill="#31373D"
|
||||||
|
d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<button class="btn next" @click="$emit('nextQuestion')">
|
<button class="btn next" @click="$emit('nextQuestion')">
|
||||||
|
|
@ -117,7 +149,8 @@ const d = ref();
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
.popup
|
.popup
|
||||||
position: absolute
|
position: absolute
|
||||||
background: red
|
background: var(--color-highlight-background)
|
||||||
|
color: var(--color-highlight-text)
|
||||||
top: 0
|
top: 0
|
||||||
left: 0
|
left: 0
|
||||||
right: 0
|
right: 0
|
||||||
|
|
@ -129,6 +162,27 @@ const d = ref();
|
||||||
justify-content: center
|
justify-content: center
|
||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
|
p
|
||||||
|
padding: 1rem
|
||||||
|
margin: 1rem
|
||||||
|
border: 1px solid var(--color-highlight-text)
|
||||||
|
|
||||||
|
svg path
|
||||||
|
fill: var(--color-highlight-background)
|
||||||
|
.close
|
||||||
|
top: 1rem
|
||||||
|
right: 1rem
|
||||||
|
|
||||||
|
|
||||||
|
.equal
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
input
|
||||||
|
padding: .4rem
|
||||||
|
text-align: center
|
||||||
|
font-size: 1rem
|
||||||
|
width: 5rem
|
||||||
|
|
||||||
.calculette
|
.calculette
|
||||||
background: var(--color-highlight-background)
|
background: var(--color-highlight-background)
|
||||||
bottom: 1rem
|
bottom: 1rem
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue