JS for the 'Custom Style Script' browser extension to render the exit time

timepicker_exit_time.js

// Homepage: https://www.timepicker.it/home_dipendenti.php
window.addEventListener("load", () => {add_listner()});

function add_listner() {
  if (window.jQuery) {
    $('body').on('DOMSubtreeModified', '#mainPanelDipendente', function() {
      if ($('#container-sp-cl-total').length) {
        $('body').off('DOMSubtreeModified'); // stopping observe the event to avoid infinite loop!
        render_exit_time();
      }
    });
  }

  return;
}

function render_exit_time() {
  var today_row = get_today_row();
  if (today_row != null)
    render_exit_minutes(today_row, get_exit_time_minutes(get_stampings_of_the_day(today_row)));

  return;
}

function get_today_row() {
  var today = new Date();
  var row = null;
  $('#container-sp-cl-total table tr').each(function(day) {
    var day = parseInt($('td span:first', this).text().substr(0,2));
    if (day == today.getDate()) {
      row = this;
      return false; // stopping each loop
    }
  });

  return row;
}

function get_stampings_of_the_day(day_row) {
  return $('td:eq(3)', day_row).find('span');
}

function render_exit_minutes(target_row, exit_minutes) {
  if (exit_minutes == null)
    return;
  
  var exit_time_str = minutes_to_time_str(exit_minutes);
  var css = 'font-weight: bold;';

  var now = new Date();
  var now_minutes = now.getHours() * 60 + now.getMinutes();
  if (exit_minutes > now_minutes) {
    css += 'color: red;';
    exit_time_str += ' (-' + minutes_to_time_str(exit_minutes - now_minutes) + ')';
  } else {
    css += 'color: green;';
    exit_time_str += '<br>E esci la timbrata!!!';
  }

  $('td:eq(5)', target_row).html('<span style="' + css + '">Uscita ore: ' + exit_time_str + '</span>');
  return;
}

function minutes_to_time_str(minutes) {
  var hours = parseInt(minutes/60);
  var minutes = minutes - (60 * hours);
  return hours + ':' + ((minutes < 10) ? '0' + minutes : minutes);
}

function get_exit_time_minutes(stampings) {
  var num_stampings = stampings.length;
  if (num_stampings < 1 || num_stampings > 3) {
    return null;
  }

  var morning_entry_minutes = get_stamping_minutes(stampings, 0);
  var morning_exit_minutes = get_stamping_minutes(stampings, 1);
  var afternoon_entry_minutes = get_stamping_minutes(stampings, 2);;

  var working_minutes = 8 * 60;
  var pause_minutes = 30;
  if (afternoon_entry_minutes != 0) {
    var pause_elapsed_minutes = afternoon_entry_minutes - morning_exit_minutes;
    if (pause_elapsed_minutes > pause_minutes) 
      pause_minutes = pause_elapsed_minutes;
  }

  return morning_entry_minutes + working_minutes  + pause_minutes;
}

function get_stamping_minutes(stampings, index) {
  var stamping = $(stampings).eq(index);
  if (stamping.length == 0) {
    return 0;
  }

  var [hours, minutes] = stamping.text().substr(0,5).split(':');
  return parseInt(hours) * 60 + parseInt(minutes);
}