<?php 

    //include("components/check.php");
?>
<!--
 =========================================================
* 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);

?>
<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 ir_graph = 0;
    	var ir_graph1 = 0;
    	var time_graph1 = 0;
    	var time_graph2 = 0;
    	var offset = 0;
    	function createNewGraph( data ) {
        	datas = data["ir_filt"];
        	datas3 = data["red_filt"];
        	data =  data["result"];
        	datas1 = [];
        	var last_f = 0;

			console.log( datas );
        	
			ir_graph1.clears();
			ir_graph.clears();
			time_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{
    				coeficient_c[ data[ x ][ 2 ]*1000 ] = 1000/(data[x][0].length*2);
					offset++;
				}
			}
			ff = 0;
			console.log( data );
			var old_time = 0;
			for( var x = 0; x < data.length-1; x++) {
				if ( old_time == 0 ) {
					old_time = data[x][2];
				}
				if ( data[x][2] - old_time < 0 ) {
					data[x][2] = old_time + 1;
				}


				for( var y = 0; y < data[x][0].length; y++) {

					ir_graph.pushData( (offset)+data[0][2]*1000,data[x][0][ y ] );
					ir_graph1.pushData( (offset)+data[0][2]*1000,data[x][1][ y ] );
					offset+=1;
				
				}
						
			}
			
			ir_graph1.displayData();
			ir_graph.displayData();
			if ( datas != 0 ) {
    			datas = datas.reverse();
    			time_graph1.clears();
    			for( var x = 0; x < datas.length-50; x++) {
    				time_graph1.pushData( x, datas[ x ] );
    			}
    			time_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')
			
			createNewCommands( "task", { "task_name": "GetData", "params": {"query": " Select ir, led, time, unique_data, temp, rot, acc,bat from public.\"Measurment\" Where coin_id = " + dev_id + " and time > (Select MAX( time ) from public.\"Measurment\" Where coin_id = " + dev_id + " ) - 20 ORDER BY unique_data DESC  LIMIT 1000" } }, createNewGraph ); 

		}
		
		function start() {

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

			global_socket_wrapper.init();
			setInterval( ref, 3000 );
			ref();
	    	ir_graph = new Graph( "graph_container", "ADC raw value" );
	    	ir_graph1 = new Graph( "graph_container1", "ADC raw value" );
	    	time_graph1 = new Graph( "graph_container1_time", "spo2" );
	    	time_graph2 = new Graph( "graph_container2_time", "spo2" );

			
		}

		
	
</script>		
</head>

<body class="sidebar-mini" onload="start()" >
  <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">
      <!-- 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 class="content">
        <div class="col-md-8 ml-auto mr-auto">
          <h4 class="text-center">Informácie o zariadení</h4>
          <p class="text-center">Podrobné informácie o stave a fungovaní zariadenia. Plná dokumentácia ku zariadeniu je 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">IR Led</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">Red Led</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">Filtered IR signal</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container1_time" 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">Filtered Red signal</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container2_time" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </div>
        <!-- end row -->
      </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);
    
    ?>
  <script>
    $(document).ready(function() {
      // Javascript method's body can be found in assets/assets-for-demo/js/demo.js
      //demo.initChartPageCharts();

        $datetimepicker.datetimepicker({
            icons: {
                time: "tim-icons icon-watch-time",
                date: "tim-icons icon-calendar-60",
                up: "fa fa-chevron-up",
                down: "fa fa-chevron-down",
                previous: 'tim-icons icon-minimal-left',
                next: 'tim-icons icon-minimal-right',
                today: 'fa fa-screenshot',
                clear: 'fa fa-trash',
                close: 'fa fa-remove'
              },
        	format : 'DD/MM/YYYY',
        	 date: new Date(),
        	useCurrent:true

          });
        var d = new Date();

        var month = d.getMonth()+1;
        var day = d.getDate();

        var output = (day<10 ? '0' : '') + day + '/' +
        (month<10 ? '0' : '') + month + '/' +
        d.getFullYear() ;
        
       // $("#date_tracker").datetimepicker('update', new Date());
        
       // $("#date_tracker").val(output + " 00:00");
      
    });
  </script>
</body>

</html>
