factorise spinner & css result.html
This commit is contained in:
Johan Le Baut
parent
68b137c8f9
commit
3e69f83b66
3 changed files with 45 additions and 38 deletions
|
|
@ -25,7 +25,9 @@
|
|||
</head>
|
||||
|
||||
<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 class="row d-flex justify-content-between align-items-center" data-parent="#mainContainer">
|
||||
|
|
@ -58,7 +60,7 @@
|
|||
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
|
||||
|
|
@ -87,7 +89,7 @@
|
|||
</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
|
||||
class="btn btn-link page-nav-btn" aria-expanded="false" aria-controls="methodPto methodAddress">Revenir au test par
|
||||
PTO</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -126,6 +128,15 @@
|
|||
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 () {
|
||||
$('#communeInput').trigger('input')
|
||||
$('#communeInput').trigger('keyup')
|
||||
|
|
@ -208,23 +219,13 @@
|
|||
});
|
||||
|
||||
$('#formAddressTest').submit(function(eventObj) {
|
||||
// disable button
|
||||
$("#btnTestAdresse").prop("disabled", true);
|
||||
// add spinner to button
|
||||
$("#btnTestAdresse").html(
|
||||
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>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="codeRivoli" value="${codeRivoli}" />`);
|
||||
return true;
|
||||
});
|
||||
$('#formPtoTest').submit(function(eventObj) {
|
||||
// disable button
|
||||
$("#buttonPtoTest").prop("disabled", true);
|
||||
// add spinner to button
|
||||
$("#buttonPtoTest").html(
|
||||
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Test...`
|
||||
);
|
||||
setButtonSpinner("#buttonPtoTest", "Test...");
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,19 @@
|
|||
<html lang="fr">
|
||||
<head>
|
||||
<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>
|
||||
<style>
|
||||
{% include 'style.css' %}
|
||||
|
|
@ -11,9 +23,17 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="text-center" id="aquilenet-title">Aquilenet</h1>
|
||||
{% if result['codeRetour'] == 0 %}
|
||||
<h1 class="text-center">
|
||||
<a href="https://www.aquilenet.fr/" id="aquilenet-title">AQUILENET</a>
|
||||
</h1>
|
||||
|
||||
|
||||
<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>
|
||||
<p>Résultat pour le PTO: {{ pto }}</p>
|
||||
{% for batiment in result['batiments'] %}
|
||||
|
|
@ -58,13 +78,12 @@
|
|||
{% endfor %}
|
||||
</table>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div id="containerResults" class="container">
|
||||
<h1 id="main-title">Erreur</h1>
|
||||
<p>Code d'erreur: {{ result['axioneErreur']['codeErreur'] }}</p>
|
||||
<p>Description de l'erreur: {{ result['axioneErreur']['libelleErreur'] }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@ body {
|
|||
#aquilenet-title {
|
||||
color: whitesmoke;
|
||||
align-self: center;
|
||||
font-size: 4em;
|
||||
font-size: 2em;
|
||||
margin-top: .3em;
|
||||
margin-bottom: .5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.form-title {
|
||||
color: whitesmoke;
|
||||
|
|
@ -22,7 +23,7 @@ body {
|
|||
margin-top: .3em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.form-label, .card-body {
|
||||
.form-label, .card-body, #containerResults {
|
||||
color: whitesmoke;
|
||||
}
|
||||
#ptoHelp {
|
||||
|
|
@ -40,24 +41,10 @@ body {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
#buttonNoPto, #buttonReturnPto {
|
||||
.page-nav-btn {
|
||||
color: whitesmoke;
|
||||
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 {
|
||||
background-position: right center; /* change the direction of the change here */
|
||||
|
|
|
|||
Loading…
Reference in a new issue