From 50dd783b57bee39de2a9b45568afe7b9549f847c Mon Sep 17 00:00:00 2001
From: Johan Le Baut <johan@helloasso.org>
Date: Wed, 26 Jan 2022 15:57:46 +0100
Subject: [PATCH] frontend: enter commune

---
 address_finder/api.py       | 17 ++++++-
 templates/landing_form.html | 98 ++++++++++++++++++++++++++++---------
 templates/style.css         |  4 +-
 webapp.py                   |  2 +-
 4 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/address_finder/api.py b/address_finder/api.py
index b40d90d..548ff33 100644
--- a/address_finder/api.py
+++ b/address_finder/api.py
@@ -2,6 +2,7 @@ import sqlite3
 import sys
 import json
 from .model import Commune,FantoirVoie
+import re
 
 # DB with addresses info
 DB_ADDRESSES_PATH_ENV="DB_ADDRESSES_PATH"
@@ -30,15 +31,29 @@ class AddressFinder:
         con.row_factory = sqlite3.Row
         cur = con.cursor()
         communes: list[Commune] = []
+
+        communeSearch = communeNameOrZip
+        zipSearch = communeNameOrZip
+        searchOpertor = "OR"
+
+        regexCommuneAndZip = r"[0-9]{5} .+" # For example: '33000 BO'
+        if re.match(regexCommuneAndZip, communeNameOrZip):
+          print("MATCH")
+          splitSearch = communeNameOrZip.split(' ')
+          zipSearch = splitSearch[0]
+          communeSearch = ' '.join(splitSearch[1:])
+          searchOpertor = "AND"
+
         try:
           if communeNameOrZip is None:
             cur.execute(f"SELECT * from \"{DB_TABLE_INSEE_NAME}\"")
           else:
-            cur.execute(f"SELECT * from \"{DB_TABLE_INSEE_NAME}\" WHERE {DB_COL_COMMUNE_NAME}=\"{communeNameOrZip}\" COLLATE nocase OR {DB_COL_COMMUNE_POSTE}=\"{communeNameOrZip}\"")
+            cur.execute(f"SELECT * from \"{DB_TABLE_INSEE_NAME}\" WHERE {DB_COL_COMMUNE_NAME} LIKE \"%{communeSearch}%\" COLLATE nocase {searchOpertor} {DB_COL_COMMUNE_POSTE} LIKE \"{zipSearch}%\"")
         except sqlite3.OperationalError as err:
           print("Error querying DB : {0}".format(err), file=sys.stderr)
           return []
         rows = [dict(row) for row in cur.fetchall()]
+        print(rows)
         con.close()
         for row in rows:
           commune=Commune(
diff --git a/templates/landing_form.html b/templates/landing_form.html
index 4192ca8..26bb0f3 100644
--- a/templates/landing_form.html
+++ b/templates/landing_form.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
@@ -43,40 +43,90 @@
               <button type="submit" class="btn btn-sable">Tester le PTO</button>
             </form>
             
+            <br>
             <button id="buttonNoPto" type="button" data-toggle="collapse" data-target=".testMethods" class="btn btn-link" aria-expanded="false" aria-controls="methodPto methodAddress">Je n'ai pas/ne trouve pas le PTO, tester autrement</button>
         </div>
 
-        <div id="methodPto" class="collapse testMethods">
+        <div id="methodAddress" class="collapse testMethods">
           <h2 class="text-center form-title">Test d'éligibilité par adresse</h1>
           <form>
-            <!-- <div class="form-group" id="ptoForm">
-              <label class="form-label" for="pto-number">Numéro PTO</label>
-              <input type="text" class="form-control" id="pto-number" aria-describedby="ptoHelp" placeholder="OOOO-XXXX-XXXX">
-              <small id="ptoHelp2" class="form-text btn btn-link" data-toggle="collapse" data-target="#ptoInfo" aria-expanded="true" aria-controls="ptoInfo">Où trouver mon numéro de PTO ?</small>
-              <div id="ptoInfo2" class="collapse" aria-labelledby="ptoForm" data-parent="#ptoForm">
-                <div class="card-body">
-                  PTO (Point de terminaison optique) est un numéro unique que vous pouvez trouver sur le boîtier de raccordement de la fibre.
-                  C'est un petit boîtier blanc installé dans la maison
-                  <br>
-                  <img src="{{url_for('static', filename='find_pto.jpg')}}" class="img-fluid" alt="Responsive image">
-                </div>
+            <div class="form-group" id="communeForm">
+              <label class="form-label" for="communeInput">Commune</label>
+              <input type="text" list="communes" class="form-control" id="communeInput" aria-describedby="communeHelp" placeholder="Nom de la commune ou code postal">
+              <datalist id="communes">
+              </datalist>  
+            </div>
+            <div class="form-row collapse waitCommune" id="voieForm">
+              <div class="col-sm-3 my-1">
+                <label class="form-label" for="numeroVoieInput">Numéro de voie</label>
+                <input type="text" class="form-control" id="numeroVoieInput" aria-describedby="numeroVoieHelp" placeholder="Numéro de voie">
               </div>
-            </div>   -->
-            <button type="button" class="btn btn-sable">Tester l'adresse</button>
+              <div class="col-sm-9 my-1">
+                <label class="form-label" for="voieInput">Nom de voie</label>
+                <input type="text" class="form-control" id="voieInput" aria-describedby="voieHelp" placeholder="Nom de voie">
+              </div>
+            </div>
+            <br>
+            <button id="btnTestAdresse" type="button" class="btn btn-sable collapse waitCommune">Tester l'adresse</button>
           </form>
+          <br>
           <button id="buttonReturnPto" type="button" data-toggle="collapse" data-target=".testMethods" class="btn btn-link" aria-expanded="false" aria-controls="methodPto methodAddress">Revenir au test par PTO</button>
         </div>
       </div>
     </div>
   </div>
-  <!-- <div id="container">
-    <h1 id="main-title">Testez avec votre numéro de PTO</h1>
-    <form method="post" action="/result">
-      <label>Numéro de PTO :
-        <input name="pto"/>
-      </label>
-      <button>Tester</button>
-    </form>
-  </div> -->
+
+  <script>
+      $(document).ready(function(){
+      var communes=[]
+      function fillCommunes(search='') {
+        var api="addresses/communes";
+        if (search != '') {
+          api+="?s="+search;
+        }
+        $.ajax({
+          type: 'GET',
+          dataType:"json",
+          url: api,
+          success: function (data, status, xhr) {
+            if (JSON.stringify(data) !== JSON.stringify(communes)){
+              $("#communes").empty();
+              communes=data
+              for (let i = 0; i < 20; i++) {
+                if (! communes[i]) {
+                  break;
+                }
+                $("#communes").append("<option codeInsee=" + communes[i].codeInsee + " value='" + 
+                  communes[i].codeZip + ' ' + communes[i].nom + "'></option>");       
+              }
+              if (communes.length == 1) {
+                $('.waitCommune').addClass('show');
+              } else {
+                $('.waitCommune').removeClass('show');
+              }
+            }
+          }
+        });
+      }
+      $('#methodAddress').on('shown.bs.collapse', function () {
+        fillCommunes();
+      });
+
+      $('#communeInput').on('keyup', function () {
+        console.log("call ",$(this).val() )
+        fillCommunes($(this).val());
+      });
+      $('#communeInput').on('input', function() {
+        if ($(this).val() === '') {
+          $('.waitCommune').removeClass('show');
+        }
+      });
+      $('#buttonReturnPto').on('click', function() {
+        console.log("click")
+        $('#communeInput').val('');
+        $('.waitCommune').removeClass('show');
+      });
+    });
+  </script>
 </body>
 </html>
diff --git a/templates/style.css b/templates/style.css
index a1ff2a2..dbe2f84 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -28,9 +28,7 @@ body {
 #ptoHelp {
   color: rgb(192, 192, 192);
 }
-.invalid-feedback {
-  display: block;
-}
+
 .sable .btn-ciel, .ciel .btn-sable{
   padding: 8px;
   border-radius: 10px;
diff --git a/webapp.py b/webapp.py
index 17ffaf3..31f40c9 100644
--- a/webapp.py
+++ b/webapp.py
@@ -39,12 +39,12 @@ def show_result():
 @app.route("/addresses/communes", methods=['GET'])
 def get_communes():
     to_search=request.args.get('s')
-    print(to_search)
     communes=addressFinder.getCommunesFromNameOrZip(to_search)
     response = app.response_class(
         response=json.dumps(communes),
         mimetype='application/json'
     )
+    print(response)
     return response
 
 @app.route("/addresses/fantoirvoies/<codeInsee>", methods=['GET'])