2022-02-13 19:39:12 +01:00
4 changed files with 92 additions and 29 deletions
--- 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(
--- 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>
--- 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;
--- 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'])