/** * pagina dei dati ultimi 60 giorni * * Autore: Filippo Turetta - ARPAV www.arpa.veneto.it * Script in licenza CC BY-NC-SA 3.0 IT * https://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it * * Dati forniti da ARPAV in licenza CC BY 3.0 * https://creativecommons.org/licenses/by/3.0/deed.it * * E' possibile chiamare questa pagina indicando * codseqst per avere la tabella dei dati giornalieri della stazione indicata * * 17/07/2023 filippo start version * 18/07/2023 filippo funzione per scaricare il csv (disabilitato in coda alla CreaTabella) * */ // flag per avere i console.log attivi oppure no const DEBUG = false; // elenco dei sensori visualizzati const pulsanti = []; pulsanti['TEMP'] = { pulsante: 'Temperatura', coordcd: 18, targa: 'TEMP', unitaMis: '°C'}; pulsanti['PREC'] = { pulsante: 'Precipitazione', coordcd: 23, targa: 'PREC', unitaMis: 'mm'}; pulsanti['UMID'] = { pulsante: 'Umidità', coordcd: 19, targa: 'UMID', unitaMis: '%'}; pulsanti['VVENTO'] = { pulsante: 'Vento', coordcd: 20036, targa: 'VVENTO', unitaMis: 'm/s'}; pulsanti['RADSOL'] = { pulsante: 'Radiazione solare', coordcd: 22, targa: 'RADSOL', unitaMis: 'W/m²'}; pulsanti['PRESS'] = { pulsante: 'Pressione', coordcd: 20, targa: 'PRESS', unitaMis: 'hPa'}; // pulsanti['LIVIDRO'] = { pulsante: 'Livello idrometrico', coordcd: 20005, targa: 'LIVIDRO', unitaMis: 'm'}; // pulsanti['PORT'] = { pulsante: 'Portata', coordcd: 10001, targa: 'PORT', unitaMis: 'm³/s'}; // pulsanti['TSUOLO'] = { pulsante: 'Temp suolo', coordcd: 20008, targa: 'TSUOLO', unitaMis: '°C'}; // pulsanti['FREAT'] = { pulsante: 'Freatimetria', coordcd: 20058, targa: 'FREAT', unitaMis: 'm'}; // pulsante premuto var currentBtn; // link per recuperare le stazioni per sensore // https://api.arpa.veneto.it/REST/v1/meteo_60gg?coordcd=20058 const lnkStazioni = 'https://api.arpa.veneto.it/REST/v1/meteo_60gg?coordcd='; // link per recuperare i valori per la tabella dati giornalieri // https://api.arpa.veneto.it/REST/v1/meteo_60gg_tabella?codseqst=300003396 const lnkValoriSensori = 'https://api.arpa.veneto.it/REST/v1/meteo_60gg_tabella?codseqst='; // simbolo punto della stazione const pointDimension = 8; const colorFill = 'rgb(0, 200, 0)'; const colorLine = 'rgb(0, 0, 0)'; const sfondoEtichetta = 'rgb(240,255,255)'; const fontStz = '14px "Titillium Web", Geneva, Tahoma, sans-serif'; // colore di fondo del pulsante selezionato const btnBackgroundColor = 'skyblue'; // nome del layer aggiunto nella mappa const layerMappa = 'STZ_60GIORNI'; // oggetto mappa var map; // oggetto popup sul punto stazione var popup; // oggetto kml var kmlProvince; // momento di aggiornamento del sensore intabellato var aggiornamento; // tipo di precisione se 60 giorni freatimetri var precisionefalda; //------------------------------------------------------------------------------ // variabili per la parte grafici // stazione dei dati visualizzati var nomeStazione; var linkJsonDati; const tabs = [ 'TARIA2M', 'TARIA5M', 'TARIA8M', 'PREC', 'UMID2M', 'UMID8M', 'VVENTO10M', 'VVENTO2M', 'VVENTO5M', 'RADSOL', 'PRESS', 'LIDRO', 'PORT', 'NIVOM', 'VISIB', 'BRILLAIST' ]; const ordineSensoriTabellaDati = [ 'TARIA2M', 'TARIA8M', 'PREC', 'PRECCUM', 'UMID2M', 'UMID8M', 'RADSOL', 'VVMEDARIT2M', 'VRAFFICA2M', 'DVENTO2M', 'VVMEDARIT5M', 'VRAFFICA5M', 'DVENTO5M', 'VVMEDARIT10M', 'VRAFFICA10M', 'DVENTO10M', 'BFOGL', 'TSUOLO', 'TSUOLO-10', 'TSUOLO-20', 'TSUOLO-30', 'PRESS', 'LIDRO', 'PORT', 'NIVOM', 'VISIB', 'BRILLAIST', 'LFREAT' ]; // valore da mettere se manca il numero const ASSENTE = '>>'; /*------------------------------------------------------------------------------ ritorna vero se la pagina è visualizzata su dispositivo mobile */ function isMobile() { /* Storing user's device details in a variable*/ let details = navigator.userAgent; /* Creating a regular expression containing some mobile devices keywords to search it in details string*/ let regexp = /android|iphone|kindle|ipad/i; /* Using test() method to search regexp in details it returns boolean value*/ let isMobileDevice = regexp.test(details); return isMobileDevice; } /*------------------------------------------------------------------------------ */ function getParameterByName(name) { name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]"); var regex = new RegExp("[\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } //------------------------------------------------------------------------- // funzione di log su console se DEBUG function myConsoleLog(sFrase) { if (DEBUG) { console.log(sFrase); } } //------------------------------------------------------------------------- // ritorna vero se numero function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } /** * ritorna la data con aggiunta di n minuti */ Date.prototype.addMinutes = function(n) { this.setTime(this.getTime() + (n*60*1000)); return this; } /* * ritorna la data con aggiunta di h ore */ Date.prototype.addHours = function(h) { this.setTime(this.getTime() + (h*60*60*1000)); return this; } /** * ritorna una data (2022-09-12T01:00:00) in UTC * in realtà , visto che tutte le date sono in solare, faccio finta che il solare * corrisponda all'UTC in modo da non avere la conversione in locale del browser */ Date.prototype.ConvIstante = function( ist, isUTC = false ) { var nSolare = 0; if (isUTC) {nSolare = 1;} // 2022-09-12T01:00:00 // 0123456789012345678 var cosa = new Date(Date.UTC(ist.substring(0, 4), parseFloat(ist.substring(5, 7))-1, ist.substring(8, 10), parseFloat(ist.substring(11,13))+nSolare, ist.substring(14,16), 0, 0) ); this.setTime( cosa.getTime() ); return this; } /** * ritorna una data (30/04/2023 02:00) in UTC * in realtà , visto che tutte le date sono in solare, faccio finta che il solare * corrisponda all'UTC in modo da non avere la conversione in locale del browser */ Date.prototype.ConvDataOra = function( ist, isUTC = false ) { var nSolare = 0; if (isUTC) {nSolare = 1;} // 30/04/2023 02:00 // 0123456789012345 var cosa = new Date(Date.UTC(ist.substring(6, 10), parseFloat(ist.substring(3, 5))-1, ist.substring(0, 2), parseFloat(ist.substring(11,13))+nSolare, ist.substring(14,16), 0, 0) ); this.setTime( cosa.getTime() ); return this; } /*------------------------------------------------------------------------------ ritorna una stringa con la data nel formato indicato */ Date.prototype.Formato = function( formato ) { var mm = ('0' + (this.getUTCMonth()+1) ) .slice(-2); var dd = ('0' + this.getUTCDate()).slice(-2); var yyyy = this.getUTCFullYear(); var hh = ('0' + (this.getUTCHours())).slice(-2); var mi = ('0' + this.getUTCMinutes()).slice(-2); var ss = ('0' + this.getUTCSeconds()).slice(-2); var mesi = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno','Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre']; var giorni = ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato']; var sRet = ''; switch (formato) { case 'gg g mmm YYYY': sRet =giorni[ this.getUTCDay() ] + ' ' + this.getUTCDate() + ' ' + mesi[ this.getUTCMonth() ] + ' ' + yyyy; break; case 'DD/MM/YYYY': sRet = dd + '/' + mm + '/' + yyyy; break; case 'DD/MM/YYYY HH': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh; break; case 'DD/MM/YYYY HH:mm': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh + ':' + mi; break; case 'DD HH' : sRet = dd + ' ' + hh; break; case 'DD' : sRet = dd; break; case 'HH:mm': sRet = hh + ':' + mi; break; case 'HH': sRet = hh; break; case 'mm': sRet = mi; break; case 'YYYYMMDDHHmm': sRet = yyyy + mm + dd + hh + mi; break; case 'YYYY-MM-DDTHH-mm': sRet = yyyy + '-' + mm + '-' + dd + 'T' + hh + ':' + mi + ':00'; break; default: sRet = this.toString(); break; } return sRet; } /** * Ritorno PADOVA come Padova */ function titleCase(string){ return string[0].toUpperCase() + string.slice(1).toLowerCase(); } /** * div sulla pagina con la mappa */ function CreaDivMappa() { var frase = '\

\
\

Aggiornamento alle 11:30 e 16:30 solari di ogni giorno.
\ Questi dati sono esposti in modo automatico, senza validazione preventiva.
\ ARPAV non assume responsabilità alcuna per usi diversi dalla pura informazione.
\ In seguito a validazione i dati possono subire modifiche anche notevoli, oppure possono essere invalidati e quindi non riportati negli archivi definitivi.
\

'; const divPage = document.createElement('div'); divPage.setAttribute('id', 'divPage'); divPage.innerHTML = frase; block.append(divPage); // aggiungo gli stili che uso CreaStyle('Mappa-Tabella'); // bottoni dei sensori var frase = '

'; // per tutti i bottoni previsti // pulsanti['TEMP'] = { pulsante: 'Temperatura aria', coordcd: 18, targa: 'TEMP', unitaMis: '°C'}; Object.entries(pulsanti).forEach(entry => { const [key, element] = entry; const bt = ''; frase += bt; }); frase += '

'; const divBottoni = document.createElement('div'); divBottoni.setAttribute('id', 'divBottoni'); divBottoni.innerHTML = frase + '

'; // metto i pulsanti dentro al div della mappa divBottoni.setAttribute('class', 'col-11 ol-overlaycontainer layer-button-control text-left btn-toolbar'); divBottoni.setAttribute('role', 'toolbar'); divBottoni.setAttribute('style', 'position: absolute; left: 80px; pointer-events: auto; z-index: 4000;') document.getElementById('mappa').append(divBottoni); // evento click su ogni bottone in modo da fare vedere i punti delle stazioni con il sensore voluto Object.entries(pulsanti).forEach(entry => { const [key, element] = entry; const bt = document.getElementById('btn' + element.targa ); bt.setAttribute('style', 'background: white; padding: 5px 5px;') // bt.setAttribute('class', 'col-sm'); bt.onclick = function () { AggiungiLivello(element); } }); // mappa geografica CaricaMappa('mappa'); } /** * create map */ function CaricaMappa(divMappa) { // spazio dove mettere il testo del popup sulla stazione const divHint = document.createElement('div'); divHint.setAttribute('id', 'hintStazione'); divHint.setAttribute('class', 'ol-overlay-container ol-selectable'); divHint.style.transform= 'translate(-50%, -105%)'; divHint.style.borderStyle = "solid"; divHint.style.borderWidth = "thin"; divHint.style.borderRadius = "5px"; divHint.style.whiteSpace = 'nowrap'; divHint.style.backgroundColor = "#636363"; divHint.style.borderColor = "#C4C4C4"; divHint.style.padding = "5px"; divHint.style.color = "white"; divHint.style.fontFamily = '"Titillium Web",Geneva,Tahoma,sans-serif'; divHint.style.fontSize = '10px'; block.append(divHint); const MAP_DEFAULT_EXTENT = [818354.918, 5425389.1889, 1816693.282, 6070039.437]; map = new ARPAVAPI.openlayers.ol.Map({ target: divMappa, view: new ARPAVAPI.openlayers.ol.View({ center: ARPAVAPI.openlayers.proj.transform([11.9, 45.8], 'EPSG:4326', 'EPSG:3857'), zoom: 8.5, maxZoom: 13, extent: MAP_DEFAULT_EXTENT, }), controls: [ new ARPAVAPI.openlayers.control.Zoom() ] }); // aggiungo lo sfondo map.addLayer( getTileLayer() ); // add kml delle province addKmlProvince(); // popup sulla stazione popup = new ARPAVAPI.openlayers.Overlay({ element: document.getElementById('hintStazione'), stopEvent: false, autoPan: { animation: { duration: 250, }, }, }); map.addOverlay(popup) // click sul punto map.on('singleclick', function (evt) { clickMap(evt); }); // change mouse cursor when over marker map.on('pointermove', function (evt) { mouseMoveOnMap(evt); }); } /** * Get tile layer */ function getTileLayer() { return new ARPAVAPI.openlayers.layer.Tile({ source: new ARPAVAPI.openlayers.source.OSM({ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', }), name: 'sfondo', }); } /** * gestione del click sul punto della stazione */ function clickMap(evt) { const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if ( ! feature) { return; } const stz = feature.getProperties().data; if (stz) { vediDati( feature.getProperties().data ); } } /** * change mouse cursor when over marker */ function mouseMoveOnMap(evt) { if (evt.dragging) return; var pixel = evt.map.getEventPixel(evt.originalEvent); var hit = map.hasFeatureAtPixel(evt.pixel, { layerFilter: function(layer) { return (layer.get('name') === layerMappa); } }); if (hit) { evt.map.getTargetElement().style.cursor = 'pointer'; const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if (feature) { const stz = feature.getProperties().data; if (stz) { const frase = stz.nome_stazione + ' (' + stz.altitude + ' m s.l.m.)'; document.getElementById('hintStazione').innerHTML = frase; popup.setPosition(evt.coordinate); } } else { evt.map.getTargetElement().style.cursor = ''; popup.setPosition(undefined); } } else { evt.map.getTargetElement().style.cursor = ''; popup.setPosition(undefined); } } /** * livello kml delle Province */ function addKmlProvince() { kmlProvince = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ url: 'https://www.arpa.veneto.it/api/risorse/data-meteo/kml/Province.kml', format: new ARPAVAPI.openlayers.format.KML() }), name: 'kmlProvince', }); map.addLayer( kmlProvince ); } /** * carico il livello indicato */ function AggiungiLivello(btn) { // cambio del colore sul pulsante premuto if (currentBtn) { document.getElementById( 'btn' + currentBtn.targa ).classList.remove('bg-primary'); document.getElementById( 'btn' + currentBtn.targa ).classList.remove('text-white'); } currentBtn = btn; document.getElementById( 'btn' + currentBtn.targa ).classList.add('bg-primary'); document.getElementById( 'btn' + currentBtn.targa ).classList.add('text-white'); // visualizzo le stazioni del sensore indicato addStazioni(); } /** * cancello i layer delle stazioni */ function cancellaLayer() { map.getLayers().forEach(layer => { if ( layer && layer.get('name') ) { if ( layer.get('name') == layerMappa) { map.removeLayer(layer); } } }); } /** * Aggiorno il div orarioRifer */ function AggiornaOrarioRifer( dataRifer, dataAggio ) { document.getElementById('aggiornamento').innerHTML = ''; // 'Elaborazione delle ' + dataAggio.Formato('HH:mm') + ' solari.'; } /** * recupero le stazioni e le visualizzo */ async function addStazioni() { if (document.getElementById('aggiornamento')) { document.getElementById('aggiornamento').innerHTML = 'Recupero stazioni'; } const lnk = lnkStazioni + currentBtn.coordcd + '&rnd=' + Math.random(); const response = await fetch(lnk); const jsonResponse = (await response.json()); const stzData = jsonResponse.data; // oggetto geoJSON const geojsonObject = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:3857', }, }, features: [], }; // carico le stazioni nel geoJSON e valorizzo le variabili per le informazioni let dataAggio = 0, dataRifer = 0; let coord = []; stzData.forEach((stazione, index) => { let posiz = 'bottom'; if ( coord.includes( stazione.point) ) { posiz = 'top'; } coord.push( stazione.point ); geojsonObject.features.push({ type: 'Feature', geometry: JSON.parse(stazione.point), properties: { id: stazione.codice_stazione, xTextBaseline: posiz, data: { ...stazione }, // tutte le proprietà della stazione presente nel json }, }); }); var PallinoStazione = new ARPAVAPI.openlayers.style.Circle({ radius: pointDimension, fill: new ARPAVAPI.openlayers.style.Fill({color: colorFill}), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: colorLine, width: 1 }) }); // punto della stazione di colore standard let iconStyle = new ARPAVAPI.openlayers.style.Style({ image: PallinoStazione }); // label stazione var labelStyle = new ARPAVAPI.openlayers.style.Style({ text: new ARPAVAPI.openlayers.style.Text({ placement: 'point', font: fontStz, overflow: true, fill: new ARPAVAPI.openlayers.style.Fill({ color: 'black', }), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: sfondoEtichetta, width: 4, }), offsetY: -3, textBaseline: 'bottom', textAlign: 'center', rotation: 0, }) }); var style = [iconStyle, labelStyle]; const vectorLayer = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ format: new ARPAVAPI.openlayers.format.GeoJSON(), features: new ARPAVAPI.openlayers.format.GeoJSON({ featureProjection: 'EPSG:3857', }).readFeatures(geojsonObject) }), visible: true, name: layerMappa, style: function(feature) { // valore da visualizzare in base al sensore let et = feature.getProperties().data.codice_stazione; labelStyle.getText().setText( '' + et ); // posizione dell'etichetta labelStyle.getText().setTextBaseline( feature.getProperties().xTextBaseline ); return [iconStyle, labelStyle]; }, }); // cancello i layer delle stazioni e delle iso cancellaLayer(); // aggiungo il nuovo layer delle stazioni map.addLayer( vectorLayer ); document.getElementById('aggiornamento').innerHTML = ''; // tabella delle stazioni del sensore visualizzato TabellaStazioni(stzData, lnk); } /** * ritorna i gradi decimali in sessagesimali (gradi primi secondi) */ function CoordGradi( coord ) { const g = Math.floor(coord); const p = Math.floor( (coord - g ) * 60); const s = (coord - g - (p/60) ) * 60 * 60; const s2 = Math.round(s*1000)/1000; // tre decimali arrotondati const ret = ' ' + g + '° ' + p + "' " + s2 + "'' " myConsoleLog('CoordGradi ' + coord + ' ->' + ret ); return ret; } /** * Visualizzo la tabella delle stazioni meteo */ function TabellaStazioni(stzData, lnk) { document.getElementById('tabellaStazioni').innerHTML = 'Caricamento dati'; // metto le stazioni in ordine alfabetico per provincia (sono già in ordine alfabetico basta dividerle per provincia) let ord = {'BELLUNO' : [], 'PADOVA' : [], 'ROVIGO' : [], 'TREVISO' : [], 'VENEZIA' : [], 'VICENZA' : [], 'VERONA' : [], 'UDINE' : []}; stzData.forEach((stazione, index) => { ord[ stazione.provincia ].push( stazione ); }); // myConsoleLog( JSON.stringify(ord, null, 4) ); var table = document.createElement('table'); table.setAttribute('id', 'eleStazioni'); table.setAttribute('class', 'table table-sm table-striped table-bordered table-hover table-condensed'); var body = table.createTBody(); // ciclo le province Object.keys(ord).forEach( nomeProv => { // metto la provincia solo se ci sono stazioni if ( ord[nomeProv].length == 0 ) { return; // equivalente a contineu; questo fa andare alla prossima provincia } var rowProv = body.insertRow(-1); var cellProv = rowProv.insertCell(-1); cellProv.colSpan = '2'; cellProv.innerHTML = 'Stazioni nella provincia di ' + titleCase(nomeProv); cellProv.style.textAlign = "center"; cellProv.style.backgroundColor = btnBackgroundColor; // ciclo le stazioni della provincia for (let index = 0; index < ord[nomeProv].length; index += 2) { const e1 = ord[nomeProv][index]; const e2 = ord[nomeProv][index+1]; var row = body.insertRow(-1); const cell1 = row.insertCell(-1); const cell2 = row.insertCell(-1); cell1.innerHTML = e1.nome_stazione + ' (' + e1.codice_stazione + ')'; cell1.onclick = function () { vediDati( e1 ); } cell1.onmouseover = function () { cell1.style.cursor = "pointer"; } cell1.onmouseout = function () { cell1.style.cursor = "default"; } if (e2) { cell2.innerHTML = e2.nome_stazione + ' (' + e2.codice_stazione + ')'; cell2.onclick = function () { vediDati( e2 ); } cell2.onmouseover = function () { cell2.style.cursor = "pointer"; } cell2.onmouseout = function () { cell2.style.cursor = "default"; } } else { cell2.innerHTML = ''; } } }); var divTab = document.createElement('div'); divTab.setAttribute('id', 'tabElencoStazioni'); divTab.setAttribute('class', 'bmodal-body border mb-2'); divTab.style.height = "500px"; divTab.style.overflowY = "scroll"; divTab.append(table); document.getElementById('tabellaStazioni').innerHTML = ''; document.getElementById('tabellaStazioni').append(divTab); var jsonRif = document.createElement('a'); jsonRif.setAttribute('href', lnk); jsonRif.setAttribute('target', '_blank'); jsonRif.setAttribute('type', 'text/json'); jsonRif.innerHTML = 'Anagrafica stazioni in formato JSON'; document.getElementById('tabellaStazioni').append(jsonRif); document.getElementById('tabellaStazioni').style.border = ""; } /** * cambio pagina in modo da visualizzare il grafico dei sensori della stazione */ function vediDati( tuplaStaz ) { const lnk = window.location.href.split('?')[0] + '?codseqst=' + tuplaStaz.codseqst ; document.location.href = lnk; } //------------------------------------------------------------------------- // ValoriSensore: ritorna i valori dei sensori ordinati function ValoriSensore(stationdata) { let sensors = {}; stationdata.data.forEach((item) => { if (!sensors[item.tipo]) { sensors[item.tipo] = { data: [], label: item.nome_sensore, unitmeas: item.unitnm } } // momento di aggiornamento dei dati visualizzati aggiornamento = item.aggiornamento; precisionefalda = item.precisionefalda; nomeStazione = item.nome_stazione; sensors[item.tipo].data.push({ value: item.valore, date: item.dataora }); }); return sensors; } //------------------------------------------------------------------------- // creazione della tabella dati function createHTMLForTab(type, label, firstParameter) { // create tab item myConsoleLog('createHTMLForTab type ' + type + ' firstParameter ' + firstParameter); // create tab content const div = document.createElement('div'); div.setAttribute('id', 'tabcontent-' + type); div.setAttribute('class', 'modal-body' ); div.innerHTML = '

'; document.getElementById('meteoTabPanelContent').append(div); } function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date) { return padTo2Digits(date.getDate()) + '-' + padTo2Digits(date.getHours()); } //------------------------------------------------------------------------- // creo la tabella dei dati giornalieri async function TabellaDatiStazione(codseqst) { myConsoleLog('TabellaDatiStazione'); linkJsonDati = lnkValoriSensori + codseqst + '&rnd=' + Math.random(); const response = await fetch(linkJsonDati); const jsonResponse = (await response.json()); const sensors = ValoriSensore(jsonResponse); const parti = '

\
\

\
'; const divPagina = document.createElement('div'); divPagina.setAttribute('id', 'bodyStazione'); divPagina.innerHTML = parti block.append(divPagina); // evento click sul pulsante document.getElementById('btnIndietro').onclick = function () { window.history.back(); } document.getElementById('nomeStaz').innerHTML = '

' + nomeStazione + '

'; // cambio il titolo della pagina var xpath = "//h1[text()='Nuova pagina variabili meteorologiche']"; var TitoloPagina = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; if (TitoloPagina) { TitoloPagina.innerHTML = 'Dati della stazione'; } // tab della tabella dati // if (aggiornamento) { myConsoleLog('createHTML Tabella'); CreaTabella('TABELLA', sensors); // } // aggiungo momento di aggiornamento dei dati presentati var fraseAggiornam = 'Nessun valore negli ultimi giorni'; if (aggiornamento) { var dAggior = new Date().ConvIstante( aggiornamento ); fraseAggiornam = 'Dati aggiornati il ' + dAggior.Formato('DD/MM/YYYY HH:mm') + ' (solare)'; } const p = document.createElement('p'); p.setAttribute('class', 'text-center table-condensed'); p.innerHTML = fraseAggiornam; document.getElementById('meteoTabPanelContent').append(p); // link per avere la tabella in formato csv // createCSV2(jsonResponse.data, 'meteoTabPanelContent'); } //------------------------------------------------------------------------- // ritorna l'altezza del sensore function AltezzaSensore(type) { var metriVento = type; if ( type.indexOf( '2M' ) >= 0 ) { metriVento = 2; } if ( type.indexOf( '5M' ) >= 0 ) { metriVento = 5; } if ( type.indexOf( '8M' ) >= 0 ) { metriVento = 8; } if ( type.indexOf( '10M' ) >= 0 ) { metriVento = 10; } return metriVento; } //------------------------------------------------------------------------- // creo la tabella dei dati presenti function CreaTabella(type, sensors) { myConsoleLog('CreaTabella'); // ho sempore due righe sul titolo var nSpanData = 'rowspan="2"'; var nSpanColone = ''; // se stazione con raffica del vento allora titolo su 3 righe var bIsRafficaVento = false; var bIsDirezVento = false; var bIsMedDVento = false; Object.entries(sensors).forEach(entry => { const [type, sensore] = entry; // se type VRAFFICA allora anche ci sono 3 righe sul titolo if ( type.indexOf( 'VRAFFICA' ) >= 0 ) { nSpanData = 'rowspan="3"'; nSpanColone = 'rowspan="2"'; bIsRafficaVento = true; } // anche per il messaggio a fine tabella della direzione di provenienza if ( type.indexOf( 'DVENTO' ) >= 0 ) { bIsDirezVento = true; } // per le colonne del vento if ( type.indexOf( 'VVMEDARIT' ) >= 0 ) { bIsMedDVento = true; } }); // gestione delle colonne nell'ordine corretto della tabella dei dati finale let xNomiGiusti = []; ordineSensoriTabellaDati.forEach((nomeColonna, index) => { // cerco se ho il sensore nei sensori della stazione Object.entries(sensors).forEach(entry => { const [type, sensore] = entry; // esiste il sensore da intabellare nei sesnori della stazione? if ( nomeColonna == type ) { if ( ! xNomiGiusti[ type ] ) { xNomiGiusti.push( type ); } } }); }); myConsoleLog('xNomiGiusti' + JSON.stringify(xNomiGiusti, null, '\t') ); // classi per centrare il contenuto const sC = ' class="align-middle text-center nowrap" '; // -------------------------------------- // titoli delle colonne dei dati presenti let titoloDati = '' + 'Data
(gg/mm/aaaa)'; let titoloDati2 = ''; // seconda riga nei titoli let titoloDati3 = ''; // terza riga nei titoli solo se esiste la raffica vento var bFattoVento = false; xNomiGiusti.forEach((nomeColonna, index) => { const sensore = sensors[nomeColonna]; const type = nomeColonna; var nomeSensore = sensore.label; // intestazioni delle colonne: nome del sensore e unità di misura if (type.indexOf('TARIA') >= 0 ) { titoloDati += 'Temp. aria
a ' + AltezzaSensore(type) + ' m
(' + sensore.unitmeas + ')'; titoloDati2 += 'min' + 'med' + 'max'; } if (type.indexOf('PREC') >= 0 ) { titoloDati += 'Precipitazione
(mm)'; titoloDati2 += 'tot'; } if (type.indexOf('UMID') >= 0 ) { titoloDati += 'Umidità rel.
a ' + AltezzaSensore(type) + ' m
(' + sensore.unitmeas + ')'; titoloDati2 += 'min' + 'max'; } if (type.indexOf('RADSOL') >= 0 ) { titoloDati += 'Radiazione
globale
(' + sensore.unitmeas + ')'; titoloDati2 += 'tot'; } if (type.indexOf('BFOGL') >= 0 ) { titoloDati += 'Bagnatura fogliare
(' + sensore.unitmeas + ' di tempo)'; titoloDati2 += 'tot'; } // se ho il vento allora metto solo una volta if ( (type.indexOf('VVMEDARIT') >= 0 ) || (type.indexOf('VRAFFICA') >= 0 ) || (type.indexOf('DVENTO') >= 0 ) ) { if ( ! bFattoVento ) { var nColSpanVento = 0; if (bIsRafficaVento) { nColSpanVento += 2;} if (bIsDirezVento) { nColSpanVento += 1;} if (bIsMedDVento) { nColSpanVento += 1;} titoloDati += 'Vento a ' + AltezzaSensore(type) + 'm'; bFattoVento = true; } // vento seconda riga nei titoli if (type.indexOf('VVMEDARIT') >= 0 ) { titoloDati2 += 'Velocità
med
(' + sensore.unitmeas + ')'; } if (type.indexOf('VRAFFICA') >= 0 ) { titoloDati2 += 'Raffica
massima'; titoloDati3 += 'oram/s'; } if (type.indexOf('DVENTO') >= 0 ) { titoloDati2 += 'Direz.
preval.'; } } if (type.indexOf('PRESS') >= 0 ) { titoloDati += '' + nomeSensore + ' (' + sensore.unitmeas + ')'; titoloDati2 += 'med'; } if (type == 'TSUOLO' ) { titoloDati += 'Temp. suolo
media
(°C)'; titoloDati2 += 'a 0 cm' + 'a -10 cm' + 'a -20 cm' + 'a -30 cm'; } if (type.indexOf('LIDRO') >= 0 ) { titoloDati += 'Livello idrometrico
(' + sensore.unitmeas + ')'; titoloDati2 += 'min' + 'med' + 'max'; } if (type.indexOf('PORT') >= 0 ) { titoloDati += 'Portata idrometrica
(' + sensore.unitmeas + ')'; titoloDati2 += 'min' + 'med' + 'max'; } if (type.indexOf('NIVOM') >= 0 ) { titoloDati += '' + nomeSensore + ' (' + sensore.unitmeas + ')'; titoloDati2 += 'med'; } if (type.indexOf('VISIB') >= 0 ) { titoloDati += '' + nomeSensore + ' (' + sensore.unitmeas + ')'; titoloDati2 += 'med'; } if (type.indexOf('LFREAT') >= 0 ) { titoloDati += '' + nomeSensore + ' (' + sensore.unitmeas + ')'; // se esiste la precisione allora la indico if (precisionefalda) { titoloDati += '
precisione ' + precisionefalda; } titoloDati += ''; titoloDati2 += 'media'; } }); titoloDati += ''; titoloDati2 += ''; // -------------------------------------- // array delle righe nella tabella let righe = []; let nRiga = 0; let iTab; // variabile per ciclare sui dati dei sensori let bAssente = false; // flag per mettere >> solo se ci sono dati assenti in tabella // ciclo tutti i sensori presenti nell'ordine delle colonne da scrivere xNomiGiusti.forEach((nomeColonna, index) => { const sensore = sensors[nomeColonna]; const type = nomeColonna; // compongo le righe e colonne della tabella dei dati sensore.data.forEach((tuplaDatiSensore, index) => { var dataora = tuplaDatiSensore.date; // 2022-09-08T05:00:00 // 0123456789012345678 dataora = dataora.substr(8, 2) + '/' + dataora.substr(5, 2) + '/' + dataora.substr(0, 4); // 08/09/2022 // cerco la riga nella righe let bCarica = true; for (iTab in righe) { // uso il for per avere il break if ( righe[iTab].dataora == '' + dataora + '' ) { bCarica = false; nRiga = iTab; break; } } if ( bCarica ) { // aggiungo la riga nella tabella da pubblicare nRiga = righe.push( { dataora: '' + dataora + '' } ); nRiga -= 1; // zero based } // valore da intabellare var valore = tuplaDatiSensore.value; var sValore; var vMin = ASSENTE, vMed = ASSENTE, vMax = ASSENTE, vMassimo = ASSENTE, vOraMinuti = ASSENTE, vGradi = ASSENTE, vSettore = ASSENTE; // sensori con più valori: gestione delle colonne multiple per il sensore if (type.indexOf('TARIA') >= 0 ) { if (valore) { valore = JSON.parse(valore); vMin = valore.MINIMO; vMed = valore.MEDIO; vMax = valore.MASSIMO; } sValore = '' + vMin + '' + '' + vMed + '' + '' + vMax + ''; } if (type.indexOf('UMID') >= 0 ) { if (valore) { valore = JSON.parse(valore); vMin = valore.MINIMO; vMax = valore.MASSIMO; } sValore = '' + vMin + '' + '' + vMax + ''; } if (type.indexOf('VRAFFICA') >= 0 ) { if (valore) { valore = JSON.parse(valore); vMassimo = valore.MASSIMO; vOraMinuti = valore.ORAMINUTI; } sValore = '' + vOraMinuti + '' + '' + vMassimo + ''; } if (type.indexOf('DVENTO') >= 0 ) { if (valore) { valore = JSON.parse(valore); vGradi = valore.GRADI; vSettore = valore.SETTORE; } sValore = '' + vSettore + ''; } if ( (type.indexOf('LIDRO') >= 0 ) || (type.indexOf('PORT') >= 0 ) ) { if (valore) { valore = JSON.parse(valore); vMin = valore.MINIMO; vMed = valore.MEDIO; vMax = valore.MASSIMO; } sValore = '' + vMin + '' + '' + vMed + '' + '' + vMax + ''; } if ( ! sValore ) { // tolgo l'eventuale , delle migliaia if ( ! valore ) { valore = ASSENTE; } valore = valore.replace(',',''); if ( ! isNumeric( valore ) ) { bAssente = true; sValore = '' + ASSENTE + ''; } else { sValore = '' + valore + ''; } } righe[nRiga][type] = sValore; }); // sensore.data.forEach((valore, index) => { }); // tabella vera e propria in ordine decrescente righe.reverse(); myConsoleLog('righe' + JSON.stringify(righe, null, '\t') ); let righeDati = ''; for (iTab in righe) { let tupla = righe[iTab]; righeDati += ''; let i; // per tutte le colonne della riga for (i in tupla) { righeDati += tupla[i]; } righeDati += ''; } // -------------------------------------- // tabella completa da visualizzare var tabDati = ''; tabDati += ''; tabDati += '' + titoloDati + titoloDati2 + titoloDati3 + ''; tabDati += '' + righeDati + ''; tabDati += '

'; // info varie e link al file xml dei dati utilizzati if ( bAssente ) { tabDati += 'Con ' + ASSENTE + ' dato assente.
'; } if ( bIsDirezVento) { tabDati += 'La provenienza del vento indica con 0=Nord, 90=Est, 180=Sud, 270=Ovest.
'; } const t = document.createElement('div'); t.setAttribute('class', 'modal-body'); // t.setAttribute('style', 'height: 800px;overflow-y: scroll;'); t.innerHTML = tabDati + 'Dati della stazione in formato JSON'; // metto la tabella nel suo posto document.getElementById('meteoTabPanelContent').append(t); // 18/07/2023 al momento NON faccio link al salvataggio del file in csv // createCSV('tabellaDati', 'meteoTabPanelContent'); myConsoleLog('tabDati ' + tabDati ); } /** * createCSV: converte la tabella idTabella in csv per metterla in idContent */ function createCSV(idTabella, idContent) { myConsoleLog('createCSV ' + idTabella + ' ' + idContent); const table = document.getElementById(idTabella); var titoliCsv = ''; var nColonne = 0; // titoli delle colonne for (var j = 0, col; col = table.rows[0].cells[j]; j++) { const inner = col.innerHTML.replaceAll('
', ' '); let aggiungi = true; if ( inner.indexOf("aria") >= 0) { aggiungi = false; titoliCsv += inner + ' min;' + inner + ' med;' + inner + ' max;'; nColonne += 3; } if ( inner.indexOf("Umidit") >= 0) { aggiungi = false; titoliCsv += inner + ' min;' + inner + ' max;'; nColonne += 2; } if ( inner.indexOf("Vento") >= 0) { aggiungi = false; titoliCsv += inner + ' velocità;' + inner + ' raffica ora;' + inner + ' raffica m/s;' + inner + ' direz;'; nColonne += 4; } if ( inner.indexOf("idrometric") >= 0) { aggiungi = false; titoliCsv += inner + ' min;' + inner + ' med;' + inner + ' max;'; nColonne += 3; } if ( inner.indexOf("suolo") >= 0) { aggiungi = false; titoliCsv += inner + ' a 0cm;' + inner + ' a -10cm;' + inner + ' a -20cm;' + inner + ' a -30cm;'; nColonne += 4; } if (aggiungi) { titoliCsv += inner + ';'; nColonne += 1; } } // togliere l'ultimo ; e mettere a \n titoliCsv = titoliCsv.substring(0, titoliCsv.length-1) + '\n'; var righeCsv = ''; for (var i = 0, row; row = table.rows[i]; i++) { //iterate through rows //rows would be accessed using the "row" variable assigned in the for loop // salto tutte le righe che non hanno il numero di colonne previste if (row.cells.length != nColonne ) { continue; } for (var j = 0, col; col = row.cells[j]; j++) { //iterate through columns //columns would be accessed using the "col" variable assigned in the for loop var inner = col.innerHTML.replaceAll('
', ' '); inner = col.innerHTML.replaceAll('>', '>'); const separatore = ( ( j == row.cells.length-1 ) ? '\n' : ';'); righeCsv += inner + separatore; } } const tutta = titoliCsv + righeCsv; // per salvare in formato excel https://stackoverflow.com/questions/19492846/javascript-to-csv-export-encoding-issue // You should add the UTF-8 BOM at the start of the text, like: var element = document.createElement('a'); element.setAttribute('href', 'data:text/csv;charset=UTF-8,%EF%BB%BF' + encodeURI(tutta)); element.setAttribute('download', nomeStazione + '.csv'); element.innerHTML = 'Dati della stazione in formato CSV'; document.getElementById(idContent).append(element); /* var pre = document.createElement("pre"); pre.textContent = tutta; document.getElementById(idContent).append(pre); */ } /** * */ function CreaStyle(dove) { let css = '.piccolo { \ padding: 6px 6px; \ font-size: 14px; \ line-height: 1.45; \ }'; let head = document.head || document.getElementsByTagName('head')[0]; let style = document.createElement('style'); // document.getElementById( dove ).appendChild(style); head.appendChild(style); if (style.styleSheet){ // This is required for IE8 and below. style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } /** * */ function AddStyle(quanti) { var css = '.table-condensed {'+ 'font-size: ' + quanti + 'px;'+ '}'; let head = document.head || document.getElementsByTagName('head')[0]; let style = document.createElement('style'); head.appendChild(style); if (style.styleSheet){ // This is required for IE8 and below. style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } /** * Generates HTML */ function generateHTML() { const codseqst = getParameterByName('codseqst'); // elementi della pagina if (codseqst.length == 0) { // visualizzo la mappe delle stazioni CreaDivMappa(); // parto dal primo pulsante presente let primoPulsante = Object.values(pulsanti)[0].targa; document.getElementById( 'btn' + primoPulsante ).click(); } else { // imposto il font di default dei grafici il font della tabella if (isMobile() ) { ARPAVAPI.Chart.defaults.font.size = 7; AddStyle(7); } else { ARPAVAPI.Chart.defaults.font.size = 16; AddStyle(15); } TabellaDatiStazione(codseqst); } } generateHTML();

Dati meteo ultimi giorni

Questa pagina ti è stata utile?