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: {},
    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) {
        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() {
      const calendars = bulmaCalendar.attach('[type=date]', {dateFormat: 'dd/MM/yyyy', isRange: true,
      minDate: '01/01/1990'});
      // Loop on each calendar initialized
      calendars.forEach(calendar => {
          calendar.on('save', data => {
              this.date = {
                  from: calendar.startDate.toLocaleDateString(),
                  to: calendar.endDate.toLocaleDateString()
              }
          });
      });
    }
  };
}

// function makeRequestsGrid() {
//      window.requestsGrid = new gridjs.Grid({
//       columns: ['UUID', 'Criterias',
//         {
//           name: 'Requested At',
//         },
//         {
//           name: 'Status',
//         },
//         {
//         name: 'Actions',
//         formatter: (cell, row) => {
//           if (cell == 'f') {
//             return "";
//           }
//           return gridjs.h('button', {
//             className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
//             onClick: () => downloadOneFile(row.cells[0].data)
//           }, 'Download');
//         }
//       }],
//       search: false,
//       server: {
//           url: BASE_URL + '/actions/requests/',
//           then: data => data.map(reqs => [reqs.uuid, reqs.criterias, reqs.requested_at, reqs.status, reqs.downloadable])
//       }
//     }).render(document.getElementById('grid-requests'));
//
//     setInterval(function() {
//       requestsGrid.forceRender();
//     }, 20000);
// }


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 + `/src/data/request_external_data.php?entityGroup=${entityGroup}&entityId=${entityId}&dateFrom=${from}&dateTo=${to}&critId=${crit}`;
  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');
  }
}


// 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?entity_id=' + this.entityId + '&cellcode=' + gridCode;
//         break;
//         case 'c':
//             url += '/interface/dropdowns/criterias?desc_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'
//             }
//           }
//         },
//       };
//     }
//   };
// }


// function mruInfo() {
//   return {
//     dopen: false,
//     copen: false,
//     loading: false,
//     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;
//       }
//     },
//     bid: Alpine.store('mru').objectid,
//     did: null,
//     cid: [],
//     date: {},
//     search() {
//       generateRequest(this.did, this.cid, this.date.from, this.date.to, this.bid);
//     },
//     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;
//       switch(dropdown) {
//         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');
//         });
//     },
//     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) {
//       console.debug(grid);
//       const features = Alpine.store('mru');
//       const featureCols = Object.getOwnPropertyNames(Alpine.store('mru')).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);
//     }
//   };
// }