Frontend: rewrite address-based search form

We give up on the autocomplete library we tried in favor of a new one.

We also lose our minds trying to align some FREAKING FLEX-BOXES before
kind of giving up.

templates/landing_form.html

@@ -15,9 +15,11 @@
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
     integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
     crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.02.min.css">
-
+  <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/@trevoreyre/autocomplete-js/dist/style.css"
+  />
   <title>Aquilenet: Éligibilité FTTH</title>
   <style>
     {% include 'style.css'%}
@@ -66,27 +68,40 @@
 
         <div id="methodAddress" class="collapse testMethods">
           <h2 class="text-center form-title">Test d'éligibilité par adresse</h2>
+
             <form id="formAddressTest" method="post" action="/test/address">
-                <div class="form-group row" id="communeForm">
-                    <label class="form-label col-sm-2 my-1" for="commune-autocomplete">Commune</label>
-                    <input id="commune-autocomplete" class="col-sm-9" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" class="form-control"  autocapitalize="off"/>
+              <div id="commune-form">
+                <label class="form-label" for="commune-autocomplete-input">Commune</label>
+                <div class="autocomplete" id="commune-autocomplete">
+                  <input id="commune-autocomplete-input" class="autocomplete-input"
+                         spellcheck="false" autocorrect="off" autocomplete="off"
+                         autocapitalize="off" placeholder="Nom/Code Postal de la Commune"/>
+                    <ul class="autocomplete-result-list"/>
                 </div>
-              <div class="form-row collapse" id="voieForm">
-                <div class="col-sm-3 my-1">
+              </div>
+              <div class="collapse" id="voieForm">
+              <div id="voieFormContent">
+                <div id="street-number-form">
                   <label class="form-label" for="numeroVoieInput">Numéro de voie</label>
                   <input required type="text" name="numeroVoie" class="form-control" id="numeroVoieInput"
                     aria-describedby="numeroVoieHelp" placeholder="Numéro de voie"
                     oninvalid="this.setCustomValidity('Veuillez renseigner le numéro de voie')"
                     oninput="setCustomValidity('')">
                 </div>
-                <div class="col-sm-7 my-1">
-                  <label class="form-label" for="fantoir-autocomplete">Nom de voie</label>
-                  <input id="fantoir-autocomplete" class="form-control" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off"/>
+                <div id="street-name-form">
+                  <label class="form-label" for="street-name-autocomplete-input">Nom de voie</label>
+                  <div class="autocomplete" id="street-name-autocomplete">
+                    <input id="street-name-autocomplete-input" class="autocomplete-input"
+                           spellcheck="false" autocorrect="off" autocomplete="off"
+                           autocapitalize="off" placeholder="Nom de voie"/>
+                      <ul class="autocomplete-result-list"/>
                   </div>
                 </div>
-              <br>
-              <button id="btnTestAdresse" type="submit" class="btn btn-sable collapse">Tester l'adresse</button>
+              </div>
+              </div>
+              <div id="btnTestAdresseContainer"><button id="btnTestAdresse" type="submit" class="btn btn-sable collapse">Tester l'adresse</button></div>
             </form>
+
             <br>
             <button id="buttonReturnPto" type="button" data-toggle="collapse" data-target=".testMethods"
               class="btn btn-link page-nav-btn" aria-expanded="false" aria-controls="methodPto methodAddress">Revenir au test par
@@ -99,18 +114,12 @@
   <script>
     $(document).ready(function () {
 
-      // AbortController allows to cancel promises
-      const controllerCommunes = new AbortController();
-      const { signalCommunes } = controllerCommunes;
-      const controllerVoies = new AbortController();
-      const { signalVoies } = controllerVoies;
-
       // Global variables
-      var communes = []
-      var codeInsee = 0
-      var codeRivoli = ""
-      var voies = []
-      var voie = ""
+      let communes = []
+      let codeInsee = 0
+      let codeRivoli = ""
+      let voies = []
+      let voie = ""
 
       function sanitizeInputStr(inputStr) {
 
@@ -152,72 +161,43 @@
         $('#numeroVoieInput').focus();
       });
 
-      const autoCompleteCommune = new autoComplete({
-          selector: "#commune-autocomplete",
-          placeHolder: "Code postal/nom de commune...",
-          data: {
-              src: async (query) => {
+      const communeAutocompleteOptions = {
+          search: async (query) => {
               const api = "addresses/communes?limit=100";
-                  const reqUrl = query === '' ? api : api + "&s=" + query
-                  const source = await fetch(reqUrl, { signalCommunes });
+              const reqUrl = query === '' ? api : `${api}&s=${query}`;
+              const source = await fetch(reqUrl);
               const data = await source.json();
               return data;
           },
-              keys: [ "codeZip", "nom" ],
-          },
-          resultList: {
-              element: (list, data) => {
-              }
-          },
-          resultItem: {
-              highlight: true
-          },
-          debounce: 300,
-          events: {
-              input: {
-                  selection: (event) => {
-                      const selection = event.detail.selection.value;
-                      autoCompleteCommune.input.value = selection.codeZip + " - " + selection.nom ;
-                      codeInsee = selection.codeInsee;
+          onSubmit: (res) => {
+              const searchInput = $('#commune-autocomplete-input');
+              searchInput.val(`${res.codeZip} - ${res.nom}`);
               $("#voieForm").collapse("show");
-                  }
-              }
-          }
-      });
+              codeInsee = res.codeInsee;
+          },
+          debounceTime: 300,
+          renderResult: (res, props) => `<li ${props}>${res.codeZip} - ${res.nom}</li>`
+      };
+      const autocompleteCommune = new Autocomplete("#commune-autocomplete", communeAutocompleteOptions);
 
-      const autoCompleteFantoir = new autoComplete({
-          selector: "#fantoir-autocomplete",
-          placeHolder: "Nom de la voie...",
-          data: {
-              src: async (query) => {
-                  const api = "addresses/fantoirvoies/" + codeInsee + "?limit=100";
-                  const reqUrl = query === '' ? api : api + "&s=" + query
-                  const source = await fetch(reqUrl, { signalVoies });
+      const voieAutocompleteOptions = {
+          search: async (query) => {
+              const api = `addresses/fantoirvoies/${codeInsee}?limit=100`;
+              const reqUrl = query === '' ? api : `${api}&s=${query}`;
+              const source = await fetch(reqUrl);
               const data = await source.json();
               return Object.entries(data).map(e => {return {"name": e[0], "value": e[1]}; });
           },
-              keys: [ "name" ],
-          },
-          resultList: {
-              element: (list, data) => {
-              }
-          },
-          resultItem: {
-              highlight: true
-          },
-          debounce: 300,
-          events: {
-              input: {
-                  selection: (event) => {
-                      const selection = event.detail.selection.value;
-                      autoCompleteFantoir.input.value = selection.name;
-                      codeRivoli = selection.value;
+          onSubmit: (res) => {
+              const searchInput = $("#street-name-autocomplete-input");
+              searchInput.val(res.name);
+              codeRivoli=res.value;
               $('#btnTestAdresse').collapse('show');
-                  }
-              }
-          }
-      });
-
+          },
+          debounceTime: 300,
+          renderResult: (res, props) => `<li ${props}>${res.name}</li>`
+      };
+      const autocompleteVoie = new Autocomplete("#street-name-autocomplete", voieAutocompleteOptions);
       $('#formAddressTest').submit(function(eventObj) {
         setButtonSpinner("#btnTestAdresse", "Test...");
         $('#formAddressTest').append(`<input type="hidden" class="form-control" name="codeInsee" value="${codeInsee}" />`);

templates/style.css

@@ -99,3 +99,57 @@ td {
     padding-left: 1em;
     padding-right: 1em;
 }
+
+/*
+********************
+Form Styles
+*******************
+*/
+
+#commune-form {
+    margin-top: 2em;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+#commune-autocomplete {
+    margin-left: 1em;
+    width: 65%;
+}
+
+#voieFormContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 1em;
+    width: 100%;
+    justify-content: center;
+}
+
+#voieFormContent > div {
+    margin-right: 1em;
+}
+
+#street-number-form {
+    width: 20%;
+}
+
+#street-name-form {
+    width: 51%;
+}
+
+#numeroVoieInput {
+    padding: 12px;
+    height: 3em;
+}
+
+#btnTestAdresseContainer {
+    margin-top: 2em;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    flex-direction: row;
+}