@@ Rivi 11: / Rivi 11: @@
 function <!--{$id|default:AddToHeaderLake|escape:'html'}-->_func() {
-	var jw;
+	var jw, jwr;
+	var page = ( '<!--{$page|default:x|escape:'html'}-->' );
+	var shownames = ( '<!--{$names|default:false|escape:'html'}-->' == 'true' );
+	var now = new Date();
+	var aweekago = new Date(); aweekago.setDate( aweekago.getDate() - 7 );
+	var twoweeksago = new Date(); twoweeksago.setDate( aweekago.getDate() - 14 );
+	var amonthago = new Date(); amonthago.setMonth( amonthago.getMonth() - 1 );
 	jQuery.getScript( "//www.jarviwiki.fi/citobsjs/jwapi.js", function() {
-		jw = new jwApi();
+		jw = new jwApi(); jwr = new jwApi();
-		so = { 'obscode': 'alg||temp||ice||level', 'waterbody': 'Välijärvi_(74.021.1.051)', 'startdate': '2025-01-01' };
+		jw.loadObses( { 'obscode': 'temp||alg||level', 'waterbody': page, 'startdate': aweekago.toISOString() }, function( o ) {
-		jw.loadObses( so, function( o ) {
+			jw.loadObses( { 'obscode': 'ice', 'waterbody': page, 'startdate': twoweeksago.toISOString() }, function( o ) {
-			obsesReady();
+				jw.loadObses( { 'obscode': 'secchi', 'waterbody': page, 'startdate': amonthago.toISOString() }, function( o ) {
+					obsesReady();
+				});
+			});
 		});
 	});
 	function obsesReady() {
-		console.log( jw );
+		jw.wbody = {};
+		jw.wbcount = 0;
-	}
+		jw.obsorder = [];
+		for ( var oi in jw.obsList ) {
+			var o = jw.obsList[oi];
+			var wb = jw.obs[ o ].printouts.Alue[0].fulltext.split( ' (' )[0];
+			var ot = jw.obs[o].printouts.ObsCode[0];
+			if ( typeof jw.wbody[ wb ] == 'undefined' ) {
+				jw.wbody[ wb ] = {};
+				jw.wbcount++;
+			}
+			if ( typeof jw.wbody[ wb ][ ot ] == 'undefined' ) {
+				jw.wbody[ wb ][ ot ] = {
+					newest: jw.obs[o].obsdatetime,
+					sum: 0,
+					count: 0,
+					mean: -1,
+					catsum: 0,
+					catcount: 0,
+					catmean: -1,
+					type: 'absolute',
+					obses: []
+				};
+				jw.obsorder.push( { wbody: wb, obstype: ot } );
+			}
+			jw.wbody[ wb ][ ot ].obses.push( o );
+		}
+		for ( var wb in jw.wbody ) {
+			for ( var ot in jw.wbody[ wb ] ) {
+				//use just the most recent from level obses
+				if ( ot == 'level' ) { jw.wbody[ wb ][ ot ].obses.splice(1); }
+				for ( var oi in jw.wbody[ wb ][ ot ].obses ) {
+					o = jw.wbody[ wb ][ ot ].obses[ oi ];
+					obs = jw.obs[ o ];
+					obsdate = obs.obsdatetime;
+					days = ( now.getTime()-obsdate.getTime() ) / ( 1000*60*60*24 );
+					datajson = obs.printouts.DataJSON[0];
+					try { data = JSON.parse( datajson ); } catch(err) { data = false; };
+						if ( data ) {
+							if ( typeof data.cat != 'undefined' ) {
+							if ( ot == 'ice' ) {
+								if ( data.cat == '0' || data.cat == '5' ) {
+									jw.wbody[ wb ][ ot ].catsum += 0;
+								} else if ( data.cat == '1' || data.cat == '4' ) {
+									jw.wbody[ wb ][ ot ].catsum += 1/days;
+								} else { // 2 or 3
+									jw.wbody[ wb ][ ot ].catsum += 2/days;
+								}
+								jw.wbody[ wb ][ ot ].catcount = jw.wbody[ wb ][ ot ].catcount + 1/days;
+								jw.wbody[ wb ][ ot ].catmean = jw.wbody[ wb ][ ot ].catsum / jw.wbody[ wb ][ ot ].catcount;
+							} else {
+								jw.wbody[ wb ][ ot ].catsum += parseInt( data.cat/days );
+								jw.wbody[ wb ][ ot ].catcount = jw.wbody[ wb ][ ot ].catcount + 1/days;
+								jw.wbody[ wb ][ ot ].catmean = jw.wbody[ wb ][ ot ].catsum / jw.wbody[ wb ][ ot ].catcount;
+							}
+						}
+						if ( ot == 'level' ) {
+							console.log( data );
+							if ( typeof data.inreltodateavg != 'undefined' ) {
+								jw.wbody[ wb ][ot].mean = data.inreltodateavg;
+								jw.wbody[ wb ][ot].type = 'inreltodateavg';
+							} else if ( typeof data.inreltomwl != 'undefined' ) {
+								jw.wbody[ wb ][ot].mean = data.inreltomwl;
+								jw.wbody[ wb ][ot].type = 'inreltomwl';
+							} else {
+								jw.wbody[ wb ][ot].mean = null;
+								jw.wbody[ wb ][ot].type = 'absolute';
+							}
+							if ( jw.wbody[ wb ][ot].type != 'none' ) {
+								if ( jw.wbody[ wb ][ot].mean < -20 ) {
+									jw.wbody[ wb ][ot].cat = 0;
+								} else if ( jw.wbody[ wb ][ot].mean < -10 ) {
+									jw.wbody[ wb ][ot].cat = 1;
+								} else if ( jw.wbody[ wb ][ot].mean < 10 ) {
+									jw.wbody[ wb ][ot].cat = 2;
+								} else if ( jw.wbody[ wb ][ot].mean < 20 ) {
+									jw.wbody[ wb ][ot].cat = 3;
+								} else {
+									jw.wbody[ wb ][ot].cat = 4;
+								}
+							}
+						} else {
+							jw.wbody[ wb ][ ot ].sum += data.val / days;
+							jw.wbody[ wb ][ ot ].count = jw.wbody[ wb ][ ot ].count + 1/days;
+							jw.wbody[ wb ][ ot ].mean = jw.wbody[ wb ][ ot ].sum / jw.wbody[ wb ][ ot ].count;
+						}
+					}
+				}
+			}
+		}
+		out = '<div style="display: none;" class="jwcurobsheader">';
+		var otstrings1 = { 'temp': 'pintaveden lämpötilasta', 'alg': 'sinilevätilanteesta', 'ice': 'jäätilanteesta', 'level': 'vedenpinnan korkeudesta', 'secchi': 'näkösyvyydestä' };
+		if ( jw.obsorder.length > 0 ) {
+			jw.obsorder = jw.obsorder.slice( 0, 4 );
+			out += '<div class="row">';
+			for ( var i in jw.obsorder ) {
+				wb = jw.obsorder[ i ].wbody;
+				ot = jw.obsorder[ i ].obstype;
+				if ( ot != 'level' || jw.wbody[ wb ][ ot ].type != 'absolute' ) {
+					out += '<div class="col col-6 col-sm-4 col-md-3 text-center">';
+					out += '<div style="height: 40px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
+					if ( jw.wbody[ wb ][ ot ].obses.length > 1 ) {
+						if ( ot == 'temp' ) {
+							tooltip = 'Pintaveden lämpötila on painotettu keskiarvo viimeisen 7 vuorokauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
+						} else if ( ot == 'alg' ) {
+							tooltip = 'sinilevätilanne on painotettu keskiarvo viimeisen 7 vuorokauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
+						} else if ( ot == 'ice' ) {
+							tooltip = 'Jäätilanne on painotettu keskiarvo viimeisen 14 vuorokauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
+						} else if ( ot == 'level' ) {
+							tooltip = 'Vedenpinnan korkeus on painotettu keskiarvo viimeisen 7 vuorokauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
+						} else if ( ot == 'secchi' ) {
+							tooltip = 'Näkösyvyys on painotettu keskiarvo viimeisen kuukauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
+						}
+					} else {
+						if ( ot == 'temp' ) {
+							tooltip = 'Tämä on tuorein havainto pintaveden lämpötilasta viimeisen 7 vuorokauden ajalta.';
+						} else if ( ot == 'alg' ) {
+							tooltip = 'Tämä on tuorein havainto sinilevätilanteesta viimeisen 7 vuorokauden ajalta.';
+						} else if ( ot == 'ice' ) {
+							tooltip = 'Tämä on tuorein havainto jäätilanteesta viimeisen 14 vuorokauden ajalta.';
+						} else if ( ot == 'level' ) {
+							tooltip = 'Tämä on tuorein havainto vedenpinnan korkeudesta viimeisen 7 vuorokauden ajalta.';
+							if ( jw.wbody[ wb ][ ot ].type == 'inreltomwl' ) { tooltip += ' Vedenkorkeus on ilmoitettu suhteessa vesistön koko vuoden keskivedenkorkeuteen.'; }
+							else { tooltip += ' Vedenkorkeus on ilmoitettu suhteessa ajankohdan keskimääräiseen vedenkorkeuteen vuosina 1991-2020.'; }
+						} else if ( ot == 'secchi' ) {
+							tooltip = 'Tämä on tuorein havainto näkösyvyydestä viimeisen kuukauden ajalta.';
+						}
+					}
+					out += '<button style="padding: 0 0.25em; font-size: 14px; margin-bottom: 3px;" type="button" class="btn btn-secondary btn-info" data-toggle="tooltip" data-placement="top" data-trigger="click" title="' + tooltip + '">';
+					if ( shownames ) {
+						out += wb + ' ' + jw.wbody[ wb ][ ot ].newest.inRelationToToday().replace( 'päivää', 'vrk' ).toLowerCase();
+					} else {
+						out += jw.wbody[ wb ][ ot ].newest.inRelationToToday().replace( 'päivää', 'vrk' );
+					}
+					out += '</button>';
+					out += '</div>';
+					if ( ot == 'temp' ) {
+						var tempcolor = [ 'var( --syke-blue)', 'var( --syke-yellow)', 'var( --syke-red)' ];
+						var tempval = Math.round( jw.wbody[ wb ][ ot ].mean );
+						var tempcat = Math.min( 2, Math.floor( 3 * tempval / 30 ) );
+						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: none;">';
+						out += '<div  style="font-size: 44px; color: ' +  tempcolor[ tempcat ] + '">+' + Math.round( jw.wbody[ wb ][ ot ].mean ) + '&deg;</div>';
+						out += '</div>';
+						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
+						out += '<span class="h6" style="margin: 0;">Pintaveden<br />lämpötila</span>';
+						out += '</div>';
+					} else if ( ot == 'alg' ) {
+				        var algmean = Math.round( jw.wbody[ wb ][ ot ].mean );
+						var algtxt = [ 'Ei&nbsp;sinilevää', 'Hieman<br />sinilevää', 'Runsaasti<br />sinilevää', 'Erit. runsaasti<br />sinilevää' ];
+						var algcolor = [ '#308fb3', '#8db335', '#f1cb00', '#ce0000' ];
+						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; font-size: 44px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: ' + algcolor[ algmean ] + ';">';
+						out += '</div>';
+						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
+						out += '<span class="h6" style="margin: 0;">' + algtxt[ algmean ] + '</span>';
+						out += '</div>';
+					} else if ( ot == 'ice' ) {
+	                	icecatmean = Math.round( jw.wbody[ wb ][ ot ].catmean );
+	                	icetxt = [ 'Ei jäätä', 'Osittain jäässä', 'Yhtenäinen jääpeite' ];
+						iceautumnbgcolor = [ '#64c1cb', '#64c1cb', '#fff' ];
+						icespringbgcolor = [ '#64c1cb', '#fff', '#fff' ];
+						iceautumnbrcolor = [ '#64c1cb', '#fff', '#fff' ];
+						icespringbrcolor = [ '#64c1cb', '#64c1cb', '#fff' ];
+						if ( now.getMonth() > 2 && now.getMonth() < 7 ) {
+							bgcolor = icespringbgcolor[ icecatmean ];
+							brcolor = icespringbrcolor[ icecatmean ];
+						} else {
+							bgcolor = iceautumnbgcolor[ icecatmean ];
+							brcolor = iceautumnbrcolor[ icecatmean ];
+						}
-  //  var page = encodeURI( '<!--{$page|default:x|escape:'html'}-->' );
+						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; border: 10px solid ' + brcolor + '; background-color: ' + bgcolor + ';">';
-	out = '';
+						if ( icecatmean == 2 ) {
-    	out += '<div class="row Xalign-items-center">';
+							out += '<div  style="font-size: 36px;">' + Math.round( jw.wbody[ wb ][ 'ice' ].mean ) + '</div>';
-	out += '<div class="col col-12 text-left">';
+							out += '<div style="font-size: 24px; margin-top: -20px;">cm</div>';
-	out += '<h2 class="h5">Sinilevää</h2>';
+						}
-	out += '<div style="width: 150px; height: 150px; border-radius: 50%; backround-color: var(--syke-lightred);"></div>';
-	out += '</div>';
+						out += '</div>';
-	out += '</div>';
+						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
+						out += '<span class="h6" style="margin: 0;">' + icetxt[ icecatmean ] + '</span>';
+						out += '</div>';
+					} else if ( ot == 'secchi' ) {
+						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: none;">';
+						out += '<div  style="font-size: 36px;">' + ( Math.round( jw.wbody[ wb ][ ot ].mean * 10 ) / 10 ).toFixed(1).toString().replace( '.', ',' ) + '</div>';
+						out += '<div style="font-size: 24px; margin-top: -20px;">m</div>';
+						out += '</div>';
+						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
+						out += '<span class="h6" style="margin: 0;">' + 'Näkösyvyys' + '</span>';
+						out += '</div>';
+					} else if ( ot == 'level' ) {
+						var leveltxt = { 'inreltomwl': 'Keskiveden-<br />korkeudesta', 'inreltodateavg': 'Ajankohdan<br />keskim.<br />vedenkorkeudesta' };
+						var levelcolor = [ '#308fb3', '#8db335', '#f1cb00', '#ce0000' ];
+						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; Xbackground-color: var( --syke-lightblue); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 80%); ">';
+						out += '<div  style="font-size: 36px;">' + jw.wbody[ wb ][ ot ].mean.toLocaleString( 'fi-FI', { signDisplay: 'always' } ) + '</div>';
+						out += '<div style="font-size: 24px; margin-top: -20px;">cm</div>';
+						out += '</div>';
+						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
+						out += '<span class="h6" style="margin: 0;">Veden-<br />korkeus</span>';
+						out += '</div>';
+					}
-	jQuery( '#sub-content-header-container' ).append( out );
+					out += '</div>';
+				}
+			}
+			out += '</div>';
+		}
+		out += '</div>';
+		jQuery( '#sub-content-header-container' ).append( out );
+    		jQuery( '[data-toggle="tooltip"]' ).tooltip( { 'trigger': 'click' } );
+    		jQuery( '.jwcurobsheader' ).fadeIn();
+    		jQuery( '[data-toggle="tooltip"]' ).on( 'show.bs.tooltip', function() {
+		    // Only one tooltip should ever be open at a time
+		    jQuery( '[data-toggle="tooltip"]' ).not( this ).tooltip( 'hide' );
+		});
+	}
 }
 </script></includeonly>

Widget:AddToHeaderLakeX

Nykyinen versio 25. marraskuuta 2025 kello 10.25