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) { 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() { Alpine.store('loading', true); 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 => { Alpine.store('loading', 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' } } }, }; } }; }