Aquilenet/axione-elig-test
7
0
Fork 0
Code Issues 3 Pull requests 1 Releases Wiki Activity

Amélioration de la recherche par adresse #10

Open
felix.baylac wants to merge 3 commits from nin/redo-front into master
pull from: nin/redo-front
merge into: Aquilenet:master
Conversation 1 Commits 3 Files changed 9 +120 -86
2 changed files with 120 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 75c606b3de - Show all commits

140
templates/landing_form.html
View file

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

54
templates/style.css
View file

@ -99,3 +99,57 @@ td {
padding-left: 1em; padding-left: 1em;
padding-right: 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;
}