Fullstack Portal Created by the HCMR for the Marine Strategy Framework Directive Program in order to cover demands and aspects considering extendability and maintainability

169 lines
5.6 KiB

function moreInfo() {
return {
lineChart: {},
entityGroup: Alpine.store('entity').entity_group || Alpine.store('entity').category,
entityId: selectedEntityId || Alpine.store('entity').id,
params: (Alpine.store('entity').entityGroup == 'POSEIDON' ? Alpine.store('entity').params.split(' ') : []),
dopen: false,
copen: false,
popen: 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;
}
},
p: {},
did: null,
cid: [],
pid: [],
date: {},
search() {
this.drawDataChart();
// check if entity has an external source
if (this.$store.entity.category === 'coastal_wfd') {
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
} else if (element.id.split('-')[1] === 'param') {
// 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.lineChart.data.datasets.push();
}
},
getDropdownData(dropdown) {
Alpine.store('loading', true);
let url = BASE_URL;
let gridCode;
if (this.isGrid) {
gridCode = Alpine.store('entity').cellcode.substr(0,4);
}
console.debug("entity group:::: ", this.entityGroup);
switch(dropdown) {
case 'd':
url += '/interface/dropdowns/descriptors?entity_id=' + this.entityId + '&cellcode=' + gridCode + '&entity_group=' + this.entityGroup;
break;
case 'c':
url += '/interface/dropdowns/criterias?desc_id=' + this.did + '&cellcode=' + gridCode;
break;
case 'p':
url += '/interface/dropdowns/parameters?param_codes=' + this.params.join(',');
break;
}
fetch(url)
.then(res => res.json())
.then(data => {
Alpine.store('loading', 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');
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() {
delete this.lineChart;
delete ctx;
if (this.entityGroup !== 'POSEIDON')
return;
console.debug('drawing poseidon chart...');
this.lineChart = {};
var ctx = document.getElementById('data-chart').getContext('2d');
console.debug('fetching...');
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 => {
Alpine.store('loading', false);
console.debug("data poseidon: ", data);
let chartData = {};
// const labels = data.map(item => new Date(item.dt.replaceAll(/[T-Z]/g, ' ').trim()));
const values = data.map(item => {return {x: item.dt, y: item.val}});
console.debug("poseidon values: ", values);
chartData = {
datasets: [{
label: 'Pressure',
data: values,
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
tension: 0.1
}]
};
console.debug(chartData);
this.lineChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
scales: {
x: {
type: 'time'
},
y: {
title: {
display: true,
text: 'Pressure (hPa)'
}
}
}
}
});
});
}
};
}