<!DOCTYPE html>
<!--
// © 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/).
-->

<html lang="en" class="{{'no-scroll-lock' if logs_active}}">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>High Energy Ventilator</title>
	<link href="{{ url_for('static', filename='css/style_v3.css') }}" rel="stylesheet" />
        <link href="{{ url_for('static', filename='css/multiselect.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/easy-numpad.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/pickout.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/notifications.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/jquery-confirm.min.css') }}" rel="stylesheet">

        <script src="{{ url_for('static', filename='js/all.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/multiselect.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/easy-numpad.js') }}"></script>
	<script src="{{ url_for('static', filename='js/pickout.js') }}"></script>
	<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>

	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/apple-touch-icon.png') }}">
	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='img/favicon-32x32.png') }}">
	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='img/favicon-16x16.png') }}">
	<link rel="manifest" href="/site.webmanifest">
	{% block scripts %}
	{% endblock %}
    </head>
    <body class="sb-nav-fixed {{'no-scroll-lock' if logs_active}}">
		<div class = "lock">
			<a class="unlock" id="toggle_lock" onclick="toggle_lock()">
				<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="fa-lock" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
				  <path class="path-icon transparent" id = "path-locked-main" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
				  <path class="path-icon transparent" id="path-unlocked-main" d="M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path>
				</svg>
			</a>
		</div>

      	<nav class="sb-topnav navbar navbar-expand navbar-dark px-0 py-0">
		<!-- Logo -->
	        <a class="navbar-brand nav-link-disabled" href="" id="sidebarToggle"><img src="{{ url_for('static', filename='img/cern-hev-logo-dark.png') }}" id="logo"></a>
			<!--<button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14 fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" class="path-icon" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></button>-->
			<!-- STATUS  -->
				<div class = "select-container lockable medium text-white" disabled>
					<select class = "input-reading ml-auto mr-auto pickout text-red" name="VentilatorMode" id="vent_mode" pickouttitle="Select Ventilator Mode" width="10%">
							<option value = "" disabled selected>UNKNOWN</option>
							<option value="PC_AC">PC-A/C</option>
							<option value="PC_AC_PRVC">PC-A/C-PRVC</option>
							<option value="PC_PSV">PC-PSV</option>
							<option value="TEST">TEST</option>
							<option value="CPAP">CPAP</option>
						</optgroup>
					</select>
				</div>

		<!-- Alarm -->
	        <ul class="navbar-nav my-2 mx-2 alarm-ok px-2 py-0 w-100" id = "alarm_ul">
				<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-circle" class="svg-inline--fa fa-exclamation-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path id = "path-alarm" class="path-icon path-alarm" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg> <div id='alarms' class = "w-100"></div>
	        </ul>

		<!-- User-->
	        <ul class="navbar-nav mr-0 mr-md-3 my-2 my-md-0">
			  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="path-icon" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>
			</ul>
		<!-- Patient -->
			<label class="patient text-white" id="patient_info_top" name="patient_info_top"></label>
		<!-- Export  -->
			<a class="navbar-nav mr-0 mr-md-3 my-2 my-md-0" href="downloadCSV" class = "nav-link-href nav-link-disabled"> <div class = "sb-nav-link-icon d-flex justify-content-center border-invisible {{'active' if downloadCSV_active}}">
				<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="file-export" class="fa-file-export fa-w-15" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="gray" d="M384 121.9c0-6.3-2.5-12.4-7-16.9L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128zM571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-379 28v-32c0-8.8 7.2-16 16-16h176V160H248c-13.2 0-24-10.8-24-24V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V352H208c-8.8 0-16-7.2-16-16z"></path></svg>
			</a>
		<!-- Battery -->
	        <ul class="navbar-nav ml-auto mr-0 mr-md-3 my-2 my-md-0">
			  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="battery-full" class="svg-inline--fa fa-battery-full fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
			    <!--Powered -->
			    <path class="path-icon transparent" id = "powered" d="M320,32a32,32,0,0,0-64,0v96h64Zm48,128H16A16,16,0,0,0,0,176v32a16,16,0,0,0,16,16H32v32A160.07,160.07,0,0,0,160,412.8V512h64V412.8A160.07,160.07,0,0,0,352,256V224h16a16,16,0,0,0,16-16V176A16,16,0,0,0,368,160ZM128,32a32,32,0,0,0-64,0v96h64Z"></path>
			    <!-- Full -->
			    <path class="path-icon transparent" id = "battery-full" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-48 96H96v128h416V192z"></path>
			    <!-- Empty -->
			    <path class="path-icon-alarm transparent" id = "battery-empty" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48z"></path>
			    <!--Three Quarter -->
			    <path class="path-icon transparent" id = "battery-three-quarter" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-144 96H96v128h320V192z"></path>
			    <!-- Half -->
			    <path class="path-icon transparent" id = "battery-half" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-240 96H96v128h224V192z"></path>
			    <!-- One Quarter -->
			    <path class="path-icon-alarm transparent" id ="battery-one-quarter" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-336 96H96v128h128V192z">
			  </svg>
			</ul>
	
	      </nav>
        <div id="layoutSidenav">
          <div id="layoutSidenav_nav" class="py-1">
                <nav class="sb-sidenav accordion sb-sidenav-dark px-1" id="sidenavAccordion">
                  <div class="sb-sidenav-menu">
                    <div class="nav">
		      <a href="/" class = "nav-link-href nav-link-disabled"> <div id="fan-icon" class = "sb-nav-link-icon border-invisible d-flex justify-content-center {{'active' if fan_active }}">
			  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-md" class="fa-user-md fa-w-15" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="path-icon"  d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zM104 424c0 13.3 10.7 24 24 24s24-10.7 24-24-10.7-24-24-24-24 10.7-24 24zm216-135.4v49c36.5 7.4 64 39.8 64 78.4v41.7c0 7.6-5.4 14.2-12.9 15.7l-32.2 6.4c-4.3.9-8.5-1.9-9.4-6.3l-3.1-15.7c-.9-4.3 1.9-8.6 6.3-9.4l19.3-3.9V416c0-62.8-96-65.1-96 1.9v26.7l19.3 3.9c4.3.9 7.1 5.1 6.3 9.4l-3.1 15.7c-.9 4.3-5.1 7.1-9.4 6.3l-31.2-4.2c-7.9-1.1-13.8-7.8-13.8-15.9V416c0-38.6 27.5-70.9 64-78.4v-45.2c-2.2.7-4.4 1.1-6.6 1.9-18 6.3-37.3 9.8-57.4 9.8s-39.4-3.5-57.4-9.8c-7.4-2.6-14.9-4.2-22.6-5.2v81.6c23.1 6.9 40 28.1 40 53.4 0 30.9-25.1 56-56 56s-56-25.1-56-56c0-25.3 16.9-46.5 40-53.4v-80.4C48.5 301 0 355.8 0 422.4v44.8C0 491.9 20.1 512 44.8 512h358.4c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-72-56.8-130.3-128-133.8z"></path></svg>
			  </div></a>
			  <a href="testing" class = "nav-link-href nav-link-disabled"> <div class = "sb-nav-link-icon d-flex justify-content-center border-invisible {{'active' if prototype_active}}">
				<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fan" class="fa-fan fa-w-15" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M352.57 128c-28.09 0-54.09 4.52-77.06 12.86l12.41-123.11C289 7.31 279.81-1.18 269.33.13 189.63 10.13 128 77.64 128 159.43c0 28.09 4.52 54.09 12.86 77.06L17.75 224.08C7.31 223-1.18 232.19.13 242.67c10 79.7 77.51 141.33 159.3 141.33 28.09 0 54.09-4.52 77.06-12.86l-12.41 123.11c-1.05 10.43 8.11 18.93 18.59 17.62 79.7-10 141.33-77.51 141.33-159.3 0-28.09-4.52-54.09-12.86-77.06l123.11 12.41c10.44 1.05 18.93-8.11 17.62-18.59-10-79.7-77.51-141.33-159.3-141.33zM256 288a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"></path></svg>
			  </div></a>
			  <!--
		      <a href="charts" class = "nav-link-href nav-link-disabled"> <div class = "sb-nav-link-icon d-flex justify-content-center border-invisible {{'active' if charts_active}}">
			  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-area" class="fa-chart-area fa-w-15" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M500 384c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v308h436zM372.7 159.5L288 216l-85.3-113.7c-5.1-6.8-15.5-6.3-19.9 1L96 248v104h384l-89.9-187.8c-3.2-6.5-11.4-8.7-17.4-4.7z"></path></svg>
		      </div></a>
		      -->
		      <a href="logs" class = "nav-link-href nav-link-disabled"> <div class = "sb-nav-link-icon d-flex justify-content-center border-invisible {{'active' if logs_active}}">
			  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-circle" class="fa-chart-area fa-w-15" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>
			  </div></a>
		      <a href="settings" class = "nav-link-href nav-link-disabled"> <div class = "sb-nav-link-icon d-flex justify-content-center border-invisible {{'active' if settings_active}}">
              <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sliders-h" class="fa-sliders-h fa-w-15" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="path-icon" d="M496 384H160v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h80v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h336c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160h-80v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h336v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h80c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16C7.2 64 0 71.2 0 80v32c0 8.8 7.2 16 16 16h208v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h208c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16z"></path></svg>
			  </div></a>

  
			  
			</div>

		    <div class = "controls py-1 ml-auto mr-auto">
		    <input type="submit" name="start" value="START" id="start_ventilator" class="lockable sb-nav-button py-1 mb-1" disabled></input>
			<input type="submit" name="stop" value="STOP" id = "stop_ventilator" class="lockable sb-nav-button py-1 mb-1" disabled></input>
			<input type="submit" name="standby" value="STANDBY" id="standby_ventilator" class="lockable sb-nav-button py-1 mb-1" disabled></input>
			</div>


		  </div>
                </nav>
	  </div>

	  <div id="layoutSidenav_content" class="">
	    {% block content %}
	    {% endblock %}
          </div>
	</div>


	

	
        <script src="{{ url_for('static', filename='js/jquery-3.4.1.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/Chart.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/moment.js') }}"></script>
		<script src="{{ url_for('static', filename='js/Chart.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/dataTables.bootstrap4.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
		<script src="{{ url_for('static', filename='js/jquery-confirm.min.js') }}"></script>
		<script src="{{ url_for('static', filename='js/HevUpdater.js') }}"></script>

	{% block body_scripts %}
	{% endblock %}
	<script>
	  var lockTimeOut = 200000; // 20 seconds lock time out ( * 10 for development)
	  var idleTimeOut = 600000; // one minute idle time out ( * 10 for development)
	  
	  // set out lock timers
	  var lockTimer;
	  var idleTimer;
	  var unlocked = Boolean(false);
		// determine if the page is locked or unlocked on startup
	  if (sessionStorage.getItem("unlocked")!=null){
	  	if (sessionStorage.getItem("unlocked") == true){unlocked = Boolean(true);}
		  else {unlocked = Boolean(false);}
	  }

	  //our default is locked, but if we load and the unlock is set, unlock page
	  window.onload = function(){
		if (unlocked) {
			unlock();
		}
		else{
			lock(); // should be locked already, this mainly tidies up the lock graphic
		}
	  };


	  //timer only to be used if we're not on our main page
	  {% if not fan_active %}
	  idleTimer = setTimeout( idleRedirect, idleTimeOut );
	  {% endif %}
	  function idleRedirect(){
	  //reset to locked before idle redirect
	  sessionStorage.setItem("unlocked",0);
	  window.location.href = "/";
	  }
	  
	  function timeOutLock(){
		window.createNotification({
			closeOnClick: 1,
			displayCloseButton: 0,
			positionClass: "nfc-bottom-right",
			showDuration: false,
			theme: "info"
		})({
			title: "Screen Lock",
			message: "Screen has locked due to timeout"
	  });
	  lock();
	  }
	  
	  function startTime() {
	  var today = new Date();
	  var h = today.getHours();
	  var m = today.getMinutes();
	  var s = today.getSeconds();
	  m = checkTime(m);
	  s = checkTime(s);
	  document.getElementById('time').innerHTML = (("0"+today.getDate()).slice(-2)) +"."+ (("0"+(today.getMonth()+1)).slice(-2)) +"."+ (today.getFullYear()) + ' &emsp; ' +
	  h + ":" + m + ":" + s;
	  var t = setTimeout(startTime, 500);
	  }

	  function checkTime(i) {
	  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
									return i;
									}

									
									
	var alarmLogs;
	clearInterval(alarmLogs);
		  

			       
	  function cmdNotification(element){
		if (!element.disabled){
		  window.createNotification({
			  closeOnClick: 1,
			  displayCloseButton: 0,
			  positionClass: "nfc-bottom-right",
			  showDuration: false,
			  theme: "info"
		  })({
			  title: "Issuing command",
			  message: "Sent the command " + element.value
		});
		}
		}
	
	
	function update_alarms() {
      $.getJSON("active-alarms", function (data) {
		  for (let i = 0 ; i < data.length; i++){
	     if (data[i].alarm_type == 'PRIORITY_HIGH') {
	        document.getElementById("alarms").text = "High priority: " + data[i].alarm_code;               
	        var el = document.getElementById("alarm_ul");
	        el.classList.add("alarm-red");
	        var el2 = document.getElementById("path-alarm");
	        el2.classList.add("path-icon-alarm");
		  } 
		  else if (data[i].alarm_type == 'PRIORITY_MEDIUM') {
	        document.getElementById("alarms").text = "Medium priority:" + data[i].alarm_code;
	        var el = document.getElementById("alarm_ul");
	        el.classList.add("alarm-red");
	        var el2 = document.getElementById("path-alarm");
	        el2.classList.add("path-icon-alarm");
          }		  
		  else if (data[i].alarm_type == 'PRIORITY_LOW') {
	        document.getElementById("alarms").text = "Low priority:" + data[i].alarm_code;
	        var el = document.getElementById("alarm_ul");
	        el.classList.add("alarm-red");
	        var el2 = document.getElementById("path-alarm");
	        el2.classList.add("path-icon-alarm");
          } else {  
	         document.getElementById("alarms").text = 'No alarms'
			 var el = document.getElementById("alarms");
	         el.classList.remove("alarm-red");
	         var el2 = document.getElementById("path-alarm");
	         el2.classList.remove("path-icon-alarm");
		  }    
		}
	  });
	}
	var alarmInterval = setInterval('update_alarms()', 1000);
	

	function unlock(){

	  //remove disabled on any field we specified
	  var select_fields = document.getElementsByClassName("lockable");			
	  for (let i = 0 ; i < select_fields.length ; i++) { select_fields[i].disabled = false;}
	  // do the same for any extra fields we specify to unlock (e.g. for selective option in mode)
	  var select_fields = document.getElementsByClassName("unlockOnly");			
	  for (let i = 0 ; i < select_fields.length ; i++) { select_fields[i].disabled = false;}
	  //enable all our navigation links
	  var l = document.getElementsByClassName("nav-link-href");
	  for (let i = 0; i < l.length; i++) {l[i].classList.remove("nav-link-disabled");}
	  //enable our side toggle button
	  var l2 = document.getElementsByClassName("navbar-brand");
	  for (let i = 0; i < l2.length; i++) {l2[i].classList.remove("nav-link-disabled");}
	  
	  // use correct path icon 
	  var el = document.getElementById("path-locked-main");
	  el.classList.add("transparent");
	  var el2 = document.getElementById("path-unlocked-main");
	  el2.classList.remove("transparent");
	
	  // set out global variable to true and update session storage
	  unlocked = Boolean(true);
	  sessionStorage.setItem("unlocked",1);
	  //reset our timer
	  clearTimeout(lockTimer);
	  lockTimer = setTimeout('timeOutLock()', lockTimeOut);
			  }
	  
	function lock() {
	     // clear lock timer
		 clearTimeout(lockTimer);					  
		 // lock all of our lockable fields
	     var select_fields = document.getElementsByClassName("lockable");											
		 for (let i = 0 ; i < select_fields.length ; i++) { select_fields[i].disabled = true;}
		//these are field we should lock but not unlock
	     var lock_fields = document.getElementsByClassName("lockOnly");											
		 for (let i = 0 ; i < lock_fields.length ; i++) { lock_fields[i].disabled = true;}
		  // lock all of our navigation links
		 var l = document.getElementsByClassName("nav-link-href");
		 for (let i = 0; i < l.length; i++) {l[i].classList.add("nav-link-disabled");}
		 // side toggle button
		 var l2 = document.getElementsByClassName("navbar-brand");
		 for (let i = 0; i < l2.length; i++) {l2[i].classList.add("nav-link-disabled");}

		 // show locked icon
		 var el = document.getElementById("path-locked-main");
		 el.classList.remove("transparent");
		 var el2 = document.getElementById("path-unlocked-main");
		 el2.classList.add("transparent");
		 //update global flag and session storage
		 unlocked = Boolean(false);
		 sessionStorage.setItem("unlocked",false);
		}
	function toggle_lock() {
		 //check whether to lock or unlock based on global var
		 // slight delay to make unlocking clear to user
		  setTimeout(function(){
		  if (unlocked == true) {lock();}
		  else{ unlock() ; }
		   },500);
	}
	// reset timers on key press or mouse move
	$(this).mousemove(function (e) {
		if (unlocked) {
			clearTimeout(lockTimer);
		 	lockTimer = setTimeout('timeOutLock()', lockTimeOut);
			  
			 }
	  {% if not fan_active %}
	  clearTimeout(idleTimer);
	  idleTimer = setTimeout( idleRedirect, idleTimeOut );
	  {% endif %}
	});
			  
	$(this).keypress(function (e) {
	  if (unlocked) {
		  clearTimeout(lockTimer);
		  lockTimer = setTimeout('timeOutLock()', lockTimeOut);
		}
		{% if not fan_active %}
		clearTimeout(idleTimer);
		idleTimer = setTimeout( idleRedirect, idleTimeOut );
		{% endif %}
	});
	$(document).ready( function (){
		//could load a mode here but let's wait for readback for now
		var mode='';
		var text = $('#vent_mode option[value="' + mode + '"]').text();
		$('#vent_mode').val(mode);
		$('#vent_mode').prop('oldvalue',mode);
		pickout.updated('.pickout');
	});
	$('#vent_mode').focus( function(){
		var val = "";
		$(this).find(":selected").each(function(){
	      str += $( this ).text() + ", ";
		});
		this.oldvalue = val;
	});
	$('#vent_mode').change( function(){
		$(this).addClass('modifying');
		// ask for confirmation and then send
		var selector = this;
		var oldmode = this.oldvalue;
		var option = $(this).find('option[value="' + oldmode + '"]').text();
		var message = "Are you sure you want to change the Ventilator Mode from " + option + " to ";
		
		var text = "";
		var mode;
		$(this).find(":selected").each(function(){
		  text = $( this ).text();
		  mode  = $(this).val();
		  message += text;
		});
		if (mode == oldmode){
			$.dialog('We are already in ' + text + ' mode');
			return;
		}
		
		message +="?";
		$.confirm({
		  	title: 'Confirm Change of Mode',
			content: message,
			buttons: {
			    confirm: function () {
					var message2 = "<table>\n";
					Object.keys(message_settings).forEach(function(key) {
						var oldval = "-";
						if (oldmode in initial_targets) oldval = initial_targets[oldmode][key];
						var newval = initial_targets[mode][key];
						if (oldval == newval) message2+= "<tr><td>"+message_settings[key]+"</td><td>"+oldval+"</td><td>"+newval+"</td></tr>\n";
						else message2+= "<tr><td>"+message_settings[key]+"</td><td>"+oldval+"</td><td><span class='text-red'>"+newval+"</span></td></tr>\n";
					});
					message2+="</table>";
					$.confirm({
						title : 'Confirm '+text+' Settings',
						content: message2,
						buttons:{
							confirm: function(){
								selector.oldvalue = mode;
								jsonForm = {};
								jsonForm['name'] = mode;
								$('.select-container').addClass('text-red');
								$('.select-container').removeClass('text-white');
						        $.ajax({
						        	url: "/mode_handler",
						          	type: 'POST',
				          			data : jsonForm,
				          			success: function(response){
				            			if (response == true){
										  $.dialog('Ventilator Change Accepted');
							            }
							            else{
							              $.dialog("Problem Updating Ventilator Mode, Please Try again");
							            }
									}
								})
							},
							cancel: function(){
								selector.value = selector.oldvalue;
								pickout.updated('.pickout');
						    	$.dialog('Canceled!');
							}
						}
					})
				},
			    cancel: function () {
					selector.value = selector.oldvalue;
					pickout.updated('.pickout');
			    	$.dialog('Canceled!');
			    },
			}
		});
		event.preventDefault();
		$(this).removeClass('modifying');
	});
	$('#start_ventilator').click( function(){
		// ask for confirmation and then send
		var message = "Please confirm you want to start the ventilator";
		$.confirm({
		  	title: 'Confirmation',
			content: message,
			buttons: {
		    confirm: function () {
				jsonForm = {};
				jsonForm['cmd'] = 'START';
		        $.ajax({
		        	url: "/send_cmd",
		          	type: 'POST',
          			data : jsonForm,
          			success: function(response){
            			if (response == true){
						  $.dialog('Ventilator Starting');
			            }
			            else{
			              $.dialog("Problem Starting Ventilator Mode, Please Try again");
			            }
					}
				})
			},
		    cancel: function () {
		    	$.dialog('Canceled!');
			    },
			}
		});
		event.preventDefault();
	});
	$('#stop_ventilator').click( function(){
		// ask for confirmation and then send
		var message = "Please confirm you want to stop the ventilator";
		$.confirm({
		  	title: 'Confirmation',
			content: message,
			buttons: {
		    confirm: function () {
				jsonForm = {};
				jsonForm['cmd'] = 'STOP';
		        $.ajax({
		        	url: "/send_cmd",
		          	type: 'POST',
          			data : jsonForm,
          			success: function(response){
            			if (response == true){
						  $.dialog('Issued Command to Stop Ventilator');
			            }
			            else{
			              $.dialog("Problem Issuing Command to Ventilator, Please Try again");
			            }
					}
				})
			},
		    cancel: function () {
		    	$.dialog('Canceled!');
			    },
			}
		});
		event.preventDefault();
	});
	$('#standby_ventilator').click( function(){
		// ask for confirmation and then send
		var message = "Please confirm you want to put the ventilator into standby mode";
		$.confirm({
		  	title: 'Confirmation',
			content: message,
			buttons: {
		    confirm: function () {
				jsonForm = {};
				jsonForm['cmd'] = 'STANDBY';
		        $.ajax({
		        	url: "/send_cmd",
		          	type: 'POST',
          			data : jsonForm,
          			success: function(response){
            			if (response == true){
						  $.dialog('Issued Command to Put the Ventilator into standby mode');
			            }
			            else{
			              $.dialog("Problem Issuing Command to Ventilator, Please Try again");
			            }
					}
				})
			},
		    cancel: function () {
		    	$.dialog('Canceled!');
			    },
			}
		});
		event.preventDefault();
	});




pickout.to({
  el:'.pickout',
  theme:'MySelector'
  });

	</script>
	
	
    </body>
</html>
