Source: data/dasf/widgets/timerange.js

import { TimeSlider } from "../../../ui/slider/TimeSlider";

/**
 * Represents a time range widget.
 */
export class TimeRangeWidget {

  tmin = "tmin"
  tmax = "tmax"
  description = "Select time range"

  /**
   * Initializes the plot for the element defined by id and given options.
   * 
   * @param {object} instanceData - The instance data used to initialize the widget.
   */
  constructor(instanceData) {
      if (instanceData) {
          this.deserialize_(instanceData);
      }
  }


  /**
   * Helper function to create a new object from the data.
   * @private
   */
  deserialize_(instanceData) {
    // Note this.active will not be listed in keys since it's declared, but not defined
    const keys = Object.keys(this);
  
    for (const key of keys) {
      if (instanceData.hasOwnProperty(key)) {
        this[key] = instanceData[key];
      }
    }
  }

  /**
   * Sets up the schema for the widget.
   * 
   * @param {object} schema - The schema object.
   */
  setupSchema(schema) {
    if (!('options' in schema.properties[this.tmin])) {
      schema.properties[this.tmin].options = {};
    }
    if (!('options' in schema.properties[this.tmax])) {
      schema.properties[this.tmax].options = {};
    }
    schema.properties[this.tmin].options.hidden = true;
    schema.properties[this.tmax].options.hidden = true;
  }

  /**
   * Creates the element for the widget.
   * 
   * @param {object} editor - The editor object.
   * @param {object} schema - The schema object.
   */
  createElement(editor, schema) {
    var sliderDiv = document.createElement("div");
    var labelDiv = document.createElement("label");
    labelDiv.innerHTML = this.description;
    sliderDiv.appendChild(labelDiv);
    const vmin = new Date(schema.properties[this.tmin].minimum)
    const vmax = new Date(schema.properties[this.tmax].maximum)
    var slider = new TimeSlider(
      sliderDiv, 
      {
          change: (data) => {
            const tminEditor = editor.getEditor(`root.${this.tmin}`);
            if (tminEditor) {
              tminEditor.setValue(data.left.toISOString());
            }
            const tmaxEditor = editor.getEditor(`root.${this.tmax}`);
            if (tmaxEditor) {
              tmaxEditor.setValue(data.right.toISOString());
            }
          },
          min: vmin,
          max: vmax,
          value: {
              left: vmin,
              right: vmax,
          },
          handles: 2,
      }
    );

    editor.on('ready', () => {
      const tminEditor = editor.getEditor(`root.${this.tmin}`);
    
      tminEditor.container.parentNode.parentNode.appendChild(sliderDiv);
    })
  }
}