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
  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                 controllers.startDate.broadcastEvent(controllerEvents.VALUE_SET)
  92             }
  93             linkSelects(startDate, endDate);
  94         });
  95     }
  96
  97     initializeEndDateSelector() {
  98         const startDate = this.querySelector('#startDate');
  99         const endDate = this.querySelector('#endDate');
 100         endDate.addEventListener('change', () => {
 101             let simulationEndDate = controllers.endDate.getValue();
 102             if (endDate.value > simulationEndDate) {
 103                 controllers.endDate.setValue(endDate.value);
 104                 controllers.endDate.broadcastEvent(controllerEvents.VALUE_SET)
 105             }
 106             linkSelects(startDate, endDate);
 107         });
 108     }
 109
 110     subscribeToTimeSeriesProgress() {
 111         controllers.timeSeriesProgress.subscribe(() => {
 112             let progress = controllers.timeSeriesProgress.getValue();
 113             this.setProgress(progress);
 114         });
 115     }
 116
 117     /** ===== Getters block ===== */
 118     getButton() {
 119         return this.querySelector('#timeSeriesButton');
 120     }
 121
 122     getStartDate() {
 123         return this.querySelector('#startDate').value;
 124     }
 125
 126     getEndDate() {
 127         return this.querySelector('#endDate').value;
 128     }
 129
 130     getDataType() {
 131         return this.querySelector('#dataType').value;
 132     }
 133
 134     getLayerSpecification() {
 135         return this.querySelector('#layer-specification').value;
 136     }
 137
 138
 139     /** ===== Setters block ===== */
 140     updateTimestamps() {
 141         const startDate = this.querySelector('#startDate');
 142         const endDate = this.querySelector('#endDate');
 143         startDate.innerHTML = '';
 144         endDate.innerHTML = '';
 145         for (let timestamp of simVars.sortedTimestamps) {
 146             startDate.appendChild(createOption(timestamp, true));
 147             endDate.appendChild(createOption(timestamp, true));
 148         }
 149         startDate.value = controllers.startDate.getValue();
 150         endDate.value = controllers.endDate.getValue();
 151     }
 152
 153     setProgress(progress) {
 154         if (!this.loading) {
 155             return;
 156         }
 157         const progressBar = this.querySelector('#progressBar');
 158         if (progress < 1) {
 159             progressBar.classList.remove('hidden');
 160             progressBar.style.width = Math.floor(progress*100) + '%';
 161         } else {
 162             this.loading = false;
 163             this.querySelector('#generate-button-label').classList.remove('hidden');
 164             this.querySelector('#cancel-button-label').classList.add('hidden');
 165             progressBar.classList.add('hidden');
 166         }
 167     }
 168
 169     setStartDate(newStartDate) {
 170         let newStartIndex = simVars.sortedTimestamps.indexOf(newStartDate);
 171         if (newStartIndex == simVars.sortedTimestamps.length - 1) {
 172             return;
 173         }
 174
 175         const startDate = this.querySelector('#startDate');
 176         const endDate = this.querySelector('#endDate');
 177
 178         let oldEndDate = endDate.value;
 179         if (newStartDate >= oldEndDate) {
 180            endDate.value =  simVars.sortedTimestamps[newStartIndex + 1];
 181         }
 182         startDate.value = newStartDate;
 183
 184         linkSelects(startDate, endDate);
 185     }
 186
 187     setEndDate(newEndDate) {
 188         let newEndIndex = simVars.sortedTimestamps.indexOf(newEndDate);
 189         if (newEndIndex == 0) {
 190             return;
 191         }
 192
 193         const endDate = this.querySelector('#endDate');
 194         const startDate = this.querySelector('#startDate');
 195
 196         let oldStartDate = startDate.value;
 197         if (newEndDate <= oldStartDate) {
 198             startDate.value = simVars.sortedTimestamps[newEndIndex - 1];
 199         }
 200         endDate.value = newEndDate;
 201
 202         linkSelects(startDate, endDate);
 203     }
 204 }
 205
 206 window.customElements.define('timeseries-button', TimeSeriesButton);