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

factorise spinner & css result.html

Browse source
This commit is contained in:
Johan Le Baut 2022-02-13 16:53:04 +01:00
parent 68b137c8f9
commit 3e69f83b66
3 changed files with 45 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
templates/landing_form.html
View file

@ -25,7 +25,9 @@
</head> </head>
<body> <body>
<h1 class="text-center" id="aquilenet-title">AQUILENET</h1> <h1 class="text-center">
<a href="https://www.aquilenet.fr/" id="aquilenet-title">AQUILENET</a>
</h1>
<div id="mainContainer" class="container"> <div id="mainContainer" class="container">
<div class="row d-flex justify-content-between align-items-center" data-parent="#mainContainer"> <div class="row d-flex justify-content-between align-items-center" data-parent="#mainContainer">
@ -58,7 +60,7 @@
<br> <br>
<button id="buttonNoPto" type="button" data-toggle="collapse" data-target=".testMethods" <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 class="btn btn-link page-nav-btn" aria-expanded="false" aria-controls="methodPto methodAddress">Je n'ai pas/ne trouve
pas le PTO, tester autrement</button> pas le PTO, tester autrement</button>
</div> </div>
@ -87,7 +89,7 @@
</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" 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
PTO</button> PTO</button>
</div> </div>
</div> </div>
@ -126,6 +128,15 @@
return inputStr; return inputStr;
} }
function setButtonSpinner(buttonSelector, buttonText) {
// disable button
$(buttonSelector).prop("disabled", true);
// add spinner to button
$(buttonSelector).html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>${buttonText}`
);
}
$('#methodAddress').on('show.bs.collapse', function () { $('#methodAddress').on('show.bs.collapse', function () {
$('#communeInput').trigger('input') $('#communeInput').trigger('input')
$('#communeInput').trigger('keyup') $('#communeInput').trigger('keyup')
@ -208,23 +219,13 @@
}); });
$('#formAddressTest').submit(function(eventObj) { $('#formAddressTest').submit(function(eventObj) {
// disable button setButtonSpinner("#btnTestAdresse", "Test...");
$("#btnTestAdresse").prop("disabled", true);
// add spinner to button
$("#btnTestAdresse").html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>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}" />`);
$('#formAddressTest').append(`<input type="hidden" class="form-control" name="codeRivoli" value="${codeRivoli}" />`); $('#formAddressTest').append(`<input type="hidden" class="form-control" name="codeRivoli" value="${codeRivoli}" />`);
return true; return true;
}); });
$('#formPtoTest').submit(function(eventObj) { $('#formPtoTest').submit(function(eventObj) {
// disable button setButtonSpinner("#buttonPtoTest", "Test...");
$("#buttonPtoTest").prop("disabled", true);
// add spinner to button
$("#buttonPtoTest").html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Test...`
);
return true; return true;
}); });
}); });

31
templates/result.html
View file

@ -3,7 +3,19 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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://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>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
<title>Aquilenet: Éligibilité FTTH</title> <title>Aquilenet: Éligibilité FTTH</title>
<style> <style>
{% include 'style.css' %} {% include 'style.css' %}
@ -11,9 +23,17 @@
</head> </head>
<body> <body>
<h1 class="text-center" id="aquilenet-title">Aquilenet</h1> <h1 class="text-center">
{% if result['codeRetour'] == 0 %} <a href="https://www.aquilenet.fr/" id="aquilenet-title">AQUILENET</a>
</h1>
<div id="containerResults" class="container"> <div id="containerResults" class="container">
<a id="buttonReturnTest" type="button" class="btn btn-link page-nav-btn" href="/">
Retour test
</a>
{% if result['codeRetour'] == 0 %}
<h1 id="main-title">Test d'Éligibilité FTTH Aquilenet: Résultats</h1> <h1 id="main-title">Test d'Éligibilité FTTH Aquilenet: Résultats</h1>
<p>Résultat pour le PTO: {{ pto }}</p> <p>Résultat pour le PTO: {{ pto }}</p>
{% for batiment in result['batiments'] %} {% for batiment in result['batiments'] %}
@ -58,13 +78,12 @@
{% endfor %} {% endfor %}
</table> </table>
{% endfor %} {% endfor %}
</div>
{% else %} {% else %}
<div id="containerResults" class="container">
<h1 id="main-title">Erreur</h1> <h1 id="main-title">Erreur</h1>
<p>Code d'erreur: {{ result['axioneErreur']['codeErreur'] }}</p> <p>Code d'erreur: {{ result['axioneErreur']['codeErreur'] }}</p>
<p>Description de l'erreur: {{ result['axioneErreur']['libelleErreur'] }}</p> <p>Description de l'erreur: {{ result['axioneErreur']['libelleErreur'] }}</p>
</div>
{% endif %} {% endif %}
</div>
</body> </body>
</html> </html>

21
templates/style.css
View file

@ -11,9 +11,10 @@ body {
#aquilenet-title { #aquilenet-title {
color: whitesmoke; color: whitesmoke;
align-self: center; align-self: center;
font-size: 4em; font-size: 2em;
margin-top: .3em; margin-top: .3em;
margin-bottom: .5em; margin-bottom: .5em;
text-decoration: none;
} }
.form-title { .form-title {
color: whitesmoke; color: whitesmoke;
@ -22,7 +23,7 @@ body {
margin-top: .3em; margin-top: .3em;
margin-bottom: .5em; margin-bottom: .5em;
} }
.form-label, .card-body { .form-label, .card-body, #containerResults {
color: whitesmoke; color: whitesmoke;
} }
#ptoHelp { #ptoHelp {
@ -40,24 +41,10 @@ body {
box-shadow: none; box-shadow: none;
} }
#buttonNoPto, #buttonReturnPto { .page-nav-btn {
color: whitesmoke; color: whitesmoke;
text-decoration: underline; text-decoration: underline;
} }
/* .btnSubmit {
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
box-shadow: 0 0 20px #eee;
border-radius: 10px;
} */
.btn-sable:hover { .btn-sable:hover {
background-position: right center; /* change the direction of the change here */ background-position: right center; /* change the direction of the change here */