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

refs #5966 Changed style and loading screen
gitea/worker-time-control/pipeline/head This commit looks good Details

This commit is contained in:
Guillermo Bonet 2023-08-23 10:22:33 +02:00
parent 97b47bf47d
commit c8ad3b7918
4 changed files with 80 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
clockIn.html
View File

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

57
css/style.css
View File

@ -34,6 +34,7 @@ span {
font-weight: bold; font-weight: bold;
font-size: 1.4em; font-size: 1.4em;
margin-top: -40px; margin-top: -40px;
color: white;
} }
ul { ul {
@ -75,7 +76,7 @@ ul {
} }
#logo { #logo {
width: 25%; width: 30%;
padding-bottom: 20px; padding-bottom: 20px;
} }
@ -199,18 +200,21 @@ h3 {
display: inline; display: inline;
position: static; position: static;
width: 350px; width: 350px;
background: rgba(0, 204, 10, .90); background: rgba(69, 171, 38, 0.9);
padding: 20px 40px; padding: 20px 40px;
font-size: 2em; font-size: 2em;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50px;
} }
.in:active { .in:active {
background: rgb(0, 204, 10); background: rgb(69, 171, 38,);
} }
.out,.outMiddle { .out {
margin-left: 30px;
}
.out, .outMiddle {
display: inline; display: inline;
position: static; position: static;
width: 350px; width: 350px;
@ -219,7 +223,7 @@ h3 {
font-size: 2em; font-size: 2em;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50px;
} }
.out:active { .out:active {
@ -267,56 +271,71 @@ header {
margin-top: 10px; margin-top: 10px;
} }
.listHorario { .listHorario {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
text-align: center;
justify-content: center; /* Esto alinea horizontalmente en el centro */
align-items: center; /* Esto alinea verticalmente en el centro */
} }
.listHorario .headerLi { .listHorario .hrTop {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-top: 1px solid #9EA7AC; border-top: 1px solid #9EA7AC;
padding-bottom: 10px; padding-bottom: 10px;
} }
/* Transparent borders because <hr> doesn't allow margin */
.listHorario hr {
padding-top: 5px;
margin-bottom: 15px;
border-bottom: 1px solid #9EA7AC;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
}
.listHorario label { .listHorario label {
float: left; float: left;
width: calc(100% / 7); width: calc(100% / 7);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
padding: 5px 0; padding: 5px 0;
color: white;
} }
.hoy { .hoy {
background: #9EA7AC; background: #9EA7AC;
color: #fff; border-radius: 25px 25px 0px 0px;
color: black !important;
} }
.listHorario .time { .listHorario .time {
float: left; float: left;
width: calc(100% / 7); width: calc(100% / 7);
text-align: center;
padding: 5px 0; padding: 5px 0;
font-size: 1.2em; font-size: 1.2em;
overflow: hidden; overflow: hidden;
color: white;
} }
.listHorario .time div {
display: inline-block;
}
.listHorario .time img { .listHorario .time img {
width: 20px; width: 20px;
float: left; float: left;
margin-right: 5px; margin-right: 5px;
margin-left: 15px; margin-top: 8.5px;
margin-top: 7px; filter: invert(100%);
} }
.listHorario .time p { .listHorario .time p {
float: left; float: left;
background: #8DD202; background: #121212;
padding: 5px; padding: 5px;
border-radius: 7px; border-radius: 24px;
color: white;
width: 72.5px;
box-shadow: 0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f;
} }
.impar { .impar {

70
js/clockIn.js
View File

@ -55,7 +55,7 @@ function fichar(direction) {
}, 3000); }, 3000);
}else { }else {
$(".confirm").fadeIn(200); $(".confirm").fadeIn(200);
$(".txtConfirm").append('FICHADA REGISTRADA'); $(".txtConfirm").append('Fichada registrada correctamente');
setTimeout(function () { setTimeout(function () {
cerrar(); cerrar();
}, 1000); }, 1000);
@ -102,52 +102,64 @@ function printTimetable(timetable) {
dated.setDate(dated.getDate() + 1); dated.setDate(dated.getDate() + 1);
} }
$(".listHorario").append('<label class="hoy">HOY</label>'); $(".listHorario").append('<label class="hoy">HOY</label>');
$(".listHorario").append('<li class="headerLi"></li>'); $(".listHorario").append('<li class="hrTop"></li>');
for (var i = 0; i < timetable.length; i++) { for (var i = 0; i < timetable.length; i++) {
$(".listHorario").append( $(".listHorario").append(
'<li>' + '<li>' +
'<div class="time ' + ifIsEmpty(timetable[i]["6daysAgo"]) + '">' + '<div class="time ' + ifIsEmpty(timetable[i]["6daysAgo"]) + '">' +
'<img src="' + ifIsEmptyImage(timetable[i]["6daysAgoDirection"]) + '" />' + '<div>' +
'<p>' + ifIsEmptyText(timetable[i]["6daysAgo"]) + '</p>' + '<img src="' + ifIsEmptyImage(timetable[i]["6daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["6daysAgo"]) + '</p>' +
'</div>' +
'</div>' + '</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["5daysAgo"]) + '">' + '<div class="time ' + ifIsEmpty(timetable[i]["5daysAgo"]) + '">' +
'<img src="' + ifIsEmptyImage(timetable[i]["5daysAgoDirection"]) + '" />' + '<div>' +
'<p>' + ifIsEmptyText(timetable[i]["5daysAgo"]) + '</p>'+ '<img src="' + ifIsEmptyImage(timetable[i]["5daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["5daysAgo"]) + '</p>'+
'</div>' +
'</div>' + '</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["4daysAgo"]) + '">' + '<div class="time ' + ifIsEmpty(timetable[i]["4daysAgo"]) + '">' +
'<img src="' + ifIsEmptyImage(timetable[i]["4daysAgoDirection"]) + '" />' + '<div>' +
'<p>' + ifIsEmptyText(timetable[i]["4daysAgo"]) + '</p>'+ '<img src="' + ifIsEmptyImage(timetable[i]["4daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["4daysAgo"]) + '</p>'+
'</div>' +
'</div>' + '</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["3daysAgo"]) + '">' + '<div class="time ' + ifIsEmpty(timetable[i]["3daysAgo"]) + '">' +
'<img src="' + ifIsEmptyImage(timetable[i]["3daysAgoDirection"]) + '" />' + '<div>' +
'<p>' + ifIsEmptyText(timetable[i]["3daysAgo"]) + '</p>'+ '<img src="' + ifIsEmptyImage(timetable[i]["3daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["3daysAgo"]) + '</p>'+
'</div>' +
'</div>' + '</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["2daysAgo"]) + '">' + '<div class="time ' + ifIsEmpty(timetable[i]["2daysAgo"]) + '">' +
'<img src="' + ifIsEmptyImage(timetable[i]["2daysAgoDirection"]) + '" />' + '<div>' +
'<p>' + ifIsEmptyText(timetable[i]["2daysAgo"]) + '</p>'+ '<img src="' + ifIsEmptyImage(timetable[i]["2daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["2daysAgo"]) + '</p>'+
'</div>' +
'</div>' + '</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["1daysAgo"]) + '">' + '<div class="time ' + ifIsEmpty(timetable[i]["1daysAgo"]) + '">' +
'<img src="' + ifIsEmptyImage(timetable[i]["1daysAgoDirection"]) + '" />' + '<div>' +
'<p>' + ifIsEmptyText(timetable[i]["1daysAgo"]) + '</p>'+ '<img src="' + ifIsEmptyImage(timetable[i]["1daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["1daysAgo"]) + '</p>'+
'</div>' +
'</div>' + '</div>' +
'<div class="time ' + ifIsEmpty(timetable[i]["0daysAgo"]) + '">' + '<div class="time ' + ifIsEmpty(timetable[i]["0daysAgo"]) + '">' +
'<img src="' + ifIsEmptyImage(timetable[i]["0daysAgoDirection"]) + '" />' + '<div>' +
'<p>' + ifIsEmptyText(timetable[i]["0daysAgo"]) + '</p>'+ '<img src="' + ifIsEmptyImage(timetable[i]["0daysAgoDirection"]) + '" />' +
'<p>' + ifIsEmptyText(timetable[i]["0daysAgo"]) + '</p>'+
'</div>' +
'</div>' + '</div>' +
'</li>' '</li>'
); );
} }
printTotalHours(timetable); printTotalHours(timetable);
} }
function printTotalHours(timetable) { function printTotalHours(timetable) {
if(timetable.length>0) { if(timetable.length > 0) {
$(".listHorario").append('<li class="headerLi"></li>'); $(".listHorario").append('<hr>');
$(".listHorario").append('<li><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["6daysAgoTotal"])) $(".listHorario").append('<li><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["6daysAgoTotal"]))
+ '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["5daysAgoTotal"])) + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["5daysAgoTotal"]))
+ '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["4daysAgoTotal"])) + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["4daysAgoTotal"]))
@ -158,16 +170,17 @@ function printTotalHours(timetable) {
+ '</div></li>'); + '</div></li>');
$(".total").text('Total: ' + $(".total").text('Total: ' +
secondsToHm(Number(timetable[0]["6daysAgoTotal"] == null)+ secondsToHm(
Number(timetable[0]["5daysAgoTotal"])+ Number(timetable[0]["6daysAgoTotal"] == null) +
Number(timetable[0]["4daysAgoTotal"]) + Number(timetable[0]["5daysAgoTotal"]) +
Number(timetable[0]["3daysAgoTotal"]) + Number(timetable[0]["4daysAgoTotal"]) +
Number(timetable[0]["2daysAgoTotal"]) + Number(timetable[0]["3daysAgoTotal"]) +
Number(timetable[0]["1daysAgoTotal"]) + Number(timetable[0]["2daysAgoTotal"]) +
Number(timetable[0]["0daysAgoTotal"]) Number(timetable[0]["1daysAgoTotal"]) +
Number(timetable[0]["0daysAgoTotal"])
) + 'h'); ) + 'h');
} else{ } else{
$(".total").text('Total: 0h '); $(".total").text('Total: 0h');
} }
} }
@ -223,7 +236,6 @@ function ifIsEmptyText(value) {
} }
function cerrar(){ function cerrar(){
$(".loading").fadeIn(200);
localStorage.removeItem("userData"); localStorage.removeItem("userData");
setTimeout(function () { setTimeout(function () {
window.location='index.html'; window.location='index.html';

3
js/index.js
View File

@ -31,12 +31,10 @@ function setEvents() {
setTimeout(function () { setTimeout(function () {
window.location = "clockIn.html"; window.location = "clockIn.html";
}, 200); }, 200);
$(".loading").fadeOut(200);
}); });
} }
function login() { function login() {
$(".loading").fadeIn(200);
$.post({ $.post({
urlPath: 'login', urlPath: 'login',
jsonData: [pin], jsonData: [pin],
@ -46,7 +44,6 @@ function login() {
window.location = "clockIn.html"; window.location = "clockIn.html";
}, },
error: function() { error: function() {
$(".loading").fadeOut(200);
$("#txtPin").text("ID USUARIO"); $("#txtPin").text("ID USUARIO");
pin = ""; pin = "";
} }