Source: map/filters/ui/TimeFilter.js

  1. import { FilterUi } from "./FilterUi.js";
  2. import { SliderHeader } from "../../../ui/slider/SliderHeader.js";
  3. import { TimeSlider } from "../../../ui/slider/TimeSlider.js";
  4. import { FilterSettings } from "../FilterSettings.js";
  5. import "./TimeFilter.css";
  7. export { TimeFilter };
  9. /**
  10.  * A class that defines the Ui for a Slider-based TimeFilter
  11.  * 
  12.  * @author rhess <robin.hess@awi.de>
  13.  * @memberof vef.map.filters.ui
  14.  */
  15. class TimeFilter extends FilterUi {
  17.     /**
  18.      * @param {HTMLElement | string} target
  19.      * @param {object} options filter specific options
  20.      * @param {LayerManager} layers Used for included/excluded layers
  21.      */
  22.     constructor(target, options, layers) {
  24.         // apply default options
  25.         options = Object.assign({
  26.             title: "Time Filter",
  27.             column: "", // automatically identify time column if not defined
  28.             schema: "ymd",
  29.             allowMultipleSliderMode: true,
  30.             activeSliders: "",
  31.             operators: [
  32.                 "-",
  33.                 "=",
  34.                 ">",
  35.                 "≥",
  36.                 "<",
  37.                 "≤"
  38.             ],
  39.             initialOperator: "-",
  40.             initialBegin: "1980-01-01T00:00:00Z",
  41.             initialEnd: "2022-12-31T23:59:59Z",
  42.             begin: "1980-01-01T00:00:00Z",
  43.             end: "2022-12-31T23:59:59Z"
  44.         }, options || {});
  46.         super(target, options, layers);
  48.         this.schemaRegex = new RegExp("^y(m(d)?)?$");
  49.         this.sliderContainer_ = null;
  50.         this.sliders_ = [];
  51.         this.types_ = {
  52.             "y": "YEAR",
  53.             "m": "MONTH",
  54.             "d": "DAY"
  55.         };
  57.         this.headerConfig = {
  58.             // single types
  59.             "YEAR": { pattern: '^([0-9]{4})$', maxLength: 4 },
  60.             "MONTH": { pattern: '^(1[0-2]|0[1-9])$', maxLength: 2 },
  61.             "DAY": { pattern: '^(3[0-1]|2[0-9]|1[0-9]|0[1-9])$', maxLength: 2 },
  62.             // schemas
  63.             "ymd": { pattern: '^([0-9]{4})(-((1[0-2]|0[1-9])(-(3[0-1]|2[0-9]|1[0-9]|0[1-9])?)?)?)?$', maxLength: 10 },
  64.             "ym": { pattern: '^([0-9]{4})(-(1[0-2]|0[1-9])?)?$', maxLength: 7 },
  65.             "y": { pattern: '^([0-9]{4})$', maxLength: 4 }
  66.         };
  68.         this.settingsClass_ = TimeFilterSettings;
  69.         this.currentValue_ = null
  70.         this.operator_ = options.initialOperator || options.operators[0];
  72.         // validate active sliders and schema
  73.         let schema = this.options_.schema ? this.options_.schema.toLowerCase() : 'ymd';
  74.         let activeSliders = this.options_.activeSliders ? this.options_.activeSliders.toLowerCase() : '';
  75.         if (!this.schemaRegex.test(activeSliders)) activeSliders = "";
  76.         for (let i = 0; i < activeSliders.length; ++i) {
  77.             if (!schema.includes(activeSliders[i])) {
  78.                 activeSliders = "";
  79.                 break;
  80.             }
  81.         }
  82.         this.options_.activeSliders = activeSliders;
  83.         this.options_.schema = schema;
  85.         // check if time needs to be dynamic
  86.         this.options_.begin = this.setTimeDynamically(this.options_.begin);
  87.         this.options_.end = this.setTimeDynamically(this.options_.end);
  88.         this.options_.initialBegin = this.setTimeDynamically(this.options_.initialBegin);
  89.         this.options_.initialEnd = this.setTimeDynamically(this.options_.initialEnd);
  91.         // initialize element and slider
  92.         this.initFilterElement_();
  93.         this.initSliders_();
  94.     }
  96.     /**
  97.      * internal method for initializing the main
  98.      * HTML structure of the element
  99.      * 
  100.      * @private
  101.      */
  102.     initFilterElement_() {
  103.         this.setTitle(this.options_.title);
  105.         const content = this.getContentContainer();
  106.         content.classList.add("time-filter");
  108.         this.sliderContainer_ = document.createElement("div");
  109.         this.sliderContainer_.classList.add("slider-container");
  110.         content.appendChild(this.sliderContainer_);
  111.         content.appendChild(this.initMultipleSliderMode_());
  112.     }
  114.     /**
  115.      * @private
  116.      * @param {string} type 
  117.      * @returns {string} validation regex pattern and max length
  118.      */
  119.     getHeaderConfig_(type) {
  120.         if (type == "DATE") {
  121.             let schema = this.options_.schema;
  122.             if (!this.schemaRegex.test(schema)) schema = "ymd";
  124.             return this.headerConfig[schema];
  125.         } else {
  126.             return this.headerConfig[type];
  127.         }
  128.     }
  130.     /**
  131.      * @private
  132.      * @param {string} type 
  133.      * @param {object} value 
  134.      * @param {TimeSlider} slider 
  135.      */
  136.     parseHeaderValue_(type, value, slider) {
  137.         let sliderValue = slider.getValue();
  138.         let currentValue = sliderValue;
  140.         if (slider.options_.handles == 2) {
  141.             if (value.type == "begin") {
  142.                 currentValue = sliderValue.left;
  143.             } else {
  144.                 currentValue = sliderValue.right;
  145.             }
  146.         }
  148.         switch (type.toLowerCase()) {
  149.             case "year":
  150.                 currentValue.setUTCFullYear(Number.parseInt(value.value));
  151.                 break;
  152.             case "month":
  153.                 currentValue.setUTCDate(1);
  154.                 currentValue.setUTCMonth(Number.parseInt(value.value) - 1);
  155.                 break;
  156.             case "day":
  157.                 currentValue.setUTCDate(Number.parseInt(value.value));
  158.                 break;
  159.             default:
  160.                 const schema = this.options_.schema.toLowerCase();
  162.                 // initialize day as 1 to prevent month overflow
  163.                 currentValue.setUTCDate(1);
  165.                 // the year is always defined
  166.                 const year = Number.parseInt(value.value.substr(0, 4));
  167.                 currentValue.setUTCFullYear(year);
  169.                 // set default month and overwrite if it is set
  170.                 let month = (value.type == "begin") ? 0 : 11;
  171.                 if (schema.includes("m") && (value.value.length >= 7)) {
  172.                     month = Number.parseInt(value.value.substr(5, 2)) - 1;
  173.                 }
  174.                 currentValue.setUTCMonth(month);
  176.                 // set default month and overwrite if it is set
  177.                 const daysInMonth = new Date(year, month + 1, 0).getDate();
  178.                 let day = (value.type == "begin") ? 1 : daysInMonth;
  179.                 if (schema.includes("d") && (value.value.length >= 10)) {
  180.                     day = Number.parseInt(value.value.substr(8, 2));
  181.                     if (day > daysInMonth) day = daysInMonth;
  182.                 }
  183.                 currentValue.setUTCDate(day);
  185.                 break;
  186.         }
  188.         if (slider.options_.handles == 2) {
  189.             if (value.type == "begin") {
  190.                 sliderValue.left = currentValue;
  191.             } else {
  192.                 sliderValue.right = currentValue;
  193.             }
  194.         } else {
  195.             sliderValue = currentValue;
  196.         }
  198.         slider.setValue(sliderValue);
  199.         slider.stop_();
  200.     }
  202.     /**
  203.      * Init a slider header and its events including
  204.      * validation and autocompletion of the input
  205.      * 
  206.      * @param {Slider} slider 
  207.      * @param {string} type 
  208.      * @param {string[]} operators 
  209.      * @param {boolean} isLast 
  210.      * @returns {SliderHeader} header
  211.      */
  212.     initHeader_(slider, type, operators, isLast) {
  213.         const config = this.getHeaderConfig_(type);
  215.         const header = new SliderHeader(null, {
  216.             title: type,
  217.             operators: operators,
  218.             defaultOperator: ((isLast) ? this.operator_ : null),
  219.             useInput: true,
  220.             inputPattern: config.pattern,
  221.             inputLength: config.maxLength
  222.         });
  224.         const validCharacters = "0123456789-";
  225.         const removeInvalidCharacters = (str) => {
  226.             for (let i = str.length - 1; i >= 0; --i) {
  227.                 if (!validCharacters.includes(str[i])) str = str.replace(str[i], "");
  228.             }
  229.             return str;
  230.         }
  232.         // validation and auto-complete minus character or end
  233.         header.on("input", (e) => {
  234.             let value = removeInvalidCharacters(e.value);
  236.             switch (type.toLowerCase()) {
  237.                 case "year":
  238.                     if (value.includes("-")) value = str.replace("-", "");
  239.                     maxLength = 4;
  240.                     break;
  241.                 case "month":
  242.                     if (value.includes("-")) value = str.replace("-", "");
  243.                     maxLength = 2;
  244.                     break;
  245.                 case "day":
  246.                     if (value.includes("-")) value = str.replace("-", "");
  247.                     maxLength = 2;
  248.                     break;
  249.                 default:
  250.                     //toDo
  251.                     const schema = this.options_.schema.toLowerCase();
  252.                     const parts = value.split("-");
  254.                     if (schema.includes("m")) {
  255.                         if ((value.length > 4) && ((parts.length == 1) || (parts[0].length > 4))) {
  256.                             value = value.substring(0, 4) + "-" + value.substring(4);
  257.                         }
  258.                     }
  259.                     if (schema.includes("d")) {
  260.                         if ((value.length > 7) && (parts.length <= 2) && (value.charAt(7) != "-")) {
  261.                             value = value.substring(0, 7) + "-" + value.substring(7);
  262.                         }
  263.                     }
  264.                     break;
  265.             }
  267.             header.setValue(e.type, value);
  268.         });
  270.         // operator selection
  271.         if (isLast) {
  272.             header.on("select", operator => {
  273.                 this.operator_ = operator;
  274.                 this.initSliders_();
  275.                 this.fire("change", this);
  276.             });
  277.         }
  279.         // apply the header value to the slider
  280.         header.on("change", value => this.parseHeaderValue_(type, value, slider));
  282.         // insert before slider
  283.         slider.getElement().insertAdjacentElement("beforebegin", header.getElement())
  285.         return header;
  286.     }
  288.     /**
  289.      * method for creating a slider with a header
  290.      * @param {string} mode 
  291.      * @param {boolean} isLast 
  292.      * @returns {object}
  293.      * @private 
  294.      */
  295.     initSingleSlider_(mode, isLast) {
  296.         const options = this.options_;
  297.         const operators = (isLast) ? options.operators : ["="];
  299.         const type = (this.types_[mode]) ? this.types_[mode] : "DATE"
  301.         const sliderOptions = {
  302.             min: new Date(options.begin).getTime(),
  303.             max: new Date(options.end).getTime()
  304.         }
  306.         const previousLeft = (this.currentValue_ && (this.currentValue_.left instanceof Date)) ? this.currentValue_.left : this.currentValue_;
  307.         const previousRight = (this.currentValue_ && (this.currentValue_.right instanceof Date)) ? this.currentValue_.right : null;
  309.         if (isLast && ("-" == this.operator_)) {
  310.             sliderOptions.handles = 2;
  311.             sliderOptions.value = {
  312.                 left: new Date(previousLeft || options.initialBegin || options.begin).getTime(),
  313.                 right: new Date(previousRight || options.initialEnd || options.end).getTime()
  314.             }
  315.         } else {
  316.             sliderOptions.handles = 1;
  317.             sliderOptions.value = new Date(previousLeft || options.initialBegin || options.begin).getTime();
  318.         }
  320.         const container = document.createElement("div");
  321.         const slider = new TimeSlider(container, sliderOptions);
  322.         const header = this.initHeader_(slider, type, operators, isLast);
  324.         const dispose = () => {
  325.             header.dispose();
  326.             slider.dispose();
  327.             container.remove();
  328.         };
  330.         const item = {
  331.             type: type,
  332.             container: container,
  333.             header: header,
  334.             slider: slider,
  335.             dispose: dispose
  336.         };
  338.         slider.on("change", (value) => {
  339.             this.updateValues_(item);
  340.         });
  341.         slider.on("stop", (value) => {
  342.             this.updateValues_(item);
  343.             this.fire("change", this);
  344.         });
  346.         this.initArrowControls_(item);
  348.         return item;
  349.     }
  351.     initArrowControls_(item) {
  353.         const listener = (type, increment, incValue) => {
  354.             const values = this.getValueForSchema_(true, item.slider.getValue());
  355.             let value = values[type];
  357.             let year = Number.parseInt(value.substring(0, 4));
  358.             let month = Number.parseInt(value.substring(5, 7));
  359.             let day = Number.parseInt(value.substring(8, 10));
  361.             switch (item.type.toLowerCase()) {
  362.                 case "year":
  363.                     value = year + ((increment) ? 1 : -1);
  364.                     break;
  365.                 case "month":
  366.                     value = month + ((increment) ? 1 : -1);
  367.                     break;
  368.                 case "day":
  369.                     value = day + ((increment) ? 1 : -1);
  370.                     break;
  371.                 default:
  372.                     const schema = this.options_.schema.toLowerCase();
  374.                     if (schema.includes("d") && incValue === "d") {
  375.                         day += (increment) ? 1 : -1;
  376.                     }
  377.                     if (schema.includes("m") && incValue === "m") {
  378.                         month += (increment) ? 1 : -1;
  379.                     }
  380.                     if (schema.includes("y") && incValue === "y") {
  381.                         year += (increment) ? 1 : -1;
  382.                     }
  383.                     if (schema.includes("ymd") && incValue === "e") {
  384.                         day = this.options_.end.substring(8, 10);
  385.                         month = this.options_.end.substring(5, 7);
  386.                         year = this.options_.end.substring(0, 4);
  387.                     }
  388.                     if (schema.includes("ymd") && incValue === "p") {
  389.                         day = this.options_.begin.substring(8, 10);
  390.                         month = this.options_.begin.substring(5, 7);
  391.                         year = this.options_.begin.substring(0, 4);
  392.                     }
  394.                     value = new Date(Date.UTC(year, month - 1, day)).toISOString().substring(0, 10) + value.substring(10);
  396.                     break;
  397.             }
  399.             this.parseHeaderValue_(item.type, {
  400.                 type: type,
  401.                 value: value
  402.             }, item.slider);
  403.         }
  405.         item.header.on("arrow_down", inputName => listener(inputName, false, "d"));
  406.         item.header.on("arrow_up", inputName => listener(inputName, true, "d"));
  407.         item.header.on("arrow_down_shift", inputName => listener(inputName, false, "m"));
  408.         item.header.on("arrow_up_shift", inputName => listener(inputName, true, "m"));
  409.         item.header.on("arrow_down_shift_ctrl", inputName => listener(inputName, false, "y"));
  410.         item.header.on("arrow_up_shift_ctrl", inputName => listener(inputName, true, "y"));
  411.         item.header.on("pos1", inputName => listener(inputName, true, "p"));
  412.         item.header.on("end", inputName => listener(inputName, true, "e"));
  414.         item.slider.on("arrow_left", handleName => listener((handleName == "left") ? "begin" : "end", false, "d"));
  415.         item.slider.on("arrow_right", handleName => listener((handleName == "left") ? "begin" : "end", true, "d"));
  416.         item.slider.on("ArrowRight_Shift", handleName => listener((handleName == "left") ? "begin" : "end", true, "m"));
  417.         item.slider.on("ArrowLeft_Shift", handleName => listener((handleName == "left") ? "begin" : "end", false, "m"));
  418.         item.slider.on("ArrowRight_Shift_cntrl", handleName => listener((handleName == "left") ? "begin" : "end", true, "y"));
  419.         item.slider.on("ArrowLeft_Shift_cntrl", handleName => listener((handleName == "left") ? "begin" : "end", false, "y"));
  420.         item.slider.on("home", handleName => listener((handleName == "left") ? "begin" : "end", false, "p"));
  421.         item.slider.on("end", handleName => listener((handleName == "left") ? "begin" : "end", false, "e"));
  423.     }
  425.     /**
  426.      * method to update the slider and header values
  427.      * @param {object} source slider item
  428.      * @param {boolean} init sliders are initialized and not updated
  429.      * @private
  430.      */
  431.     updateValues_(source, init) {
  432.         const options = this.options_;
  434.         if ((!this.currentValue_) || init) this.currentValue_ = source.slider.getValue();
  436.         const totalMin = new Date(options.begin).getTime();
  437.         const totalMax = new Date(options.end).getTime();
  439.         const newIso = this.getValueForSchema_(true, source.slider.getValue());
  440.         const prevIso = this.getValueForSchema_(true);
  442.         // transform currentValue depending on slider
  443.         for (let i = 0; i < this.sliders_.length; ++i) {
  444.             const item = this.sliders_[i];
  446.             switch (item.type) {
  447.                 case "DATE":
  448.                     this.currentValue_ = source.slider.getValue();
  449.                     break;
  450.                 case "YEAR":
  451.                     {
  452.                         let beginYear = newIso.begin.substr(0, 4);
  453.                         let endYear = newIso.end.substr(0, 4);
  455.                         if (item.slider.options_.handles == 2) {
  456.                             this.currentValue_ = {
  457.                                 left: new Date(beginYear + "-01-01T00:00:00Z"),
  458.                                 right: new Date(endYear + "-12-31T23:59:59Z")
  459.                             };
  460.                         } else {
  461.                             this.currentValue_ = new Date(beginYear + "-01-01T00:00:00Z");
  462.                         }
  463.                     }
  464.                     break;
  465.                 case "MONTH":
  466.                     {
  467.                         const year = newIso.begin.substr(0, 4);
  468.                         let beginMonth = newIso.begin.substr(5, 2);
  469.                         let endMonth = newIso.end.substr(5, 2);
  471.                         if (item != source) {
  472.                             beginMonth = prevIso.begin.substr(5, 2);
  473.                             endMonth = prevIso.end.substr(5, 2);
  474.                         }
  476.                         const daysInEndMonth = new Date(year, endMonth, 0).getDate();
  478.                         if (item.slider.options_.handles == 2) {
  479.                             this.currentValue_ = {
  480.                                 left: new Date(year + "-" + beginMonth + "-01T00:00:00Z"),
  481.                                 right: new Date(year + "-" + endMonth + "-" + daysInEndMonth + "T23:59:59Z")
  482.                             };
  483.                         } else {
  484.                             this.currentValue_ = new Date(year + "-" + beginMonth + "-01T00:00:00Z");
  485.                         }
  486.                     }
  487.                     break;
  488.                 case "DAY":
  489.                     {
  490.                         const year = newIso.begin.substr(0, 4);
  491.                         let month = newIso.begin.substr(5, 2);
  492.                         let beginDay = newIso.begin.substr(8, 2);
  493.                         let endDay = newIso.end.substr(8, 2);
  495.                         if (item != source) {
  496.                             beginDay = prevIso.begin.substr(8, 2);
  497.                             endDay = prevIso.end.substr(8, 2);
  498.                             if (source.type != "MONTH") month = prevIso.begin.substr(5, 2);
  499.                         }
  501.                         const daysInMonth = new Date(year, month, 0).getDate();
  503.                         if (parseInt(beginDay) > daysInMonth) beginDay = daysInMonth;
  504.                         if (parseInt(endDay) > daysInMonth) endDay = daysInMonth;
  506.                         if (item.slider.options_.handles == 2) {
  507.                             this.currentValue_ = {
  508.                                 left: new Date(year + "-" + month + "-" + beginDay + "T00:00:00Z"),
  509.                                 right: new Date(year + "-" + month + "-" + endDay + "T23:59:59Z")
  510.                             }
  511.                         } else {
  512.                             this.currentValue_ = new Date(year + "-" + month + "-" + beginDay + "T00:00:00Z");
  513.                         }
  514.                     }
  515.                     break;
  516.             }
  517.         }
  519.         if (this.currentValue_ instanceof Date) {
  520.             if (this.currentValue_ < totalMin) this.currentValue_ = totalMin;
  521.             if (this.currentValue_ > totalMax) this.currentValue_ = totalMax;
  522.         } else {
  523.             if (this.currentValue_.left < totalMin) this.currentValue_.left = totalMin;
  524.             if (this.currentValue_.left > totalMax) this.currentValue_.left = totalMax;
  525.             if (this.currentValue_.right < totalMin) this.currentValue_.right = totalMin;
  526.             if (this.currentValue_.right > totalMax) this.currentValue_.right = totalMax;
  527.         }
  529.         const isoValue = this.getValueForSchema_(true);
  530.         const daysInMonth = new Date(isoValue.begin.substr(0, 4), isoValue.begin.substr(5, 2), 0).getDate();
  532.         // update all values in headers and sliders
  533.         for (let i = 0; i < this.sliders_.length; ++i) {
  534.             const item = this.sliders_[i];
  536.             let min = totalMin
  537.             let max = totalMax
  538.             switch (item.type) {
  539.                 case "DATE":
  540.                     item.header.setValues(this.getValueForSchema_());
  541.                     break;
  542.                 case "YEAR":
  543.                     item.header.setValues({
  544.                         begin: isoValue.begin.substr(0, 4),
  545.                         end: isoValue.end.substr(0, 4)
  546.                     });
  547.                     break;
  548.                 case "MONTH":
  549.                     min = new Date(isoValue.begin.substr(0, 5) + "01-01T00:00:00Z").getTime();
  550.                     max = new Date(isoValue.begin.substr(0, 5) + "12-31T23:59:59Z").getTime();
  551.                     item.header.setValues({
  552.                         begin: isoValue.begin.substr(5, 2),
  553.                         end: isoValue.end.substr(5, 2)
  554.                     });
  555.                     break;
  556.                 case "DAY":
  557.                     min = new Date(isoValue.begin.substr(0, 8) + "01T00:00:00Z").getTime();
  558.                     max = new Date(isoValue.begin.substr(0, 8) + daysInMonth + "T23:59:59Z").getTime();
  559.                     item.header.setValues({
  560.                         begin: isoValue.begin.substr(8, 2),
  561.                         end: isoValue.end.substr(8, 2)
  562.                     });
  563.                     break;
  564.             }
  565.             item.slider.options_.min = (min >= totalMin) ? min : totalMin;
  566.             item.slider.options_.max = (max <= totalMax) ? max : totalMax;
  568.             if (init || (item != source)) {
  569.                 if (item.slider.options_.handles == 2) {
  570.                     item.slider.options_.value = {
  571.                         left: new Date(isoValue.begin).getTime(),
  572.                         right: new Date(isoValue.end).getTime(),
  573.                     };
  574.                 } else {
  575.                     item.slider.options_.value = new Date(isoValue.begin).getTime();
  576.                 }
  578.                 item.slider.validate_();
  579.                 item.slider.updateHandles_();
  580.             }
  581.         }
  582.     }
  584.     /**
  585.      * internal method for initializing the date slider.
  586.      * the slider gets re-initialized everytime the
  587.      * operator changes.
  588.      * 
  589.      * @private
  590.      */
  591.     initSliders_() {
  592.         // remove all sliders
  593.         for (let i in this.sliders_) this.sliders_[i].dispose();
  594.         this.sliders_ = [];
  596.         // adjust operator
  597.         if (!this.options_.operators.includes(this.operator_)) {
  598.             if (this.options_.operators.length == 0) this.options_.operators = ["-"];
  599.             this.operator_ = this.options_.operators[0];
  600.         }
  602.         const activeSliders = this.options_.activeSliders;
  604.         if (activeSliders.length == 0) {
  605.             const item = this.initSingleSlider_(null, true);
  606.             this.sliderContainer_.appendChild(item.container);
  607.             this.sliders_.push(item);
  608.         } else {
  609.             for (let i = 0; i < activeSliders.length; ++i) {
  610.                 const isLast = (activeSliders.length == (i + 1));
  611.                 const item = this.initSingleSlider_(activeSliders[i], isLast);
  612.                 this.sliderContainer_.appendChild(item.container);
  613.                 this.sliders_.push(item);
  614.             }
  615.         }
  617.         this.updateValues_(this.sliders_[this.sliders_.length - 1], true);
  618.     }
  620.     sortSchema_(input) {
  621.         input = input.toLowerCase();
  622.         let output = "";
  623.         for (let i in this.types_) {
  624.             if (input.includes(i)) {
  625.                 output += i;
  626.             }
  627.         }
  628.         return output;
  629.     }
  631.     initMultipleSliderMode_() {
  632.         const advanced = document.createElement("div");
  633.         advanced.classList.add("advanced");
  634.         advanced.style.display = "none";
  635.         advanced.innerHTML = `
  636.                 <button class="btn-close"><i class='fas fa-times'></i></button>
  637.                 <div class="settings"></div>
  638.             `;
  639.         const settingsContainer = advanced.querySelector(".settings");
  641.         // toggle advanced settings
  643.         this.settingsOpen_ = false;
  644.         const toggleSettings = () => {
  645.             const tool = this.getElement().querySelector(".sidebar-element-tool.multiple-slider-mode");
  646.             if (this.settingsOpen_) {
  647.                 advanced.style.display = "none";
  648.                 tool.classList.remove("enabled");
  649.             } else {
  650.                 advanced.style.display = "flex";
  651.                 tool.classList.add("enabled")
  652.             }
  653.             this.settingsOpen_ = !this.settingsOpen_;
  654.         }
  656.         const closeButton = advanced.querySelector(".btn-close");
  657.         closeButton.addEventListener("click", toggleSettings);
  658.         this.addTool("vef vef-filter-settings multiple-slider-mode", toggleSettings, "Advanced Settings", true);
  660.         const schema = this.sortSchema_(this.options_.schema);
  661.         const activeSliders = this.sortSchema_(this.options_.activeSliders);
  663.         for (let i = 0; i < schema.length; ++i) {
  664.             if (schema[i] in this.types_) {
  665.                 const settingsItem = document.createElement("div");
  666.                 settingsItem.classList.add("settings-item");
  667.                 settingsItem.dataset.type = schema[i];
  668.                 settingsItem.innerHTML = `
  669.                     <span class="fa-stack">
  670.                         <i class="far fa-circle fa-stack-1x"></i>
  671.                         <i class="fas fa-check fa-stack-1x"></i>
  672.                     </span>
  673.                     ${this.types_[schema[i]].toLowerCase()}
  674.                 `;
  675.                 settingsContainer.appendChild(settingsItem);
  676.             }
  677.         }
  679.         const items = settingsContainer.querySelectorAll(".settings-item");
  680.         for (let i = 0; i < items.length; ++i) {
  681.             const item = items[i];
  683.             const prev = item.previousSibling;
  684.             if (activeSliders.includes(schema[i]) && (!prev || prev.classList.contains("checked"))) {
  685.                 item.classList.add("checked");
  686.             }
  688.             item.addEventListener("click", () => {
  689.                 if (item.classList.contains("checked")) {
  690.                     item.classList.remove("checked");
  691.                     let next = item.nextSibling;
  692.                     while (next) {
  693.                         next.classList.remove("checked");
  694.                         next = next.nextSibling;
  695.                     }
  696.                 } else {
  697.                     item.classList.add("checked");
  698.                     let prev = item.previousSibling;
  699.                     while (prev) {
  700.                         prev.classList.add("checked");
  701.                         prev = prev.previousSibling;
  702.                     }
  703.                 }
  704.                 let selectedSliders = "";
  705.                 for (let j = 0; j < items.length; ++j) {
  706.                     if (items[j].classList.contains("checked")) selectedSliders += items[j].dataset.type;
  707.                 }
  708.                 this.options_.activeSliders = this.sortSchema_(selectedSliders);
  709.                 this.initSliders_();
  710.                 this.fire("change", this);
  711.             });
  712.         }
  715.         if (!this.options_.allowMultipleSliderMode) this.toggleToolVisibility("multiple-slider-mode", false);
  717.         return advanced;
  718.     }
  721.     /**
  722.      * internal method for getting the selected date values
  723.      * adjusted to the time resolution defined in options.schema
  724.      * 
  725.      * @param {boolean} iso returns full iso-datestring if true
  726.      * @param {object | number} value (optional)
  727.      * @returns {object} {begin, end}
  728.      */
  729.     getValueForSchema_(iso, value) {
  730.         value = value || this.currentValue_;
  731.         let begin = ((isFinite(value.left)) ? value.left : value).toISOString();
  732.         let end = ((isFinite(value.right)) ? value.right : value).toISOString();
  734.         let schema = this.options_.schema.toLowerCase();
  735.         let activeSliders = this.options_.activeSliders.toLowerCase();
  736.         if (!this.schemaRegex.test(schema)) schema = "ymd";
  737.         if (!this.schemaRegex.test(activeSliders)) activeSliders = "";
  739.         // "Y" -> Year is always required
  740.         let validBegin = begin.substr(0, 4);
  741.         let validEnd = end.substr(0, 4);
  743.         if (schema.includes("m") && ((activeSliders.length == 0) || activeSliders.includes("m"))) {
  744.             validBegin = begin.substr(0, 7);
  745.             validEnd = end.substr(0, 7);
  746.             if (schema.includes("d") && ((activeSliders.length == 0) || activeSliders.includes("d"))) {
  747.                 validBegin = begin.substr(0, 10);
  748.                 validEnd = end.substr(0, 10);
  749.                 if (iso) {
  750.                     validBegin += "T00:00:00";
  751.                     validEnd += "T23:59:59";
  752.                 }
  753.             } else if (iso) {
  754.                 const daysInEndMonth = new Date(end.substr(0, 4), end.substr(5, 2), 0).getDate();
  755.                 validEnd += "-" + daysInEndMonth + "T23:59:59";
  756.                 validBegin += "-01T00:00:00";
  757.             }
  758.         } else if (iso) {
  759.             validBegin += "-01-01T00:00:00";
  760.             validEnd += "-12-31T23:59:59";
  761.         }
  763.         return {
  764.             begin: validBegin,
  765.             end: validEnd
  766.         }
  767.     }
  770.     /**
  771.      * Get the filter object to pass it on to the Layers.
  772.      * 
  773.      * @override
  774.      * @returns {object} filter object
  775.      */
  776.     getActiveFilter() {
  777.         let val = this.getValueForSchema_(true);
  779.         // case "bt" and "eq" and as fallback for invalid operators
  780.         let values = [["bt", val.begin, val.end]];
  782.         switch (this.operator_) {
  783.             case "gt":
  784.             case ">":
  785.                 values = [["gt", val.begin]];
  786.                 break;
  787.             case "gteq":
  788.             case "≥":
  789.                 values = [["gteq", val.begin]];
  790.                 break;
  791.             case "lt":
  792.             case "<":
  793.                 values = [["lt", val.begin]];
  794.                 break;
  795.             case "lteq":
  796.             case "≤":
  797.                 values = [["lteq", val.begin]];
  798.                 break;
  799.         }
  801.         const result = {
  802.             type: "time",
  803.             column: this.options_.column || "",
  804.             values: values,
  805.             excludedLayers: this.getExcludedLayers()
  806.         };
  807.         return result;
  808.     }
  810.     /**
  811.      * Get the filter's options-object
  812.      */
  813.     getOptions() {
  814.         const activeFilterValues = this.getActiveFilter().values[0];
  815.         const operator = this.operator_;
  816.         const options = Object.assign({}, this.options_);
  818.         options.initialOperator = operator;
  820.         // assign active values
  821.         if (operator == "-") {
  822.             options.initialBegin = activeFilterValues[1];
  823.             options.initialEnd = activeFilterValues[2];
  824.         } else {
  825.             options.initialBegin = activeFilterValues[1];
  826.             options.initialEnd = "";
  827.         }
  829.         return options;
  830.     }
  832.     /**
  833.      * method to reload options after applying settings
  834.      */
  835.     reloadOptions_() {
  836.         this.setTitle(this.options_.title);
  837.         this.toggleToolVisibility("btn-power", this.options_.deactivatable);
  838.         this.toggleToolVisibility("multiple-slider-mode", this.options_.allowMultipleSliderMode);
  839.         this.initSliders_();
  840.         this.fire("change", this);
  841.     }
  843.     setTimeDynamically(time) {
  844.         let access = false;
  845.         let notTime = ["today"];
  846.         notTime.forEach(element => {
  847.             if ((typeof time == "string") && time.includes(element)) access = true;
  848.         });
  850.         // return time if it is not using the today-syntax and alway assume UTC
  851.         if (!access) {
  852.             if(time && !time.endsWith("Z") && !time.endsWith("z")) time += "Z";
  853.             return time
  854.         };
  856.         if (time.includes("today")) {
  857.             let newDate = new Date();
  858.             time = time.replace("today", "");
  859.             if (time == "") return newDate.toISOString();
  860.             let addOrsub = time[0];
  861.             time = time.replace(addOrsub, "")
  862.             if (time == "") return newDate.toISOString();
  863.             let typeOftime = time[0];
  864.             time = time.replace(typeOftime, "")
  865.             if (time == "") return newDate.toISOString();
  866.             let SkipValue = Number(time);
  868.             if (addOrsub === "+") {
  869.                 switch (typeOftime.toLowerCase()) {
  870.                     case "d":
  871.                         newDate.setUTCDate(newDate.getUTCDate() + SkipValue);
  872.                         break;
  873.                     case "m":
  874.                         newDate.setUTCMonth(newDate.getUTCMonth() + SkipValue);
  875.                         break;
  876.                     case "y":
  877.                         newDate.setUTCFullYear(newDate.getUTCFullYear() + SkipValue);
  878.                         break;
  879.                 }
  880.             } else if (addOrsub === "-") {
  881.                 switch (typeOftime.toLowerCase()) {
  882.                     case "d":
  883.                         newDate.setUTCDate(newDate.getUTCDate() - SkipValue);
  884.                         break;
  885.                     case "m":
  886.                         newDate.setUTCMonth(newDate.getUTCMonth() - SkipValue);
  887.                         break;
  888.                     case "y":
  889.                         newDate.setUTCFullYear(newDate.getUTCFullYear() - SkipValue);
  890.                         break;
  891.                 }
  892.             }
  893.             return newDate.toISOString();
  894.         }
  895.         return time;
  896.     }
  897.     
  898.     setValue(value) {
  899.         if (!value) return;
  900.         if (!Array.isArray(value)) value = [value];
  902.         if (this.sliders_.length == 1) {
  903.             const slider = this.sliders_[0].slider;
  905.             if (slider.options_.handles == 1) {
  906.                 slider.setValue(value[0]);
  908.             } else if (slider.options_.handles == 2) {
  909.                 slider.setValue({
  910.                     left: value[0],
  911.                     right: value.length == 2 ? value[1] : value[0]
  912.                 });
  913.             }
  914.             this.fire('change', this);
  916.         } else {
  917.             console.warn('TimeFilter with multiple sliders are not supported.');
  918.         }
  919.     }
  920. }
  922. /**
  923.  * Class representing the settings for the TimeFilter
  924.  * @private
  925.  */
  926. class TimeFilterSettings extends FilterSettings {
  928.     htmlExtension = `
  929.         <div><label style="width: 100%;"><span class="input-label" style="width: 80px;">Column: </span><input style="width: calc(100% - 80px);" type="text" name="column" placeholder="Let empty to auto-choose a column for each layer"/></label></div>
  930.         <div><label style="width: 100%;"><span class="input-label" style="width: 80px;">Schema: </span><select style="width: calc(100% - 80px);" name="schema">
  931.             <option value="y">YYYY</option>
  932.             <option value="ym">YYYY-MM</option>
  933.             <option value="ymd">YYYY-MM-DD</option>
  934.         </select></label></div>
  935.         <div><label style="width: 100%;"><span class="input-label" style="width: 80px;">Minimum: </span><input style="width: calc(100% - 80px);" type="text" name="minimum"/></label></div>
  936.         <div><label style="width: 100%;"><span class="input-label" style="width: 80px;">Maximum: </span><input style="width: calc(100% - 80px);" type="text" name="maximum"/></label></div>
  937.         <div>
  938.         <label class="input-label" style="width: 80px;">Operators:</label>
  939.         <label title="equals" style="margin-right:20px;"><input type="checkbox" name="operator-equals"/> =</label>
  940.         <label title="range" style="margin-right:20px;"><input type="checkbox" name="operator-range"/> -</label>
  941.         <label title="greater than" style="margin-right:20px;"><input type="checkbox" name="operator-gt"/> &gt;</label>
  942.         <label title="greater thanor equal to" style="margin-right:20px;"><input type="checkbox" name="operator-gteq"/> ≥</label>
  943.         <label title="less than"><input type="checkbox" name="operator-lt"/> &lt;</label>
  944.         <label title="less than or equal to"><input type="checkbox" name="operator-lteq"/> ≤</label>
  945.         </div>
  946.         <div><label><input type="checkbox" name="allow-multiple-slider-mode"/> Show "Multiple Slider Mode" Button</label></div>
  947.     `;
  949.     /**
  950.      * @param {FilterUi} filter
  951.      */
  952.     constructor(filter) {
  953.         super(filter);
  955.         this.query("form").insertAdjacentHTML("beforeend", this.htmlExtension);
  956.     }
  958.     /**
  959.      * Get the currently configured filter options
  960.      */
  961.     getFilterOptions() {
  962.         const options = super.getFilterOptions();
  964.         const minimum = this.query("form input[name='minimum']");
  965.         const maximum = this.query("form input[name='maximum']");
  967.         if (!minimum.checkValidity() || !maximum.checkValidity()) return null;
  969.         options.begin = minimum.value + "T00:00:00Z";
  970.         options.end = maximum.value + "T23:59:59Z"
  972.         options.column = this.query("form input[name='column']").value;
  973.         options.schema = this.query("form select[name='schema']").value;
  974.         options.allowMultipleSliderMode = this.query("form input[name='allow-multiple-slider-mode']").checked;
  976.         const operators = [];
  977.         if (this.query("form input[name='operator-equals']").checked) operators.push("=");
  978.         if (this.query("form input[name='operator-range']").checked) operators.push("-");
  979.         if (this.query("form input[name='operator-gt']").checked) operators.push(">");
  980.         if (this.query("form input[name='operator-gteq']").checked) operators.push("≥");
  981.         if (this.query("form input[name='operator-lt']").checked) operators.push("<");
  982.         if (this.query("form input[name='operator-lteq']").checked) operators.push("≤");
  983.         options.operators = operators;
  985.         return options;
  986.     }
  988.     /**
  989.      * Update Ui based on the filters current options
  990.      */
  991.     updateFilterOptions() {
  992.         super.updateFilterOptions();
  993.         const options = this.filter.options_;
  995.         this.query("form input[name='column']").value = options.column;
  996.         this.query("form input[name='allow-multiple-slider-mode']").checked = options.allowMultipleSliderMode;
  997.         this.query("form select[name='schema']").value = options.schema;
  998.         this.query("form input[name='minimum']").value = (options.begin.length > 9) ? options.begin.substring(0, 10) : options.end;
  999.         this.query("form input[name='maximum']").value = (options.end.length > 9) ? options.end.substring(0, 10) : options.end;
  1000.         this.query("form input[name='operator-equals']").checked = options.operators.includes("=");
  1001.         this.query("form input[name='operator-range']").checked = options.operators.includes("-");
  1002.         this.query("form input[name='operator-gt']").checked = options.operators.includes(">");
  1003.         this.query("form input[name='operator-gteq']").checked = options.operators.includes("≥");
  1004.         this.query("form input[name='operator-lt']").checked = options.operators.includes("<");
  1005.         this.query("form input[name='operator-lteq']").checked = options.operators.includes("≤");
  1006.     }
  1008. }