<!--
// © 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 fan_active = True %}
{% extends 'base.html' %}

{% block fan_classes %}
{% endblock %}

{% block content %}
<main>

  <div class="container-fluid">

    <div class="tab lockable" disabled>
	      <button class="tablinks" onclick="openTab(this, 'Main',false)">Main</button>
		  <button class="tablinks" onclick="openTab(this, 'Advanced',false)">Advanced</button>
    </div>
  
    <div id="Main" class="tabcontent px-0 py-0">
	    <div class = "row no-gutters">
	      	<div class = "col-charts-main">
				<!-- chart on left -->
			    <div class="row py-0">
					<div class="col-md-12 py-0">
					    <div class = "main-chart-container-noaxis"><canvas id="pressure_chart"></canvas></div>
					</div>
			    </div>
			    <div class = "row py-0">
					<div class="col-md-12 py-0">
					  <div class="main-chart-container-noaxis"><canvas id="flow_chart"></canvas></div>
					</div>
		    	</div>
			    <div class = "row py-0">
					<div class="col-md-12 py-0">
						  <div class = "main-chart-container-withaxis"><canvas id="volume_chart"></canvas></div>
					</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="setChartXaxisRange_wrapper(this,-5,0)" disabled>
					    <input type="button" class="lockable sb-nav-button" name="thirtysecs" value="30s" onclick="setChartXaxisRange_wrapper(this,-30,0)" disabled>
					    <input type="button" class="lockable sb-nav-button" name="sixtysecs" value="60s" onclick="setChartXaxisRange_wrapper(this,-60,0)" disabled>
					    <input type="button" class="lockable sb-nav-button" name="ninetysecs" value="90s" onclick="setChartXaxisRange_wrapper(this,-90,0)" disabled>
					    <input type="button" class="lockable sb-nav-button" name="pause" value="Freeze" onclick="togglePause()" disabled>
					</div>
			    </div>
				<div class = "row">
					<div class="col-settings-row">
					<!--
						<div class="card-setting">
							<div class="card-body tiny"><input class = "lockable" id = "setting_peep" value=0.0 size=5 onclick="show_easy_numpad(this,new input_controller('PEEP',this))"></div> 
							<div class="card-footer d-flex align-items-center justify-content-between">
							<a class="small text-dark col-center" href="#">PEEP <small>[cmH2O]</small></a>
							</div>
						</div> 
						-->
						<div class="card-setting">
							<div class="card-body tiny"><input class = "lockable" id = "setting_inspiratory_pressure" size=5 value=0.0 onclick="show_easy_numpad(this,new input_controller('INSPIRATORY_PRESSURE',this))"></div> 
							<div class="card-footer d-flex align-items-center justify-content-between">
								<a class="small col-center" href="#">P<sub>insp</sub> <small>[cmH20]</small></a>
							</div>
						</div>
						
						<div class="card-setting">
							<div class="card-body tiny"><input class = "lockable" id = "setting_respiratory_rate" size=5 value=0.0 onclick="show_easy_numpad(this, new input_controller('RESPIRATORY_RATE',this));"></input></div> 
							<div class="card-footer d-flex align-items-center justify-content-between"><a class="small col-center" href="#">RR</a></div>
						</div>
						
						<div class="card-setting">
							<div class="card-body tiny"><input class = "lockable" id = "setting_fiO2_percent" size=5 value=0.0 onclick="show_easy_numpad(this,new input_controller('FIO2',this))"></div> 
							<div class="card-footer d-flex align-items-center justify-content-between">
								<a class="small col-center" href="#">FIO<sub>2</sub> <small>[%]</small></a>
							</div>

						</div>
						
						<div class="card-setting">
							<div class="card-body tiny"><input class = "lockable" id = "setting_inhale_time" size=5 value = 0.0 onclick = "show_easy_numpad(this, new input_controller('INHALE_TIME',this))"></div> 

							<div class="card-footer d-flex align-items-center justify-content-between">
								<a class="small col-center" href="#">Inhale Time <small>[s]</small></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class = "col-cards-main">
				<div class = "row no-gutters">
				    <div class="card-reading">
				    	<div class="card-header text-align-center">
							<a class="small col-center" href="#">PEEP<small>[cmH20]</small></a>
					    </div>
					    <div class="card-body tiny"><span id = "peep">0.0</span></div>
					</div>
				    <div class="card-reading">
				    	<div class="card-header text-align-center">
						<a class="small col-center" href="#">&lt;P<sub>plateau</sub>&gt;<small>[cmH20]</small></a>
					    </div>
					    <div class="card-body tiny"><span id = "plateau_pressure">0.0</span></div>
					</div>
				    <div class="card-reading">
				    	<div class="card-header text-align-center">
							<a class="small col-center" href="#">RR</small></a>
					    </div>
						<div class="card-body tiny"><span id="respiratory_rate">0.0</span></div> 
				    </div>
				    <div class="card-reading">
				    	<div class="card-header text-align-center">
						<a class="small col-center" href="#">FIO<sub>2</sub> <small>[%]</small></a>
					    </div>
					    <div class="card-body tiny"><span id = "fiO2_percent">0.0</span></div>
					</div>
				    <div class="card-reading">
		            	<div class="card-header text-align-center">
							<a class="small col-center" href="#">VTE <small>[mL]</small></a>
			            </div>
			            <div class="card-body tiny"><span id = "exhaled_tidal_volume">0.0</span></div>
				    </div>
					<div class="card-reading">
		            	<div class="card-header text-align-center">
							<a class="small col-center" href="#">MVE <small>[L/min]</small></a>
			            </div>
		            	<div class="card-body tiny"><span id = "exhaled_minute_volume">0.0</span></div>
					</div>
				</div>
			</div>
			<!--
			<div class = "col-settings-main">
				<div class = "row">
					<div class = "main-header text-dark">
						Target
					</div>
				</div>
				<div class = "row no-gutters">
					<div class="card-setting">
						<div class="card-header d-flex align-items-center justify-content-between">
							<a class="small text-dark col-center" href="#">PEEP <small>[cmH2O]</small></a>
						</div>
						<div class="card-body px-1 py-1 tiny"><input class = "lockable" id = "setting_peep" value=0.0 onclick="show_easy_numpad(this,new input_controller('PEEP',this))"></div> 
					</div>
					<div class="card-setting">
						<div class="card-header d-flex align-items-center justify-content-between">
							<a class="small text-dark col-center" href="#">P<sub>insp</sub> <small>[cmH20]</small></a>
						</div>
						<div class="card-body px-1 py-1 tiny"><input class = "lockable" id = "setting_inspiratory_pressure" value=0.0 onclick="show_easy_numpad(this,new input_controller('INSPIRATORY_PRESSURE',this))"></div> 
					</div>
					<div class="card-setting">
						<div class="card-header d-flex align-items-center justify-content-between">
							<a class="small text-dark col-center" href="#">RR</a>
						</div>
						<div class="card-body px-1 py-1 tiny"><input class = "lockable" id = "setting_respiratory_rate" value=0.0 onclick="show_easy_numpad(this, new input_controller('RESPIRATORY_RATE',this));"></input></div> 
					</div>
					<div class="card-setting">
						<div class="card-header d-flex align-items-center justify-content-between">
							<a class="small text-dark col-center" href="#">FIO<sub>2</sub> <small>[%]</small></a>
						</div>
						<div class="card-body px-1 py-1 tiny"><input class = "lockable" id = "setting_fiO2_percent" value=0.0 onclick="show_easy_numpad(this,new input_controller('FIO2',this))"></div> 
					</div>
					<div class="card-setting">
						<div class="card-header d-flex align-items-center justify-content-between">
							<a class="small text-dark col-center" href="#">Inhale Time <small>[s]</small></a>
						</div>
						<div class="card-body px-1 py-1 tiny"><input class = "lockable" id = "setting_inhale_time" value = 0.0 onclick = "show_easy_numpad(this, new input_controller('INHALE_TIME',this))"></div> 
					</div>
					-->
					<!--  hidden for now KH
					<div class="card-setting">
						<div class="card-header d-flex align-items-center justify-content-between">
							<a class="small text-dark col-center" href="#">Inhale Rise Time <small>[s]</small></a>
						</div>
						<div class="card-body px-1 py-1 tiny"><input class = "lockable" id = "setting_pid_gain" value=0.0 onclick="show_easy_numpad(this,new input_controller('PID_GAIN',this))"></div> 
					</div>
					


				</div>
			</div> -->
		</div>
	</div>

	<div id="Advanced" class="tabcontent">
		<div class = "row">
	    	<div class = "col py-0 px-3">
	        	<canvas id="pressure_volume_chart" width="45%" height="22"></canvas>
	    	</div>
	     		<div class = "col py-0 px-3">
		        <canvas id="flow_volume_chart" width="45%" height="22"></canvas>
		    </div>
	    </div>
	    <div class = "row">
	    	<div class = "col py-0 px-3">
				<canvas id="pressure_flow_chart" width="45%" height="22"></canvas>
		    </div>
		    <div class = "col py-0 px-3">	
			  	<button id="LoopHoldButton" type="button" onclick="HoldLoop()"> <h1>Hold after Loop</h1> </button>
			  	<br>
			  	<button id="LoopStartButton" type="button" onclick="RunLoop()" disabled> <h1>Restart Loop</h1> </button>
		    </div>
	    </div>
	</div>
</div>
</main>
{% endblock %}

{% block body_scripts %}

<script src="{{ url_for('static', filename='js/Chart-display.js') }}"></script>
<script src="{{ url_for('static', filename='js/Chart-displayLoop.js') }}"></script>

<script>
  function setChartXaxisRange_wrapper(element,min,max){
  if (!element.disabled){ setChartXaxisRange(min,max);  }
  }

class input_controller{
	constructor(name, element) {
    	this.name = name;
		this.element = element;
	}

  	getName(){ return this.name;}
	getValue() {
	    return this.element.value;
	}

  	setValue(val){
	  var currentval = this.element.value;
	  var message = "Are you sure you want to update " + this.name + " from " + currentval + " to " + val;
	  var colour = this.element.style.color;
		var element = this.element;
		var target = this.name;
		var param = {}
		param[target] = val;

		this.element.classList.add('modifying');
	  //var c = confirm(message);
	  $.confirm({
		title: 'Confirmation',
		content: message,
	    buttons: {
	        confirm: function () {
			  element.value = val;
			  element.classList.add("text-red");
			  $.ajax({
			      url: "/current_target_handler",
			      type: 'POST',
			      data : param,
			      success: function(response){
				        if (response == true){
							element.style.color=colour;
					        window.createNotification({
				    			closeOnClick: 1,
				    			displayCloseButton: 0,
				    			positionClass: "nfc-bottom-right",
				    			showDuration: false,
				    			theme: "info"
				      		})({
				      			title: "Updated settings",
				      			message: "Setting updated successfully"
					      	  });
						}
						else {
							element.value = currentval;
							window.createNotification({
				    			closeOnClick: 1,
				    			displayCloseButton: 0,
				    			positionClass: "nfc-bottom-right",
				    			showDuration: false,
				    			theme: "info"
				      		})({
				      			title: "Updated settings",
				      			message: "Setting failed to update"
					      	});
						}
				      }
			    });
				$.dialog('Confirmed!');
			 },
	        cancel: function () {
	            $.dialog('Canceled!');
	        },
	    }
	  });
		this.element.classList.remove('modifying');
  	}
  getMin(){
	  if (this.element.min) return this.element.min;
	  else return null;
  }
  getMax(){
	  if (this.element.max) return this.element.max;
	  else return null;
  }
}

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);
  }
});
function format_ie(thisElement,ie_cont)
{
    if (thisElement.disabled) return;
    var value = ie_cont.getValue()
    var posColon = value.search(":");
    console.info("format_ie value",value,"posColon",posColon);
    var ratio = -1.;
    if ( posColon != -1 ) {
	// set back to just a number 1.2:1 or 1:1.5 to 1/1.2 or 1.5/1 repspectively
	ratio = parseFloat(value.substr(posColon+1))/parseFloat(value.substr(0,posColon));
    }else{
	ratio = parseFloat(value);
    }
    ie_cont.setValueNoFormat(ratio.toString());
    show_easy_numpad(thisElement,ie_ratio_controller);   
}

class input_controller_ie extends input_controller{
    setValue(val){
	var posColon = val.search(":");
	if( posColon != -1 ) {
	    // already have colon...
	    el.value = val;
	}else{
	    var ratio = parseFloat(val);
	    if( ratio < 1 ){
		var invRatio = (1/ratio);
		invRatio.toFixed(1); // in case of 0.75 -> 1.3333333333333333333:1 formating problems
		this.element.value = invRatio.toString() + ":1";
	    }else{
		this.element.value = "1:"+val;
	    }
	}
    }
    setValueNoFormat(val){
		this.element.value = val;
    }
}

//var ie_ratio_controller = new input_controller_ie("ie_ratio", ie_ratio_input);

</script>



{% endblock %}
