work_time-1.0.x-dev/js/work-time-sheet.js

function monthOnChange(input) {
  const value = input.value;
  const url = new URL(window.location.href);
  url.searchParams.set(input.name, value);
  window.location.href = url.href;
}
// Set default value work time = 4
document.getElementById("hour4").checked = true;

// Turn on tooltips.
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

(function ($, Drupal, drupalSettings) {
  var timeStandard = 8;

  Drupal.behaviors.loadworktimesheet = {
    attach(context) {
      const $elements = $(once('loadTimeSheet', '#edit-month', context));
      $elements.each(loadTimeSheet);
    }
  }

  function loadTimeSheet(index, month) {
    // Load data;
    $.ajax({
      url: Drupal.url('ajax/worktime/timesheet'),
      type: 'POST',
      data: {month: month.value},
      dataType: 'json',
      success: function (response) {
        if (response.hasOwnProperty('data')) {
          let currentUrl = window.location.pathname;
          response.data.forEach(function (data) {
            let hour = Math.ceil(parseFloat(data.total_time));
            let link = '';
            if(hour){
              link = `/work-time/${data.id}/edit?destination=${currentUrl}`;
              hour = `<a href="${link}">${hour}</a>`;
            }
            $(`td[data-date="${data.date}"][data-id="${data.reference_id}"]`).attr('data-href', link).addClass('load edit-work-time').html(hour);
          });
          // Count total.
          $('#work-time-sheet table tr:first-child td.timekeeper, .day-01').each(function () {
            let reference_id = $(this).data('id');
            let day = $(this).data('day');
            sumTotal('id', reference_id, 'row');
            sumTotal('day', day, 'col');
            sumPrice(reference_id);
          });
          sumTotal('total', 'time', 'total');
        }
      }
    });

    if(drupalSettings.work_time.custom_data.length){
      $.ajax({
        url: Drupal.url(drupalSettings.work_time.custom_data),
        type: 'GET',
        dataType: 'json',
        success: function (response) {
          if (response.hasOwnProperty('data')) {
            response.data.forEach(function (data) {
              let hour = Math.ceil(parseFloat(data.total_time));
              $(`td[data-date="${data.date}"][data-id="${data.reference_id}"]`).addClass('bg-warning-subtle custom').text(hour);
            });
            // Count total.
            $('#work-time-sheet table tr:first-child td.timekeeper, .day-01').each(function () {
              let reference_id = $(this).data('id');
              let day = $(this).data('day');
              sumTotal('id', reference_id, 'row');
              sumTotal('day', day, 'col');
              sumPrice(reference_id);
            });
            sumTotal('total', 'time', 'total');
          }
        }
      });
    }
  }

  function sumTotal(tag, index, total) {
    var sum = 0;
    $('[data-' + tag + '="' + index + '"]').each(function () {
      sum += parseFloat($(this).text()) || 0;
    });
    let txtSum = sum;
    if (sum > timeStandard && total == 'col') {
      txtSum = `<b class="text-danger">${sum}</b>`;
    }
    if(sum == 0){
      txtSum = '';
      $('.total-' + total + '-' + index).removeClass('time');
    }else {
      $('.total-' + total + '-' + index).addClass('time');
    }
    $('.total-' + total + '-' + index).html(txtSum);
    return sum;
  }

  function sumPrice(reference_id) {
    if ($('.price-field-' + reference_id).length) {
      let total = parseFloat($('.total-row-' + reference_id).text()) || 0;
      let price = parseFloat($('.price-field-' + reference_id).text()) || 0;
      $('.price-row-' + reference_id).html(total * price);
    }
    sumTotal('price-id', 'price', 'total');
  }

  Drupal.behaviors.worktimesheet = {
    attach(context) {
      $(once('time-sheet-label', '.timesheet_label', context)).each(function () {
        let input = '<input type="hidden" name="label[' + $(this).data('reference') + ']" value="' + $(this).data('label') + '"/>';
        $(this).append(input);
      });
      // Process onclick.
      $(once('time-keeper', '.timekeeper', context)).click(function () {
        // Check if isset id work_time => modify
        $(this).html('');
        let hour = parseFloat($('input[type="radio"][name="hour"]:checked').val());
        let date = $(this).data('date');
        let day = $(this).data('day');
        let reference_id = $(this).data('id');
        let isCustom = $(this).hasClass('custom');
        let isLoad = $(this).hasClass('load');
        // Working time in a day must not exceed 8 hours/day, if not set overtime
        if (hour <= timeStandard) {
          var sumCol = 0;
          $('.timekeeper.day-' + day).each(function () {
            sumCol += parseFloat($(this).text()) || 0;
          });
          if (sumCol + hour > timeStandard) {
            hour = timeStandard - sumCol;
          }
        }
        if (hour > 0 && !isCustom) {
          let inputHidden = `<input type="hidden" name="timesheet[${reference_id}][${date}]" value="${hour}"/>`;
          if(isLoad){
            inputHidden = `<input type="hidden" name="modify[${reference_id}][${date}]" value="${hour}"/>`;
          }
          let textHour = hour;
          if (hour > timeStandard) {
            textHour = `<span class="text-danger">${hour}</span>`;
          }
          $(this).html(inputHidden + textHour);
        }
        if (hour == 0) {
          if(!isCustom){
            let del = '';
            if(isLoad){
              del = `<input type="hidden" name="delete[${reference_id}][${date}]" value="1"/>`;
            }
            $(this).html(del);
          }
        }
        sumTotal('id', reference_id, 'row');
        sumTotal('day', day, 'col');
        sumTotal('total', 'time', 'total');
        sumPrice(reference_id);
      });
    }
  };
}(jQuery, Drupal, drupalSettings));