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'); } }