Source: data/dasf/widgets/timerange.js

  1. import { TimeSlider } from "../../../ui/slider/TimeSlider";
  3. /**
  4.  * Represents a time range widget.
  5.  */
  6. export class TimeRangeWidget {
  8.   tmin = "tmin"
  9.   tmax = "tmax"
  10.   description = "Select time range"
  12.   /**
  13.    * Initializes the plot for the element defined by id and given options.
  14.    * 
  15.    * @param {object} instanceData - The instance data used to initialize the widget.
  16.    */
  17.   constructor(instanceData) {
  18.       if (instanceData) {
  19.           this.deserialize_(instanceData);
  20.       }
  21.   }
  24.   /**
  25.    * Helper function to create a new object from the data.
  26.    * @private
  27.    */
  28.   deserialize_(instanceData) {
  29.     // Note this.active will not be listed in keys since it's declared, but not defined
  30.     const keys = Object.keys(this);
  31.   
  32.     for (const key of keys) {
  33.       if (instanceData.hasOwnProperty(key)) {
  34.         this[key] = instanceData[key];
  35.       }
  36.     }
  37.   }
  39.   /**
  40.    * Sets up the schema for the widget.
  41.    * 
  42.    * @param {object} schema - The schema object.
  43.    */
  44.   setupSchema(schema) {
  45.     if (!('options' in schema.properties[this.tmin])) {
  46.       schema.properties[this.tmin].options = {};
  47.     }
  48.     if (!('options' in schema.properties[this.tmax])) {
  49.       schema.properties[this.tmax].options = {};
  50.     }
  51.     schema.properties[this.tmin].options.hidden = true;
  52.     schema.properties[this.tmax].options.hidden = true;
  53.   }
  55.   /**
  56.    * Creates the element for the widget.
  57.    * 
  58.    * @param {object} editor - The editor object.
  59.    * @param {object} schema - The schema object.
  60.    */
  61.   createElement(editor, schema) {
  62.     var sliderDiv = document.createElement("div");
  63.     var labelDiv = document.createElement("label");
  64.     labelDiv.innerHTML = this.description;
  65.     sliderDiv.appendChild(labelDiv);
  66.     const vmin = new Date(schema.properties[this.tmin].minimum)
  67.     const vmax = new Date(schema.properties[this.tmax].maximum)
  68.     var slider = new TimeSlider(
  69.       sliderDiv, 
  70.       {
  71.           change: (data) => {
  72.             const tminEditor = editor.getEditor(`root.${this.tmin}`);
  73.             if (tminEditor) {
  74.               tminEditor.setValue(data.left.toISOString());
  75.             }
  76.             const tmaxEditor = editor.getEditor(`root.${this.tmax}`);
  77.             if (tmaxEditor) {
  78.               tmaxEditor.setValue(data.right.toISOString());
  79.             }
  80.           },
  81.           min: vmin,
  82.           max: vmax,
  83.           value: {
  84.               left: vmin,
  85.               right: vmax,
  86.           },
  87.           handles: 2,
  88.       }
  89.     );
  91.     editor.on('ready', () => {
  92.       const tminEditor = editor.getEditor(`root.${this.tmin}`);
  93.     
  94.       tminEditor.container.parentNode.parentNode.appendChild(sliderDiv);
  95.     })
  96.   }
  97. }