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.
This commit is contained in:
Félix Baylac-Jacqué
parent
b69ec04aff
commit
75c606b3de
2 changed files with 120 additions and 86 deletions
|
|
@ -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>
|
||||
</div>
|
||||
<br>
|
||||
<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>
|
||||
|
||||
<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 api = "addresses/communes?limit=100";
|
||||
const reqUrl = query === '' ? api : api + "&s=" + query
|
||||
const source = await fetch(reqUrl, { signalCommunes });
|
||||
const data = await source.json();
|
||||
return data;
|
||||
},
|
||||
keys: [ "codeZip", "nom" ],
|
||||
const communeAutocompleteOptions = {
|
||||
search: async (query) => {
|
||||
const api = "addresses/communes?limit=100";
|
||||
const reqUrl = query === '' ? api : `${api}&s=${query}`;
|
||||
const source = await fetch(reqUrl);
|
||||
const data = await source.json();
|
||||
return data;
|
||||
},
|
||||
resultList: {
|
||||
element: (list, data) => {
|
||||
}
|
||||
onSubmit: (res) => {
|
||||
const searchInput = $('#commune-autocomplete-input');
|
||||
searchInput.val(`${res.codeZip} - ${res.nom}`);
|
||||
$("#voieForm").collapse("show");
|
||||
codeInsee = res.codeInsee;
|
||||
},
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
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 data = await source.json();
|
||||
return Object.entries(data).map(e => {return {"name": e[0], "value": e[1]}; });
|
||||
},
|
||||
keys: [ "name" ],
|
||||
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]}; });
|
||||
},
|
||||
resultList: {
|
||||
element: (list, data) => {
|
||||
}
|
||||
onSubmit: (res) => {
|
||||
const searchInput = $("#street-name-autocomplete-input");
|
||||
searchInput.val(res.name);
|
||||
codeRivoli=res.value;
|
||||
$('#btnTestAdresse').collapse('show');
|
||||
},
|
||||
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');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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}" />`);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue