verdnatura/worker-time-control
verdnatura
/
worker-time-control
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: #6555 code translation JQuery to Js
gitea/worker-time-control/pipeline/pr-test This commit looks good Details

This commit is contained in:
Jorge Penadés 2024-06-18 16:39:32 +02:00
parent b2fa1d341b
commit 213b4f8520
8 changed files with 592 additions and 405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
clockIn.html
View File

@ -11,7 +11,6 @@ and open the template in the editor.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/> <link href="css/style.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/png" href="img/favicon.ico"> <link rel="icon" type="image/png" href="img/favicon.ico">
<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="node_modules/fastclick/lib/fastclick.js" type="text/javascript"></script> <script src="node_modules/fastclick/lib/fastclick.js" type="text/javascript"></script>
</head> </head>
<body class="pinLogin"> <body class="pinLogin">

25
css/style.css
View File

@ -202,7 +202,7 @@ h3 {
text-align: center; text-align: center;
} }
.footer { .footer {
animation: faceIn 0.2s ease-in-out; animation: fadeIn 0.2s ease-in-out;
} }
.in, .inMiddle { .in, .inMiddle {
display: inline; display: inline;
@ -372,6 +372,15 @@ header {
margin-bottom: 20px; margin-bottom: 20px;
} }
.fade-in {
display: block;
animation: fadeIn 0.2s ease-in-out forwards;
}
.fade-out {
animation: fadeOut 0.2s ease-in-out forwards;
}
@keyframes slideIn { @keyframes slideIn {
0% { 0% {
transform: translateY(-100%); transform: translateY(-100%);
@ -382,7 +391,8 @@ header {
opacity: 1; opacity: 1;
} }
} }
@keyframes faceIn {
@keyframes fadeIn {
0% { 0% {
opacity: 0; opacity: 0;
} }
@ -391,10 +401,21 @@ header {
} }
} }
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
@font-face { @font-face {
font-family: 'Poppins'; font-family: 'Poppins';
src: url('../font/Poppins.ttf') format('truetype'); src: url('../font/Poppins.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Poppins'; font-family: 'Poppins';
src: url('../font/Poppins-Bold.ttf') format('truetype'); src: url('../font/Poppins-Bold.ttf') format('truetype');

3
index.html
View File

@ -11,7 +11,6 @@ and open the template in the editor.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/> <link href="css/style.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/png" href="img/favicon.ico"> <link rel="icon" type="image/png" href="img/favicon.ico">
<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="node_modules/fastclick/lib/fastclick.js" type="text/javascript"></script> <script src="node_modules/fastclick/lib/fastclick.js" type="text/javascript"></script>
</head> </head>
<body class="pinLogin"> <body class="pinLogin">
@ -80,7 +79,7 @@ and open the template in the editor.
</div> </div>
</div> </div>
<h1> <h1>
developed by Verdnatura with<span class="heart"></span> powered by Verdnatura with<span class="heart"></span>
</h1> </h1>
<h2 class="device"> <h2 class="device">
<p id="deviceLabel"></p> <p id="deviceLabel"></p>

298
js/clockIn.js
View File

@ -1,237 +1,139 @@
let userData = ""; let userData = "";
const footer = document.querySelector(".footer");
const txtName = document.querySelector("#txtNombre");
const inBtn = document.querySelector(".in");
const inMiddleBtn = document.querySelector(".inMiddle");
const outMiddleBtn = document.querySelector(".outMiddle");
const outBtn = document.querySelector(".out");
const timetableList = document.querySelector(".listHorario");
const weekDays = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
$(document).ready(function () { document.addEventListener("DOMContentLoaded", () => {
userData = JSON.parse(localStorage.getItem("userData")); userData = JSON.parse(localStorage.getItem("userData"));
FastClick.attach(document.body);
setView(); setView();
setEvents(); setEvents();
}); });
function setEvents() { function setEvents() {
document.querySelector(".btnSalir").addEventListener("click", close);
$(".btnSalir").on("click", function () { inBtn.addEventListener("click", () => clockIn("in"));
cerrar(); inMiddleBtn.addEventListener("click", () => clockIn("middle"));
}); outMiddleBtn.addEventListener("click", () => clockIn("middle"));
outBtn.addEventListener("click", () => clockIn("out"));
$(".in").on("click", function () { // setTimeout(close, 5000);
fichar('in');
});
$(".inMiddle").on("click", function () {
fichar('middle');
});
$(".outMiddle").on("click", function () {
fichar('middle');
});
$(".out").on("click", function () {
fichar('out');
});
setTimeout(function () {
cerrar();
}, 5000);
} }
function setView() { async function clockIn(direction) {
$(".footer").hide(); let timeout = 1000;
$("#txtNombre").text(userData["name"] + " " + userData["surname"]); const data = await call("WorkerTimeControls/clockIn", {
getInfo(); method: "POST",
$("." + userData["button1"]).show(); body: {
$("." + userData["button2"]).show(); workerFk: userData["userFk"],
} direction,
device: localStorage.getItem("device"),
function fichar(direction) { },
const data = {
workerFk: userData['userFk'],
direction,
device: localStorage.getItem("device")
}
$.post({
urlPath: 'WorkerTimeControls/clockIn',
jsonData: data,
processData: false,
success: function (msg) {
if (msg.error){
printErrores(msg);
setTimeout(function () {
cerrar();
}, 2000);
}else {
$(".confirm").fadeIn(200);
$(".txtConfirm").append('Fichada registrada correctamente');
setTimeout(function () {
cerrar();
}, 1000);
}
}
}); });
}
function setView() { if (data.error) {
$(".footer").hide(); let msg = "";
$(".in").hide(); for (const val of data) if (val.error) msg += `${val.error}\n`;
$(".inMiddle").hide(); printError(msg);
$(".outMiddle").hide();
$(".out").hide();
$("#txtNombre").text(userData["name"] + " " + userData["surname"]);
getInfo();
if(userData["button1"] === null && userData["button2"] === null ) {
printError ("Contacta con tu responsable")
} else { } else {
$("." + userData["button1"]).show(); document.querySelector(".confirm").classList.add("fade-in");
$("." + userData["button2"]).show(); txtConfirm.textContent = "Fichada registrada correctamente";
timeout = 2000;
} }
setTimeout(close, timeout);
} }
function getInfo() { function setView() {
const queryString = $.param({ workerFk: userData['userFk'] }); footer.style.display = "none";
inBtn.style.display = "none";
$.get({ inMiddleBtn.style.display = "none";
urlPath: `WorkerTimeControls/getClockIn?${queryString}`, outMiddleBtn.style.display = "none";
processData: false, outBtn.style.display = "none";
success: function (data) {
$('.footer').show(); txtName.textContent = `${userData.name} ${userData.surname}`;
printTimetable(data); getInfo();
}
}); if (userData.button1 === null && userData.button2 === null) return printError("Contacta con tu responsable");
document.querySelector(`.${userData.button1}`).style.display = "inline-block";
if (userData.button2) document.querySelector(`.${userData.button2}`).style.display = "inline-block";
}
async function getInfo() {
const data = await call("WorkerTimeControls/getClockIn", { params: { workerFk: userData["userFk"] } });
footer.style.display = "block";
printTimetable(data);
} }
function printTimetable(timetable) { function printTimetable(timetable) {
const listWeekName = [ const dated = new Date();
'Domingo',
'Lunes',
'Martes',
'Miércoles',
'Jueves',
'Viernes',
'Sábado'
];;
let dated = new Date();
dated.setDate(dated.getDate() - 6); dated.setDate(dated.getDate() - 6);
for (let i = 0; i < 6; i++) { const fragment = document.createDocumentFragment();
$(".listHorario").append('<label>' + listWeekName[dated.getDay()] +'</label>'); const totalEl = document.querySelector(".total");
let totalHr = 0;
for (let day = 0; day < weekDays.length - 1; day++) {
const label = createElement("label", { text: weekDays[dated.getDay()] });
fragment.append(label);
dated.setDate(dated.getDate() + 1); dated.setDate(dated.getDate() + 1);
} }
$(".listHorario").append('<label class="hoy">HOY</label>');
$(".listHorario").append('<li class="hrTop"></li>');
for (let i = 0; i < timetable.length; i++) {
$(".listHorario").append(
'<li>' +
'<div class="time ' + ifIsEmpty(timetable[i]["6daysAgo"]) + '">' +
'<div>' +
'<img src="' + ifIsEmptyImage(timetable[i]["6daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["6daysAgo"]) + '</p>' +
'</div>' +
'</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["5daysAgo"]) + '">' +
'<div>' +
'<img src="' + ifIsEmptyImage(timetable[i]["5daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["5daysAgo"]) + '</p>'+
'</div>' +
'</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["4daysAgo"]) + '">' +
'<div>' +
'<img src="' + ifIsEmptyImage(timetable[i]["4daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["4daysAgo"]) + '</p>'+
'</div>' +
'</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["3daysAgo"]) + '">' +
'<div>' +
'<img src="' + ifIsEmptyImage(timetable[i]["3daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["3daysAgo"]) + '</p>'+
'</div>' +
'</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["2daysAgo"]) + '">' +
'<div>' +
'<img src="' + ifIsEmptyImage(timetable[i]["2daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["2daysAgo"]) + '</p>'+
'</div>' +
'</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["1daysAgo"]) + '">' +
'<div>' +
'<img src="' + ifIsEmptyImage(timetable[i]["1daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["1daysAgo"]) + '</p>'+
'</div>' +
'</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["0daysAgo"]) + '">' +
'<div>' +
'<img src="' + ifIsEmptyImage(timetable[i]["0daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["0daysAgo"]) + '</p>'+
'</div>' +
'</div>' +
'</li>'
);
}
printTotalHours(timetable);
}
function printTotalHours(timetable) { fragment.append(createElement("label", { text: "HOY", classes: ["hoy"] }), createElement("li", { classes: ["hrTop"] }));
if(timetable.length > 0) {
$(".listHorario").append('<hr>'); const liContent = createElement("li", {});
$(".listHorario").append('<li><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["6daysAgoTotal"])) const liTotals = createElement("li", {});
+ ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["5daysAgoTotal"])) timetable.forEach((row, index) => {
+ ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["4daysAgoTotal"])) for (let day = weekDays.length - 1; day >= 0; day--) {
+ ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["3daysAgoTotal"])) const img = createElement("img", { attrs: { src: ifIsEmptyImage(row[`${day}daysAgoDirection`]) } });
+ ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["2daysAgoTotal"])) const p = createElement("p", { text: row[`${day}daysAgo`] });
+ ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["1daysAgoTotal"]))
+ ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["0daysAgoTotal"]))
+ ' h</div></li>');
$(".total").text('Total: ' +
secondsToHm(
Number(timetable[0]["6daysAgoTotal"] == null) +
Number(timetable[0]["5daysAgoTotal"]) +
Number(timetable[0]["4daysAgoTotal"]) +
Number(timetable[0]["3daysAgoTotal"]) +
Number(timetable[0]["2daysAgoTotal"]) +
Number(timetable[0]["1daysAgoTotal"]) +
Number(timetable[0]["0daysAgoTotal"])
) + ' h');
} else{
$(".total").text('Total: 0h');
}
} const innerDiv = createElement("div", { childs: [img, p] });
const outerDiv = createElement("div", { classes: ["time", ifIsEmpty(row[`${day}daysAgo`])], childs: [innerDiv] });
liContent.append(outerDiv);
function printErrores(errores) { if (index === 0) {
let error = ''; const div = createElement("div", { classes: ["time"], text: secondsToHm(timetable[0][`${day}daysAgoTotal`]) });
for (let i = 0; i < errores.length; i++) { liTotals.append(div);
if (errores[i].error) { totalHr += timetable[0][`${day}daysAgoTotal`] || 0;
error += errores[i].error + "<br>"; }
} }
} fragment.append(liContent);
printError(error); if (index === timetable.length - 1) fragment.append(createElement("hr", {}), liTotals);
});
totalEl.innerText = `Total: ${totalHr ? secondsToHm(totalHr) : 0} h`;
timetableList.append(fragment);
} }
function ifIsEmpty(value) { const ifIsEmpty = (value) => (value?.trim() ? "show" : "hide");
return value.trim() ? "show" : "hide";
}
function ifIsEmptyImage(value) { const ifIsEmptyImage = (value) => (value?.trim() ? `img/${value}.svg` : "img/in.svg");
return value.trim() ? `img/${value}.svg` :"img/in.svg";
}
function ifIsEmptyText(value) { function close() {
return value.toString().trim() ? value : "00:00";
}
function cerrar(){
localStorage.removeItem("userData"); localStorage.removeItem("userData");
setTimeout(function () { setTimeout(() => (window.location = "index.html"), 200);
window.location='index.html';
}, 200);
} }
function secondsToHm(seconds) { function secondsToHm(seconds) {
seconds = Number(seconds); seconds = +seconds;
let hours = Math.floor(seconds / 3600); let hours = Math.floor(seconds / 3600);
let minutes = Math.floor(seconds % 3600 / 60); let minutes = Math.floor((seconds % 3600) / 60);
return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0'); return hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0");
} }
function createElement(tag, { classes = [], text, attrs = {}, childs = [] }) {
const el = document.createElement(tag);
if (classes) el.classList.add(...classes);
if (text) el.textContent = text;
for (const [key, value] of Object.entries(attrs)) el.setAttribute(key, value);
if (childs) el.append(...childs);
return el;
}

6
js/index.js
View File

@ -41,11 +41,10 @@ if ("addEventListener" in document) {
async function login() { async function login() {
try { try {
const res = await call("WorkerTimeControls/login", { const data = await call("WorkerTimeControls/login", {
method: "POST", method: "POST",
body: { pin }, body: { pin },
}); });
const data = await res.json();
localStorage.setItem("userData", JSON.stringify(data)); localStorage.setItem("userData", JSON.stringify(data));
window.location = "clockIn.html"; window.location = "clockIn.html";
} catch (e) { } catch (e) {
@ -55,11 +54,10 @@ async function login() {
} }
async function signIn(user, password, device) { async function signIn(user, password, device) {
const res = await call("vnUsers/sign-in", { const data = await call("vnUsers/sign-in", {
method: "POST", method: "POST",
body: { user, password }, body: { user, password },
}); });
const data = await res.json();
localStorage.setItem("token", data.token); localStorage.setItem("token", data.token);
localStorage.setItem("ttl", data.ttl); localStorage.setItem("ttl", data.ttl);
localStorage.setItem("user", user); localStorage.setItem("user", user);

36
js/main.js
View File

@ -1,44 +1,37 @@
const renewPeriod = localStorage.getItem("renewPeriod"); const renewPeriod = localStorage.getItem("renewPeriod");
let intervalId, isCheckingToken; let intervalId, isCheckingToken;
const txtConfirm = document.querySelector(".txtConfirm"); const txtConfirm = document.querySelector(".txtConfirm");
const confirm = document.querySelector(".confirm"); const confirmBtn = document.querySelector(".confirm");
function confirmReset() { function confirmReset() {
confirm.classList.remove("confirmKO"); confirmBtn.classList.remove("confirmKO", "fade-in", "fade-out");
confirm.style.display = "none"; confirmBtn.style.display = "none";
txtConfirm.textContent = ""; txtConfirm.textContent = "";
} }
// WIP: fadeIn / fadeOut
function printError(msg) { function printError(msg) {
confirmReset(); confirmReset();
const txtConfirm = document.querySelector(".txtConfirm"); const txtConfirm = document.querySelector(".txtConfirm");
txtConfirm.textContent = msg; txtConfirm.textContent = msg;
const confirm = document.querySelector(".confirm"); confirmBtn.classList.add("confirmKO");
confirm.classList.add("confirmKO"); confirmBtn.style.display = "block";
confirm.style.display = "block";
$(".confirm").fadeIn(200); confirmBtn.classList.add("fade-in");
setTimeout(() => { setTimeout(() => (confirmBtn.classList.add("fade-out"), confirmReset()), 2300);
$(".confirm").fadeOut(200);
setTimeout(confirmReset, 200);
}, 2300);
} }
async function renewToken() { async function renewToken() {
const res = await call("AccessTokens/renewToken", {}); const data = await call("AccessTokens/renewToken", {});
const data = await res.json();
localStorage.setItem("ttl", data.ttl); localStorage.setItem("ttl", data.ttl);
localStorage.setItem("created", Date.now()); localStorage.setItem("created", Date.now());
} }
async function getTokenConfig() { async function getTokenConfig() {
const res = await call("AccessTokenConfigs/findOne", { const data = await call("AccessTokenConfigs/findOne", {
params: { filter: { fields: ["renewInterval", "renewPeriod"] } }, params: { filter: { fields: ["renewInterval", "renewPeriod"] } },
}); });
const data = await res.json();
if (!data) return; if (!data) return;
localStorage.setItem("renewPeriod", data.renewPeriod); localStorage.setItem("renewPeriod", data.renewPeriod);
@ -61,7 +54,6 @@ async function getTokenConfig() {
}, data.renewInterval * 1000); }, data.renewInterval * 1000);
} }
/// WIP: MUST try thru it!
async function call(url, { method = "GET", body = {}, params = {} }) { async function call(url, { method = "GET", body = {}, params = {} }) {
const controller = new AbortController(); const controller = new AbortController();
const { signal } = controller; const { signal } = controller;
@ -85,8 +77,11 @@ async function call(url, { method = "GET", body = {}, params = {} }) {
try { try {
const res = await fetch(`/api/${url}`, opts); const res = await fetch(`/api/${url}`, opts);
const data = await res.json();
if (res.ok) return data;
clearTimeout(timeoutId); clearTimeout(timeoutId);
return res; throw data.error;
} catch (e) { } catch (e) {
let mensaje = "Ha ocurrido un error, consulta con informática"; let mensaje = "Ha ocurrido un error, consulta con informática";
@ -104,7 +99,7 @@ async function call(url, { method = "GET", body = {}, params = {} }) {
mensaje = e.message; mensaje = e.message;
break; break;
default: default:
switch (e.code) { switch (e.statusCode) {
case 0: case 0:
mensaje = "Not connect: Verify Network"; mensaje = "Not connect: Verify Network";
break; break;
@ -115,10 +110,11 @@ async function call(url, { method = "GET", body = {}, params = {} }) {
mensaje = "Error 555"; mensaje = "Error 555";
break; break;
default: default:
if (e.status >= 400 && e.status < 500) mensaje = e.message; if (e.statusCode >= 400 && e.statusCode < 500) mensaje = e.message;
} }
} }
printError(mensaje); printError(mensaje);
throw e;
} }
} }

625
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -18,8 +18,7 @@
"dependencies": { "dependencies": {
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"fastclick": "^1.0.6", "fastclick": "^1.0.6",
"jquery": "^3.7.0", "sweetalert2": "^11.6.13"
"sweetalert2": "11.10.1"
}, },
"devDependencies": { "devDependencies": {
"express": "^4.19.2", "express": "^4.19.2",