worker-time-control/js/clockIn.js

let userData = "";

$(document).ready(function () {
    userData = JSON.parse(localStorage.getItem("userData"));
    FastClick.attach(document.body);
    setView();
    setEvents();
});

function setEvents() {

    $(".btnSalir").on("click", function () {
        cerrar();
    });

    $(".in").on("click", function () {
        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() {
    $(".footer").hide();
    $("#txtNombre").text(userData["name"] + " " + userData["surname"]);
    getInfo();
    $("." + userData["button1"]).show();
    $("." + userData["button2"]).show();
}

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() {
    $(".footer").hide();
    $(".in").hide();
    $(".inMiddle").hide();
    $(".outMiddle").hide();
    $(".out").hide();
    $("#txtNombre").text(userData["name"] + " " + userData["surname"]);
    getInfo();
    if(userData["button1"] === null && userData["button2"] === null ) {
        printError ("Contacta con tu responsable")
    } else {
        $("." + userData["button1"]).show();
        $("." + userData["button2"]).show();
    }
}

function getInfo() {
    const queryString = $.param({ workerFk: userData['userFk'] });
    
    $.get({
        urlPath: `WorkerTimeControls/getClockIn?${queryString}`,
        processData: false,
        success: function (data) {
            $('.footer').show();
            printTimetable(data);
        }
    });
}

function printTimetable(timetable) {
    const listWeekName = [
        'Domingo',
        'Lunes',
        'Martes',
        'Miércoles',
        'Jueves',
        'Viernes',
        'Sábado'
    ];;
    let dated = new Date();
    dated.setDate(dated.getDate() - 6);

    for (let i = 0; i < 6;  i++) {
        $(".listHorario").append('<label>' + listWeekName[dated.getDay()] +'</label>');
        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) {
    if(timetable.length > 0) {

        $(".listHorario").append('<hr>');
        $(".listHorario").append('<li><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["6daysAgoTotal"]))
                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["5daysAgoTotal"]))
                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["4daysAgoTotal"]))
                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["3daysAgoTotal"]))
                + ' h</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["2daysAgoTotal"]))
                + ' 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');     
    }

}

function printErrores(errores) {
    let error = '';
    for (let i = 0; i < errores.length; i++) {
        if (errores[i].error) {
           error += errores[i].error + "<br>";
        }
    }
    printError(error);
}

function ifIsEmpty(value) {
    return value.trim() ? "show" : "hide";    
}

function ifIsEmptyImage(value) {
    return value.trim() ? `img/${value}.svg` :"img/in.svg";    
}

function ifIsEmptyText(value) {
    return value.toString().trim() ? value : "00:00";
}

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

function secondsToHm(seconds) {
    seconds = Number(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'); 
}