worker-time-control/js/clockIn.js

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.addEventListener("DOMContentLoaded", () => {
    userData = JSON.parse(localStorage.getItem("userData"));
    setView();
    setEvents();
});

function setEvents() {
    document.querySelector(".btnSalir").addEventListener("click", close);

    inBtn.addEventListener("click", () => clockIn("in"));
    inMiddleBtn.addEventListener("click", () => clockIn("middle"));
    outMiddleBtn.addEventListener("click", () => clockIn("middle"));
    outBtn.addEventListener("click", () => clockIn("out"));

    setTimeout(close, 5000);
}

async function clockIn(direction) {
    let timeout = 1000;
    const data = await call("WorkerTimeControls/clockIn", {
        method: "POST",
        body: {
            workerFk: userData["userFk"],
            direction,
            device: localStorage.getItem("device"),
        },
    });

    if (data.error) {
        let msg = "";
        for (const val of data) if (val.error) msg += `${val.error}\n`;
        printError(msg);
    } else {
        document.querySelector(".confirm").classList.add("fade-in");
        txtConfirm.textContent = "Fichada registrada correctamente";
        timeout = 2000;
    }

    setTimeout(close, timeout);
}

function setView() {
    footer.style.hidden = true;
    inBtn.style.display = "none";
    inMiddleBtn.style.display = "none";
    outMiddleBtn.style.display = "none";
    outBtn.style.display = "none";

    txtName.textContent = `${userData.name} ${userData.surname}`;
    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.hidden = false;
    printTimetable(data);
}

function printTimetable(timetable) {
    const dated = new Date();
    dated.setDate(dated.getDate() - 6);

    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()] });
        table.append(label);
        dated.setDate(dated.getDate() + 1);
    }

    table.append(createElement("label", { text: "HOY", classes: ["hoy"] }), createElement("li", { classes: ["hrTop"] }));

    const liContent = createElement("li", {});
    const liTotals = createElement("li", {});
    timetable.forEach((row, index) => {
        for (let day = weekDays.length - 1; day >= 0; day--) {
            const img = createElement("img", { attrs: { src: ifIsEmptyImage(row[`${day}daysAgoDirection`]) } });
            const p = createElement("p", { text: row[`${day}daysAgo`] });

            const innerDiv = createElement("div", { childs: [img, p] });
            const outerDiv = createElement("div", { classes: ["time", ifIsEmpty(row[`${day}daysAgo`])], childs: [innerDiv] });
            liContent.append(outerDiv);

            if (index === 0) {
                const div = createElement("div", { classes: ["time"], text: secondsToHm(timetable[0][`${day}daysAgoTotal`]) });
                liTotals.append(div);
                totalHr += timetable[0][`${day}daysAgoTotal`] || 0;
            }
        }
        table.append(liContent);
        if (index === timetable.length - 1) table.append(createElement("hr", {}), liTotals);
    });

    totalEl.innerText = `Total: ${totalHr ? secondsToHm(totalHr) : 0} h`;
    timetableList.append(table);
}

const ifIsEmpty = (value) => (value?.trim() ? "show" : "hide");

const ifIsEmptyImage = (value) => (value?.trim() ? `img/${value}.svg` : "img/in.svg");

function close() {
    localStorage.removeItem("userData");
    setTimeout(() => (window.location = "index.html"), 200);
}

function secondsToHm(seconds) {
    seconds = +seconds;
    let hours = Math.floor(seconds / 3600);
    let minutes = Math.floor((seconds % 3600) / 60);
    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;
}