<?php
	//reload page every 5 sec
	//$url=$_SERVER['REQUEST_URI'];
	//header("Refresh: 5; URL=$url"); 

		//$date= new DateTime('NOW');
		$date= date('Y-m-d');
		//echo $date;
		
		$filename = "/volume1/web/Logger/".$date.".txt";
		//$filename = "q:/website/2012-08-12.txt";
		//echo $filename;

if (file_exists($filename)) {
	$fileExists = true;
}
else {
	//echo "hier";
	//$date -> modify('-1 day');
	$date = date('Y-m-d', strtotime($date . ' -1 day'));
	//echo $date;
	$filename = "/volume1/web/Logger/".$date.".txt";
	//echo $filename;
	if (file_exists($filename)) {
		$fileExists = true;
		}
	else {
	echo "The file $filename does not exist";
	$fileExists = false;
	}
}

if ($fileExists == true)
{
	$fp = fopen($filename ,'r');
	$FirstLine = fgets($fp);
	//echo $FirstLine;
	fseek($fp, -1, SEEK_END); 
	$pos = ftell($fp);
	$LastLine = "";
	// Loop backword util "\n" is found twice.
	$Line = 2;
	while($Line > 0)
		{
		while((($C = fgetc($fp)) != "\n") && ($pos > 0)) 		{
    			$LastLine = $C.$LastLine;
    			fseek($fp, $pos--);
		}
		$pos--;
		$Line --;
	}
	fclose($fp);
	//echo $LastLine;
	$FirstLineArray = explode("\t", $FirstLine);
	$LastLineArray = explode("\t", $LastLine);

	//var_dump($FirstLineArray);
	//var_dump($LastLineArray);
	$StartKwH = (double)$FirstLineArray[3] / 2000;
	$StartLast = (double)$LastLineArray[3] / 2000; 

	//echo $StartKwH;
	//echo $StartLast;

	$KwHProduced = $StartLast - $StartKwH;
	//echo $KwHProduced;
	$Temperature = (double)$LastLineArray[4] /100; 
	//echo $Temperature;
	$Power = (int)$LastLineArray[2];
	//echo $Power ;
	$Time = $LastLineArray[0];
	//echo $Time;
	$Date = $FirstLineArray[1];
	//echo $Date;
}
else
{
	$StartKwH = 0;
	$StartLast = 0;
	$KwHProduced = 0;
	$Temperature = 0; 
	$Power = 0;
	$Time = 0;
	$Date = 0;
}
if (file_exists("/volume1/web/Log.txt")) {
	$fileExists2 = true;
}

if ($fileExists2 == true)
{
	$fp2 = fopen("/volume1/web/Log.txt" ,'r');
	$FirstLine2 = fgets($fp2);
	fseek($fp2, -1, SEEK_END); 
	$pos2 = ftell($fp2);
	$LastLine2 = "";
	// Loop backword util "\n" is found twice.
	$Line2 = 2;
	while($Line2 > 0)
		{
		while((($C2 = fgetc($fp2)) != "\n") && ($pos2 > 0)) 		{
    			$LastLine2 = $C2.$LastLine2;
    			fseek($fp2, $pos2--);
		}
		$pos2--;
		$Line2 --;
	}
	fclose($fp2);
	//echo $LastLine;
	$FirstLineArray2 = explode("\t", $FirstLine2);
	$LastLineArray2 = explode("\t", $LastLine2);

	$Log = $LastLineArray2[2];
	$DatumLog = $LastLineArray2[1];
	$TijdLog = $LastLineArray2[0];

}
else
{
	$Log = "None";
}

?>

<!DOCTYPE HTML>
<html>
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Logger website</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
        <style type="text/css">
		${demo.css}
        </style>
        <script type="text/javascript">
        
		//maak van script datum de databse datum
    	function ConvertDateToDatabase(Date) 
		{
			var res = Date.split("-");
        	var DatabaseDay = res[2];
        	var DatabaseMonth = res[1];
        	var DatabaseYear = res[0].slice(2,4);
        
        	return DatabaseDay+DatabaseMonth+DatabaseYear;
		}
		
        $(function () {

		Highcharts.error = function (code) {
		// See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
		//for error id's
		Highcharts.charts[0].renderer
			.text('Chart error ' + code)
			.attr({
				fill: 'red',
				zIndex: 20
			})
			.add()
			.align({
				align: 'center',
				verticalAlign: 'middle'
			}, null, 'plotBox');
		};
	
		//welke tijd zone zit ik
		var x = new Date();
		var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
		//console.log(currentTimeZoneOffsetInHours);
		
		var OldData = false;
		        
		//welke dag is het vandaag
		var clickedDay = new Date().toISOString().slice(0, 10);
		var Livechart;
        console.log(clickedDay);
        //2020-02-06
		clickedDay = ConvertDateToDatabase(clickedDay);
		var ToDay = clickedDay;
        console.log(clickedDay);
        //060220
		
		//dag plot	
		var options = {
			global: {
				//useUTC: false
				//timezoneOffset: currentTimeZoneOffsetInHours
	        },
	        chart: {
				renderTo: 'Live',
				events: {
	                load: function () {
	                    // set up the updating of the chart each second
	                    var series = this.series[0];
	                    var series1 = this.series[1];
	                    var series2 = this.series[2];
	                    var x = 0,y = 0, z = 0;
	                    var NewData = false;
	                    setInterval(function () {
	                    if(OldData == false)
						{
							//get data from database
							$.getJSON("Live_power_update.php", function(json) {
								if(x != json[3])
								{
									x = json[3];
									y = json[0];
									z = json[1];
									c = json[2];
									NewData = true;
								}
								else
								{
									NewData = false;	
								}
							});
							
							//int temp1 = Integer.parseInt(x);
							//int temp2 = Integer.parseInt(y);
							console.log ("Live power update:");
							console.log (x,y,z,NewData);
							//console.log (temp1,temp2);
							var xoffset = x +1000*60*60*currentTimeZoneOffsetInHours* -1;
							if(NewData == true)
							{
		                    	series.addPoint([xoffset, y], true, true);
		                    	series1.addPoint([xoffset, z], true, true);
		                    	series2.addPoint([xoffset, c], true, true);
							}
							}
	                    }, 5000);
	                }
	            }
	        },
	
	        rangeSelector: {
	            buttons: [{
	                count: 1,
	                type: 'hour',
	                text: '1H'
	            }, {
	                count: 4,
	                type: 'hour',
	                text: '4H'
	            }, {
	                type: 'all',
	                text: 'All'
	            }],
	            inputEnabled: false,
	            selected: 2
	        },
	        	credits: {
		            enabled: false
		        },
	
	        title: {
	            text: 'Power output this day'
	        },
	
	        exporting: {
	            enabled: false
	        },
	
	    series: [{
	        name: 'Power',
	        yAxis: 0,
        	tooltip: {
            	valueSuffix: ' w'
        	}
	    }, {	
	        name: 'Temp',
	        yAxis: 1,
        	tooltip: {
            	valueSuffix: ' C'	
        	}
        	},{	
        		
	        name: 'kWh',
	        yAxis: 2,
        	tooltip: {
            	valueSuffix: ' kWh'	
        	}	        	
		}],
		    yAxis: [{ // Primary yAxis
		        labels: {
		            format: '{value} w',
		            style: {
		                color: Highcharts.getOptions().colors[0]
		            }
		        },
		        title: {
		            text: 'Power',
		            style: {
		                color: Highcharts.getOptions().colors[0]
		            }
		        },
		        opposite: true

    		}, { // Secondary yAxis
		        gridLineWidth: 0,
		        title: {
		            text: 'Temperature',
		            style: {
		               color: Highcharts.getOptions().colors[1]
		            }
		        },
		        labels: {
		            format: '{value} C',
		            style: {
		                color: Highcharts.getOptions().colors[1]
		            }
		        },
		        opposite: true
    		},{ // Secondary yAxis
		        gridLineWidth: 0,
		        title: {
		            text: 'kWh',
		            style: {
		                color: Highcharts.getOptions().colors[2]
		            }
		        },
		        labels: {
		            format: '{value} kWh',
		            style: {
		                color: Highcharts.getOptions().colors[2]
		            }
		        },
		        opposite: true
    		}],
    		 tooltip: {
			        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			        footerFormat: '</table>',
			        shared: true,
			        useHTML: true
			    },
		    legend: {
				enabled:true
		    }
 	    };
 	    
	
		//plot dag
			
			//get data from database
			var PowerLaatsteDag = $.getJSON("Power_laatste_dag.php?Datum=" + clickedDay, function() 
			{
				
			})
			.done(function(json) 
			{
				console.log( "Day data loaded succesfull" );
				options.title.text = "Power output this day " + clickedDay;
				ProccesDatData(json,false);
			})
			.fail(function() {
			  console.log( "Day data loaded failed" );
			})	
			
			function ProccesDatData(json,DoDestroy)
			{
				
				console.log(DoDestroy);
				if(DoDestroy == true)
				{
					console.log("Destroy");
					Livechart.destroy();
				}
			
				//console.log(json);
				// put data in array
				var size = json.length ;


				console.log ("Power laatst dag:");
				console.log(json.length);

				
				var q = 0, w = 0, e = 0,r = 0;
				var time = (new Date()).getTime();
				
				//console.log (time);
				
				var data2 = [];
				var data3 = [];
				var data4 = [];
				
				
				for (i = 0; i < size; i += 1) 
				{
					q = json[i][1];
					w = json[i][0];
					e = json[i][2];
					r = json[i][3];
					//console.log(q);
					q = q + 1000*60*60*currentTimeZoneOffsetInHours* -1;
					//time = q;

					//console.log(isDST(q));
					//console.log(currentTimeZoneOffsetInHours);
					//console.log (q,w);
					data2.push([q,w]);
					data3.push([q,e]);
					data4.push([q,r]);
				}
				//console.log(data2);


				options.series[0].data = data2;				
				options.series[1].data = data3;
				options.series[2].data = data4;
				
				//maak de de grafiek aan
				Livechart = new Highcharts.stockChart(options);
			
			};
			
			//plot week en maand
			var dataDay = new Array(new Array());
			var dataMonth  = new Array(new Array());
			var dataWeek  = new Array(new Array());
			var Years = [];
			
			$.getJSON("History.php", function(json) {
		
				console.log(json);
				// put data in array
				var sizeDay = json[0].length;
				var sizeWeek= json[1].length;
				var sizeMonth= json[2].length;
				
				//console.log(sizeDay);
				//console.log(sizeWeek);
				//console.log(sizeMonth);
				var a = 0;
				
				var time = (new Date()).getTime();
				var lastYear = 0;
				//console.log (time);
				
				for(p = 0; p < sizeMonth; p += 1)
				{
					var year = json[2][p][2]
					if(lastYear != year)
					{
						Years.push(year);
						lastYear = year;
						
					}
				}
				//console.log(Years);	
				//console.log(dataMonth);
				//maanden invullen?
				for(o = 0 ; o < 12; o += 1)
				{
					for(u = 0 ; u < Years.length ; u += 1)
					{
						//console.log(dataMonth);
						//console.log("dataMonth.length = " + dataMonth.length);
						//console.log("Years.length = " + Years.length);
						
						if(Years.length > dataMonth.length)
						{
							//console.log("add array");
							dataMonth.push(new Array());
						}
						//console.log(dataMonth);
						//console.log(dataMonth.length);
						dataMonth[u][o] = 0;
						
						for (i = 0; i < sizeMonth; i += 1) 
						{
							//console.log("maand2 = " + i);
							//console.log("waarde json pos 0 = " + json[2][i][0]);
							
							if(json[2][i][0] - 1 == o && json[2][i][2] == Years[u])
							{
	
							a = json[2][i][1];
							//console.log (a);
							dataMonth[u][o] = a;
							}
						}
					}
				}
				
				for(o = 0 ; o < 52; o += 1)
				{
					for(u = 0 ; u < Years.length ; u += 1)
					{
						if(Years.length >dataWeek.length)
						{
							dataWeek.push(new Array());
						}
						dataWeek[u][o] = 0;
						//console.log(o);
						for (i = 0; i < sizeWeek; i += 1) 
						{
							//console.log(i);
							//console.log(json[2][i][0]);
							
							if(json[1][i][0] - 1 == o && json[1][i][2] == Years[u])
							{
	
							a = json[1][i][1];
							//console.log (a);
							dataWeek[u][o] = a;
							}
						}
					}
				}
				
				//console.log(Years.length);
				console.log(dataMonth[0]);
				console.log(dataWeek[0]);
				//chart2.series[0].data = ;
				
				for (q = 0 ; q < Years.length ; q += 1)
				{
					//console.log("data");
					chart3.addSeries({ 
						data: dataMonth[q],
						name: Years[q],
						//pointWidth: 100,
						pointPadding: 0
            			//groupPadding: 0.5
						}, false);
					chart2.addSeries({ 
						data: dataWeek[q],
						name: Years[q],
						//pointWidth: 20,
						pointPadding: 0
            			//groupPadding: 0.5
						}, false);
				}
				chart2.redraw();
				chart3.redraw();
				//chart2.series[0].data = data2;	



				//console.log(dataMonth);	
				//var chart3 = new Highcharts.chart(options);
			
				//create dagen plot:
				//console.log("Dagen");
				//console.log(dataDay);
				//console.log(json[0]);
				//console.log(json[0][0][0]);
				for(p = 0; p < sizeDay; p += 1)
				{
					//dataDay[p][0] = new Date(json[0][p][0]).getTime();
					dataDay[p][0] =  Date.parse(json[0][p][0]);
					//dataDay[p][0] = json[0][p][0].replace(/-/g,"/");
					dataDay[p][1] = json[0][p][1];
					if(p < sizeDay-1)
					{
						dataDay.push(new Array());
					}
				}
				
				var clickDetected = false;
				
				//console.log(dataDay);				
				// create the chart
			    Highcharts.stockChart('Day', {
			        chart: {
			            //alignTicks: false
			        },
				    plotOptions: 
				    {
				        series: 
				        {
				            cursor: 'pointer',
				            point: 
				            {
				                events: 
				                {
				                	click: function(event) 
				                	{
						                if(clickDetected) 
						                {
						                    var clickedDay = Highcharts.dateFormat('%Y-%m-%d', this.category);
						                    console.log(clickedDay);
						                    options.title.text = "Power output day " + clickedDay;
						                    clickedDay = ConvertDateToDatabase(clickedDay);
						                    //http://jsfiddle.net/d_paul/mo7ef7ey/

						                    console.log(clickedDay);
											//get data from database
											var PowerLaatsteDag = $.getJSON("Power_laatste_dag.php?Datum=" + clickedDay, function() 
											{
												
											})
											.done(function(json) 
											{
												console.log( "Old day data loaded succesfull" );
												
												ProccesDatData(json,true);
											})
											.fail(function() {
											  console.log( "Old dDay data loaded failed" );
											})	
											
						                    //window.open("Power_laatste_dag.php?Datum=" + clickedDay);
						                    //if(clickedDay == ToDay)
						                    //{
						                    //	OldData = false;
						                    //}
						                    //else
						                    //{
						                    	OldData = true;
						                    //}
						                    clickDetected = false;
						                }
						                else 
						                {
						                    clickDetected = true;
						                    setTimeout(function() 
						                    {
						                        clickDetected = false;
						                    }, 500); 
						                }
						            }
				                }
				            }
				                
				        }        
				    },		
			        title: {
			            text: 'Days plot'
			        },
					yAxis: {
			        min: 0,
			    	},
				    xAxis: {
				    	startOfWeek: 0 ,
				        type: 'datetime',
				        dateTimeLabelFormats: {
				            day: '%e of %b'
				        },
				         units: [[
						    'day',
						    [1],
						    'month',
						    [1],
						]]
				    },
			    	rangeSelector: {
			    		selected: 0,
			            buttons: [{
			                count: 1,
			                type: 'week',
			                text: 'W'
			            }, {
			                count: 2,
			                type: 'month',
			                text: 'M'
			            }, {
			            	count: 3,
			                type: 'all',
			                text: 'All'
			            }],
			    	},
					tooltip: {
				        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
				            '<td style="padding:0"><b>{point.y:.1f} kWh</b></td></tr>',
				        footerFormat: '</table>',
				        shared: true,
				        useHTML: true
			    	},
			    	data: {
						parseDate: Date.parse
					},
			        series: [{
			            type: 'column',
			            name: 'Day production',
			            data: dataDay,
			            dateFormat: 'YYYY/mm/dd',
						pointInterval: 3 * 24 * 3600 * 1000,
			            dataGrouping: {
			            	groupPixelWidth: 15,
							enabled: true,
			                units: [[
			                    'week', // unit name
			                    [1] // allowed multiples
			                ], [
			                    'month',
			                    [1]
			                ]]
			            }
			        },
			        {
			        	type: 'spline',
			            name: 'Day production',
			            data: dataDay,
			            dateFormat: 'YYYY/mm/dd',
						pointInterval: 3 * 24 * 3600 * 1000,
			            dataGrouping: {
			            	//groupPixelWidth: 20,
			            	approximation: 'sum',
							enabled: true,
			                units: [[
			                    'week', // unit name
			                    [1] // allowed multiples
			                ], [
			                    'month',
			                    [1]
			                ]]
			            },
			            tooltip :false
			        }]
			    });


				//console.log(dataMonth);	
				//var chart3 = new Highcharts.chart(options);
			});
			
			// create the week chart
			var chart2 = Highcharts.chart('Week', {
			    chart: {
			        type: 'column'
			    },
			    title: {
			        text: 'Weekly production'
			    },
			    xAxis: [{
			   			 categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18',
			   			 '19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39',
			   			 '40','41','42','43','44','45','46','47','48','49','50','51','52'],
			   			 crosshair: true
			    }],
			    yAxis: {
			        min: 0,
			        title: {
			            text: 'Production (kWh)'
			        }
			    },
			    credits: {
		            enabled: false
		        },
			    tooltip: {
			        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
			            '<td style="padding:0"><b>{point.y:.1f} kWh</b></td></tr>',
			        footerFormat: '</table>',
			        shared: true,
			        useHTML: true
			    },
			    plotOptions: {
			        column: {
			            pointPadding: 0.2,
			            borderWidth: 0
			            //grouping: false
			        }
			    },
			    series: []
				});
			
						// create the week chart
			var chart3 = Highcharts.chart('Month', {
			    chart: {
			        type: 'column'
			    },
			    title: {
			        text: 'Monthly production'
			    },
			    xAxis: [{
			        categories: [
			            'Jan',
			            'Feb',
			            'Mar',
			            'Apr',
			            'May',
			            'Jun',
			            'Jul',
			            'Aug',
			            'Sep',
			            'Oct',
			            'Nov',
			            'Dec'
			        ],
			        crosshair: true
			    }],
			    yAxis: {
			        min: 0,
			        title: {
			            text: 'Production (kWh)'
			        }
			    },
			    credits: {
		            enabled: false
		        },
			    tooltip: {
			        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
			            '<td style="padding:0"><b>{point.y:.1f} kWh</b></td></tr>',
			        footerFormat: '</table>',
			        shared: true,
			        useHTML: true
			    },
			    plotOptions: {
			        column: {
			            pointPadding: 0.2,
			            borderWidth: 0
			            //grouping: false
			        }
			    },
			    series: []
			});
        });		
		
		</script>
		<script src="https://code.highcharts.com/stock/highstock.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
    </head>
    <body>
	
    
 	<div id="Live" style="height: 400px; min-width: 310px"></div>
 	<div id="Day" style="height: 500px"></div>
 	<div id="Week" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  	<div id="Month" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  	<p>
	Datum = <?php echo $Date ?><br>
	Tijd = <?php echo $Time ?><br>
	<br>
	Actueel:<br>
	Power = <?php echo $Power ?> W<br>
	Kwh geproduceerd vandaag = <?php echo $KwHProduced ?> kWh<br>
	Temperatuur = <?php echo $Temperature?> C<br>
	<br>
	Tijd = <?php echo $TijdLog?> 
	Datum = <?php echo $DatumLog?> 
	Laatste log = <?php echo $Log?><br>

    </body>
</html>