/** * mappa dei dati giornalieri ultimi anni * * 24/02/2023 filippo start version * */ // flag per avere i console.log attivi oppure no const DEBUG = false; // elenco dei sensori visualizzati const pulsanti = []; pulsanti['TEMP'] = { pulsante: 'Temperatura aria', coordcd: 18, targa: 'TEMP', etichetta: 'Temperatura', unitaMis: '°C'}; pulsanti['PREC'] = { pulsante: 'Precipitazione', coordcd: 23, targa: 'PREC', etichetta: 'Precipitazione', unitaMis: 'mm'}; pulsanti['UMID'] = { pulsante: 'Umidità', coordcd: 19, targa: 'UMID', etichetta: 'Umidità', unitaMis: '%'}; pulsanti['RADSOL'] = { pulsante: 'Radiazione solare', coordcd: 22, targa: 'RADSOL', etichetta: 'Radiazione solare globale', unitaMis: 'MJ/m²'}; pulsanti['VVENTO'] = { pulsante: 'Velocità vento', coordcd: 20036, targa: 'VVENTO', etichetta: 'Velocità vento media aritmetica', unitaMis: 'm/s'}; pulsanti['DVENTO'] = { pulsante: 'Direzione vento', coordcd: 20026, targa: 'DVENTO', etichetta: 'Direzione vento prevalente', unitaMis: '°'}; pulsanti['RAFF'] = { pulsante: 'Raffica vento', coordcd: 20027, targa: 'RAFF', etichetta: 'Raffica vento massima', unitaMis: 'm/s'}; pulsanti['PRESS'] = { pulsante: 'Pressione', coordcd: 20, targa: 'PRESS', etichetta: 'Pressione atmosferica ridotta al livello del mare', unitaMis: 'hPa'}; pulsanti['LIVIDRO'] = { pulsante: 'Livello idrometrico', coordcd: 20005, targa: 'LIVIDRO', etichetta: 'Livello idrometrico', unitaMis: 'm'}; pulsanti['PORTATA'] = { pulsante: 'Portata', coordcd: 10001, targa: 'PORTATA', etichetta: 'Portata', unitaMis: 'm³/s'}; pulsanti['STAZIONI'] = { pulsante: 'Elenco stazioni', coordcd: -1, targa: 'STAZIONI'}; // anno selezionato var currentAnno; // pulsante premuto var currentBtn; // variabile per l'elenco degli anni disponibili const PRIMO_ANNO_NEL_DB = 2010; // link per recuperare le stazioni per anno/sensore const lnkStazioni = 'https://api.arpa.veneto.it/REST/v1/meteo_storici'; const lnkStoriciTabella = 'https://api.arpa.veneto.it/REST/v1/meteo_storici_tabella'; const lnkStoriciTotali = 'https://api.arpa.veneto.it/REST/v1/meteo_storici_totali'; // simbolo punto della stazione const pointDimension = 8; const colorFill = 'green'; const colorLine = 'black'; const fontStz = '24px Calibri, 24px sans-serif'; // colore di fondo del pulsante selezionato const btnBackgroundColor = 'skyblue'; // nome del layer aggiunto nella mappa const layerMappa = 'STZ_STORICI'; // oggetto mappa var map; // oggetto popup sul punto stazione var popup; // oggetto kml var kmlProvince; // oggetto delle stazoni var jsonStazioni; // nome del sensore intabellato var nomeSens; // momento di aggiornamento del sensore intabellato var aggiornamento; /** * 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 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(); } /** * ritorna l'oggetto div per la casella di ricerca con indirizzo */ function CasellaRicerca() { // https://nominatim.openstreetmap.org/search.php?q=napoli&polygon_geojson=0&dedupe=0&limit=1&format=jsonv2 const divCerca = document.createElement('div'); divCerca.setAttribute('id', 'cercaGroup'); divCerca.setAttribute('class', 'input-group mb-3'); const testoCerca = document.createElement('text'); testoCerca.setAttribute('id', 'testoCerca'); testoCerca.setAttribute('class', 'form-control'); testoCerca.setAttribute('placeholder', 'Località'); testoCerca.setAttribute('aria-label', 'Località'); testoCerca.setAttribute('aria-describedby', 'basic-addon2'); divCerca.append(testoCerca); const divGroup = document.createElement('div'); divGroup.setAttribute('id', 'divGroup'); divGroup.setAttribute('class', 'input-group-append'); divCerca.append(divGroup); const btnCerca = document.createElement('button'); btnCerca.setAttribute('id', 'btnCerca'); btnCerca.setAttribute('class', 'btn btn-outline-secondary'); btnCerca.innerHTML = 'Cerca'; divGroup.append(btnCerca); /* testo e pulsante divCerca.innerHTML = '

' + '' + '

' + ' ' + '

' + '

'; */ return divCerca; } /** * div sulla pagina utilizzati da questa procedura */ function CreaDiv() { // bottoni di scelta sensori const divBottoni = document.createElement('div'); divBottoni.setAttribute('id', 'meteoBottoni'); divBottoni.setAttribute('class', 'btn-group'); // metto questo div dentro al div della mappa // block.append(divBottoni); // aggiungo gli anni presenti MettiAnni(divBottoni); const btnTop = document.createElement('div'); btnTop.setAttribute('id', 'btnTop'); btnTop.setAttribute('class', 'dropdown'); const divSensCorrente = document.createElement('button'); divSensCorrente.setAttribute('id', 'sensCorrente'); divSensCorrente.setAttribute('class', 'btn btn-outline-primary dropdown-toggle btn-sm'); divSensCorrente.setAttribute('data-toggle', 'dropdown'); divSensCorrente.setAttribute('aria-haspopup', 'true'); divSensCorrente.setAttribute('aria-expanded', 'false'); divSensCorrente.setAttribute('style', 'background: white;') divSensCorrente.innerHTML = ''; divSensCorrente.append( AggiungiDown() ); btnTop.append(divSensCorrente); const divSensElenco = document.createElement('button'); divSensElenco.setAttribute('id', 'sensElenco'); divSensElenco.setAttribute('class', 'dropdown-menu'); divSensElenco.setAttribute('aria-labelledby', 'sensCorrente'); btnTop.append(divSensElenco); divBottoni.append(btnTop); // aggiungo i bottoni Object.keys(pulsanti).forEach( xTarga => { const btn = pulsanti[xTarga]; const b = document.createElement('button'); b.setAttribute('id', 'btn' + btn.targa); b.setAttribute('class', 'dropdown-item btn-sm'); // b.setAttribute('class', 'btn btn-outline-primary btn-sm'); b.innerHTML = btn.pulsante; b.onclick = function() { if (btn.targa != 'STAZIONI') { document.getElementById('sensCorrente').innerHTML = btn.pulsante + ' '; document.getElementById('sensCorrente').append( AggiungiDown() ); } AggiungiLivello(btn); }; if ( btn.targa == 'STAZIONI') { b.setAttribute('class', 'btn btn-outline-primary btn-sm'); b.setAttribute('style', 'background: white;') divBottoni.append(b); } else { divSensElenco.append(b); } }); // elemento di ricerca // const divCerca = CasellaRicerca(); // block.append(divCerca); // elemento mappa const divMap = document.createElement('div'); divMap.setAttribute('id', 'meteoMap'); divMap.setAttribute('style', 'width: 100%; height: 600px;') divMap.style.border = "thin solid #A5A5A5"; block.append(divMap); // metto i pulsanti dentro al div della mappa divBottoni.setAttribute('class', 'ol-overlaycontainer layer-button-control text-left btn-group'); divBottoni.setAttribute('style', 'position: absolute; left: 100px; top:60px; pointer-events: auto; z-index: 1000;') divMap.append(divBottoni); //

// spazio dove mettere il testo del popup 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); CaricaMappa(); // spazio per la tabella const divSpazio = document.createElement('div'); divSpazio.setAttribute('id', 'meteoSpazio'); divSpazio.innerHTML = '
'; block.append(divSpazio); // elemento tabella sotto const divTabella = document.createElement('div'); divTabella.setAttribute('id', 'meteoTabella'); block.append(divTabella); } /** * aggiungo il simbolo bi-chevron-down */ function AggiungiDown() { /* */ const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const iconPath = document.createElementNS('http://www.w3.org/2000/svg','path'); iconSvg.setAttribute('fill', 'currentColor'); iconSvg.setAttribute('viewBox', '0 0 16 16'); iconSvg.setAttribute('class', 'bi bi-chevron-down'); iconSvg.setAttribute('aria-hidden', 'true'); iconSvg.setAttribute('style', 'width: 16px; height: 16px;') iconPath.setAttribute('d', 'M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'); iconPath.setAttribute('fill-rule', 'evenodd'); iconSvg.appendChild(iconPath); return iconSvg; } /** * Menu delgli anni presenti */ function MettiAnni(divBottoni) { const divAnnoTop = document.createElement('div'); divAnnoTop.setAttribute('id', 'annoTop'); divAnnoTop.setAttribute('class', 'dropdown'); const divAnnoCorrente = document.createElement('button'); divAnnoCorrente.setAttribute('id', 'annoCorrente'); divAnnoCorrente.setAttribute('class', 'btn btn-outline-primary dropdown-toggle btn-sm'); divAnnoCorrente.setAttribute('data-toggle', 'dropdown'); divAnnoCorrente.setAttribute('aria-haspopup', 'true'); divAnnoCorrente.setAttribute('aria-expanded', 'false'); divAnnoCorrente.setAttribute('style', 'background: white;') divAnnoCorrente.innerHTML = 'Anno '; divAnnoTop.append(divAnnoCorrente); // aggiungo la freccetta divAnnoCorrente.append( AggiungiDown() ); const divAnnoElenco = document.createElement('button'); divAnnoElenco.setAttribute('id', 'annoElenco'); divAnnoElenco.setAttribute('class', 'dropdown-menu'); divAnnoElenco.setAttribute('aria-labelledby', 'annoCorrente'); // divAnnoElenco.setAttribute('style', 'height: auto; max-height: 300px; overflow-x: hidden;') divAnnoTop.append(divAnnoElenco); // l'anno corrente è presente nel db alla sera del 25 febbraio // in quanto i dati vengono aggiornati al 25 del mese con il mese precedente const today = new Date(); var yyyy = today.getFullYear(); const mm = today.getMonth() + 1; // Months start at 0! const dd = today.getDate(); if ( ( mm <= 2 ) && ( dd <= 25) ) { yyyy -= 1; } for (let anno = yyyy; anno >= PRIMO_ANNO_NEL_DB; anno--) { const bAnno = document.createElement('button'); bAnno.setAttribute('id', 'anno' + anno); bAnno.setAttribute('class', 'dropdown-item btn-sm'); bAnno.innerHTML = anno; bAnno.onclick = function() { currentAnno = anno; document.getElementById('annoCorrente').innerHTML = 'Anno ' + anno + ' '; document.getElementById('annoCorrente').append( AggiungiDown() ); AggiungiLivello(currentBtn); }; divAnnoElenco.append(bAnno); } divBottoni.append(divAnnoTop); } /** * create map */ function CaricaMappa() { const MAP_DEFAULT_EXTENT = [818354.918, 5425389.1889, 1816693.282, 6070039.437]; map = new ARPAVAPI.openlayers.ol.Map({ target: 'meteoMap', view: new ARPAVAPI.openlayers.ol.View({ center: ARPAVAPI.openlayers.proj.transform([11.8, 45.9], 'EPSG:4326', 'EPSG:3857'), zoom: 8, 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}', }) }); } /** * 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) { /* const frase = feature.getProperties().data.nome_stazione + ' (' + feature.getProperties().data.codice_stazione + ') ' + feature.getProperties().data.tipo + ' anno ' + currentAnno + ' coord ' + currentBtn.coordcd; document.getElementById('meteoTabella').innerHTML = frase; */ 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; 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); } } //------------------------------------------------------------------------- // funzione di log su console se DEBUG function myConsoleLog(sFrase) { if (DEBUG) { console.log(sFrase); } } /** * 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) { if ( btn.targa != 'STAZIONI') { currentBtn = btn; // cerco l'eventuale layer con lo stesso nome e lo cancello map.getLayers().forEach(layer => { if (layer && layer.get('name') === layerMappa) { map.removeLayer(layer); } }); // abilito il pulsante stazioni document.getElementById('btnSTAZIONI').disabled = false; } // azzero il contenuto del div tabella document.getElementById('meteoTabella').innerHTML = ''; document.getElementById('meteoTabella').style.border = ""; if (btn.targa == 'STAZIONI') { // tabella delle stazioni visualizzate TabellaStazioni(); } else { // visualizzo le stazioni del sensore indicato addStazioni(); } } /** * recupero elenco stazioni e le visualizzo */ async function addStazioni() { document.getElementById('meteoTabella').innerHTML = 'Recupero stazioni'; const lnk = lnkStazioni + '?coordcd=' + currentBtn.coordcd + '&anno=' + currentAnno + '&rnd=' + Math.random(); const response = await fetch(lnk); const jsonResponse = (await response.json()); const stzData = jsonResponse.data; document.getElementById('meteoTabella').innerHTML = ''; jsonStazioni = []; // oggetto geoJSON const geojsonObject = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:3857', }, }, features: [], }; // carico le stazioni nel geoJSON stzData.forEach((stazione, index) => { geojsonObject.features.push({ type: 'Feature', geometry: JSON.parse(stazione.point), properties: { id: stazione.codice_stazione, data: { ...stazione }, // tutte le proprietà della stazione presente nel json }, }); jsonStazioni.push( stazione ); }); // punto della stazione const iconStyle = new ARPAVAPI.openlayers.style.Style({ image: 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 }) }) }) // 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: '#101010' }), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: 'white', width: 4 }), offsetY: (-1), 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) { labelStyle.getText().setText( '' + feature.getProperties().data.codice_stazione ); return style; }, }); // aggiungo il nuovo layer delle stazioni map.addLayer( vectorLayer ); } /** * ritorna vero se geiorno da calendario */ function GiornoValido(anno, mese, giorno) { const cosa = new Date(anno, mese, giorno); return ( cosa.getDate() == giorno ); } /** * ritorna la matrice dei dati giornalieri per l'anno corrente */ function CaricaVuoti() { var ret = new Array(); for (let mese = 0; mese < 12; mese++) { ret[mese] = new Array(); for (let giorno = 1; giorno <= 31; giorno++) { if ( GiornoValido(currentAnno, mese, giorno) ) { ret[mese][giorno] = { VALORE : '>>', MINIMO : '>>', MEDIO : '>>', MASSIMO : '>>', GRADI : '>>', SETTORE : '>>' }; } else { ret[mese][giorno] = { VALORE : '', MINIMO : '', MEDIO : '', MASSIMO : '', GRADI : '', SETTORE : '' }; } } } // myConsoleLog( 'CaricaVuoti ' + JSON.stringify( ret, null, 4) ); return ret; } /** * ritorna la matrice con i valori intabellati per mese/giorno */ function Intabella(giornalieri) { // matrice dei valori giornalieri 12 colonne (mesi) per 31 righe (giorni) var matGG = CaricaVuoti(); // carico i valori nella matrice giornalieri.forEach((gg, index) => { // tipe del sensore nomeSens = gg.nome_sensore; // se pressione atmosferica allora è quella ridotta al livello del mare if (currentBtn.targa == 'PRESS') { nomeSens = gg.nome_sensore + ' al livello del mare'; } aggiornamento = new Date().ConvIstante( gg.aggiornamento ); const d = new Date().ConvIstante( gg.dataora ); // in base al sensore posso avere più grandezze nel campo valore switch (currentBtn.targa) { case 'TEMP': case 'UMID': case 'DVENTO': case 'RAFF': case 'PRESS': case 'LIVIDRO': case 'PORTATA': matGG[ d.getMonth() ][ d.getDate() ] = JSON.parse(gg.valore); break; default: matGG[ d.getMonth() ][ d.getDate() ] = {'VALORE': gg.valore }; break; } }); return matGG; } /** * ritorna i dati dei totali con il campo valore già parsificato */ function AggiustaTotali(totali) { myConsoleLog('AggiustaTotali'); var ret = []; totali.forEach((gg, index) => { // in base al sensore posso avere più grandezze nel campo valore switch (currentBtn.targa) { case 'TEMP': case 'PREC': case 'UMID': case 'DVENTO': case 'VVENTO': case 'RAFF': case 'RADSOL': case 'PRESS': case 'LIVIDRO': case 'PORTATA': gg.valore = JSON.parse(gg.valore); break; } ret.push(gg); }); return ret; } /** * ritorna il valore con i decimali in base al pulsante in uso */ function MettiDecimali( valore ) { let ret = valore; let nDecimali = 0; switch (currentBtn.targa) { case 'TEMP': nDecimali = 1; break; case 'PREC': nDecimali = 1; break; case 'UMID': nDecimali = 0; break; case 'DVENTO': nDecimali = 1; break; case 'VVENTO': nDecimali = 1; break; case 'RAFF': nDecimali = 1; // usato per il valore di raffica (uguale alla VVENTO) break; case 'RADSOL': nDecimali = 3; break; case 'PRESS': nDecimali = 1; break; case 'LIVIDRO': nDecimali = 2; break; case 'PORTATA': nDecimali = 2; break; } if ( (ret) && (! isNaN(ret) ) ) { ret = parseFloat(ret).toFixed(nDecimali); } return ret; } /** * ritorno la tabella html del campo desiderato * */ function DammiTabella(pntStaz, matGG, campo, totali, unitaMis = currentBtn.unitaMis) { var frase = ''; myConsoleLog( 'DammiTabella ' + campo ); let tipoCampo = ''; switch (campo) { case 'MINIMO': tipoCampo = ': minima giornaliera'; break; case 'MEDIO': tipoCampo = ': media giornaliera'; break; case 'MASSIMO': tipoCampo = ': massima giornaliera'; break; } frase += 'Misure giornaliere di ' + nomeSens + ' (' + unitaMis + ')' + tipoCampo + '
'; frase += 'Stazione ' + pntStaz.nome_stazione + '
'; frase += 'Anno ' + currentAnno + '
'; frase += 'Quota ' + pntStaz.altitude + ' (m s.l.m.) Coordinate (EPSG:4258) ' + pntStaz.longitudine + '; ' + pntStaz.latitudine + ' (longitudine;latitudine).' + "
"; frase += 'Comune ' + pntStaz.comune + ' (' + titleCase( pntStaz.provincia ) + ')' + "
"; frase += ''; frase += ''; frase += '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; frase += ''; for (let giorno = 1; giorno <= 31; giorno++) { frase += ''; for (let mese = 0; mese < 12; mese++) { const u = matGG[mese][giorno]; // non metto lo 0 sulla PREC if ( (currentBtn.targa == 'PREC') && (u[ campo ] == 0 ) ) { u[ campo ] = ''; } // sulla raffica devo mettere MASSIMO e ORAMINUTI if (currentBtn.targa == 'RAFF') { if (u['MASSIMO'] && u['ORAMINUTI']) { u[ campo ] = MettiDecimali( u['MASSIMO'] ) + ' alle ' + u['ORAMINUTI']; } } else { // metto i decimali in base al sensore u[ campo ] = MettiDecimali( u[ campo ] ); } frase += ''; } frase += ''; } // metto i totali a fondo tabella in base al tipo di sensore switch (currentBtn.targa) { case 'TEMP': case 'PRESS': case 'LIVIDRO': frase += ''; frase += DammiTotale(totali, 'Minima', 'MINIMO_DEL_' + campo); frase += DammiTotale(totali, 'Media', 'MEDIA_DEL_' + campo); frase += DammiTotale(totali, 'Massima', 'MASSIMO_DEL_' + campo); frase += '

Giorno	Gennaio	Febbraio	Marzo	Aprile	Maggio	Giugno	Luglio	Agosto	Settembre	Ottobre	Novembre	Dicembre
' + giorno + '	' + u[ campo ] + '

'; // valori annuali frase += DammiTotaleAnno(totali, 'Media del periodo' , 'MEDIA_DEL_' + campo, currentBtn.unitaMis); break; case 'PREC': frase += ' '; frase += DammiTotale(totali, 'Somma', 'SOMMA'); frase += DammiTotale(totali, 'G.Piov.', 'GPIOV'); frase += ''; // valori annuali frase += DammiTotaleAnno(totali, 'Totale del periodo' , 'SOMMA', currentBtn.unitaMis); frase += DammiTotaleAnno(totali, 'Giorni piovosi del periodo' , 'GPIOV', 'Giorni'); frase += 'Si considera giorno piovoso quando la precipitazione giornaliera è >= 1 mm
'; frase += 'Si segnala che con precipitazione nevosa il pluviometro potrebbe non rilevare o sottostimare il fenomeno.'; frase += '
'; break; case 'UMID': frase += ' '; frase += DammiTotale(totali, 'Minima', 'MINIMO_DEL_' + campo); frase += DammiTotale(totali, 'Massima', 'MASSIMO_DEL_' + campo); frase += ''; // valori annuali frase += DammiTotaleAnno(totali, 'Media del periodo' , 'MEDIA_DEL_' + campo, currentBtn.unitaMis); break; case 'RADSOL': frase += ' '; frase += DammiTotale(totali, 'Somma', 'SOMMA'); frase += DammiTotale(totali, 'Media', 'MEDIO'); frase += ''; break; case 'DVENTO': frase += ' '; frase += DammiTotale(totali, 'Media', campo); frase += ''; // valori annuali frase += DammiTotaleAnno(totali, 'Media del periodo' , campo, unitaMis); if (campo == 'SETTORE') { frase += 'La direzione è quella di provenienza del vento, il settore è ampio 22.5 gradi con asse nella direzione indicata.
'; } else { frase += 'La direzione è quella di provenienza del vento con: 0° = nord, 90° = est, 180° = sud, 270° = ovest.
'; } frase += "Si segnala che, non essendo possibile una perfetta taratura in campo dell'anemoscopio, il dato deve essere considerato indicativo."; frase += '
'; break; case 'VVENTO': frase += ' '; frase += DammiTotale(totali, 'Media', 'MEDIO'); frase += ''; // valori annuali frase += DammiTotaleAnno(totali, 'Media del periodo' , 'MEDIA', currentBtn.unitaMis); break; case 'RAFF': frase += ' '; frase += DammiTotale(totali, 'Massima', 'MASSIMO'); frase += ''; frase += DammiTotaleAnno(totali, 'Massimo del periodo' , 'MASSIMO', currentBtn.unitaMis); break; case 'PORTATA': frase += ' '; frase += DammiTotale(totali, 'Minima', 'MINIMO_DEL_' + campo); frase += DammiTotale(totali, 'Media', 'MEDIA_DEL_' + campo); frase += DammiTotale(totali, 'Massima', 'MASSIMO_DEL_' + campo); frase += ''; break; } frase += 'Con valore >> il dato non è disponibile. I dati possono subire delle modifiche a causa dei processi di validazione.'; // istante di aggiornamento dei dati frase += '
Tabella elaborata ' + aggiornamento.Formato('gg g mmm YYYY') + '.'; return frase; } /** * ritorna la riga dei 12 mesi con il totale desiderato */ function DammiTotale(totali, etichetta, campo) { var frase = ''; frase += '' + etichetta + ''; for (let mese = 1; mese <= 12; mese++) { // cerco il valore del mese/campo let u = CercaTotale(totali, mese, campo); // metto i decimali in base al sensore if (campo != 'GPIOV') { u = MettiDecimali( u ); } frase += '' + u + ''; } frase += ''; return frase; } /** * ritorna il valore del mese(campo nell'array dei totali) */ function CercaTotale(totali, mese, campo) { var ret = ''; totali.forEach((tt, index) => { if (tt.mese == mese) { myConsoleLog('mese=' + mese + ' campo=' + campo); // devo cercare quello giusto in quanto ho più volte il mese dei totali annuali if ( (tt.valore) && (tt.valore[campo]) ) { ret = tt.valore[campo]; } } }); return ret; } /** * ritorna la riga con il totale annuo desiderato */ function DammiTotaleAnno(totali, etichetta, campo, unitaMis) { var val = '>>'; totali.forEach((tt, index) => { if (tt.mese == 0) { // devo cercare quello giusto in quanto ho più volte il mese 0 dei totali annuali if ( tt.valore[campo] ) { val = tt.valore[campo]; } } }); // metto i decimali in base al sensore if (campo != 'GPIOV') { val = MettiDecimali( val ); } var frase = ''; frase += ''; frase += ''; frase += ''; frase += ''; frase += '

' + etichetta + '	' + val + ''; frase += '	' + unitaMis + ''; frase += '

'; return frase; } /** * visualizzo la tabella dei dati della stazione indicata */ async function vediDati( pntStaz ) { document.getElementById('meteoTabella').innerHTML = 'Caricamento dati'; const lnkGiorno = lnkStoriciTabella + '?codseq=' + pntStaz.codseq + '&anno=' + currentAnno; const lnkTotali = lnkStoriciTotali + '?codseq=' + pntStaz.codseq + '&anno=' + currentAnno; // recupero i dati giornalieri e i totali anno const lnkGG = lnkGiorno + '&rnd=' + Math.random(); const respGG = await fetch(lnkGG); const dataGG = (await respGG.json()); var giornalieri = dataGG.data; const lnkTT = lnkTotali + '&rnd=' + Math.random(); const respTT = await fetch(lnkTT); const dataTT = (await respTT.json()); // parsifico i campi dei totali in base al sensore const totali = AggiustaTotali( dataTT.data ); // myConsoleLog( 'Dati giornalieri ' + JSON.stringify( giornalieri, null, 4) ); myConsoleLog( 'Totali ' + JSON.stringify( totali, null, 4) ); // matrice dei valori giornalieri 12 colonne (mesi) per 31 righe (giorni) const matGG = Intabella(giornalieri); var frase = ''; document.getElementById('meteoTabella').innerHTML = ''; // adesso faccio il div popup con la tabella const popTab = document.createElement('div'); popTab.setAttribute('id', 'contentTab'); popTab.setAttribute('class', 'modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable'); popTab.setAttribute('role', 'document'); popTab.setAttribute('style', 'position: absolute; top: 0px; left: 50px'); let pezzi = '

' + '' + '

'; popTab.innerHTML = pezzi; block.append(popTab); // metto il focus sul popup della tabella popTab.scrollIntoView(); // elenco di chiusura popup const eventoTabella = document.getElementById('chiudiContent'); eventoTabella.onclick = function() { document.getElementById('contentTab').remove(); }; } /** * Visualizzo la tabella delle stazioni */ function TabellaStazioni() { document.getElementById('meteoTabella').innerHTML = 'Caricamento dati'; document.getElementById('meteoMap').scrollIntoView(); // 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' : []}; jsonStazioni.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'); var body = table.createTBody(); // ciclo le province Object.keys(ord).forEach( nomeProv => { var rowProv = body.insertRow(-1); var cellProv = rowProv.insertCell(-1); cellProv.colSpan = '2'; cellProv.innerHTML = 'Stazioni con il sensore ' + currentBtn.pulsante + ' nella provincia di ' + titleCase(nomeProv) + " nell'anno " + currentAnno; 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'); divTab.style.height = "500px"; divTab.style.overflowY = "scroll"; divTab.append(table); document.getElementById('meteoTabella').innerHTML = ''; document.getElementById('meteoTabella').append(divTab); document.getElementById('meteoTabella').style.border = ""; } /** * Generates HTML */ function generateHTML() { // elementi della pagina CreaDiv(); // l'anno corrente è presente nel db alla sera del 25 febbraio // in quanto i dati vengono aggiornati al 25 del mese con il mese precedente const today = new Date(); currentAnno = today.getFullYear(); const mm = today.getMonth() + 1; // Months start at 0! const dd = today.getDate(); if ( ( mm <= 2 ) && ( dd <= 25) ) { currentAnno -= 1; } // metto l'anno giusto document.getElementById('annoCorrente').innerHTML = 'Anno ' + currentAnno + ' '; document.getElementById('annoCorrente').append( AggiungiDown() ); // parto dal pulsante della temperatura document.getElementById('btnTEMP').click(); } generateHTML();

' + pntStaz.nome_stazione+ '

Dati meteorologici ultimi anni

Questa pagina ti è stata utile?