Fullstack Portal Created by the HCMR for the Marine Strategy Framework Directive Program in order to cover demands and aspects considering extendability and maintainability
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.

169 lines
5.5 KiB

function moreInfo() {
return {
lineChart: {},
entityGroup: Alpine.store('entity').entityGroup,
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.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
} 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;
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(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)'
}
}
}
}
});
});
}
};
}