<!--
// © Copyright CERN, Riga Technical University and University of Liverpool 2020.
// All rights not expressly granted are reserved. 
// 
// This file is part of hev-sw.
// 
// hev-sw is free software: you can redistribute it and/or modify it under
// the terms of the GNU General Public Licence as published by the Free
// Software Foundation, either version 3 of the Licence, or (at your option)
// any later version.
// 
// hev-sw is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
// FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public Licence
// for more details.
// 
// You should have received a copy of the GNU General Public License along
// with hev-sw. If not, see <http://www.gnu.org/licenses/>.
// 
// The authors would like to acknowledge the much appreciated support
// of all those involved with the High Energy Ventilator project
// (https://hev.web.cern.ch/).
-->
{% set prototype_active = True %}
{% extends 'base.html' %}

{% block fan_classes %}
{% endblock %}

{% block content %}
<main>

  <div class="container-fluid">


    <div class="tab">
      <button class="tablinks" onclick="openTab(this, 'Main', false)">Main</button>
      <button class="tablinks" onclick="openTab(this, 'Advanced', false)">Advanced Settings</button>
    </div>

    <div id="Main" class="tabcontent">
    <!--<h1 class="mt-4">Info</h1> !-->
	    <div class = "row no-gutters">
	    	<div class = "col-charts-main">
				<div class="col-md-12">
					<div class="row col-center pb-1">
						<select id='chart_variables'  class="form-select" onchange="updateChartType()">
							<option value='pressure_air_supply' selected>Air (supply)</option>
							<option value='pressure_air_regulated' selected>Air (regulated)</option>
							<option value='pressure_o2_supply' selected>O2 (supply)</option>
							<option value='pressure_o2_regulated' selected>O2 (regulated)</option>
		        			<option value='pressure_buffer' selected>Buffer</option>
					        <option value='pressure_inhale' selected>Inhale</option>
							<option value='temperature_buffer' selected>temperature_buffer</option> 
							<option value='pressure_patient' selected>Patient</option>
							<option value='pressure_diff_patient' selected>Patient (diff)</option>
							<!-- VICTOR test -->
							<option value='airway_pressure' selected>airway_pressure</option>
							<option value='volume' selected>volume</option>
							<option value='flow' selected>flow</option>
						</select>
					</div>
					<div class="row">
						<div class="proto-chart-container"><canvas id="pressure_air_supply_chart"></canvas></div>
					</div>
					<div class = "row">
						<div class = "range-button-container ml-auto mr-auto">
							<input type="button" class="lockable sb-nav-button" name="fivesecs"   value="5s"  onclick="setChartProtXaxisRange_wrapper(this,-5,0)"  disabled>
							<input type="button" class="lockable sb-nav-button" name="thirtysecs" value="30s" onclick="setChartProtXaxisRange_wrapper(this,-30,0)" disabled>
							<input type="button" class="lockable sb-nav-button" name="sixtysecs"  value="60s" onclick="setChartProtXaxisRange_wrapper(this,-60,0)" disabled>
							<input type="button" class="lockable sb-nav-button" name="ninetysecs" value="90s" onclick="setChartProtXaxisRange_wrapper(this,-90,0)" disabled>
						</div>
					</div>	
				</div>
			</div>
		<div class = "col-cards-proto">
			<div class = "row no-gutters">
		  	    <div class="card-reading-proto">
	        	    <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
				    	<a class="small text-white stretched-link col-center" href="#">State</a>
	        	    </div>
	            	<div class="card-body px-1 py-1"><span class = "reading-main" id="fsm_state">IDLE</span></div>
				</div>
			    <div class="card-reading-proto">
      		  	    <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
						<a class="tiny text-white stretched-link col-center" href="#">Air (suppply) [cmH2O]</a>
	       		    </div>
            	  	<div class="card-body px-1 py-1"><span class = "reading-main" id = "pressure_air_supply">000.00</span></div>
		    	</div>

				<div class="card-reading-proto">
					  <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
							<a class="tiny text-white stretched-link col-center" href="#">Air (regulated) [cmH2O]</a>
					  </div>
					  <div class="card-body px-1 py-1"><span class = "reading-main" id="pressure_air_regulated">000.00</span></div>
				</div>
		  
				<div class="card-reading-proto">
					  <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
							<a class="tiny text-white stretched-link col-center" href="#">O2 (suppply) [cmH2O]</a>
					  </div>
					  <div class="card-body px-1 py-1"><span class = "reading-main" id = "pressure_o2_supply">000.00</span></div>
				</div>	  
				<div class="card-reading-proto">
					  <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
							<a class="tiny text-white stretched-link col-center" href="#">O2 (regulated) [cmH2O]</a>
					  </div>
					  <div class="card-body px-1 py-1"><span class = "reading-main" id = "pressure_o2_regulated">000.00</span></div>
				</div>
	  
			    <div class="card-reading-proto">
	    	        <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
						<a class="small text-white stretched-link col-center" href="#">Buffer [cmH2O]</a>
		            </div>
		            <div class="card-body px-1 py-1"><span class = "reading-main" id = "pressure_buffer">000.00</span></div>
			    </div>
	  
				<div class="card-reading-proto">
	        		<div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
			      		<a class="small text-white stretched-link col-center" href="#">Inhale [mbar]</a>
		            </div>
		            <div class="card-body px-1 py-1"><span class = "reading-main" id = "pressure_inhale">000.00</span></div>
			  	</div>
				<div class="card-reading-proto">
    	    		<div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
				    	<a class="tiny text-white stretched-link col-center" href="#">Airway Pressure [mbar]</a>
		            </div>
    	 			<div class="card-body px-1 py-1"><span class = "reading-main" id = "airway_pressure">000.00</span></div>
			  	</div>
			  	<div class="card-reading-proto">
	    	       	<div class="card-header d-flex align-items-center justify-content-between py-1 small min-height-1b">
		      			<a class="small text-white stretched-link col-center" href="#">Patient (diff) [cmH2O]</a>
	        		</div>
	        	    <div class="card-body px-1 py-1"><span class = "reading-main" id = "pressure_diff_patient">000.00</span> </div>
			  	</div>

				<div class="card-reading-proto">
					<div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
					  <a class="small text-white stretched-link col-center" href="#">Pressure [mbar]</a>
					</div>
					<div class="card-body px-1 py-1"><span class = "reading-main" id = "pressure_patient">000.00</span></div>
				</div>
				<div class="card-reading-proto">
					<div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
					  <a class="small text-white stretched-link col-center" href="#">Flow [mL/min]</a>
					</div>
					<div class="card-body px-1 py-1"><span class = "reading-main" id = "flow">000.00</span></div>
				</div>
			
				<div class="card-reading-proto">
					<div class="card-header d-flex align-items-center justify-content-between py-1 small min-height-1b">
						<a class="small text-white stretched-link col-center" href="#">Volume [mL]</a>
					</div>
					<div class="card-body px-1 py-1"><span class = "reading-main" id = "volume">000.00</span></div>
				</div>

				<div class="card-reading-proto">
					<div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
					<a class="small text-white col-center" href="#">Data type</a>
					</div>
					<div class="card-body px-1 py-1"><span class = "reading-main" id = "data_type">000.00</span></div>
				</div>
				<div class="card-reading-proto">
					<div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
					<a class="small text-white col-center" href="#">Timestamp [s]</a>
					</div>
					<div class="card-body px-1 py-1"><span class = "reading-main" id = "timestamp">000.00</span></div>
				</div>
			
				<div class="card-reading-proto d-none">
					<div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
						<a class="small text-white col-center" href="#">Version</a>
					</div>
					<div class="card-body px-1 py-1"><span class = "reading-main" id = "version">000.00</span></div>
				</div>	
			</div>
		</div>
	</div>
</div>
	<div id="Advanced" class="tabcontent">
		<form action="{{ url_for('data_handler') }}" method="post">
		  <table class="ml-auto mr-auto">
			<tr><td>
			  <table>
			<tr>
			  <td> <label class="small" for="inputVar1" >Buffer fill [ms]</label></td>
			  <td><input class="form-control py-1 input-editable" id="buff_fill" type="number" value="1"  onclick="show_easy_numpad(this, buff_fill_controller);lock();"  readOnly disabled/></td>
			</tr>
			<tr>
			  <td><span class="form-group"><label class="small" for="inputVar2">Buffer flush [ms]</label></td>
			  <td><input class="form-control py-1 input-editable" id="buff_flush" type="number" value="1"   onclick="show_easy_numpad(this, buff_flush_controller);lock();"  readOnly disabled/></td>
	
			</tr>
			<tr>
			  <td><span class="form-group"><label class="small" for="inputVar4">Buffer pre-fill [ms]</label></td>
			  <td><input class="form-control py-1 input-editable" id="buff_prefill" type="number" value="1"   onclick="show_easy_numpad(this, buff_prefill_controller);lock();"  readOnly disabled/></td>
			</tr>
			<tr>
			  <td><span class="form-group"><label class="small" for="inputVar5">Buffer pre-inhale [ms]</label></td>
			  <td><input class="form-control py-1 input-editable" id="buff_preinhale" type="number" value="1"   onclick="show_easy_numpad(this, buff_preinhale_controller);lock();"  readOnly disabled/></td>
	
			</tr>
			<tr>
			  <td><span class="form-group"><label class="small" for="inputVar6">Buffer purge [ms]</label></td>
			  <td><input class="form-control py-1 input-editable" id="buff_purge" type="number" value="1"   onclick="show_easy_numpad(this, buff_purge_controller);lock();"  readOnly disabled/></td>
	
			</tr>
			<tr>
			  <td><span class="form-group"><label class="small" for="inputVar7">Inhale [ms]</label></td>
			  <td><input class="form-control py-1 input-editable" id="inhale" type="number" value="1"   onclick="show_easy_numpad(this, inhale_controller);lock();"  readOnly disabled/></td>
	
			</tr>
			<tr>
			  <td><span class="form-group"><label class="small" for="inputVar8">Pause [ms]</label></td>
			  <td><input class="form-control py-1 input-editable" id="pause" type="number" value="1"   onclick="show_easy_numpad(this, pause_controller);lock();"  readOnly disabled/></td>
	
			</tr>
			<tr>
			  <td><span class="form-group"><label class="small" for="inputVar9">Exhale [ms]</label></td>
				<td><input class="form-control py-1 input-editable" id="exhale" type="number" value="1"   onclick="show_easy_numpad(this, exhale_controller);lock();"  readOnly disabled/></td>
	
			</tr>
	
			<tr>
			<td><span class="form-group"><label class="small" for="inputVar13">Calibration [ms]</label></td>
			  <td><input class="form-control py-1 input-editable" id="calibration" type="number" value="1"   onclick="show_easy_numpad(this, calibration_controller);lock();"  readOnly disabled/></td>
			</tr>
	
	
		  </table>
		</td>
		<td>
		  <table>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar11">Valve (Air)</label></td>
		  <td><input class="form-control py-1" id="valve_air" type="number" value="1"   onclick="show_easy_numpad(this, valve_air_controller);lock();"  readOnly disabled/></td>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar12">Valve (O2)</label></td>
		  <td><input class="form-control py-1" id="valve_o2" type="number" value="1"   onclick="show_easy_numpad(this, valve_02_controller);lock();"  readOnly disabled/></td>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar13">Valve (Inhale) [%]</label></td>
		  <td><input class="form-control py-1" id="valve_inhale" type="number" value="1"   onclick="show_easy_numpad(this, valve_inhale_controller);lock();"  readOnly disabled/></td>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar13">Valve (Exhale) [%]</label></td>
		  <td><input class="form-control py-1" id="valve_exhale" type="number" value="1"   onclick="show_easy_numpad(this, valve_exhale_controller);lock();"  readOnly disabled/></td>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar13">Valve (Purge)</label></td>
		  <td><input class="form-control py-1" id="valve_purge" type="number" value="1"   onclick="show_easy_numpad(this, valve_purge_controller);lock();"  readOnly disabled/></td>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar13">PEEP [cmH2O]</label></td>
		  <td><input class="form-control py-1" id="peep" type="number" value="1"   onclick="show_easy_numpad(this, purge_controller);lock();"  readOnly disabled/></td>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar13">State</label></td>
		  <td><input class="form-control py-1" id="state" type="number" value="1"   onclick="show_easy_numpad(this, state_controller);lock();"  readOnly disabled/></td>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar13">RPM</label></td>
		  <td><input class="form-control py-1" id="rpm" type="number" value="1"   onclick="show_easy_numpad(this, rpm_controller);lock();"  readOnly disabled/></td>
	
		<tr><td><span class="form-group"><label class="small" for="inputVar13">Inhale:Exhale</label></td>
		  <td><input class="form-control py-1" id="inhale_exhale" type="number" value="1"   onclick="show_easy_numpad(this, inhale_exhale_controller);lock();"  readOnly disabled/></td>
	
		  </table></td>
		</tr>
		</table>
		<input class="form-button float-bottom-right" type="submit" value="Update Settings">
		</form>
	</div>
</div>

</main>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/Chart-plot.js') }}"></script>
<script type=text/javascript>
  function toggle_lock_settings() {
  setTimeout(function(){
  var x = document.getElementsByClassName("form-control");
  var i;
  if ( x.length > 0 && x[0].readOnly == true ){
  for (i = 0; i < x.length; i++) {
		  if (x[i].id != "form_submit"){
		     x[i].readOnly = false;
		  }
		  else{
		     x[i].disabled=false;
		  }
		  var submit = document.getElementById("form_submit");
		  submit.disabled=false;
		  }
          var el = document.getElementById("path-locked");
          el.classList.add("transparent");
		  var el2 = document.getElementById("path-unlocked");
		  el2.classList.remove("transparent");

		  } else {
		  for (i = 0; i < x.length; i++ ) {
			if (x[i].id != "form_submit"){
			x[i].readOnly = true;
			}
		    else {x[i].disabled=true; }
				  
		    var submit = document.getElementById("form_submit");
		    submit.disabled=true;
		    var el = document.getElementById("path-unlocked");
		    el.classList.add("transparent");
		    var el2 = document.getElementById("path-locked");
		    el2.classList.remove("transparent");		  
		  }
		  }
	500})
    }				 
</script>

<script type=text/javascript>
/*
	function update_variables() {
	$.getJSON("live-data",
		function (data) {
		document.getElementById("pressure_buffer").innerHTML = (data.pressure_buffer).toFixed(2);
		document.getElementById("pressure_inhale").innerHTML = (data.pressure_inhale).toFixed(2);
		//document.getElementById("temperature_buffer").innerHTML = (data.temperature_buffer).toFixed(2);
		document.getElementById("pressure_air_supply").innerHTML = (data.pressure_air_supply).toFixed(2);
		document.getElementById("pressure_air_regulated").innerHTML = (data.pressure_air_regulated).toFixed(2);
		document.getElementById("pressure_o2_supply").innerHTML = (data.pressure_o2_supply).toFixed(2);
		document.getElementById("pressure_o2_regulated").innerHTML = (data.pressure_o2_regulated).toFixed(2);
		document.getElementById("pressure_patient").innerHTML = (data.pressure_patient).toFixed(2);
		document.getElementById("pressure_diff_patient").innerHTML = (data.pressure_diff_patient).toFixed(2);	
		document.getElementById("fsm_state").innerHTML = data.fsm_state;
		document.getElementById("airway_pressure").innerHTML = (data.airway_pressure).toFixed(2);	
		document.getElementById("volume").innerHTML = (data.volume).toFixed(2);	
		document.getElementById("flow").innerHTML = (data.flow).toFixed(2);	
		document.getElementById("data_type").innerHTML = data.data_type;
		document.getElementById("timestamp").innerHTML = (data.timestamp/1000).toFixed(2);
		document.getElementById("version").innerHTML = data.version; 
		//document.getElementById("version").innerHTML = (data.version).toFixed(2); //Commented because not included in the html part
		}
	);
	}
	setInterval('update_variables()', 1000);
*/
  </script>
  

	{% endblock %}
	{% block body_scripts %}

		<script src="{{ url_for('static', filename='js/Chart-plot.js') }}"></script>
		
    <script>
      function setChartProtXaxisRange_wrapper(element,min,max){
      if (!element.disabled){ setChartProtXaxisRange(min,max);  }
      }
    
function openTab(el, cityName, force) {
 if (el.disabled && (!force)) return;
 if (el.parentElement.disabled && (!force)) return;
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  el.className += " active";
}

$(document).ready ( function(){
  var tablinks = document.getElementsByClassName("tablinks");
  if (tablinks.length > 0){
    openTab(tablinks[0],"Main", true);
  }
  // decide what to unlock based on mode
  //var object = document.getElementById("Trends");
  //var opt = object.options[object.selectedIndex];
});
      
    
    </script>		
	{% endblock %}
