add modal

This commit is contained in:
Valentin CZERYBA 2022-08-06 22:48:00 +02:00
parent 2fbcaa79f1
commit 39010a92f3
4 changed files with 121 additions and 22 deletions

View File

@ -87,7 +87,7 @@
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="/html/home.html"><- Retour à la liste</a> <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="/html/users.html"><- Retour à la liste</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
@ -104,7 +104,7 @@
<div class="position-sticky pt-3 sidebar-sticky"> <div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"> <a class="nav-link active" aria-current="page" href="/html/users.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home align-text-bottom" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home align-text-bottom" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Utilisateurs Utilisateurs
</a> </a>
@ -118,10 +118,9 @@
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Utilisateurs</h1> <h1 class="h2">Utilisateur</h1>
</div> </div>
<h2>Utilisateur</h2>
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text" id="idUpdate">ID</span> <span class="input-group-text" id="idUpdate">ID</span>
<input id="idUpdateInput" type="text" class="form-control" placeholder="" aria-label="Id" aria-describedby="idUpdate" disabled> <input id="idUpdateInput" type="text" class="form-control" placeholder="" aria-label="Id" aria-describedby="idUpdate" disabled>
@ -172,11 +171,101 @@
<option value="2">En attente de validation</option> <option value="2">En attente de validation</option>
</select> </select>
</div> </div>
<button type="button" class="btn btn-success hidden" id="enableUser" data-bs-toggle="modal" data-bs-target="#enableUserModal">Activer l'utilisateur</button>
<button type="button" class="btn btn-success hidden" id="cancelUser" data-bs-toggle="modal" data-bs-target="#cancelUserModal">Annuler la suppression de l'utilisateur</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#updateUserModal">Mettre à jour l'utilisateur</button>
<button type="button" class="btn btn-warning hidden" id="disableUser" data-bs-toggle="modal" data-bs-target="#disableUserModal">Désactiver l'utilisateur</button>
<button type="button" class="btn btn-danger" id="removeUser" data-bs-toggle="modal" data-bs-target="#removeUserModal">Supprimer l'utilisateur</button>
<div class="modal fade" id="updateUserModal" tabindex="-1" aria-labelledby="updateUserModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateUserModalLabel">Mettre à jour l'utilisateur</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Voulez-vous mettre à jour l'utilisateur ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary" id="updateUserButton">Mettre à jour</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="disableUserModal" tabindex="-1" aria-labelledby="disableUserModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="disableUserModalLabel">Désactiver l'utilisateur</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Voulez-vous désactiver l'utilisateur ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-warning" id="disableUserButton">Désactiver</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="removeUserModal" tabindex="-1" aria-labelledby="removeUserModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateUserModalLabel">Supprimer l'utilisateur</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Etes-vous sûr de supprimer l'utilisateur ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-danger" id="removeUserButton">Supprimer</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="enableUserModal" tabindex="-1" aria-labelledby="enableUserModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="enableUserModalLabel">Activer l'utilisateur</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Voulez-vous activer l'utilisateur ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-success" id="enableUserButton">Activer</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="cancelUserModal" tabindex="-1" aria-labelledby="cancelUserModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cancelUserModalLabel">Annuler la suppression de l'utilisateur</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Voulez-vous annuller la suppression de l'utilisateur ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-success" id="cancelUserButton">Annuler la suppression de l'utilisateur</button>
</div>
</div>
</div>
</div>
</main> </main>
</div> </div>

View File

@ -115,20 +115,7 @@
</ul> </ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle align-text-bottom" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text align-text-bottom" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Current month
</a>
</li>
</ul>
</div> </div>
</nav> </nav>

View File

@ -2,7 +2,6 @@ checkToken();
document.getElementById("signin").addEventListener("submit", function(evt){ document.getElementById("signin").addEventListener("submit", function(evt){
evt.preventDefault(); evt.preventDefault();
console.log("toto");
var pseudo = document.getElementById("floatingPseudo"); var pseudo = document.getElementById("floatingPseudo");
var password = document.getElementById("floatingPassword"); var password = document.getElementById("floatingPassword");
if((password.value.length > 0) || (pseudo.value.length > 0)){ if((password.value.length > 0) || (pseudo.value.length > 0)){

View File

@ -20,6 +20,30 @@ if(id.length > 0){
} }
} }
} }
var buttonUser = "";
switch(response.data.status){
case 1:
buttonUser = "disableUser";
break;
case 2:
buttonUser = "enableUser";
break;
case -1:
buttonUser = "cancelUser";
document.getElementById("removeUser").classList.add("hidden");
break;
case 0:
buttonUser = "enableUser";
break;
default:
break;
}
if(buttonUser.length > 0){
console.log(disableUser);
document.getElementById(buttonUser).classList.remove("hidden");
}
}) })
.catch(function(error){ .catch(function(error){