refactor: refs #6555 improve performance

clockIn.html

@@ -35,12 +35,12 @@ and open the template in the editor.
 
         </div>
 
-        <div class="footer">
+        <footer>
             <div class="in">Inicio jornada</div>
             <div class="inMiddle">Inicio descanso</div>
             <div class="outMiddle">Fin descanso</div>
             <div class="out">Fin jornada</div>
-        </div> 
+        </footer> 
 
         <div class="confirm">
             <div class="contConfirm">

css/style.css

@@ -193,17 +193,15 @@ h3 {
     background-size: cover;
     background-repeat: no-repeat;
 }
-.footer {
+footer {
-    display: none;
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 100px; 
     text-align: center;
-}
-.footer {
     animation: fadeIn 0.2s ease-in-out;
 }
+
 .in, .inMiddle {
     display: inline;
     position: static;
@@ -342,7 +340,7 @@ header {
     opacity: 1;
 }
 .confirm {
-    display: none;
+    visibility: hidden;
     position: fixed;
     top: 0;
     left: 0;
@@ -373,11 +371,12 @@ header {
 }
 
 .fade-in {
-    display: block;
+    visibility: visible;
     animation: fadeIn 0.2s ease-in-out forwards;
 }
 
 .fade-out {
+    visibility: hidden;
     animation: fadeOut 0.2s ease-in-out forwards;
 }
 
@@ -407,7 +406,6 @@ header {
     }
     100% {
         opacity: 0;
-        display: none;
     }
 }
 

js/clockIn.js

@@ -1,5 +1,5 @@
 let userData = "";
-const footer = document.querySelector(".footer");
+const footer = document.querySelector("footer");
 const txtName = document.querySelector("#txtNombre");
 const inBtn = document.querySelector(".in");
 const inMiddleBtn = document.querySelector(".inMiddle");
@@ -22,7 +22,7 @@ function setEvents() {
     outMiddleBtn.addEventListener("click", () => clockIn("middle"));
     outBtn.addEventListener("click", () => clockIn("out"));
 
-    // setTimeout(close, 5000);
+    setTimeout(close, 5000);
 }
 
 async function clockIn(direction) {
@@ -50,7 +50,7 @@ async function clockIn(direction) {
 }
 
 function setView() {
-    footer.style.display = "none";
+    footer.style.hidden = true;
     inBtn.style.display = "none";
     inMiddleBtn.style.display = "none";
     outMiddleBtn.style.display = "none";
@@ -67,7 +67,7 @@ function setView() {
 
 async function getInfo() {
     const data = await call("WorkerTimeControls/getClockIn", { params: { workerFk: userData["userFk"] } });
-    footer.style.display = "block";
+    footer.style.hidden = false;
     printTimetable(data);
 }
 
@@ -75,17 +75,17 @@ function printTimetable(timetable) {
     const dated = new Date();
     dated.setDate(dated.getDate() - 6);
 
-    const fragment = document.createDocumentFragment();
+    const table = document.createDocumentFragment();
     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);
+        table.append(label);
         dated.setDate(dated.getDate() + 1);
     }
 
-    fragment.append(createElement("label", { text: "HOY", classes: ["hoy"] }), createElement("li", { classes: ["hrTop"] }));
+    table.append(createElement("label", { text: "HOY", classes: ["hoy"] }), createElement("li", { classes: ["hrTop"] }));
 
     const liContent = createElement("li", {});
     const liTotals = createElement("li", {});
@@ -104,12 +104,12 @@ function printTimetable(timetable) {
                 totalHr += timetable[0][`${day}daysAgoTotal`] || 0;
             }
         }
-        fragment.append(liContent);
+        table.append(liContent);
-        if (index === timetable.length - 1) fragment.append(createElement("hr", {}), liTotals);
+        if (index === timetable.length - 1) table.append(createElement("hr", {}), liTotals);
     });
 
     totalEl.innerText = `Total: ${totalHr ? secondsToHm(totalHr) : 0} h`;
-    timetableList.append(fragment);
+    timetableList.append(table);
 }
 
 const ifIsEmpty = (value) => (value?.trim() ? "show" : "hide");

js/main.js

@@ -5,7 +5,7 @@ const confirmBtn = document.querySelector(".confirm");
 
 function confirmReset() {
     confirmBtn.classList.remove("confirmKO", "fade-in", "fade-out");
-    confirmBtn.style.display = "none";
+    confirmBtn.style.hidden = true;
     txtConfirm.textContent = "";
 }
 
@@ -14,7 +14,7 @@ function printError(msg) {
     const txtConfirm = document.querySelector(".txtConfirm");
     txtConfirm.textContent = msg;
     confirmBtn.classList.add("confirmKO");
-    confirmBtn.style.display = "block";
+    confirmBtn.style.hidden = false;
 
     confirmBtn.classList.add("fade-in");
     setTimeout(() => (confirmBtn.classList.add("fade-out"), confirmReset()), 2300);