fdds/js/components/timeSeriesButton.js

   1 import { createOption, linkSelects } from '../util.js';
   2 import { controllers } from './Controller.js';
   3 import { simVars } from '../simVars.js';
   4
   5 /**      Contents
   6  *  1. Initialization block
   7  *  2. Getters block
   8  *  3. Setters block
   9  *
  10  */
  11 export class TimeSeriesButton extends HTMLElement {
  12     /** ===== Initialization block ===== */
  13     constructor(dataType = 'continuous') {
  14         super();
  15         this.innerHTML = `
  16             <div id='timeseries-button'>
  17                 <div>
  18                     <label class='timeseries-select-label' for='startDate'>start time:</label>
  19                     <select class='timeseries-select' id='startDate'></select>
  20                 </div>
  21                 <div>
  22                     <label class='timeseries-select-label' for='endDate'>end time: </label>
  23                     <select class='timeseries-select' id='endDate'></select>
  24                 </div>
  25                 <div>
  26                     <label class='timeseries-select-label' for='dataType'>data type: </label>
  27                     <select class='timeseries-select' id='dataType'>
  28                         <option value='continuous'>continuous</option>
  29                         <option value='discrete'>discrete</option>
  30                     </select>
  31                 </div>
  32                 <div>
  33                     <label class='timeseries-select-label' for='layer-specification'>for layers: </label>
  34                     <select class='timeseries-select' id='layer-specification'>
  35                         <option value='all-added-layers'>all added layers</option>
  36                         <option value='top-layer'>top layer</option>
  37                     </select>
  38                 </div>
  39                 <button class='timeSeriesButton' id='timeSeriesButton'>
  40                     <span id='generate-button-label'>generate timeseries</span>
  41                     <span class='hidden' id='cancel-button-label'>cancel timeseries</span>
  42                     <div id='progressBar' class='hidden'></div>
  43                 </button>
  44             </div>
  45         `;
  46         this.querySelector('#dataType').value = dataType;
  47         this.loading = false;
  48     }
  49
  50     connectedCallback() {
  51         this.querySelector('#timeseries-button').onpointerdown = (e) => e.stopPropagation();
  52
  53         this.initializeTimeSeriesButton();
  54         this.initializeStartDateSelector();
  55         this.initializeEndDateSelector();
  56
  57         this.subscribeToTimeSeriesProgress();
  58
  59         const dataTypeSelector = this.querySelector('#dataType');
  60         dataTypeSelector.addEventListener('change', () => {
  61             let dataType = dataTypeSelector.value;
  62             controllers.timeSeriesDataType.setValue(dataType);
  63         });
  64         this.updateTimestamps();
  65     }
  66
  67     initializeTimeSeriesButton() {
  68         const timeSeriesButton = this.querySelector('#timeSeriesButton');
  69         timeSeriesButton.onpointerdown = () => {
  70             if (this.loading) {
  71                 simVars.cancelTimeSeriesCallback();
  72                 this.setProgress(1);
  73                 this.loading = false;
  74             } else {
  75                 this.loading = true;
  76                 this.setProgress(0);
  77                 this.querySelector('#generate-button-label').classList.add('hidden');
  78                 this.querySelector('#cancel-button-label').classList.remove('hidden');
  79                 simVars.generateTimeSeriesCallback();
  80             }
  81         }
  82     }
  83
  84     initializeStartDateSelector() {
  85         const startDate = this.querySelector('#startDate');
  86         const endDate = this.querySelector('#endDate');
  87         startDate.addEventListener('change', () => {
  88             let simulationStartDate = controllers.startDate.getValue();
  89             if (startDate.value < simulationStartDate) {
  90                 controllers.startDate.setValue(startDate.value);
  91             }
  92             linkSelects(startDate, endDate);
  93         });
  94     }
  95
  96     initializeEndDateSelector() {
  97         const startDate = this.querySelector('#startDate');
  98         const endDate = this.querySelector('#endDate');
  99         endDate.addEventListener('change', () => {
 100             let simulationEndDate = controllers.endDate.getValue();
 101             if (endDate.value > simulationEndDate) {
 102                 controllers.endDate.setValue(endDate.value);
 103             }
 104             linkSelects(startDate, endDate);
 105         });
 106     }
 107
 108     subscribeToTimeSeriesProgress() {
 109         controllers.timeSeriesProgress.subscribe(() => {
 110             let progress = controllers.timeSeriesProgress.getValue();
 111             this.setProgress(progress);
 112         });
 113     }
 114
 115     /** ===== Getters block ===== */
 116     getButton() {
 117         return this.querySelector('#timeSeriesButton');
 118     }
 119
 120     getStartDate() {
 121         return this.querySelector('#startDate').value;
 122     }
 123
 124     getEndDate() {
 125         return this.querySelector('#endDate').value;
 126     }
 127
 128     getDataType() {
 129         return this.querySelector('#dataType').value;
 130     }
 131
 132     getLayerSpecification() {
 133         return this.querySelector('#layer-specification').value;
 134     }
 135
 136
 137     /** ===== Setters block ===== */
 138     updateTimestamps() {
 139         const startDate = this.querySelector('#startDate');
 140         const endDate = this.querySelector('#endDate');
 141         startDate.innerHTML = '';
 142         endDate.innerHTML = '';
 143         for (let timestamp of simVars.sortedTimestamps) {
 144             startDate.appendChild(createOption(timestamp, true));
 145             endDate.appendChild(createOption(timestamp, true));
 146         }
 147         startDate.value = controllers.startDate.getValue();
 148         endDate.value = controllers.endDate.getValue();
 149     }
 150
 151     setProgress(progress) {
 152         if (!this.loading) {
 153             return;
 154         }
 155         const progressBar = this.querySelector('#progressBar');
 156         if (progress < 1) {
 157             progressBar.classList.remove('hidden');
 158             progressBar.style.width = Math.floor(progress*100) + '%';
 159         } else {
 160             this.loading = false;
 161             this.querySelector('#generate-button-label').classList.remove('hidden');
 162             this.querySelector('#cancel-button-label').classList.add('hidden');
 163             progressBar.classList.add('hidden');
 164         }
 165     }
 166
 167     setStartDate(newStartDate) {
 168         let newStartIndex = simVars.sortedTimestamps.indexOf(newStartDate);
 169         if (newStartIndex == simVars.sortedTimestamps.length - 1) {
 170             return;
 171         }
 172
 173         const startDate = this.querySelector('#startDate');
 174         const endDate = this.querySelector('#endDate');
 175
 176         let oldEndDate = endDate.value;
 177         if (newStartDate >= oldEndDate) {
 178            endDate.value =  simVars.sortedTimestamps[newStartIndex + 1];
 179         }
 180         startDate.value = newStartDate;
 181
 182         linkSelects(startDate, endDate);
 183     }
 184
 185     setEndDate(newEndDate) {
 186         let newEndIndex = simVars.sortedTimestamps.indexOf(newEndDate);
 187         if (newEndIndex == 0) {
 188             return;
 189         }
 190
 191         const endDate = this.querySelector('#endDate');
 192         const startDate = this.querySelector('#startDate');
 193
 194         let oldStartDate = startDate.value;
 195         if (newEndDate <= oldStartDate) {
 196             startDate.value = simVars.sortedTimestamps[newEndIndex - 1];
 197         }
 198         endDate.value = newEndDate;
 199
 200         linkSelects(startDate, endDate);
 201     }
 202 }
 203
 204 window.customElements.define('timeseries-button', TimeSeriesButton);