work_time-1.0.x-dev/js/bootstrap-table.js

/** @format */
function time_totalFormatter(data) {
  var field = this.field
  return data.map(function (row) {
    return +row[field].replace(/(<([^>]+)>)/ig, '')
  }).reduce(function (sum, i) {
    return sum + i
  }, 0)
}

function uidFormatter() {
  return Drupal.t('Total')
}

function reference_idFormatter() {
  return Drupal.t('Total')
}

function filterOnChange(input) {
  const value = input.value;
  const url = new URL(window.location.href);
  url.searchParams.set(input.name, value);
  window.location.href = url.href;
}

(function ($, Drupal, drupalSettings, once) {

  let options = drupalSettings.worktime.options;
  let filterValue = drupalSettings.worktime.filter;
  let view_id = drupalSettings.worktime.view_id;
  let display_id = drupalSettings.worktime.display_id;
  let mode = options.filter_time;
  let year = new Date().getFullYear();
  let totalCol = [];
  let numberDay = 30;
  const weekday = [Drupal.t("Sunday"), Drupal.t("Monday"), Drupal.t("Tuesday"), Drupal.t("Wednesday"), Drupal.t("Thursday"), Drupal.t("Friday"), Drupal.t("Saturday")];
  const monthNames = [Drupal.t("January"), Drupal.t("February"), Drupal.t("March"), Drupal.t("April"), Drupal.t("May"), Drupal.t("June"),
    Drupal.t("July"), Drupal.t("August"), Drupal.t("September"), Drupal.t("October"), Drupal.t("November"), Drupal.t("December")];
  let inputDate = {
    value: filterValue,
    type: mode,
    name: 'date',
    class: 'form-control w-auto',
    'aria-labelledby': mode,
    onChange: "filterOnChange(this)",
    id: 'filter',
  };
  if (mode == 'year') {
    inputDate.type = 'number';
    inputDate.min = year - 3;
    inputDate.max = year + 1;
  }

  let viewSelector = `.view-id-${view_id}.view-display-id-${display_id}`;
  let filter = $('<div class="row"><label for="filter" class="col-auto col-form-label text-capitalize">' + Drupal.t(mode) + '</label></div>').append($('<input/>', inputDate));
  filter.prependTo(viewSelector);

  switch (mode) {
    case 'month':
      let parts = filterValue.split('-');
      year = parseInt(parts[0]);
      let month = parseInt(parts[1]);
      numberDay = new Date(year, month, 0).getDate();
      for (let i = 1; i <= numberDay; i++) {
        let thisDate = new Date(year, month, i);
        totalCol.push({'in': i, 'name': weekday[thisDate.getDay()]});
      }
      break;

    case 'week':
      year = filterValue.substr(0, 4);
      let weekNumber = filterValue.substr(6);
      let firstDayOfYear = new Date(year, 0, 1);
      let currentDate = firstDayOfYear;
      currentDate.setDate(currentDate.getDate() + ((weekNumber * 7)));
      let thisDate = firstDayOfWeek(new Date(currentDate), 1);
      // day = thisDate.getDate();
      numberDay = 7;
      for (let i = 1; i <= numberDay; i++) {
        totalCol.push({
          'in': thisDate.getDate(),
          'name': weekday[thisDate.getDay()]
        });
        thisDate.setDate(thisDate.getDate() + 1);
      }
      break;

    case 'year':
      numberDay = 12;
      for (let i = 1; i <= numberDay; i++) {
        let thisDate = new Date(year, i, 1);
        totalCol.push({'in': i, 'name': monthNames[thisDate.getMonth()]});
      }
      break;
  }

  // Add the date columns to the table header
  let table = $(viewSelector + ' .table');
  let thead = table.find('thead tr');
  let tbody = table.find('tbody tr');
  let tfoot = table.find('tfoot tr');
  let holidays = drupalSettings.worktime.holidays;
  totalCol.forEach(function (element, index) {
    let textClass = '';
    if (mode == 'month') {
      let date = filterValue + '-' + element.in.toString().padStart(2, '0');
      let day = new Date(date).getDay();
      if (holidays.includes(date) || day === 0) {
        textClass = 'class="table-danger"';
      }
    }
    thead.append(`<th ${textClass} data-field=${element.in}>${element.in}</th>`);
    let totalBodyInDay = '';
    tbody.append(`<td ${textClass} data-day=${element.in}></td>`);
    let totalFootInDay = '';
    tfoot.append(`<th ${textClass}>${totalFootInDay}</th>`);
  })

  $.ajax({
    url: drupalSettings.worktime.url,
    type: 'GET',
    success: function (results) {
      if (results.data.length) {
        results.data.forEach(function (itemGroup, indexGroup) {
          itemGroup.forEach(function (itemData, indexData) {
            let row = $("[data-uid-reference='" + itemData.uid + "-" + itemData.reference_id + "']").closest('tr');
            let arrDate = itemData.date_time.split("-");
            row.find("[data-day=" + Number(arrDate.pop()) + "]").text(((Number(itemData.time_total)) / 3600).toFixed(1));
          })
        })
        $('table.table').each(function (i, table) {
          calculateColumn(table);
        });
      }
    }
  });

  function firstDayOfWeek(dateObject, firstDayOfWeekIndex) {
    const dayOfWeek = dateObject.getDay(),
      firstDayOfWeek = new Date(dateObject),
      diff = dayOfWeek >= firstDayOfWeekIndex ?
        dayOfWeek - firstDayOfWeekIndex :
        6 - dayOfWeek
    firstDayOfWeek.setDate(dateObject.getDate() - diff)
    firstDayOfWeek.setHours(0, 0, 0, 0)
    return firstDayOfWeek
  }

  function calculateColumn(indexTable) {
    $(indexTable).find('tr th').each(function (index) {
      var total = 0;
      $(indexTable).find('tr').each(function () {
        var value = parseInt($('td', this).eq(index).text());
        if (!isNaN(value)) {
          total += value;
        }
      });
      if(total) {
        $(indexTable).find('tfoot th .th-inner').eq(index).text(total);
      }
    })
  }
}(jQuery, Drupal, drupalSettings, once));