msfd_portal_hcmr/public/js/more-info.js

function moreInfo() {
  return {
    entityGroup: selectedEntityGroup,
    entityId: selectedEntityId || Alpine.store('entity').id,
    dopen: false,
    copen: 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;
      }
    },
    did: null,
    cid: [],
    date: {},
    search() {
      this.drawDataChart();
      // check if entity has an external source
      if (this.$store.entity.hasOwnProperty('ctStationCode')) {
        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
      }
    },
    getDropdownData(dropdown) {
      this.loading = true;
      let url = BASE_URL;
      let gridCode;
      if (this.isGrid) {
        gridCode = Alpine.store('entity').cellcode.substr(0,4);
      }

      switch(dropdown) {
        case 'd':
            url += '/interface/dropdowns/descriptors?entityid=' + this.entityId + '&cellcode=' + gridCode;
        break;
        case 'c':
            url += '/interface/dropdowns/criterias?descriptor_id=' + this.did + '&cellcode=' + gridCode;
        break;
      }

      fetch(url)
        .then(res => res.json())
        .then(data => {
          this.isLoading = 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');
      console.debug(features);
      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() {
      if (this.entityGroup != 'POSEIDON')
        return;
      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 => {
          this.isLoading = false;
          console.debug(data);
        });

      const config = {
        type: 'line',
        data: data,
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Chart.js Line Chart'
            }
          }
        },
      };
    }
  };
}