From a5f3e96ad190b6c19c6f84f57884cf3892c13a8f Mon Sep 17 00:00:00 2001
From: Yannick Francois <yaf@elsif.fr>
Date: Tue, 19 Mar 2019 15:07:41 +0100
Subject: [PATCH] =?UTF-8?q?affiche=20les=20horaires=20dans=20un=20sondage?=
 =?UTF-8?q?=20sp=C3=A9cial=20dates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md         |  2 ++
 public/dates.html | 33 +++++++++++++++++++++++++++++++--
 public/script.js  | 20 ++++++++++++++++++--
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 0f70c108..f39d83d9 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 Expérimentation d'une nouvelle façon de faire des sondage.
 
+https://sketch.cloud/s/MMzYa/dRrDMZ
+
 ## Developpement
 
 Si docker est disponible sur la machine :
diff --git a/public/dates.html b/public/dates.html
index 14947079..16d542f3 100644
--- a/public/dates.html
+++ b/public/dates.html
@@ -25,20 +25,49 @@
   </section>
 
   <section>
-    <p>Je veux ajouter des dates <select id="ajouterDesHoraires"><option>sans</option><option>avec des</option></select> horaires<span id="identiquesDifferentsPourChaqueJour" style="display:none"> <select><option>identiques</option><option>différents</option></select> pour chaque jour</span>.</p>
+    <p>Je veux ajouter des dates <select id="ajouterDesHoraires"><option>sans</option><option>avec des</option></select> horaires<span id="identiquesDifferentsPourChaqueJour" style="display:none"> <select id="horairesIdentiquesOuDifferents"><option>identiques</option><option>différents</option></select> pour chaque jour</span>.</p>
   </section>
 
   <section>
-    <h1>Mes dates <span>(au format JJ / MM / AAAA)</span></h1>
+    <h1>Les choix <span>(au format JJ / MM / AAAA)</span></h1>
     <ul>
       <li>
         <i class="far fa-calendar-alt"></i>
         <input type="date" name="date-1">
         <button class="remove btn-no-style"><i class="fas fa-trash-alt"></i></button>
+        <ul class="horaire-different" style="display:none">
+          <li>
+            <i class="far fa-chrono-alt"></i>
+            <input type="text" name="horaire-1">
+            <button class="remove btn-no-style"><i class="fas fa-trash-alt"></i></button>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <i class="far fa-calendar-alt"></i>
+        <input type="date" name="date-1">
+        <button class="remove btn-no-style"><i class="fas fa-trash-alt"></i></button>
+        <ul class="horaire-different" style="display:none">
+          <li>
+            <i class="far fa-chrono-alt"></i>
+            <input type="text" name="horaire-1">
+            <button class="remove btn-no-style"><i class="fas fa-trash-alt"></i></button>
+          </li>
+        </ul>
       </li>
     </ul>
 
     <button id="addDateButton">Ajouter une date</button>
+
+    <ul class="horaire-identique" style="display:none">
+      <li>
+        <i class="far fa-chrono-alt"></i>
+        <input type="text" name="horaire-1">
+        <button class="remove btn-no-style"><i class="fas fa-trash-alt"></i></button>
+      </li>
+    </ul>
+
+
   </section>
 
   <nav>
diff --git a/public/script.js b/public/script.js
index d36fb4f7..ad90a9f5 100644
--- a/public/script.js
+++ b/public/script.js
@@ -120,11 +120,27 @@ if($('#validation-pool-title') && localStorage["title"]) {
 if($('#ajouterDesHoraires')) {
   ajouterDesHoraires.addEventListener('change', () => {
     if (ajouterDesHoraires.value == 'avec des') {
-      console.log("avec des")
       identiquesDifferentsPourChaqueJour.style.display = 'inline'
+      $('.horaire-identique').style.display = 'inline'
     } else {
-      console.log("sans")
       identiquesDifferentsPourChaqueJour.style.display = 'none'
+      $('.horaire-identique').style.display = 'none'
+    }
+  });
+}
+
+if($('#horairesIdentiquesOuDifferents')) {
+  horairesIdentiquesOuDifferents.addEventListener('change', () => {
+    if (horairesIdentiquesOuDifferents.value == 'identiques') {
+      $('.horaire-identique').style.display = 'inline'
+      $$('.horaire-different').forEach( (e) => {
+        e.style.display = 'none'
+      });
+    } else {
+      $('.horaire-identique').style.display = 'none'
+      $$('.horaire-different').forEach( (e) => {
+        e.style.display = 'inline'
+      });
     }
   });
 }