From 3e0225f84e6dbe4a755d8bccdd60583cfe51bba9 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Tue, 2 May 2023 18:09:39 +0200
Subject: [PATCH] feat: Ajout du calcul

---
 .drone.yml                  |  4 +++
 .eslintrc.cjs               |  3 +++
 public/abacus.svg           |  1 +
 src/assets/base.css         |  1 +
 src/components/Question.vue | 53 ++++++++++++++++++++++++++++++++++++-
 src/components/Score.vue    |  1 +
 6 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 public/abacus.svg

diff --git a/.drone.yml b/.drone.yml
index 3d70f04..7417071 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -50,6 +50,8 @@ steps:
   - npm run fetchData
   - npm run lint
   - npm run build
+  environment:
+    NODE_ENV: 'production'
 
 - name: deploy on s3
   image: minio/mc
@@ -94,6 +96,8 @@ steps:
   - npm run fetchData
   - npm run lint
   - npm run build
+  environment:
+    NODE_ENV: 'staging'
 
 - name: deploy on s3
   image: minio/mc
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index ed2ab70..2850572 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,6 +3,9 @@ require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
   root: true,
+  globals: {
+    process: true,
+  },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
diff --git a/public/abacus.svg b/public/abacus.svg
new file mode 100644
index 0000000..bdf5931
--- /dev/null
+++ b/public/abacus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#CCD6DD" d="M3 16v-2h30v2zm0 7v-2h30v2zm0 7v-2h30v2zM3 9V7h30v2z"/><path fill="#D5AB88" d="M35 33V1c0-.552-.448-1-1-1h-1c-.552 0-1 .448-1 1H4c0-.552-.448-1-1-1H2c-.552 0-1 .448-1 1v32h34zM4 4h28v29H4V4z"/><path fill="#3B94D9" d="M19 5.5c-.829 0-1.5.671-1.5 1.5 0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5S8.5 6.171 8.5 7c0-.829-.671-1.5-1.5-1.5S5.5 6.171 5.5 7v2c0 .829.671 1.5 1.5 1.5S8.5 9.829 8.5 9c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5.828 0 1.5-.671 1.5-1.5V7c0-.829-.672-1.5-1.5-1.5z"/><path fill="#BE1931" d="M19 12.5c-.829 0-1.5.671-1.5 1.5 0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5v2c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5.828 0 1.5-.671 1.5-1.5v-2c0-.829-.672-1.5-1.5-1.5z"/><path fill="#5C913B" d="M19 19.5c-.829 0-1.5.672-1.5 1.5 0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5v2c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5.828 0 1.5-.672 1.5-1.5v-2c0-.828-.672-1.5-1.5-1.5z"/><path fill="#FFAC33" d="M19 26.5c-.829 0-1.5.672-1.5 1.5 0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5v2c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5.828 0 1.5-.672 1.5-1.5v-2c0-.828-.672-1.5-1.5-1.5z"/><path fill="#3B94D9" d="M29 10.5c-.828 0-1.5-.671-1.5-1.5V7c0-.829.672-1.5 1.5-1.5s1.5.671 1.5 1.5v2c0 .829-.672 1.5-1.5 1.5z"/><path fill="#BE1931" d="M29 17.5c-.828 0-1.5-.671-1.5-1.5v-2c0-.829.672-1.5 1.5-1.5s1.5.671 1.5 1.5v2c0 .829-.672 1.5-1.5 1.5z"/><path fill="#5C913B" d="M29 24.5c-.828 0-1.5-.672-1.5-1.5v-2c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5v2c0 .828-.672 1.5-1.5 1.5z"/><path fill="#FFAC33" d="M29 31.5c-.828 0-1.5-.672-1.5-1.5v-2c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5v2c0 .828-.672 1.5-1.5 1.5z"/><path fill="#BF6952" d="M35 33H1c-.552 0-1 .448-1 1v1c0 .552.448 1 1 1h34c.552 0 1-.448 1-1v-1c0-.552-.448-1-1-1z"/><script xmlns=""/></svg>
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index b3f8bac..5a78c01 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -93,4 +93,5 @@ body {
   position: absolute;
   border: none;
   box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
+  cursor: pointer;
 }
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 00b960c..694cc05 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -26,6 +26,13 @@ function slideMove(splide, newIndex) {
   answerWeight.value = props.question.answers[newIndex].weight;
   emits("answerSelected", props.question, answerWeight);
 }
+const isProduction = process.env.NODE_ENV == "production";
+const displayPopup = ref(false);
+function showHidePopup() {
+  displayPopup.value = !displayPopup.value;
+}
+const h = ref();
+const d = ref();
 </script>
 
 <template>
@@ -73,7 +80,26 @@ function slideMove(splide, newIndex) {
       </template>
     </div>
   </div>
-
+  <template v-if="!isProduction">
+    <template v-if="question.function == 'rapport_hd'">
+      <button class="btn calculette" @click="showHidePopup">
+        <img src="/abacus.svg" alt="" />
+      </button>
+      <template v-if="displayPopup">
+        <div class="popup">
+          <button @click="showHidePopup">X</button>
+          <label for="H">H (m)</label>
+          <p>{{ h }}</p>
+          <input v-model="h" type="number" name="H" />
+          <label for="D">D (cm)</label>
+          <input v-model="d" type="number" name="D" />
+          <button clas="btn equal" @click="showHidePopup">
+            = {{ Math.round((h * 100) / d) }}
+          </button>
+        </div>
+      </template>
+    </template>
+  </template>
   <button class="btn next" @click="$emit('nextQuestion')">
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -89,6 +115,31 @@ function slideMove(splide, newIndex) {
 </template>
 
 <style lang="sass">
+.popup
+  position: absolute
+  background: red
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  z-index: 100
+  display: flex
+  flex-direction: column
+  padding: 1rem
+  justify-content: center
+  align-items: center
+
+.calculette
+  background: var(--color-highlight-background)
+  bottom: 1rem
+  left: 1rem
+  width: 3rem
+  height: 3rem
+
+  img
+    width: 80%
+    height: 80%
+
 .next
   background: var(--color-highlight-background)
   bottom: 1rem
diff --git a/src/components/Score.vue b/src/components/Score.vue
index f623677..76f2538 100644
--- a/src/components/Score.vue
+++ b/src/components/Score.vue
@@ -52,6 +52,7 @@ function formatScore(score) {
         id: question.id,
         weight: answers[0].weight,
         title: translation.length > 0 ? translation[0].title : question.title,
+        function: question.function,
         answers: answers,
         splide: ref(),
       };