design to light - add specific indicators

src/components/design-to-light/DTLButton.vue

@@ -1,6 +1,6 @@
 <template>
-  <button v-if="page?.designToLight?.grade">
-    {{ page.designToLight.grade }}
+  <button v-if="page?.designToLight?.grades?.global">
+    {{ page.designToLight.grades.global.letter }}
   </button>
 </template>
 <script setup>

src/components/design-to-light/DTLPanel.vue

@@ -2,6 +2,30 @@
   <aside>
     <p>Données basées sur la proposition du {{ frenchFormattedModified }}</p>
     <p>{{ page.designToLight.stepLabel }}</p>
+
+    <h4>Note globale</h4>
+    <p>{{ page.designToLight.grades.global.letter }}</p>
+    <p>{{ page.designToLight.grades.global.mention }}</p>
+    <input
+      type="range"
+      :value="page.designToLight.grades.global.number"
+      disabled
+    />
+    <p>{{ page.designToLight.grades.global.comment }}</p>
+
+    <h4>Positionnement</h4>
+
+    <h4>Indicateur des composants impliqués</h4>
+    <template
+      v-for="indicator in page.designToLight.grades.indicators"
+      :key="indicator.value"
+    >
+      <label for="">{{ indicator.label }}</label>
+      <input type="range" :value="indicator.value" min="-5" max="+5" disabled />
+    </template>
+
+    <!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
+    <button>Demander une expertise d'optimisation</button>
   </aside>
 </template>
 <script setup>
@@ -9,13 +33,14 @@ import { storeToRefs } from "pinia";
 import { usePageStore } from "../../stores/page";
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
+import { computed } from "vue";
 
 dayjs.locale("fr");
 
 const { page } = storeToRefs(usePageStore());
 
 const frenchFormattedModified = dayjs(page.value.designToLight.date).format(
-  "dddd D MMMM YYYY"
+  "D/MM/YYYY"
 );
 </script>