Home Reference Source

scripts/django_cradmin/DateTimePicker.js

import AbstractWidget from "ievv_jsbase/widget/AbstractWidget";
import ElementCreator from "./utilities/ElementCreator";

import moment from 'moment';


export default class DateTimePicker extends AbstractWidget {
  constructor(element) {
    super(element);
    this.logger = new window.ievv_jsbase_core.LoggerSingleton().getLogger("ievv_jsui.DateTimePicker");
    this.logger.setLogLevel(window.ievv_jsbase_core.LOGLEVEL.DEBUG);

    this._initializeCalendarCoordinators();

    this.elementCreator = new ElementCreator();
    this._buildCalendarTable();
    this.logger.debug(`Got moment: \n`, moment);
  }

  _initializeCalendarCoordinators() {
    this.selectedMomentObject = null;
    this.nowMomentObject = moment(this.config.now);

    this.calendarCoordinator = new CalendarCoordinator({
      selectedMomentObject: this.selectedMomentObject,
      minimumDatetime: this.config.minimumDatetime,
      maximumDatetime: this.config.maximumDatetime,
      nowMomentObject: this.nowMomentObject
    });

    this.monthlyCalendarCoordinator = new MonthlyCalendarCoordinator({
      calendarCoordinator: this.calendarCoordinator,
      yearselectValues: this.config.yearselect_values,
      hourselectValues: this.config.hourselect_values,
      minuteselectValues: this.config.minuteselect_values,
      yearFormat: this.config.yearselect_momentjs_format,
      monthFormat: this.config.monthselect_momentjs_format,
      dayOfMonthSelectFormat: this.config.dayofmonthselect_momentjs_format,
      dayOfMonthTableCellFormat: this.config.dayofmonthtablecell_momentjs_format,
      hourFormat: this.config.hourselect_momentjs_format,
      minuteFormat: this.config.minuteselect_momentjs_format
    });

  }

  /**
   * Table caption must be set using HTMLTableElement.createCaption()... so cant use {@link ElementCreator} for this one
   *
   * @param {HTMLTableElement} tableElement  the table as it looks by now..
   * @returns {HTMLTableElement}  the same tableElement, only with caption set according to values from this.config
   * @private
   */
  _setupTableCaption(tableElement) {
    tableElement.createCaption();
    tableElement.caption.innerHTML = this.config.dateselectorTableScreenreaderCaptionText;
    tableElement.caption.classList.add(this.config.dateselectorTableScreenreaderCaptionCssClass);
    return tableElement;
  }

  /**
   * build a plain table row and return it
   * @returns {HTMLTableRowElement}
   * @private
   */
  _buildTableRowElement() {
    this.elementCreator.reset('tr');
    return this.elementCreator.renderElement();
  }

  /**
   * build the full table header, with a row containing days of week and such.
   *
   * @returns {HTMLTableSectionElement}
   * @private
   */
  _buildTableHeadElement() {
    this.elementCreator.reset('thead');
    const tableHead = this.elementCreator.renderElement();
    tableHead.appendChild(this._buildTableRowElement());
    //TODO: loop monthlyCalendarCoordinator.shortWeekdays and make <th> elements

    return tableHead;
  }

  _buildTableBodyElement() {
    this.elementCreator.reset('tbody');
    const tableBody = this.elementCreator.renderElement();

    return tableBody;
  }

  /**
   * Build the full calendar table element and return it
   * uses most of the other `_build...()` functions to build the actual table parts
   *
   * @returns {HTMLTableElement}
   * @private
   */
  _buildCalendarTable() {
    this.elementCreator.reset('table');
    this.elementCreator.addCssClass(this.config.tableCssClass);
    let tableElement = this.elementCreator.renderElement();
    tableElement = this._setupTableCaption(tableElement);

    tableElement.appendChild(this._buildTableHeadElement());
    tableElement.appendChild(this._buildTableBodyElement());
    this.logger.debug("got table:\n", tableElement);
    this.logger.debug("as html: \n", tableElement.outerHTML);

    return tableElement
  }

  getDefaultConfig() {
    return {
      tableCssClass: "django-cradmin-datetime-selector-table",
      dateselectorTableScreenreaderCaptionCssClass: "sr-only",
      dateselectorTableScreenreaderCaptionText: "Select date",
      now: null,
      minimumDatetime: null,
      maximumDatetime: null,
      yearselect_values: [],
      hourselect_values: [],
      minuteselect_values: [],
      yearselect_momentjs_format: "YYYY",
      monthselect_momentjs_format: "MMM",
      dayofmonthselect_momentjs_format: "DD",
      dayofmonthtablecell_momentjs_format: "D",
      hourselect_momentjs_format: "HH",
      minuteselect_momentjs_format: "mm"
    };
  }

  destroy() {

  }
}