<?php

$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/components/check.php";
include_once($path);

?>
<!--
 =========================================================
* Black Dashboard PRO - v1.1.1
=========================================================

* Product Page: https://themes.getbootstrap.com/product/black-dashboard-pro-premium-bootstrap-4-admin/
* Copyright 2019 Creative Tim (https://www.creative-tim.com)

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->


<!DOCTYPE html>
<html lang="en">
<head>
			
      	<?php 
		
		$path = $_SERVER['DOCUMENT_ROOT'];
		$path .= "/components/header.php";
		include_once($path);
		
		?>
<style>
.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}
.scroll-pane p
{
    margin: 5px 0;
}

 .navbar-collapse::-webkit-scrollbar {
    width: 20px;
}
.navbar-collapse::-webkit-scrollbar-track {
    background-color: lightgray;
}
.navbar-collapse::-webkit-scrollbar-thumb {
    background-color: lightblue;
}
</style>

<script>
    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart( name, interval_start, interval_length ) {
		return;
		  $( "#example3.1" ).empty();
		  var datas = [];

		  datas.append( ['Activity', 'Start Time', 'End Time'] );

		  for( var x = 0; x <arr.length; x++ ) {
		      
		        var l = [name,
		         			new Date(interval_start),
		         			new Date(interval_start + interval_length)];
			    datas.append( l );
		  }

	    }
    	
    	var temp_graph = 0;
    	var bat_graph1 = 0;
    	var acc_graph1 = 0;
    	var user_graph1 = 0;
    	var rot_graph1 = 0;
    	var ir_graph1 = 0;
    	var n_pcket = 0;
    	var missing_pack = 0;
    	var snr_graph1 = [];
    	var files_for_download = 0;


		var temp_aux = 0;
		var temp_core = 0;

		var charger_graph = 0;
		var power_c_graph = 0;
		
    	
    	var template_graph = '<div class="row mt-5"><div class="col-md-12"><div class="card"><div class="card-body"><div class="toolbar"></div><h4 class="text-left">{TITLE}</h4><div style="width: 100%;height: 600px;" class="visavail" id="{GRAPH_ID}" class="chartjs-render-monitor"></div></div></div></div></div>';
		
    	function createNewGraph( data ) {
        	data =  data["result"];
        	datas1 = [];
        	var last_f = 0;
			var ff = 0;
        	
        	data.forEach(function(rowArray) {
				if ( last_f != rowArray[ 3 ] ) {
        			last_f = rowArray[ 3 ];
            		datas1.push( rowArray );
            		
				}else{
					
					
 				}
				if (ff == rowArray[ 3 ] ) {
					//console.log( "sdasdasd" );
					
				} else if ( ff - 1 != rowArray[ 3 ] ) {
					//console.log( ff + " " + rowArray[ 3 ] );
				}
				ff = rowArray[ 3 ];
        		
			});
			data = datas1;
			files_for_download = datas1;
        	
        	temp_graph.clears();
        	bat_graph1.clears();
        	acc_graph1.clears();
        	rot_graph1.clears();
        	ir_graph1.clears();
        	red_graph1.clears();
		
			var ff = 0;
			var offset = 0;
			data = data.reverse();
			var time_arr = [];
			var coeficient_c = {};
			for( var x = 0; x < data.length; x++) {
				var time = data[ x ][2]*1000;
				time_arr.push( data[ x ][ 2 ]*1000 );
				if ( time != ff ) {
					ff = time;
					offset = 0;
    				coeficient_c[ data[ x ][ 2 ]*1000 ] = 1000/data[x][0].length;
				}else{
					offset++;
    				coeficient_c[ data[ x ][ 2 ]*1000 ] = 1000/(data[x][0].length*( offset+1 ));
				}
			}
			ff = 0;

			var bts_count = -1;
			
			var bts_counted = [ ];
			var bts_vals = [ ];
			var old_unique_id = -1;

			var ggh = 1;
			for( var x = 0; x < data.length-1; x++) {
				var time = data[ x ][2]*1000;
				if ( time != ff ) {
					ff = time;
					offset = 0;
				}else{
					offset++;
				}
				if ( x != 0 )
					missing_pack.pushData( time, data[ x ][3]-old_unique_id,  data[ x ][3] - old_unique_id );
				
				if ( data[x][3] == old_unique_id )
					ggh++;
				
				if ( old_unique_id != data[x][3] ) { 
					n_pcket.pushData( time, ggh,  ggh );
					ggh = 1;
				}
					
				if ( old_unique_id != -1 ) { 
					
					//if ( parseInt( data[ x ][ 3 ] ) > (old_unique_id+100) ) {
					//	continue;
						
					//}else{
					//	old_unique_id = data[ x ][ 3 ];
					//	
					//}
					old_unique_id = data[ x ][ 3 ];
					
				}else{
					old_unique_id = data[ x ][ 3 ];
				}

				
				
				if ( data[ x ][4] != 0 && (data[ x ][4]/100) < 45 ) 
					temp_graph.pushData( time, data[ x ][4]/100,  data[ x ][3] );
				
				bat_graph1.pushData( time, data[ x ][7],  data[ x ][3] );
				acc_graph1.pushData( time, data[ x ][6] & 0b00111111,  data[ x ][3] );
				rot_graph1.pushData( time, data[ x ][5],  data[ x ][3] );

				power_c_graph.pushData( time, ( data[ x ][6]& 0b00000000 ) >> 7,  data[ x ][3] );
				charger_graph.pushData( time, ( data[ x ][6]& 0b10000000 ) >> 6,  data[ x ][3] );
				
				
					if ( bts_counted.includes( data[ x ][9] ) == 0 ) {
						bts_vals[ data[ x ][9] ] = [];
						bts_count++;
						bts_counted.push( data[ x ][9] );
					}
					
				if ( data[ x ][8] != 0 ) { 
					bts_vals[ data[ x ][9] ].push( [ time, data[ x ][8] ] );
				}
				
				for( var y = 0; y < data[x][0].length; y++) {

						
					ir_graph1.pushData( (time+(y*coeficient_c[ time ]) + (offset*data[x][0].length*coeficient_c[ time ])), data[ x ][0][ y ] );
					red_graph1.pushData( (time+(y*coeficient_c[ time ])+ (offset*data[x][0].length*coeficient_c[ time ])), data[ x ][1][ y ] );
 					
				}
						
			}

			
			temp_graph.displayData();
			bat_graph1.displayData();
			acc_graph1.displayData();
			rot_graph1.displayData();
			ir_graph1.displayData();
			red_graph1.displayData();
			user_graph1.displayData();
			missing_pack.displayData();
			n_pcket.displayData();

			charger_graph.displayData();
			power_c_graph.displayData();
			
			$("#snr-container").empty();
			snr_graph1 = {};
			
			console.log( bts_count ); 
			for (const key in bts_vals) {
			
				var name_graph = "BTS ID: " + key;
				var id_graph = "BTS-ID- " + key;
				var template_graph_modified = template_graph.replace('{TITLE}', name_graph );
				template_graph_modified = template_graph_modified.replace('{GRAPH_ID}', id_graph );
				$("#snr-container").append( template_graph_modified );
				
				snr_graph1[ key ] =  new Graph( id_graph, name_graph );
				
				for( var xx = 0; xx < bts_vals[ key ].length; xx++ ) {
					snr_graph1[ key ].pushData( bts_vals[ key ][ xx ][0], bts_vals[ key ][ xx ][1] );
				}
				snr_graph1[ key].displayData();
			}
			load.clear();
    	}
    	
    	function createUserTempGraph( data ) {
    		console.log( data );

        	data =  data["result"];
        	data = data.reverse();

        	for( var x = 0; x < data.length; x++ ) { 
    			user_graph1.pushData( data[ 2 ], data[ 1 ] );
        	}
        	user_graph1.displayData();
    	}
    	
		function createGraphTable( data ) {
			var dataset = [data];

			var options = {
					id_div_container: "visavail_container",
					id_div_graph: "visavail_graph",
					
					icon: {
						class_has_data: 'fas fa-fw fa-check',
						class_has_no_data: 'fas fa-fw fa-exclamation-circle'
					},
					zoom:{
						enabled:true,
					},
					responsive:{
						enabled:true,
					},
					tooltip: {
						date_plus_time: true
					},
					date_in_utc: true,
				};
				
			var chart = visavail.generate(options, dataset)
		}
		
		function liveUpdate() {

			this.handleLive = function( data ) {
				
				pushNewRow( data, RowMagCradleMain );
			}

		}
		function liveUpdate1() {

			this.handleLive = function( data ) {
			}

		}
		var datasource = 0;
		var data_table = 0;
		var global_tables = {};

		function ref() {
			var queryString = window.location.search;
			var urlParams = new URLSearchParams(queryString);
			var dev_id = urlParams.get('dev_id')
			
			var from_t = ( $("#date_tracker").val() );
			waiting_for_down = 1;


			var to_t = ( $("#date_tracker1").val() );

			var dateyDate_from = new Date(from_t);
			var dateyDate_to = new Date(to_t);
			console.log( { "task_name": "GetData", "params": {"query": "Select ir, led, time, DISTINCT( unique_data ), temp, rot, acc, bat, snr, bts_id From public.\"Measurment\" where coin_id = " + dev_id + " and time > " + (dateyDate_from.valueOf()/1000) + " and time < " + (dateyDate_to.valueOf()/1000) + " and unique_data != 0 ORDER BY time DESC, unique_data" } } );
			createNewCommands( "task", { "task_name": "GetData", "params": {"query": "Select ir, led, time, unique_data, temp, rot, acc, bat, snr, bts_id From public.\"Measurment\" where coin_id = " + dev_id + " and time > " + (dateyDate_from.valueOf()/1000) + " and time < " + (dateyDate_to.valueOf()/1000) + " and unique_data != 0 ORDER BY time DESC, unique_data" } }, createNewGraph ); 

			createNewCommands( "task", { "task_name": "GetData", "params": {"query": "Select id, val, timestamp, type, coin_id From public.\"TestCoin\" where coin_id = " + dev_id + " and timestamp > " + (dateyDate_from.valueOf()/1000) + " and timestamp < " + (dateyDate_to.valueOf()/1000) + " ORDER BY timestamp" } }, createUserTempGraph );
			 

			load.init();
		}
		
		function start() {

			var ff = new liveUpdate();
			var ff1 = new liveUpdate1();

			global_socket_wrapper.init();
			//setInterval( ref, 30000 );
			ref();
	    	temp_graph = new Graph( "graph_container", "Celsius" );
	    	bat_graph1 = new Graph( "graph_container1", "mV" );
	    	acc_graph1 = new Graph( "graph_container1_acc", "Stav" );
	    	rot_graph1 = new Graph( "graph_container1_rot", "Stav" );
	    	ir_graph1 = new Graph( "graph_container1_ir", "Raw" );
	    	red_graph1 = new Graph( "graph_container1_red", "Raw" );
	    	user_graph1 = new Graph( "graph_container_user", " C" );
	    	
	    	missing_pack = new Graph( "graph_container1_missing_p", "Raw" );
	    	n_pcket = new Graph( "graph_container1_n_p", "Raw" );

			//temp_aux = new Graph( "graph_container1_n_p", " C" );
			//temp_core = new Graph( "graph_container1_n_p", " C" );
			charger_graph = new Graph( "graph_container1_charge", "Raw" );
			power_c_graph = new Graph( "graph_container1_pwr_status", "Raw" );
			

			$(function()
			{
			    $('.scroll-pane')
			        .jScrollPane()
			        .bind(
			            'mousewheel',
			            function(e)
			            {
			                e.preventDefault();
			            }
			        );
			});
						
			
		}

		function downloadData( id ) {
			ref();
		}
		
		function downloadCSV( id ) {
			var csvContent = "data:text/csv;charset=utf-8,";

			files_for_download.forEach(function(rowArray) {
				var cc = 0;
			   
			    
		    	 var ir = rowArray[0].join(",");
		    	 ir = "[" + ir + "],";

		    	 var led = rowArray[1].join(",");
		    	 led = "[" + led + "],";

		    	 var time = rowArray[2] + ',';
		    	 var unique_data = rowArray[3] + ',';
		    	 var temp = rowArray[4] + ',';
		    	 var rot = rowArray[5] + ',';
		    	 var acc = rowArray[6] + ',';
		    	 var bat = rowArray[7];

		    	 
				
			    csvContent += ir + led + time + unique_data + temp + rot + acc + bat+ "\r\n";
			});
			var encodedUri = encodeURI(csvContent);
			
			var encodedUri = encodeURI(csvContent);
			var link = document.createElement("a");
			link.setAttribute("href", encodedUri);
			link.setAttribute("download", "" + "data_<?php echo $_GET["dev_id"]  ?>" + ".csv");
			document.body.appendChild(link); // Required for FF

			link.click(); // This will download the data file named "my_data.csv".
		}
		
		function downloadMatrix( id ) {
			var csvContent = "data:text/csv;charset=utf-8,[";

			files_for_download.forEach(function(rowArray) {
				var cc = 0;
			   
			    
		    	 var ir = rowArray[0].join(",");
				
			    csvContent += "," + ir;
			});

			csvContent += "]";
			
			var encodedUri = encodeURI(csvContent);
			
			var encodedUri = encodeURI(csvContent);
			var link = document.createElement("a");
			link.setAttribute("href", encodedUri);
			link.setAttribute("download", "" + "data_<?php echo $_GET["dev_id"]  ?>" + ".csv");
			document.body.appendChild(link); // Required for FF

			link.click(); // This will download the data file named "my_data.csv".
		}			
</script>		
</head>

<body class="sidebar-mini" onload="start()" style="overflow:hidden;" >
  <div class="wrapper">
    <div class="navbar-minimize-fixed">
      <button class="minimize-sidebar btn btn-link btn-just-icon">
        <i class="tim-icons icon-align-center visible-on-sidebar-regular text-muted"></i>
        <i class="tim-icons icon-bullet-list-67 visible-on-sidebar-mini text-muted"></i>
      </button>
    </div>
      	<?php 
		
		$path = $_SERVER['DOCUMENT_ROOT'];
		$path .= "/components/sidebar.php";
		include_once($path);
		
		?>
    <div class="main-panel scroll-pane" style="overflow: scroll !important;" >
      <!-- Navbar -->
		       	<?php 
		
		$path = $_SERVER['DOCUMENT_ROOT'];
		$path .= "/components/plugin.php";
		include_once($path);
		
		?>
     			       	<?php 
		
		$path = $_SERVER['DOCUMENT_ROOT'];
		$path .= "/components/navbar.php";
		include_once($path);
		
		?>
      <!-- End Navbar -->
      <div style="overflow:scroll !important;" class="content">
        <div class="col-md-8 ml-auto mr-auto">
          <h4 class="text-center">Informácie o zariadeniach</h4>
          <p class="text-center">Podrobné informácia o fungovaní zariadenia najdete na stránke
            <a href="https://datatables.net/" target="_blank">dokumentácia.</a>
          </p>
        </div>
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Výber dát</h4>
                <p>Od:</p>
                <input type="text" class="form-control datetimepicker" id="date_tracker" value="10/05/2018">
                <p>Do:</p>
                <input type="text" class="form-control datetimepicker" id="date_tracker1" value="10/05/2018">
                
                <button class="btn btn-primary btn-block" onclick="downloadData(<?php echo $_GET["dev_id"];  ?>)">Nahrať data</button>
                
                <button class="btn btn-primary btn-block" onclick="downloadCSV(<?php echo $_GET["dev_id"];  ?>)">Nahrať CSV</button>
                
				
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Teplota</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>

        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Teplota užívateľská</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container_user" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>               
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Bateria</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Akcelerometer</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_acc" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Natocenie</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_rot" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Nabíjanie</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_charge" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Pripojenie na napájanie</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_pwr_status" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>                
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">IR Led</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_ir" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Red Led</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_red" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Chybajuce pakety</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_missing_p" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Pocet zachytenych packetov</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_n_p" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>                            
		<div id="snr-container" >
		</div>
        <!-- end row -->
                 <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Teplota jadra tela</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container_core" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <h4 class="text-left">Teplota auxiliera</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container_aux" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        
      </div>
      </div>
		
		<?php 
		
		$path = $_SERVER['DOCUMENT_ROOT'];
		$path .= "/components/footer.php";
		include_once($path);
		
		?>
	
	
    </div>
  </div>
  <!--   Core JS Files   -->
  		<?php 
		
		$path = $_SERVER['DOCUMENT_ROOT'];
		$path .= "/components/code_footer.php";
		include_once($path);
		
		?>
</body>

</html>
