From 1a0039f1d976ced42d1fe0d0e68507c023199de9 Mon Sep 17 00:00:00 2001
From: Adrien Vannson <adrien.vannson@ens-lyon.fr>
Date: Wed, 13 Oct 2021 20:19:39 +0200
Subject: [PATCH] Update UI

---
 index.html | 89 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 53 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 4191f3c..1e888c4 100644
--- a/index.html
+++ b/index.html
@@ -21,20 +21,15 @@
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
+            <a class="nav-link" aria-current="page" data-bs-toggle="modal" data-bs-target="#exampleModal" href="#">Choix d'une carte</a>
           </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-              Dropdown
+              Rechercher une salle
             </a>
             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <li><a class="dropdown-item" href="#">Action</a></li>
-              <li><a class="dropdown-item" href="#">Another action</a></li>
-              <li><hr class="dropdown-divider"></li>
-              <li><a class="dropdown-item" href="#">Something else here</a></li>
+              <li><a class="dropdown-item" href="#">Par nom</a></li>
+              <li><a class="dropdown-item" href="#">Par occupant</a></li>
             </ul>
           </li>
         </ul>
@@ -42,35 +37,57 @@
     </div>
   </nav>
 
+  <!-- Modal -->
+  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Sélectionnez un lieu</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <!-- Room selection form -->
+          <form>
+
+            <div class="mb-3">
+              <label for="selector_batiment">Site : </label>
+              <select name="site" id="selector_site" class="form-select">
+                <option value="all" selected>Vue d'ensemble</option>
+                <option value="D">Descartes</option>
+                <option value="M">Monod</option>
+              </select>
+            </div>
+
+            <div class="mb-3">
+              <label for="selector_batiment">Bâtiment : </label>
+              <select name="batiment" id="selector_batiment" class="form-select">
+                <option value="GN4">MGN1</option>
+              </select>
+            </div>
+
+            <div class="mb-3">
+              <label for="selector_etage">Étage : </label>
+              <select name="etage" id="selector_etage" class="form-select">
+                <option value="-1">Sous-sol</option>
+                <option value="0">Rez-de chaussée</option>
+                <option value="1">Premier étage</option>
+                <option value="1+">Premier étage plus</option>
+                <option value="2">Deuxième étage</option>
+                <option value="3">Troisième étage</option>
+                <option value="4">Quatrième étage</option>
+              </select>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Valider</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="container">
 
-    <!-- Map selection -->
-    <form>
-      <label for="selector_site_M">Site</label>
-      <input type="radio" name="site" value="M" id="selector_site_M" checked="true">Monod</input>
-      <input type="radio" name="site" value="D" id="selector_site_D">Descartes</input>
-      |
-      <label for="selector_batiment">Bâtiment : </label>
-      <select name="batiment" id="selector_batiment">
-        <option value="GN4">MGN1</option>
-      </select>
-      |
-      <label for="selector_etage">Étage : </label>
-      <select name="etage" id="selector_etage">
-        <option value="-1">Sous-sol</option>
-        <option value="0">Rez-de chaussée</option>
-        <option value="1">Premier étage</option>
-        <option value="1+">Premier étage plus</option>
-        <option value="2">Deuxième étage</option>
-        <option value="3">Troisième étage</option>
-        <option value="4">Quatrième étage</option>
-      </select>
-      |
-      <input type="button" value="Vue d'ensemble" id="overviewButton" onclick="overviewButton"/>
-    </form>
-
-    <br/>
-
     <object type="image/svg+xml" data="maps/M-MGN1-3.svg" id="plan" onload="initSvgSupport()">
       Votre navigateur ne sait pas charger les objets HTML.... Je vais voir ce que je peux faire.
     </object>