fdds/js/components/timeSeriesButton.js

   1 import { createOption, linkSelects } from '../util.js';
   2 import { controllers, controllerEvents } 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         this.subscribeToDataType();
  59
  60         this.updateTimestamps();
  61     }
  62
  63     initializeTimeSeriesButton() {
  64         const timeSeriesButton = this.querySelector('#timeSeriesButton');
  65         timeSeriesButton.onpointerdown = () => {
  66             if (this.loading) {
  67                 simVars.cancelTimeSeriesCallback();
  68                 this.setProgress(1);
  69                 this.loading = false;
  70             } else {
  71                 this.loading = true;
  72                 this.setProgress(0);
  73                 this.querySelector('#generate-button-label').classList.add('hidden');
  74                 this.querySelector('#cancel-button-label').classList.remove('hidden');
  75                 simVars.generateTimeSeriesCallback();
  76             }
  77         }
  78     }
  79
  80     initializeStartDateSelector() {
  81         const startDate = this.querySelector('#startDate');
  82         const endDate = this.querySelector('#endDate');
  83         startDate.addEventListener('change', () => {
  84             let simulationStartDate = controllers.startDate.getValue();
  85             let startValue = startDate.value;
  86             if (startValue < simulationStartDate) {
  87                 controllers.startDate.setValue(startValue);
  88                 controllers.startDate.broadcastEvent(controllerEvents.VALUE_SET)
  89             }
  90             linkSelects(startDate, endDate);
  91             controllers.timeSeriesStart.setValue(startValue);
  92         });
  93
  94         controllers.timeSeriesStart.subscribe(() => {
  95             let startValue = controllers.timeSeriesStart.getValue();
  96             startDate.value = startValue;
  97         });
  98     }
  99
 100     initializeEndDateSelector() {
 101         const startDate = this.querySelector('#startDate');
 102         const endDate = this.querySelector('#endDate');
 103         endDate.addEventListener('change', () => {
 104             let simulationEndDate = controllers.endDate.getValue();
 105             let endValue = endDate.value;
 106             if (endValue > simulationEndDate) {
 107                 controllers.endDate.setValue(endValue);
 108                 controllers.endDate.broadcastEvent(controllerEvents.VALUE_SET);
 109             }
 110             linkSelects(startDate, endDate);
 111             controllers.timeSeriesEnd.setValue(endValue);
 112         });
 113
 114         controllers.timeSeriesEnd.subscribe(() => {
 115             let endValue = controllers.timeSeriesEnd.getValue();
 116             endDate.value = endValue;
 117         });
 118     }
 119
 120     subscribeToTimeSeriesProgress() {
 121         controllers.timeSeriesProgress.subscribe(() => {
 122             let progress = controllers.timeSeriesProgress.getValue();
 123             this.setProgress(progress);
 124         });
 125     }
 126
 127     subscribeToDataType() {
 128         const dataTypeSelector = this.querySelector('#dataType');
 129         dataTypeSelector.addEventListener('change', () => {
 130             let dataType = dataTypeSelector.value;
 131             controllers.timeSeriesDataType.setValue(dataType);
 132         });
 133         controllers.timeSeriesDataType.subscribe(() => {
 134             let dataType = controllers.timeSeriesDataType.getValue();
 135             dataTypeSelector.value = dataType;
 136         });
 137         dataTypeSelector.value = controllers.timeSeriesDataType.getValue();
 138     }
 139
 140     /** ===== Getters block ===== */
 141     getButton() {
 142         return this.querySelector('#timeSeriesButton');
 143     }
 144
 145     getStartDate() {
 146         return this.querySelector('#startDate').value;
 147     }
 148
 149     getEndDate() {
 150         return this.querySelector('#endDate').value;
 151     }
 152
 153     getDataType() {
 154         return this.querySelector('#dataType').value;
 155     }
 156
 157     getLayerSpecification() {
 158         return this.querySelector('#layer-specification').value;
 159     }
 160
 161
 162     /** ===== Setters block ===== */
 163     updateTimestamps() {
 164         const startDate = this.querySelector('#startDate');
 165         const endDate = this.querySelector('#endDate');
 166         startDate.innerHTML = '';
 167         endDate.innerHTML = '';
 168         for (let timestamp of simVars.sortedTimestamps) {
 169             startDate.appendChild(createOption(timestamp, true));
 170             endDate.appendChild(createOption(timestamp, true));
 171         }
 172         startDate.value = controllers.timeSeriesStart.getValue();
 173         endDate.value = controllers.timeSeriesEnd.getValue();
 174     }
 175
 176     setProgress(progress) {
 177         if (!this.loading) {
 178             return;
 179         }
 180         const progressBar = this.querySelector('#progressBar');
 181         if (progress < 1) {
 182             progressBar.classList.remove('hidden');
 183             progressBar.style.width = Math.floor(progress*100) + '%';
 184         } else {
 185             this.loading = false;
 186             this.querySelector('#generate-button-label').classList.remove('hidden');
 187             this.querySelector('#cancel-button-label').classList.add('hidden');
 188             progressBar.classList.add('hidden');
 189         }
 190     }
 191
 192     setStartDate(newStartDate) {
 193         let newStartIndex = simVars.sortedTimestamps.indexOf(newStartDate);
 194         if (newStartIndex == simVars.sortedTimestamps.length - 1) {
 195             return;
 196         }
 197
 198         const startDate = this.querySelector('#startDate');
 199         const endDate = this.querySelector('#endDate');
 200
 201         let oldEndDate = endDate.value;
 202         if (newStartDate >= oldEndDate) {
 203            endDate.value =  simVars.sortedTimestamps[newStartIndex + 1];
 204         }
 205         startDate.value = newStartDate;
 206
 207         linkSelects(startDate, endDate);
 208     }
 209
 210     setEndDate(newEndDate) {
 211         let newEndIndex = simVars.sortedTimestamps.indexOf(newEndDate);
 212         if (newEndIndex == 0) {
 213             return;
 214         }
 215
 216         const endDate = this.querySelector('#endDate');
 217         const startDate = this.querySelector('#startDate');
 218
 219         let oldStartDate = startDate.value;
 220         if (newEndDate <= oldStartDate) {
 221             startDate.value = simVars.sortedTimestamps[newEndIndex - 1];
 222         }
 223         endDate.value = newEndDate;
 224
 225         linkSelects(startDate, endDate);
 226     }
 227 }
 228
 229 window.customElements.define('timeseries-button', TimeSeriesButton);