| Line 490... |
Line 490... |
| 490 |
return response.json();
|
490 |
return response.json();
|
| 491 |
})
|
491 |
})
|
| 492 |
.then(function (data) {
|
492 |
.then(function (data) {
|
| 493 |
var html = '';
|
493 |
var html = '';
|
| 494 |
|
494 |
|
| 495 |
// Summary cards
|
495 |
// 4 Summary boxes in a row
|
| 496 |
html += '<div class="row mb-3">';
|
496 |
html += '<div class="row">';
|
| - |
|
497 |
|
| - |
|
498 |
// Available Box - Green
|
| - |
|
499 |
html += '<div class="col-md-3 col-sm-6 mb-3">';
|
| - |
|
500 |
html += '<div class="card text-white bg-success">';
|
| - |
|
501 |
html += '<div class="card-body text-center">';
|
| - |
|
502 |
html += '<h5 class="card-title">Available</h5>';
|
| - |
|
503 |
html += '<h3 class="mb-0">' + (data.totalAvailableTime || '0h 0m 0s') + '</h3>';
|
| - |
|
504 |
html += '<small>(' + (data.availableCount || 0) + ' times)</small>';
|
| - |
|
505 |
html += '</div></div></div>';
|
| - |
|
506 |
|
| - |
|
507 |
// Trying Box - Yellow
|
| - |
|
508 |
html += '<div class="col-md-3 col-sm-6 mb-3">';
|
| - |
|
509 |
html += '<div class="card text-dark bg-warning">';
|
| - |
|
510 |
html += '<div class="card-body text-center">';
|
| - |
|
511 |
html += '<h5 class="card-title">Trying</h5>';
|
| 497 |
html += '<div class="col-md-12"><button class="btn btn-warning"> Total Break Time -: ' + (data.totalBreakTime || '0h 0m 0s');
|
512 |
html += '<h3 class="mb-0">' + (data.totalTryingTime || '0h 0m 0s') + '</h3>';
|
| - |
|
513 |
html += '<small>(' + (data.tryingCount || 0) + ' times)</small>';
|
| 498 |
html += '</button> ';
|
514 |
html += '</div></div></div>';
|
| - |
|
515 |
|
| - |
|
516 |
// Logged Out Box - Red/Grey
|
| - |
|
517 |
html += '<div class="col-md-3 col-sm-6 mb-3">';
|
| - |
|
518 |
html += '<div class="card text-white bg-secondary">';
|
| - |
|
519 |
html += '<div class="card-body text-center">';
|
| - |
|
520 |
html += '<h5 class="card-title">Logged Out</h5>';
|
| 499 |
html += ' <button class="btn btn-danger"> Total Logged Out -: ' + (data.totalLoggedOutTime || '0h 0m 0s');
|
521 |
html += '<h3 class="mb-0">' + (data.totalLoggedOutTime || '0h 0m 0s') + '</h3>';
|
| - |
|
522 |
html += '<small>(' + (data.loggedOutCount || 0) + ' times)</small>';
|
| 500 |
html += '</button></div>';
|
523 |
html += '</div></div></div>';
|
| - |
|
524 |
|
| - |
|
525 |
// Break Box - Orange
|
| - |
|
526 |
html += '<div class="col-md-3 col-sm-6 mb-3">';
|
| - |
|
527 |
html += '<div class="card text-dark" style="background-color: #fd7e14;">';
|
| - |
|
528 |
html += '<div class="card-body text-center">';
|
| - |
|
529 |
html += '<h5 class="card-title">Break</h5>';
|
| - |
|
530 |
html += '<h3 class="mb-0">' + (data.totalBreakTime || '0h 0m 0s') + '</h3>';
|
| - |
|
531 |
html += '<small>(' + (data.breakCount || 0) + ' times)</small>';
|
| - |
|
532 |
html += '</div></div></div>';
|
| - |
|
533 |
|
| 501 |
html += '</div>';
|
534 |
html += '</div>';
|
| 502 |
|
535 |
|
| 503 |
// Details table
|
536 |
// Check if no data
|
| 504 |
if (data.details && data.details.length > 0) {
|
537 |
if ((data.totalAvailableSeconds || 0) + (data.totalTryingSeconds || 0) +
|
| 505 |
html += '<table class="table table-bordered table-sm"><thead><tr>';
|
- |
|
| 506 |
html += '<th>S.No</th><th>Status</th><th>Log Time</th><th>Duration</th>';
|
- |
|
| 507 |
html += '</tr></thead><tbody>';
|
- |
|
| 508 |
|
- |
|
| 509 |
for (var i = 0; i < data.details.length; i++) {
|
- |
|
| 510 |
var detail = data.details[i];
|
- |
|
| 511 |
var statusClass = '';
|
- |
|
| 512 |
if (detail.status && detail.status.toLowerCase().indexOf('break') >= 0) {
|
538 |
(data.totalLoggedOutSeconds || 0) + (data.totalBreakSeconds || 0) === 0) {
|
| 513 |
statusClass = 'style="background-color: #fff3cd;"';
|
- |
|
| 514 |
} else if (detail.status && detail.status.toLowerCase().indexOf('logged out') >= 0) {
|
- |
|
| 515 |
statusClass = 'style="background-color: #f8d7da;"';
|
- |
|
| 516 |
} else if (detail.status && detail.status.toLowerCase().indexOf('available') >= 0) {
|
- |
|
| 517 |
statusClass = 'style="background-color: #d4edda;"';
|
- |
|
| 518 |
}
|
- |
|
| 519 |
|
- |
|
| 520 |
html += '<tr ' + statusClass + '>';
|
- |
|
| 521 |
html += '<td>' + (i + 1) + '</td>';
|
- |
|
| 522 |
html += '<td>' + (detail.status || '-') + '</td>';
|
- |
|
| 523 |
html += '<td>' + (detail.logTime || '-') + '</td>';
|
- |
|
| 524 |
html += '<td>' + (detail.duration || '-') + '</td>';
|
- |
|
| 525 |
html += '</tr>';
|
- |
|
| 526 |
}
|
- |
|
| 527 |
html += '</tbody></table>';
|
- |
|
| 528 |
} else {
|
- |
|
| 529 |
html += '<p class="text-muted">No break time data available. Data is collected at 12 PM, 3 PM, 6 PM, and 9 PM daily.</p>';
|
539 |
html += '<p class="text-muted text-center mt-3">No break time data available for this date.</p>';
|
| 530 |
}
|
540 |
}
|
| 531 |
|
541 |
|
| 532 |
document.getElementById('breakTimeDetailsContent').innerHTML = html;
|
542 |
document.getElementById('breakTimeDetailsContent').innerHTML = html;
|
| 533 |
})
|
543 |
})
|
| 534 |
.catch(function (err) {
|
544 |
.catch(function (err) {
|