msfd_portal_hcmr/public/js/sidebar.js

function advancedSearch() {
  return {
    gopen: false,
    bopen: false,
    dopen: false,
    copen: false,
    loading: false,
    submitDisabled: true,
    g: {},
    b: {},
    d: {},
    c: {},
    tagName(type, id) {
      if (type === 'b') {
        return this.b.find(i => i.id == id).label;
      } else if (type === 'c') {
        return this.c.find(i => i.id == id).code;
      } else if (type === 'g') {
        try {
          return this.g.find(i => i.id == id).label;
        } catch(err) {
          return;
        }
      } else if (type === 'd') {
        try {
          return this.d.find(i => i.id == id).code;
        } catch (err) {
          return;
        }
      }
    },
    gid: null,
    bid: [],
    did: null,
    cid: [],
    date: {},
    calendar: bulmaCalendar.attach('[type=date]', {dateFormat: 'dd/MM/yyyy', isRange: true,
      minDate: '01/01/1990',
      showButtons: false,
      showFooter: false,
      position: [100, 100]
    })[0],
    search() {
        generateRequest(this.did, this.cid, this.date.from, this.date.to, this.bid);
    },
    // Triggers when an entry is selected from any of the dropdowns
    selectEntry(element, entry) {
        const selType = element.id.split('-')[1];
        console.debug(selType);
        if (selType === 'group') {
            element.parentElement.querySelectorAll('a').forEach(el => el.classList.remove('is-active'));
            element.classList.add('is-active');
            // update variables;
            this.bid = [];
            this.gid = entry;
            this.gopen = false;
        } else if (selType === 'body') {
            // toggle
            element.classList.toggle('is-active');
            // update variables;
            this.bid.indexOf(entry) === -1 ? this.bid.push(entry) : this.bid = this.bid.filter(function(id) { return id !== entry});
            this.bopen = false;
            // add tag
        } else if (selType === '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;
          console.debug(this.did);
            this.dopen = false;
        } else if (selType === '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
        }
      this.submitDisabled = !(this.bid.length > 0 && this.cid.length > 0);
    },
    getDropdownData(dropdown) {
      console.debug("TAGS::: ", this.cid);
        this.loading = true;
        let url = BASE_URL;
        switch(dropdown) {
            case 'g':
                url += '/interface/dropdowns/watergroups';
            break;
            case 'b':
                url += '/interface/dropdowns/waterbodies?group_id=' + this.gid;
            break;
            case 'd':
                url += '/interface/dropdowns/descriptors?body_id=' + this.bid;
            break;
            case 'c':
                url += '/interface/dropdowns/criterias?desc_id=' + this.did;
            break;
        }
        fetch(url)
          .then(res => res.json())
          .then(data => {
            this.isLoading = false;
            eval('this.' + dropdown + '=data');
            console.debug(data);
          });
    },
    loadCal() {
      console.debug(this.calendar);
      this.calendar.on('save', data => {
          this.date = {
            from: this.calendar.startDate.toLocaleDateString(),
            to: this.calendar.endDate.toLocaleDateString()
          }
      });
    },
    clearFilters() {
      this.gid = null;
      this.bid = [];
      this.did = null;
      this.cid = [];
      this.date = {};
      this.calendar.clear();
    }
  };
}


function refreshRequestGrid() {
  requestsGrid.forceRender();
}


function downloadOneFile(fileUUID) {
  const url = BASE_URL + '/actions/data/download?uuid=' + fileUUID;
  fetch(url,{
    "credentials": "include",
    "headers": {
        "Accept": "application/zip",
        "Accept-Language": "en-US,en;q=0.5",
        "Sec-Fetch-Dest": "empty",
        "Sec-Fetch-Mode": "cors",
        "Pragma": "no-cache",
        "Cache-Control": "no-cache"
    },
    "method": "GET",
    "mode": "cors"}
  )
  .then(res => { return res.blob(); })
  .then(data => {
    var a = document.createElement("a");
    a.href = window.URL.createObjectURL(data);
    a.download = fileUUID;
    a.click();
  });
}


/**
* Submit a request to the server and returns the entry inserted
* @param {number} desc
* @param {number} crit
* @return {json}
*/
function generateRequest(desc, crit, from, to, bodyId=null) {
  console.debug('requesting data');
  const url = BASE_URL + `/actions/data/search?bodyId=${bodyId}&dateFrom=${from}&dateTo=${to}&critId=${crit}`;
  fetch(url)
    .then(res => {
      return res.json();
    }).then(data => {
      db.requests.add({
        uuid: data.uuid,
        parameters: data.parameters,
        status: data.status
      }).then(d => {
        alert('Request complete. Check the request tab');
        requestsGrid.forceRender();
      });
    });
 }


/**
 * Function to request data for a specific entity such as station or cruise
 * @param {number} desc - The descriptor id
 * @param {number} crit - The criteria id
 * @param {string} from - The start date for which the data is to be requested
 * @param {string} to - The end date for which the data is to be requested
 * @param {string} entityGroup - The entity group (e.g. cruise station, argo, wfd station)
 * @param {string} entityId - The entity feature id (e.g. station id)
 * @return {null}
 */
function requestEntityData(desc, crit, from, to, entityGroup, entityId) {
  const url = BASE_URL + `/actions/data/search?entityGroup=${entityGroup}&entityId=${entityId}&dateFrom=${from}&dateTo=${to}&critId=${crit}`;
  fetch(url)
    .then(res => {
      return res.json();
    }).then(data => {
      db.requests.add({
        uuid: data.uuid,
        parameters: data.parameters,
        status: data.status
      }).then(d => {
        alert('Request complete. Check the request tab');
        requestsGrid.forceRender();
      });
    });
 }



/**
 * Function to request data for a specific entity that has an external source
 * @param {number} desc - The descriptor id
 * @param {number} crit - The criteria id
 * @param {string} from - The start date for which the data is to be requested
 * @param {string} to - The end date for which the data is to be requested
 * @param {string} entityGroup - The entity group (e.g. cruise station, argo, wfd station)
 * @param {string} entityId - The entity feature id (e.g. station id)
 * @return {null}
 */
function requestExternalData(desc, crit, from, to, entityGroup, entityId) {
  console.debug('requesting external data');
  const url = BASE_URL + `/data/external/${entityGroup}/${entityId}`;
  fetch(url)
    .then(res => {
      return res.blob();
    }).then(data => {
        const url = window.URL.createObjectURL(data);
        const a = document.createElement('a');
        a.href = url;
        a.download = `external_data-${entityId}.json`;
        a.click();
      });
 }


function clearRequests() {
  let url = BASE_URL + `/actions/requests/`;
  if (confirm('Clear requests list?')) {
    fetch(url, {
      method: 'DELETE'
    })
    .then(response => {
      if (response.ok)
        requestsGrid.forceRender();
    });
  } else {
    console.log('Cancel');
  }
}