clockIn.html

@@ -27,7 +27,7 @@ and open the template in the editor.
                 <div class="container">
                     <h2>Tus fichadas</h2>
                     <h3>Situación de los ultimos 7 días</h3> 
-                    <div class="total">Total: 7.7h</div>
+                    <div class="total"></div>
                     <ul class="listHorario">
                     </ul>
                 </div>

config.js

@@ -4,5 +4,5 @@ var process = {
 };
 
 var config = {
-    urlBase: 'http://localhost:9090'
+    urlBase: 'http://localhost:8080'
 };

css/style.css

@@ -274,7 +274,7 @@ header{
 .listHorario .headerLi{
     width: 100%;
     overflow: hidden;
-    border-bottom: 1px solid #9EA7AC;
+    border-top: 1px solid #9EA7AC;
     padding-bottom: 10px;
 
 }

js/clockIn.js

@@ -42,7 +42,7 @@ function setView() {
     $("." + userData["button2"]).show();
 }
 
-function  fichar(direction) {
+function fichar(direction) {
     $.post({
         urlPath: 'clockIn',
         jsonData: [userData['userFk'], direction],
@@ -87,44 +87,89 @@ function getInfo() {
         processData: false,
         success: function (data) {
             $('.footer').show();
-            printHorario(data);
+            printTimetable(data);
         }
     });
 }
 
-function printHorario(horarios) {
+function printTimetable(timetable) {
-    var c = "in";
-    for (var i = 0; i < horarios.length; i++) {
-        if (i % 2 !== 0) {
-            c = "out";
-        } else {
-            c = "in";
-        }
-        if (horarios[i]["7_dias_antes"] === "total") {
-            if (horarios.length > (i + 1)) {
-                printTotalHours(horarios[i + 1]);
-            }
-            if (horarios.length > (i + 2)) {
-                $(".total").text('Total: ' + horarios[i + 2]["1_dia_antes"] + 'h');
-            }
-            break;
-        }
-        $(".listHorario").append('<li><div class="time ' + ifIsEmpty(horarios[i]["6_dias_antes"]) + '"><img src="img/' + c + '.png" alt=""/><p>' + ifIsEmptyText(horarios[i]["6_dias_antes"]) + '</p></div><div class="time ' + ifIsEmpty(horarios[i]["5_dias_antes"]) + '"><img src="img/' + c + '.png" alt=""/><p>' + ifIsEmptyText(horarios[i]["5_dias_antes"]) + '</p></div><div class="time ' + ifIsEmpty(horarios[i]["4_dias_antes"]) + '"><img src="img/' + c + '.png" alt=""/><p>' + ifIsEmptyText(horarios[i]["4_dias_antes"]) + '</p></div><div class="time ' + ifIsEmpty(horarios[i]["3_dias_antes"]) + '"><img src="img/' + c + '.png" alt=""/><p>' + ifIsEmptyText(horarios[i]["3_dias_antes"]) + '</p></div><div class="time ' + ifIsEmpty(horarios[i]["2_dias_antes"]) + '"><img src="img/' + c + '.png" alt=""/><p>' + ifIsEmptyText(horarios[i]["2_dias_antes"]) + '</p></div><div class="time ' + ifIsEmpty(horarios[i]["1_dia_antes"]) + '"><img src="img/' + c + '.png" alt=""/><p>' + ifIsEmptyText(horarios[i]["1_dia_antes"]) + '</p></div><div class="time ' + ifIsEmpty(horarios[i]["mismo_dia"]) + '"><img src="img/' + c + '.png" alt=""/><p>' + ifIsEmptyText(horarios[i]["mismo_dia"]) + '</p></div></li>');
-    }
     var listWeekName = printWeek();
-    $(".listHorario").prepend('<li class="headerLi"><label>' + listWeekName[5] + '</label><label>' + listWeekName[4] + '</label><label>' + listWeekName[3] + '</label><label>' + listWeekName[2] + '</label><label>' + listWeekName[1] + '</label><label>' + listWeekName[0] + '</label><label class="hoy">HOY</label></li>');
+    var dated = new Date();
+    dated.setDate(dated.getDate() - 6);
+
+    for (var 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="headerLi"></li>');
+   
+    for (var i = 0; i < timetable.length; i++) {
+         
+        $(".listHorario").append(
+            '<li>' +
+                '<div class="time ' + ifIsEmpty(timetable[i]["6daysAgo"]) + '">' +
+                    '<img src="' + ifIsEmptyImage(timetable[i]["6daysAgoDirection"]) + '" />' +
+                    '<p>' + ifIsEmptyText(timetable[i]["6daysAgo"]) + '</p>' +
+                '</div>' +
+                '<div class="time ' + ifIsEmpty(timetable[i]["5daysAgo"]) + '">' +
+                    '<img src="' + ifIsEmptyImage(timetable[i]["5daysAgoDirection"]) + '" />' +
+                    '<p>' + ifIsEmptyText(timetable[i]["5daysAgo"]) + '</p>'+
+                '</div>' +
+                '<div class="time ' + ifIsEmpty(timetable[i]["4daysAgo"]) + '">' +
+                    '<img src="' + ifIsEmptyImage(timetable[i]["4daysAgoDirection"]) + '" />' +
+                    '<p>' + ifIsEmptyText(timetable[i]["4daysAgo"]) + '</p>'+
+                '</div>' +
+                '<div class="time ' + ifIsEmpty(timetable[i]["3daysAgo"]) + '">' +
+                    '<img src="' + ifIsEmptyImage(timetable[i]["3daysAgoDirection"]) + '" />' +
+                    '<p>' + ifIsEmptyText(timetable[i]["3daysAgo"]) + '</p>'+
+                '</div>' +
+                '<div class="time ' + ifIsEmpty(timetable[i]["2daysAgo"]) + '">' +
+                    '<img src="' + ifIsEmptyImage(timetable[i]["2daysAgoDirection"]) + '" />' +
+                    '<p>' + ifIsEmptyText(timetable[i]["2daysAgo"]) + '</p>'+
+                '</div>' + 
+                '<div class="time ' + ifIsEmpty(timetable[i]["1daysAgo"]) + '">' +
+                    '<img src="' + ifIsEmptyImage(timetable[i]["1daysAgoDirection"]) + '" />' +
+                    '<p>' + ifIsEmptyText(timetable[i]["1daysAgo"]) + '</p>'+
+                '</div>' +
+                '<div class="time ' + ifIsEmpty(timetable[i]["0daysAgo"]) + '">' +
+                    '<img src="' + ifIsEmptyImage(timetable[i]["0daysAgoDirection"]) + '" />' +
+                    '<p>' + ifIsEmptyText(timetable[i]["0daysAgo"]) + '</p>'+
+                '</div>' +
+            '</li>'
+        );
+        
+    }
+    printTotalHours(timetable);
+   
 }
 
-function printTotalHours(horarios) {
+function printTotalHours(timetable) {
-    $(".listHorario").append('<li><br><hr></li>');
+    if(timetable.length>0) {
-    $(".listHorario").append('<li><div class="time">' + ifIsEmptyText(horarios["6_dias_antes"])
+
-            + '</div><div class="time">' + ifIsEmptyText(horarios["5_dias_antes"])
+        $(".listHorario").append('<li class="headerLi"></li>');
-            + '</div><div class="time">' + ifIsEmptyText(horarios["4_dias_antes"])
+        $(".listHorario").append('<li><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["6daysAgoTotal"]))
-            + '</div><div class="time">' + ifIsEmptyText(horarios["3_dias_antes"])
+                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["5daysAgoTotal"]))
-            + '</div><div class="time">' + ifIsEmptyText(horarios["2_dias_antes"])
+                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["4daysAgoTotal"]))
-            + '</div><div class="time">' + ifIsEmptyText(horarios["1_dia_antes"])
+                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["3daysAgoTotal"]))
-            + '</div><div class="time">' + ifIsEmptyText(horarios["mismo_dia"])
+                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["2daysAgoTotal"]))
-            + '</div></li>');
+                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["1daysAgoTotal"]))
+                + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["0daysAgoTotal"]))
+                + '</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 printWeek() {
@@ -139,12 +184,12 @@ function printWeek() {
 
 var weekDays = [
     'Domingo',
-    'Lunes',
+    'Sábado',
-    'Martes',
-    'Miércoles',
-    'Jueves',
     'Viernes',
-    'Sábado'
+    'Jueves',
+    'Miércoles',
+    'Martes',
+    'Lunes'
 ];
 
 function printErrores(errores) {
@@ -165,6 +210,14 @@ function ifIsEmpty(value) {
     }
 }
 
+function ifIsEmptyImage(value) {
+    if (value.trim().length === 0) {
+        return "img/in.png";
+    } else {
+        return "img/" + value + ".png";
+    }
+}
+
 function ifIsEmptyText(value) {
     if (value.trim().length === 0) {
         return "00:00";
@@ -180,3 +233,10 @@ function cerrar(){
     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'); 
+}