/** * pagina delle ultime 24 ore * * 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 * * * 25/03/2025 filippo start version * 27/03/2025 filippo aggiunto l'ordinamento della tabella su click "nome colonna" * 18/04/2025 filippo migliorato l'ordinamento delle colonne * 05/05/2025 filippo messo le descrizioni delle colonne per capire come sono calcolate * 06/05/2025 filippo messo le modifiche come da mail di Bruno del 05/05/2025 ore 17:33 * altezza neve gestita con METTI_NEVE in modo da toglierla/metterla velocemente * messa colonna quota stazione * modifica sulle note a fondo pagina * Implementate modifiche come da call con Giovanna Ziroldo/Maria Carta/Bruno renon * Ordinamento per colonna + nome stazione * 20/05/2025 filippo aggiunta colonna humidex * 21/05/2025 filippo tolta unità di misura di humidex * 11/06/2025 filippo cambiate le note a fondo tabella come da mail di renon del 10/06/2025 * */ // flag per avere i console.log attivi oppure no const DEBUG = false; // flag per mettere/togliere la colonna altezza neve const METTI_NEVE = false; // link per recuperare le stazioni della tabella const lnkStazioni = 'https://api.arpa.veneto.it/REST/v1/meteo_ultime24ore'; const lnkGrafici = 'https://www.arpa.veneto.it/dati-ambientali/dati-in-diretta/meteo-idro-nivo/variabili_meteo?codseqst='; // colore di fondo delle head colone const btnBackgroundColor = 'skyblue'; // sort order var SortColumn = 1; var SortType = 'ASC'; /** * 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; } /** * div sulla pagina */ function CreaDiv() { var frase = '\

Valori dalle 00:00 alle (solari) del giorno

\ Premi sull\'intestazione della colonna per ordinare le stazioni su tale colonna.\

Caricamento dati

'; const divPage = document.createElement('div'); divPage.setAttribute('id', 'divPage'); divPage.innerHTML = frase; block.append(divPage); } /** * recupero le stazioni e le visualizzo */ async function addStazioni() { document.getElementById('tabellaStazioni').innerHTML = 'Recupero stazioni'; const lnk = lnkStazioni + '?rnd=' + Math.random(); const response = await fetch(lnk); const jsonResponse = (await response.json()); const stzData = jsonResponse.data; TabellaStazioni(stzData); // metto il simbolo di ordine iniziale SortColumn = 0; SortType = 'ASC'; MettiSimboloOrdinamento(); } /** * */ function addHeadColumn(rowTab, nome, ordine) { const cell = rowTab.insertCell(-1); cell.style.textAlign = "center"; cell.style.verticalAlign = 'middle'; cell.style.position = "sticky"; cell.style.top = 0; cell.style.backgroundColor = btnBackgroundColor; if ( nome.length > 0 ) { cell.innerHTML = nome + ''; cell.addEventListener('click', evt => ordinaTabella(ordine) ); cell.onmouseover = function () { cell.style.cursor = "pointer"; } cell.onmouseout = function () { cell.style.cursor = "default"; } } } /** * */ function addCellValue(row, Valore, allineamento = 'right') { const col = row.insertCell(-1); col.innerHTML = Valore; col.style.textAlign = allineamento; col.style.verticalAlign = 'middle'; if (allineamento == 'right') { col.style.paddingRight = '10px'; } } function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } /** * * @param {*} x */ function SanitizeSort(x) { // gestione delle celle vuote let y = x; if (x === undefined || x === null || x === '' ) { if (SortType == 'ASC') { y = 99999; } else { y = -99999; } } else { if ( isNumeric(x) ) { y = Number( x ); } } return y; } /** * */ function compareValues(a, b) { // questo per fare l'ordinamento su colonna numerica e nome stazione // objs.sort((a,b)=> (a.age - b.age || a.name.localeCompare(b.name) )); const aa = SanitizeSort(a.cells[ SortColumn ].textContent); const bb = SanitizeSort(b.cells[ SortColumn ].textContent); let ordine; if (SortType == 'ASC') { ordine = (aa < bb) ? -1 : (aa > bb) ? 1 : 0; } else { ordine = (aa > bb) ? -1 : (aa < bb) ? 1 : 0; } ordine = ordine || a.cells[ 0 ].textContent.localeCompare(b.cells[ 0 ].textContent); return ordine; } /** * metto il simbolo dell'ordinamento */ function MettiSimboloOrdinamento() { let symb = document.getElementById( 'colonna_' + SortColumn ); if (SortType == 'ASC') { symb.innerHTML = ' ▲'; } else { symb.innerHTML = ' ▼'; } } /** * https://stackoverflow.com/questions/55462632/javascript-sort-table-column-on-click * risposta con 8 */ function ordinaTabella(colnum) { document.body.style.cursor = 'wait'; // tolgo il simbolo di ordine let symb = document.getElementById( 'colonna_' + SortColumn ); symb.innerHTML = ''; // direzione dell'ordinamento if (SortColumn == colnum) { if (SortType == 'ASC') { SortType = 'DESC'; } else { SortType = 'ASC'; } } else { SortType = 'ASC'; } SortColumn = colnum ; // metto il simbolo di ordine MettiSimboloOrdinamento(); let table = document.getElementById("eleStazioni"); // get all the rows in this table: let righeTabella = Array.from(table.querySelectorAll('tr')); // but ignore the heading row: righeTabella = righeTabella.slice(1); // and then just... sort the rows: righeTabella.sort( function(r1, r2) { // aggiungo sempre il nome della stazione per ordinare su numeri uguali const t1 = r1.cells[ SortColumn ]; const t2 = r2.cells[ SortColumn ]; return compareValues(r1, r2); }); // and then the magic part that makes the sorting appear on-page: righeTabella.forEach(row => table.appendChild(row)); document.body.style.cursor = 'auto'; } /** * */ function UnDecimale(x) { if ( isNumeric(x) ) { x = parseFloat( x ).toFixed(1); } return x; } /** * Visualizzo la tabella delle stazioni meteo */ function TabellaStazioni(stzData) { document.getElementById('tabellaStazioni').innerHTML = 'Caricamento dati'; 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(); var rowTab = body.insertRow(-1); addHeadColumn(rowTab, 'Nome stazione', 0); addHeadColumn(rowTab, 'Altitudine
(m s.l.m.)', 1 ); addHeadColumn(rowTab, 'Provincia', 2 ); addHeadColumn(rowTab, 'Orario⁽¹⁾
(solare)', 3 ); addHeadColumn(rowTab, 'Ultima
temperatura⁽²⁾
(°C)', 4 ); addHeadColumn(rowTab, 'Temperatura
minima⁽³⁾
(°C)', 5 ); addHeadColumn(rowTab, 'Temperatura
massima⁽⁴⁾
(°C)', 6 ); addHeadColumn(rowTab, 'Humidex⁽⁵⁾', 7 ); addHeadColumn(rowTab, 'Precipitazione⁽⁶⁾
cumulata (mm)', 8 ); addHeadColumn(rowTab, 'Raffica vento⁽⁷⁾
(km/h)', 9 ); if (METTI_NEVE) { addHeadColumn(rowTab, 'Altezza neve⁽⁸⁾
(cm)', 10); } addHeadColumn(rowTab, '' ); let sPostille = "
⁽¹⁾ Orario dell'ultimo valore registrato dalla stazione" + "
⁽²⁾ Temperatura aria all'orario di aggiornamento" + "
⁽³⁾ Temperatura aria minima di oggi fino all'orario di aggiornamento (la temperatura minima della giornata normalmente si verifica verso l'alba)" + "
⁽⁴⁾ Temperatura aria massima di oggi fino all'orario di aggiornamento (la temperatura massima della giornata normalmente si verifica nel primo pomeriggio in inverno e nel tardo pomeriggio in estate)" + "
⁽⁵⁾ Indice Humidex è uno degli indici usati per stimare la temperatura percepita, all'orario di aggiornamento, in caso di disagio fisiologico da caldo-umido" + "
⁽⁶⁾ Precipitazione cumulata di oggi fino all'orario di aggiornamento" + "
⁽⁷⁾ Raffica massima del vento di oggi fino all'orario di aggiornamento" + "
Alcune stazioni non rilevano tutti i parametri presentati nella tabella" ; if (METTI_NEVE) { sPostille += "
⁽⁸⁾ Altezza neve all'ora di aggiornamento" } document.getElementById('InfoColonne').innerHTML = sPostille; let orarioAggi = null; // ciclo stzData.forEach( stazio => { var row = body.insertRow(-1); row.insertCell(-1).innerHTML = stazio.nome_stazione; addCellValue(row, stazio.quota); addCellValue(row, stazio.provincia, 'center'); const quando = new Date().ConvIstante( stazio.dataora_aggiornamento ); addCellValue(row, quando.Formato('HH:mm')); // prendo l'orario più recente if ( orarioAggi == null) { orarioAggi = quando; } if (orarioAggi < quando) { orarioAggi = quando; } addCellValue(row, UnDecimale( stazio.ultima_temp_aria) ); addCellValue(row, UnDecimale( stazio.temp_aria_min) ); addCellValue(row, UnDecimale( stazio.temp_aria_max) ); addCellValue(row, UnDecimale( stazio.humidex) ); addCellValue(row, UnDecimale( stazio.precipitazione) ); if (isNumeric(stazio.velo_vento_raffica)) { addCellValue(row, UnDecimale( Math.round( stazio.velo_vento_raffica * 3.6 *10)/10 ) ); } else { addCellValue(row, UnDecimale( stazio.velo_vento_raffica) ); } if (METTI_NEVE) { addCellValue(row, stazio.altezza_neve); } let grafico = row.insertCell(-1); grafico.innerHTML = 'Grafico'; grafico.style.textAlign = 'center'; grafico.style.verticalAlign = 'middle'; grafico.onclick = function () { vediGrafico( stazio.codseqst ); } grafico.onmouseover = function () { grafico.style.cursor = "pointer"; } grafico.onmouseout = function () { grafico.style.cursor = "default"; } }); var divTab = document.createElement('div'); divTab.setAttribute('id', 'tabElencoStazioni'); divTab.setAttribute('class', 'bmodal-body'); divTab.style.height = "900px"; divTab.style.overflowY = "scroll"; divTab.append(table); document.getElementById('tabellaStazioni').innerHTML = ''; document.getElementById('tabellaStazioni').append(divTab); document.getElementById('tabellaStazioni').style.border = ""; document.getElementById('orarioRifer').innerHTML = orarioAggi.Formato('HH:mm'); document.getElementById('giornoRifer').innerHTML = orarioAggi.Formato('DD/MM/YYYY'); } /** * */ function vediGrafico( codseqst ) { const lnk = lnkGrafici + codseqst; document.location.href = lnk; } /** * Generates HTML */ function generateHTML() { CreaDiv(); addStazioni() } generateHTML();

Valori estremi e totali di oggi

Questa pagina ti è stata utile?