msfd_portal_hcmr/public/js/more-info.js

function moreInfo() {
  return {
    lineChart: {},
    entityGroup: Alpine.store('entity').entity_group || Alpine.store('entity').category,
    entityId: selectedEntityId || Alpine.store('entity').id,
    params: (Alpine.store('entity').entityGroup == 'POSEIDON' ? Alpine.store('entity').params.split(' ') : []),
    dopen: false,
    copen: false,
    popen: false,
    loading: false,
    isGrid: Alpine.store('entity').hasOwnProperty('cellcode'),
    d: {},
    c: {},
    tagName(type, id) {
      if (id == null)
        return;
      if (type === 'd') {
        return this.d.find(i => i.id == id).code;
      } else if (type === 'c') {
        return this.c.find(i => i.id == id).code;
      }
    },
    p: {},
    did: null,
    cid: [],
    pid: [],
    date: {},
    search() {
      this.drawDataChart();
      // check if entity has an external source
      if (this.$store.entity.category === 'coastal_wfd') {
        requestExternalData(this.did, this.cid, this.date.from, this.date.to, this.entityGroup, this.entityId);
      } else {
        requestEntityData(this.did, this.cid, this.date.from, this.date.to, this.entityGroup, this.entityId);
      }
    },
    selectEntry(element, entry) {
      console.debug(element.text.substr(0, element.text.indexOf(' ')));
      if (element.id.split('-')[1] === 'desc') {
        // highlight
        element.parentElement.querySelectorAll('a').forEach(el => el.classList.remove('is-active'));
        element.classList.add('is-active');
        // update variables;
        this.cid = [];
        this.did = entry;
        this.dopen = false;
      } else if (element.id.split('-')[1] === 'crit') {
        // toggle
        element.classList.toggle('is-active');
        // update variables;
        this.cid.indexOf(entry) === -1 ? this.cid.push(entry) : this.cid = this.cid.filter(function(id) { return id !== entry});
        this.copen = false;
        // add tag
      } else if (element.id.split('-')[1] === 'param') {
        // toggle
        element.classList.toggle('is-active');
        // update variables;
        this.cid.indexOf(entry) === -1 ? this.cid.push(entry) : this.cid = this.cid.filter(function(id) { return id !== entry});
        this.copen = false;
        // add tag
        this.lineChart.data.datasets.push();
      }

    },
    getDropdownData(dropdown) {
      Alpine.store('loading', true);

      let url = BASE_URL;
      let gridCode;
      if (this.isGrid) {
        gridCode = Alpine.store('entity').cellcode.substr(0,4);
      }

      console.debug("entity group:::: ", this.entityGroup);
      switch(dropdown) {
        case 'd':
            url += '/interface/dropdowns/descriptors?entity_id=' + this.entityId + '&cellcode=' + gridCode + '&entity_group=' + this.entityGroup;
        break;
        case 'c':
            url += '/interface/dropdowns/criterias?desc_id=' + this.did + '&cellcode=' + gridCode;
        break;
        case 'p':
            url += '/interface/dropdowns/parameters?param_codes=' + this.params.join(',');
        break;
      }

      fetch(url)
        .then(res => res.json())
        .then(data => {
          Alpine.store('loading', false);
          eval('this.' + dropdown + '=data');
        });
    },
    loadCal() {
      const calendars = bulmaCalendar.attach('[type=date]', {dateFormat: 'dd/MM/yyyy', isRange: true});
      // Loop on each calendar initialized
      calendars.forEach(calendar => {
        calendar.on('save', data => {
          this.date = {
              from: calendar.startDate.toLocaleDateString(),
              to: calendar.endDate.toLocaleDateString()
          }
        });
      });
    },
    populateFeatureGrid(grid) {
      const features = Alpine.store('entity');
      const featureCols = Object.getOwnPropertyNames(Alpine.store('entity')).filter(name => aliasMap.has(name));
      const featureVals = featureCols.map(col => {return {feature: aliasMap.get(col), value: features[col]}});
      console.debug(featureVals);
      new gridjs.Grid({
        data: featureVals
      }).render(grid);
    },
    drawDataChart() {
      delete this.lineChart;
      delete ctx;
      if (this.entityGroup !== 'POSEIDON')
         return;

      console.debug('drawing poseidon chart...');
      this.lineChart = {};
      var ctx = document.getElementById('data-chart').getContext('2d');
      console.debug('fetching...');
      const url = `/data/external/POSEIDON/${Alpine.store('entity').tspr}_${Alpine.store('entity').type}_${Alpine.store('entity').pid}`;
      fetch(url)
        .then(res => res.json())
        .then(data => {
          Alpine.store('loading', false);
          console.debug("data poseidon: ", data);
          let chartData = {};
          // const labels = data.map(item => new Date(item.dt.replaceAll(/[T-Z]/g, ' ').trim()));
          const values = data.map(item => {return {x: item.dt, y: item.val}});
          console.debug("poseidon values: ", values);
          chartData = {
            datasets: [{
              label: 'Pressure',
              data: values,
              borderColor: 'rgb(255, 99, 132)',
              backgroundColor: 'rgba(255, 99, 132, 0.5)',
              tension: 0.1
            }]
          };
          console.debug(chartData);
          this.lineChart = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: {
              scales: {
                x: {
                  type: 'time'
                },
                y: {
                  title: {
                    display: true,
                    text: 'Pressure (hPa)'
                  }
                }
              }
            }
          });
      });
    }
  };
}