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.

215 lines
6.2 KiB

function moreInfo() {
return {
lineChart: {},
entityGroup: Alpine.store('entity').entityGroup,
entityId: selectedEntityId || Alpine.store('entity').id,
params: (this.entityGroup === 'POSEIDON' ? Alpine.store('entity').params.split(' ') : []),
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) {
Alpine.store('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 => {
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');
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() {
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');
// Alpine.store('loading', true);
console.debug('fetching...');
console.debug(Alpine.store('entity').params);
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).toLocaleDateString('el-GR'));
const values = data.map(item => item.val);
console.debug(labels);
console.debug(values);
chartData = {
labels: labels,
datasets: [{
label: 'param',
data: values
}]
};
console.debug(chartData);
this.lineChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
day: 'DD MMM YYYY'
},
unit: 'day',
stepSize: 20
}
}]
}
}
});
});
}
};
}
// function poseidonChart(data) {
// var typeGroups = {};
// for (var i = 0; i < data.length; i++) {
// var item = data[i];
// if (!typeGroups[item.type]) {
// typeGroups[item.type] = [];
// }
// typeGroups[item.type].push({
// x: item.date,
// y: item.value
// });
// }
//
// console.debug(typeGroups);
// this.params = typeGroups.type;
// var datasets = [];
// var index = 0;
// for (var type in typeGroups) {
// datasets.push({
// label: type,
// data: typeGroups[type],
// borderColor: getRandomColor(),
// fill: false,
// hidden: false
// });
// addCheckbox(type, index++);
// }
//
// var ctx = document.getElementById('myChart').getContext('2d');
// var myChart = new Chart(ctx, {
// type: 'line',
// data: {
// datasets: datasets
// },
// options: {
// scales: {
// xAxes: [{
// type: 'time',
// time: {
// unit: 'week'
// }
// }]
// }
// }
// });
// }
//
//
//
//
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}