<?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>
    var addrs = "wss://rbf.nanodesign.sk:" + 18892 + "/websocket/";
    var ekg_socket = new SocketWrapper( addrs );
    var global_socket_wrapper = ekg_socket;

    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 bat_graph = 0;
    	var ekg_graph = 0;
    	var breath_graph = 0;
    	var snr_graph1 = [];
    	var files_for_download = 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 createEKGGraph( data ) {
        	data =  data;
        	datas1 = data;
        	var last_f = 0;
			var ff = 0;
        	
			data = datas1;

        	
			ekg_graph.clears();
			breath_graph.clears();
		
			var ff = 0;
			var offset = 0;
			data = data.reverse();
			var time_arr = [];
			var coeficient_c = {};
			ff = 0;
			files_for_download = data;
			var bts_count = -1;
			
			var bts_counted = [ ];
			var bts_vals = [ ];
			var old_unique_id = -1;

			var ggh = 1;
			var offset = 0;
			var time = data[ 0 ][2]*1000;
			
	    	
	    	var ekg_sig = [];
			var breath_sig = [];
			var kernel_ekg = [];
			var kernel_breath = [];
			
			var ekg_sig_filt = [];
			var breath_sig_filt = [];
			
			
			for( var x = 0; x < data.length-1; x++) {
				
				for( var y = 0; y < data[x][1].length; y++) {
					ekg_sig.push( data[x][0][ y ] );
					breath_sig.push( data[x][1][ y ] );
				}
			}
			console.log( breath_sig );
			ekg_sig_filt = math_filter_median( ekg_sig );
			breath_sig_filt = math_filter_median( breath_sig );
			
			offset = 0;
			
			for( var x = 0; x < breath_sig.length-1; x++) {
				
				ekg_graph.pushData( (offset)+data[0][2]*1000, ekg_sig_filt[ x ] );
				breath_graph.pushData( (offset)+data[0][2]*1000, breath_sig_filt[ x ] );
				
				offset += 4;
			}
			
			
			ekg_graph.displayData();
			breath_graph.displayData();
			load.clear();
    	}
        			
    	function createBatteryGraph( data ) {
    		console.log( data );
        	datas1 = data;
        	var last_f = 0;
			var ff = 0;
        	
			data = datas1;
			
			bat_graph.clears();
		
			var ff = 0;
			var offset = 0;
			data = data.reverse();
			var time_arr = [];
			var coeficient_c = {};
			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 ][1]*1000;
				
				bat_graph.pushData( time , data[ x ][0] );
						
			}

			
			bat_graph.displayData();
    	}
    	
    	function showSettings() {
    		
    	}
    	
		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);
			createNewCommands( "task", { "task_name": "GetData", "params": {"query": "Select val, timestamp From public.\"MeasurementBat\" where \"ekgId\" = " + dev_id + " and timestamp > " + (dateyDate_from.valueOf()/1000) + " and timestamp < " + (dateyDate_to.valueOf()/1000) + " ORDER BY timestamp DESC, \"packetId\"" } }, createBatteryGraph ); 
			createNewCommands( "task", { "task_name": "GetData", "params": {"query": "Select \"measEKG\", \"measBreath\", time from public.\"MeasurementEKG\" Where \"ekgId\" = " + dev_id + " and time > (Select MAX( time ) from public.\"MeasurementEKG\" Where \"ekgId\" = " + dev_id + " ) - 86400 ORDER BY \"packetId\" DESC LIMIT 20000" } }, createEKGGraph ); 


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

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

			global_socket_wrapper.init();
			//setInterval( ref, 30000 );
			ref();
	    	bat_graph = new Graph( "graph_container", "mV" );
	    	breath_graph = new Graph( "graph_container1", "uV" );
	    	ekg_graph = new Graph( "graph_container2", "uV" );

			
		}

		function downloadData( id ) {
			ref();
		}
		
		function urlB64ToUint8Array(base64String) {
		    const padding = '='.repeat((4 - base64String.length % 4) % 4);
		    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

		    const rawData = window.atob(base64);
		    const outputArray = new Uint8Array(rawData.length);

		    for (let i = 0; i < rawData.length; ++i) {
		        outputArray[i] = rawData.charCodeAt(i);
		    }

		    return outputArray;
		}
		
		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] + ',';

		    	 
				
			    csvContent += ir + led + time + "\r\n";
			});
			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".
		}
		

		var data11l
		function putEDFForDownload( data12 ) {
			console.log( typeof data11 );
			data11 = JSON.parse( data12 );
			var f = ( urlB64ToUint8Array(  data11["data"] ) );
			var saveByteArray = (function () {
			    var a = document.createElement("a");
			    document.body.appendChild(a);
			    a.style = "display: none";
			    return function (data, name) {
			        var blob = new Blob([data], {type: "octet/stream"}),
			            url = window.URL.createObjectURL(blob);
			        a.href = url;
			        a.download = name;
			        a.click();
			        window.URL.revokeObjectURL(url);
			    };
			}());
			saveByteArray(  f, "data_<?php echo $_GET['dev_id']  ?>" + ".edf" );
		}
		
		function downloadEKG( dev_id ){
			createNewCommands( "task", { "task_name": "EDFPacket", "params": {"ekg_id": dev_id } }, putEDFForDownload ); 

		}
		
		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>
                <button class="btn btn-primary btn-block" onclick="downloadEKG(<?php echo $_GET["dev_id"];  ?>)">Nahrať EDF</button>
                <button class="btn btn-primary btn-block" onclick="downloadMatrix(<?php echo $_GET["dev_id"];  ?>)">Nahrať IR matrix </button>
                <button class="btn btn-primary btn-block" onclick="downloadCSV(<?php echo $_GET["dev_id"];  ?>)">Nahrať LED matrix</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">Bateria</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">Dychanie</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">EKG</h4>
                <div style="width: 100%;height: 600px;" class="visavail" id="graph_container2" 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>
      </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>
