You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
490 lines
15 KiB
490 lines
15 KiB
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/descriptor_dropdown.php?entityid=' + this.entityId + '&cellcode=' + gridCode; |
|
break; |
|
case 'c': |
|
url += '/interface/criteria_dropdown.php?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' |
|
} |
|
} |
|
}, |
|
}; |
|
} |
|
}; |
|
} |
|
|
|
|
|
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/descriptor_dropdown.php?bodyid=' + this.bid; |
|
break; |
|
case 'c': |
|
url += '/interface/criteria_dropdown.php?descriptor_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); |
|
} |
|
}; |
|
}
|
|
|