rename file and remove console.log

This commit is contained in:
Valentin CZERYBA 2022-08-06 21:48:41 +02:00
parent a327443c37
commit 106ff00ce3
7 changed files with 206 additions and 206 deletions

View File

@ -87,14 +87,13 @@
<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="#">Company name</a>
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="/html/home.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">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" id="signout" href="#">Sign out</a>
<a class="nav-link px-3" id="signout" href="#">Deconnecté</a>
</div>
</div>
</header>
@ -111,69 +110,74 @@
</a>
</li>
</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>
</nav>
<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">
<h1 class="h2">Utilisateurs</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<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-calendar align-text-bottom" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
This week
</button>
</div>
</div>
<h2>Liste d'utilisateur</h2>
<div class="table-responsive">
<table id=users class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Pseudo</th>
<th scope="col">Mail</th>
<th scope="col">Rôle</th>
<th scope="col">Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span class="activeStatus hidden">Activé</span><span class="disableStatus hidden">Désactivé</span><span class="confirmStatus hidden">En attente de confirmation</span><span class="removeStatus hidden">En attente de suppression</span><span class="unknownStatus hidden">Statut inconnu</span></td>
</tr>
</tbody>
</table>
<div id="page" class="hidden">
<a href="#" id="previous">Précédent</a><span><a href="#"></a>1</span><a href="#" id="next">Suivant</a>
</div>
<h2>Utilisateur</h2>
<div class="input-group mb-3">
<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>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="pseudoUpdate">Pseudo</span>
<input id="pseudoUpdateInput" type="text" class="form-control" placeholder="Pseudo" aria-label="Pseudo" aria-describedby="pseudoUpdate">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="nameUpdate">Nom</span>
<input id="nameUpdateInput" type="text" class="form-control" placeholder="Nom" aria-label="Nom" aria-describedby="nameUpdate">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="firstNameUpdate">Prenom</span>
<input id="firstNameUpdateInput" type="text" class="form-control" placeholder="Prenom" aria-label="Prenom" aria-describedby="firstNameUpdate">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="emailUpdate">Email</span>
<input id="emailUpdateInput" type="text" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="emailUpdate">
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="rolesSelector">Roles</label>
<select class="form-select" id="rolesSelector">
<option value="Admin">Administrateur</option>
<option value="User">Utilisateur</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="birthUpdate">Date de naissance</span>
<input id="birthUpdateInput" type="date" class="form-control" placeholder="Date de naissance" aria-label="Date de naissance" aria-describedby="birthdateUpdate">
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="statusSelector">Statut</label>
<select class="form-select" id="statusSelector" disabled>
<option value="-2" selected>Statut</option>
<option value="-1">En cours de suppression</option>
<option value="0">Desactivé</option>
<option value="1">Activé</option>
<option value="2">En attente de validation</option>
</select>
</div>
</main>
</div>
</div>
@ -185,5 +189,5 @@
<script src="../js/config.js"></script>
<script src="../js/library.js"></script>
<script src="../js/home.js"></script>
<script src="../js/user.js"></script>
</body></html>

View File

@ -87,13 +87,14 @@
<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="#">Company name</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">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" id="signout" href="#">Deconnecté</a>
<a class="nav-link px-3" id="signout" href="#">Sign out</a>
</div>
</div>
</header>
@ -110,74 +111,69 @@
</a>
</li>
</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>
</nav>
<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">
<h1 class="h2">Utilisateurs</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<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-calendar align-text-bottom" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
This week
</button>
</div>
</div>
<h2>Utilisateur</h2>
<div class="input-group mb-3">
<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>
<h2>Liste d'utilisateur</h2>
<div class="table-responsive">
<table id=users class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Pseudo</th>
<th scope="col">Mail</th>
<th scope="col">Rôle</th>
<th scope="col">Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span class="activeStatus hidden">Activé</span><span class="disableStatus hidden">Désactivé</span><span class="confirmStatus hidden">En attente de confirmation</span><span class="removeStatus hidden">En attente de suppression</span><span class="unknownStatus hidden">Statut inconnu</span></td>
</tr>
</tbody>
</table>
<div id="page" class="hidden">
<a href="#" id="previous">Précédent</a><span><a href="#"></a>1</span><a href="#" id="next">Suivant</a>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="pseudoUpdate">Pseudo</span>
<input id="pseudoUpdateInput" type="text" class="form-control" placeholder="Pseudo" aria-label="Pseudo" aria-describedby="pseudoUpdate">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="nameUpdate">Nom</span>
<input id="nameUpdateInput" type="text" class="form-control" placeholder="Nom" aria-label="Nom" aria-describedby="nameUpdate">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="firstNameUpdate">Prenom</span>
<input id="firstNameUpdateInput" type="text" class="form-control" placeholder="Prenom" aria-label="Prenom" aria-describedby="firstNameUpdate">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="emailUpdate">Email</span>
<input id="emailUpdateInput" type="text" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="emailUpdate">
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="rolesSelector">Roles</label>
<select class="form-select" id="rolesSelector">
<option value="Admin">Administrateur</option>
<option value="User">Utilisateur</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="birthUpdate">Date de naissance</span>
<input id="birthUpdateInput" type="date" class="form-control" placeholder="Date de naissance" aria-label="Date de naissance" aria-describedby="birthdateUpdate">
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="statusSelector">Statut</label>
<select class="form-select" id="statusSelector" disabled>
<option value="-2" selected>Statut</option>
<option value="-1">En cours de suppression</option>
<option value="0">Desactivé</option>
<option value="1">Activé</option>
<option value="2">En attente de validation</option>
</select>
</div>
</main>
</div>
</div>

View File

@ -1,65 +0,0 @@
checkToken();
signOut();
var nbPages = 20;
instance.get("users/count", { withCredentials: true }).then(function(response){
var count = response.data / nbPages;
var reste = response.data % nbPages;
var total = 0;
if(reste != 0){
total = Number.parseInt(count) + 1;
}
if(total > 1){
document.getElementById("page").classList.remove("hidden");
}
});
instance.get("users", {withCredentials: true, params :{ page:0, nbPages: nbPages}}).then(function(response){
var trTag = document.querySelector("#users tbody tr").cloneNode(true);
listData = response.data;
for (var i=0; i<listData.length; i++){
if(i != 0){
document.querySelector("#users tbody").append(trTag);
}
var trAll = document.querySelectorAll("#users tbody tr")
td = trAll[i].querySelectorAll("td");
td[0].textContent = listData[i].id;
td[1].textContent = listData[i].pseudo
td[2].textContent = listData[i].email
td[3].textContent = listData[i].roles
var classTd = "";
switch(listData[i].status){
case 1:
classTd = ".activeStatus";
break;
case 0:
classTd = ".disableStatus";
break;
case 2:
classTd = ".confirmStatus";
break;
case -1:
classTd = ".removeStatus";
break;
default:
classTd = ".unknownStatus"
break;
}
td[4].querySelector(classTd).classList.remove("hidden");
trAll[i].addEventListener("click", function(e){
var id = e.currentTarget.querySelector("td").textContent;
location.href="/html/users.html?id="+id;
});
}
});

View File

@ -4,7 +4,7 @@ function checkToken(){
.then(function(response) {
if(location.pathname == "/")
{
location.href="/html/home.html";
location.href="/html/users.html";
}
})
.catch(function(error){

View File

@ -7,7 +7,7 @@ document.getElementById("signin").addEventListener("submit", function(evt){
var password = document.getElementById("floatingPassword");
if((password.value.length > 0) || (pseudo.value.length > 0)){
instance.get("token", { auth : {username: pseudo.value, password: password.value}, withCredentials: true})
.then(function(response) { location.href="html/home.html"; })
.then(function(response) { location.href="html/users.html"; })
.catch(function(error){
switch (error.response.status){

29
web/js/user.js Normal file
View File

@ -0,0 +1,29 @@
checkToken();
signOut();
var id = getQuery("id");
if(id.length > 0){
instance.get("users/"+id, {withCredentials: true})
.then(function(response){
var listValue = [ "id", "pseudo", "name", "firstName", "email", "birth"];
for (var i=0; i<listValue.length; i++){
document.getElementById(listValue[i]+"UpdateInput").value=response.data[listValue[i]];
}
var listSelector = ["roles", "status"];
for (var i=0; i<listSelector.length; i++){
var select = document.getElementById(listSelector[i]+"Selector").querySelectorAll("option");
for (var j=0; j<select.length; j++){
if(select[j].value == response.data[listSelector[i]]){
select[j].setAttribute("selected", true);
}
}
}
})
.catch(function(error){
console.log(error);
});
}

View File

@ -1,29 +1,65 @@
checkToken();
signOut();
var id = getQuery("id");
if(id.length > 0){
instance.get("users/"+id, {withCredentials: true})
.then(function(response){
var listValue = [ "id", "pseudo", "name", "firstName", "email", "birth"];
for (var i=0; i<listValue.length; i++){
document.getElementById(listValue[i]+"UpdateInput").value=response.data[listValue[i]];
}
var nbPages = 20;
instance.get("users/count", { withCredentials: true }).then(function(response){
var count = response.data / nbPages;
var reste = response.data % nbPages;
var total = 0;
if(reste != 0){
total = Number.parseInt(count) + 1;
}
if(total > 1){
document.getElementById("page").classList.remove("hidden");
}
});
instance.get("users", {withCredentials: true, params :{ page:0, nbPages: nbPages}}).then(function(response){
var trTag = document.querySelector("#users tbody tr").cloneNode(true);
listData = response.data;
for (var i=0; i<listData.length; i++){
if(i != 0){
document.querySelector("#users tbody").append(trTag);
}
var trAll = document.querySelectorAll("#users tbody tr")
td = trAll[i].querySelectorAll("td");
td[0].textContent = listData[i].id;
td[1].textContent = listData[i].pseudo
td[2].textContent = listData[i].email
td[3].textContent = listData[i].roles
var classTd = "";
switch(listData[i].status){
case 1:
classTd = ".activeStatus";
break;
case 0:
classTd = ".disableStatus";
break;
case 2:
classTd = ".confirmStatus";
break;
case -1:
classTd = ".removeStatus";
break;
default:
classTd = ".unknownStatus"
break;
}
td[4].querySelector(classTd).classList.remove("hidden");
trAll[i].addEventListener("click", function(e){
var id = e.currentTarget.querySelector("td").textContent;
location.href="/html/users.html?id="+id;
});
}
});
var listSelector = ["roles", "status"];
for (var i=0; i<listSelector.length; i++){
var select = document.getElementById(listSelector[i]+"Selector").querySelectorAll("option");
for (var j=0; j<select.length; j++){
if(select[j].value == response.data[listSelector[i]]){
select[j].setAttribute("selected", true);
}
}
}
})
.catch(function(error){
console.log(error);
});
}