<?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 red_graph1 = 0;
    	var ir_graph1 = 0;
    	var green_graph1 = 0;

    	var red_graph2 = 0;
    	var ir_graph2 = 0;
    	var green_graph2 = 0;
    	
    	var spo2 = 0;
    	var spo2_conf = 0;
    	var hr =0;
    	var hr_conf = 0;
    	
    	var rr =0;
    	var rr_conf = 0;
    	
    	var acc = 0;

        var times = [];
        var g_led = [];
        var ir_led = [];
    	
    	var offset = 0;

		var cubic = function(params,x) {
			  return  params[0]*x*x + params[1]*x + params[2];
			};
			var objective = function(params) {
				  var total = 0.0;
				  for(var i=0; i < g_led.length/2; ++i) {
				    var resultThisDatum = cubic(params, times[ i ]);
				    var delta = resultThisDatum - g_led[ i ];
				    total += (delta*delta);
				  }
				  return total;
			};

			var initial = [1,1,1];

			var linear = function(params, x) {
			    return params[0]*x*x + params[1]*x + params[2];
			};
    	function createNewGraph( data ) {
        	data = data["result"];
        	var last_f = 0;

        	
			red_graph1.clears();
			ir_graph1.clears();
			green_graph1.clears();
			
			ir_graph2.clears();
			red_graph2.clears();
			green_graph2.clears();
		
			var ff = 0;
			var offset = 0;
			data = data.reverse();
			var time_arr = [];
			var coeficient_c = {};

			g_led = [];
			times = [];




			
			for( var x = 0; x < data.length-1; x++) {



				for( var y = 0; y < data[x][1].length; y++) {
					times.push( offset );
					g_led.push( data[x][1][ y ] );
					ir_led.push( data[x][2][ y ] );
					green_graph1.pushData( (offset)+data[0][0]*1000,data[x][1][ y ] );
					ir_graph1.pushData( (offset)+data[0][0]*1000,data[x][2][ y ] );
					red_graph1.pushData( (offset)+data[0][0]*1000,data[x][3][ y ] );
					
					green_graph2.pushData( (offset)+data[0][0]*1000,data[x][4][ y ] );
					ir_graph2.pushData( (offset)+data[0][0]*1000,data[x][5][ y ] );
					red_graph2.pushData( (offset)+data[0][0]*1000,data[x][6][ y ] );
					
					offset+=1;
				
				}
						
			}

			var minimiser = numeric.uncmin(objective,initial);

			
			console.log("minimiser:");
			for(var j=0; j<minimiser.solution.length; j++) {
			  console.log(minimiser.solution[j]);
			}
			console.log("initial:");
			
			for( var x = 0; x < g_led.length; x++) {
				var l  =   ( cubic(minimiser.solution, times[ x ]) );	
				//green_graph1.pushData( times[x]+data[0][0]*1000,g_led[ x ] - l );
				//ir_graph1.pushData(  times[x]+data[0][0]*1000,ir_led[x] - l );
			}

			
			red_graph1.displayData();
			ir_graph1.displayData();
			green_graph1.displayData();

			red_graph2.displayData();
			ir_graph2.displayData();
			green_graph2.displayData();
		
			
    	}
    	function createNewGraph1( data ) {
        	data = data["result"];
        	var last_f = 0;

        	
        	spo2.clears();
        	spo2_conf.clears();
			
			hr.clears();
			hr_conf.clears();

			acc.clears();
			rr.clears();
			rr_conf.clears();
		
			
			var ff = 0;
			var offset = 0;
			data = data.reverse();
			var time_arr = [];
			var coeficient_c = {};

			for( var x = 0; x < data.length-1; x++) {
				for( var y = 0; y < 2; y++) {
					
					spo2.pushData( (offset)+data[0][4]*1000,data[x][0][ y ]/10 );
					spo2_conf.pushData( (offset)+data[0][4]*1000,data[x][1][ y ] );
					
					hr.pushData( (offset)+data[0][4]*1000,data[x][2][ y ] );
					hr_conf.pushData( (offset)+data[0][4]*1000,data[x][3][ y ] );
					
					rr.pushData( (offset)+data[0][4]*1000,data[x][4][ y ] );
					rr_conf.pushData( (offset)+data[0][4]*1000,data[x][5][ y ] );
					
					acc.pushData( (offset)+data[0][4]*1000,data[x][6][ y ] );
					
					
					offset+=1;
				}
						
			}
			
			spo2.displayData();
			spo2_conf.displayData();
			hr.displayData();
			hr_conf.displayData();
			acc.displayData();
			
			rr.displayData();
			rr_conf.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 time, g_led, ir_led, r_led, g_led_1, ir_led_1, r_led_1, unique_data  from public.\"Measurment_coinv2\" Where coin_id = " + dev_id + " and time > (Select MAX( time ) from public.\"Measurment_coinv2\" Where coin_id = " + dev_id + " ) - 20 ORDER BY time DESC  LIMIT 1000" } }, createNewGraph ); 

		}
		function ref1() {
			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 spo2, spo2_conf, \"heartRate\", hr_conf, time, rr, rr_conf, acc  from public.\"Measurment_coinv2_aux\" Where coin_id = " + dev_id + " and time > (Select MAX( time ) from public.\"Measurment_coinv2_aux\" Where coin_id = " + dev_id + " ) - 20 ORDER BY time DESC  LIMIT 1000" } }, createNewGraph1 ); 

		}
				
		function start() {

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

			global_socket_wrapper.init();
			setInterval( ref1, 3000 );
			ref1();
			setInterval( ref, 3000 );
			ref();
	    	green_graph1 = new Graph( "graph_container", "ADC raw value" );
	    	red_graph1 = new Graph( "graph_container1", "ADC raw value" );
	    	ir_graph1 = new Graph( "graph_container2", "ADC raw value" );
	    	
	    	green_graph2 = new Graph( "graph_container3", "ADC raw value" );
	    	ir_graph2 = new Graph( "graph_container4", "ADC raw value" );
	    	red_graph2 = new Graph( "graph_container5", "ADC raw value" );
	    
	    	spo2 = new Graph( "graph_container6", "%*10" );
	    	spo2_conf = new Graph( "graph_container7", "%" );
	    	hr = new Graph( "graph_container8", "Beats/m*10" );
	    	hr_conf = new Graph( "graph_container9", "%" );
	    	
	    	rr = new Graph( "graph_container10", "ms*10" );
	    	rr_conf = new Graph( "graph_container11", "%" );
	    	
	    	acc = new Graph( "graph_container12", "%" );
	    	
		}


	
</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">Green Led PD1</h4>
                <div style="width: 100%;height: 150px;" 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">IR Led PD1</h4>
                <div style="width: 100%;height: 150px;" 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">Red Led PD1</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container2" 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">Green Led PD2</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container3" 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 PD2</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container4" 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 PD2</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container5" 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">Spo2</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container6" 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">Spo2 confidence</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container7" 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">HR</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container8" 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">HR confidence</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container9" 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">RR</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container10" 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">RR confidence</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container11" 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">Acc</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container12" 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">Skin contact</h4>
                <div style="width: 100%;height: 150px;" class="visavail" id="graph_container13" class="chartjs-render-monitor">
    				
    				
    			</div>
			
              </div>
              <!-- end content-->
            </div>
            <!--  end card  -->
          </div>
          <!-- end col-md-12 -->
        </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>
