projetphp/script.js

242 lines
8.7 KiB
JavaScript
Raw Normal View History

2019-01-02 10:29:27 +01:00
htmlAddUser = '<tr class="newRecord">\
2019-01-02 10:43:38 +01:00
<td class="login">\
<input type="text" /></td>\
2019-01-02 11:28:58 +01:00
<td class="datene" placeholder="yyyy/mm/dd">\
2019-01-02 10:43:38 +01:00
<input type="date" /></td>\
<td class="email">\
<input type="text" /></td>\
<td class="pw">\
2019-01-02 11:30:43 +01:00
<input type="password" /><div>le mot de passe comporte entre 8 et 16 caractères parmi a..z A..Z 0..9</div></td>\
2019-01-02 10:43:38 +01:00
<td class="sl">\
<select>\
<option value="1">1</option>\
<option value="5">5</option>\
<option value="10">10</option>\
</select></td>\
<td><i class="fas fa-check click confirmNewUser"></i><i class="fas fa-trash-alt click delUser"></i></td>\
2019-01-02 10:29:27 +01:00
</tr>';
2019-01-02 10:43:38 +01:00
passwordPatern = /^[a-zA-Z0-9]{8,16}$/;
loginPatern = /^[a-z]{8,16}$/
mailPatern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; //https://emailregex.com/
2019-01-02 11:28:58 +01:00
datePatern = /^\d{4}[\/\-](?:\d{1}|1[012]|0\d)[\/\-](?:\d{1}|[123]\d|0\d)/
2019-01-02 10:29:27 +01:00
2018-12-30 17:41:15 +01:00
$(function() {
2019-01-02 11:28:58 +01:00
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~INPUT EVENT~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$("#allRecord").on("keyup change", ".pw input", function() {
2019-01-02 10:43:38 +01:00
if (passwordPatern.test($(this).val()) || $(this).val() == "") {
$(this).css("background-color", "");
$('div', $(this).parent()).css("display", "none");
} else {
$(this).css("background-color", "red");
$('div', $(this).parent()).css("display", "block");
2018-12-30 21:26:55 +01:00
}
2019-01-02 10:43:38 +01:00
});
2019-01-02 11:28:58 +01:00
$("#allRecord").on("keyup change", ".email input", function() {
2019-01-02 10:43:38 +01:00
if (mailPatern.test($(this).val())) {
$(this).css("background-color", "");
$('div', $(this).parent()).css("display", "none");
} else {
$(this).css("background-color", "red");
$('div', $(this).parent()).css("display", "block");
}
});
2019-01-02 11:28:58 +01:00
$("#allRecord").on("keyup change", ".datene :input", function(e) {
console.log(e.target.value);
if (datePatern.test($(this).val())) {
$(this).css("background-color", "");
$('div', $(this).parent()).css("display", "none");
} else {
$(this).css("background-color", "red");
$('div', $(this).parent()).css("display", "block");
}
});
2019-01-02 10:43:38 +01:00
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~TR TO DEL~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$("#allRecord").on("click", ".delUser", function() {
newUser = false;
tr = $(this).parent().parent();
var login = "";
var sl = "";
if (tr.find("i.editUser").length !== 0) {
sl = ltrim($('.sl', tr).html())
login = $('.login', tr).html();
} else if (tr.find("i.confirmEditUser").length !== 0) {
sl = $('.sl select', tr).val();
login = $('.login', tr).html();
} else {
try {
login = "New user " + $('.login input', tr).val();
newUser = true;
} catch (e) {
swal("error : " + e);
return;
}
}
if (sl == "10") {
swal("Oops", "You can't del user with sl 10", "error");
2018-12-30 21:26:55 +01:00
return;
}
login = ltrim(login);
swal({
2019-01-02 10:43:38 +01:00
title: "Are you sure to del " + login + " ?",
text: "Once deleted, you will not be able to recover this!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
if (!newUser)
$.post("post.php", {
userToDel: login
}, function() {
tr.remove();
swal("Poof! " + login + " has been deleted!", {
icon: "success",
});
});
else {
tr.remove();
swal("Poof! " + login + " has been deleted!", {
icon: "success",
});
}
} else {
2018-12-30 19:53:28 +01:00
2019-01-02 10:43:38 +01:00
}
});
2018-12-30 19:53:28 +01:00
2018-12-30 21:26:55 +01:00
2019-01-02 10:43:38 +01:00
});
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~TR TO EDIT~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
2019-01-02 10:43:38 +01:00
$("#allRecord").on("click", ".editUser", function() {
2018-12-30 17:52:46 +01:00
$(this).toggleClass('fa-edit fa-check');
$(this).toggleClass('editUser confirmEditUser');
2019-01-02 10:43:38 +01:00
for (i = 1; i < $("td", $(this).parent().parent()).length - 1; i++) {
j = $($("td", $(this).parent().parent())[i]);
2018-12-30 18:41:58 +01:00
className = j.attr('class');
2019-01-02 10:43:38 +01:00
if (className == "sl") {
2018-12-30 18:41:58 +01:00
val = ltrim(j.html());
j.html('<select>\
2019-01-02 10:43:38 +01:00
<option value="1" ' + (val == "1" ? 'selected' : '') + '>1</option>\
<option value="5" ' + (val == "5" ? 'selected' : '') + '>5</option>\
<option value="10" ' + (val == "10" ? 'selected' : '') + '>10</option>\
</select>')
} else {
2018-12-30 18:41:58 +01:00
inputOptions = '';
2019-01-02 10:43:38 +01:00
if (className == "pw")
inputOptions += 'type="password" data-oldpw="' + ltrim(j.html()) + '" ';
2018-12-30 18:41:58 +01:00
else if (j.attr('class') == "datene")
2019-01-02 11:28:58 +01:00
inputOptions += 'type="date" placeholder="yyyy/mm/dd"'
2019-01-02 10:43:38 +01:00
j.html('<input ' + inputOptions + ' value="' + (j.attr('class') == "pw" ? '' : ltrim(j.html())) + '" />');
if (className == "pw") {
2018-12-30 19:53:28 +01:00
j.append("<div>le mot de passe comporte entre 8 et 16 caractères parmi a..z A..Z 0..9</div>")
}
2018-12-30 18:41:58 +01:00
}
2018-12-30 17:52:46 +01:00
}
2019-01-02 10:43:38 +01:00
});
2019-01-02 10:43:38 +01:00
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~CONFIRM EDIT~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$("#allRecord").on("click", ".confirmEditUser", function() {
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~CALL BACK DE LA VERIF DE MOT DE PASSE~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
function callBackVerif(data) {
var dataToSend = new Object(); //Objet contenant les données à envoyé
2019-01-02 11:28:58 +01:00
dataToSend["updatePW"] = (data === true ? false : true); //Si maj du mdp data === false
2019-01-02 10:43:38 +01:00
if ($(".pw input", tr).val() === data || data === true) //Verif du mot de passe si nécesaire
{
for (i = 0; i < tds.length - 1; i++) //Analyse de chaque td
{
j = $(tds[i]);
className = j.attr('class');
if (className == "pw" && data === true)
value = $('input,select', j).data("oldpw");
else if (className == "login")
value = ltrim(j.html());
2018-12-30 17:41:15 +01:00
else
2019-01-02 10:43:38 +01:00
value = $('input,select', j).val();
dataToSend[className] = value;
}
$.post("post.php", dataToSend, function(data) {
try {
if (data.return == true) {
for (i = 1; i < tds.length - 1; i++) //On change les input en pure html
{
j = $(tds[i]);
className = j.attr('class');
if (className == "pw")
value = data.pw;
else
value = $('input,select', j).val();
j.html(value);
}
swal("all done");
$(that).toggleClass('fa-check fa-edit');
$(that).toggleClass('confirmEditUser editUser');
} else
swal(data);
} catch (e) {
swal("Oops", "Something went wrong!<br>" + e, "error");
}
console.log(data.return)
}, "json");
} else {
swal("Oops", "Password don't match !", "error");
}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
tds = $("td", $(this).parent().parent()); //Récupère les td concernant le click
tr = $(this).parent().parent(); //Récupère le tr concernant le click
that = this;
if (mailPatern.test($(".email input", tr).val()) && (passwordPatern.test($(".pw input", tr).val()) || $(".pw input", tr).val() == ""))
if ($(".pw input", tr).val() === "") {
callBackVerif(true);
}
else {
swal({
closeOnClickOutside: false,
closeOnEsc: false,
content: {
element: "input",
attributes: {
placeholder: "Confirmer le mot de passe",
type: "password",
},
},
}).then(callBackVerif);
} else
swal("Oops", "Input don't respect rules !", "error");
});
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~ADD USER~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$("#allRecord").on("click", ".fa-user-plus", function() {
$(this).parent().parent().before(htmlAddUser);
});
$("#allRecord").on("click", ".confirmNewUser", function() {
2019-01-02 10:29:27 +01:00
2019-01-02 10:43:38 +01:00
});
$("#allRecord").on("click", ".delNewUser", function() {
tr = $(this).parent().parent();
tr.remove();
});
2018-12-30 17:41:15 +01:00
});
2019-01-02 11:28:58 +01:00
//J'avais plein d'espace à droite et à gauche en récupérent mon innerHTML
//https://stackoverflow.com/questions/24282158/removing-the-white-space-at-the-start-of-the-string
2018-12-30 17:41:15 +01:00
function ltrim(str) {
2019-01-02 10:43:38 +01:00
if (str == null) return str;
2019-01-02 11:28:58 +01:00
str = str.replace(/^\s+/g, '')
str = str.replace(/\s+$/g, '')
return str;
2018-12-30 17:41:15 +01:00
}