<!DOCTYPE html>
<html lang="en">
    <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="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
    </head>
    <body class="sb-nav-fixed">
      <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark px-0 py-0">
            <a class="navbar-brand" href="">		  	    	<img src="{{ url_for('static', filename='img/cern-hev-logo.png') }}" id="logo">
            <a class="navbar-nav  ml-auto mr-0 mr-md-3 my-2 my-md-0" style="color:#FF0000" id='alarms'> Alarms  </a>  
</a><!--<button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button> !-->

	    <!--
            <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
            </form>
	    !-->


	    <!-- Navbar-->
            <ul class="navbar-nav ml-auto mr-0 mr-md-3 my-2 my-md-0">
              <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                        <a class="dropdown-item" href="#">Settings</a><a class="dropdown-item" href="#">Activity Log</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="login.html">Logout</a>
                    </div>
                </li>
            </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> <div class = "sb-nav-link-icon">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fan" class="fa-fan fa-w-16" 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> <div class = "sb-nav-link-icon">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-area" class="fa-chart-area fa-w-16" 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> <div class = "sb-nav-link-icon">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sliders-h" class="fa-sliders-h fa-w-16" 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>


			
                </nav>
		</div>



            <div id="layoutSidenav_content" class="mx-0 my-0 mr-0">
                <main>
                  <div class="container-fluid">
                    <!--<h1 class="mt-4">Info</h1> !-->
		    <div class = "row">
		      <div class = "col-md-7 py-0">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="card mb-6">
                              <div class="card-chart-header small ">Variable number 1</div>
                              <div class="card-body px-0 py-0"><canvas id="pressure_air_supply" width="200%" height="50"></canvas></div>
                            </div>
                          </div>
			</div>
			<div class = "row">
                          <div class="col-md-12">
                            <div class="card mb-6 px-0 py-0">
                              <div class="card-chart-header small"></i>Variable number 2</div>
                              <div class="card-body px-0 py-0"><canvas id="variable2" width="200%" height="50"></canvas></div>
                            </div>
                          </div>
                        </div>
			<div class = "row">
                          <div class="col-md-12">
                            <div class="card mb-6 px-0 py-0">
                              <div class="card-chart-header small ">Variable number 3</div>
                              <div class="card-body px-0 py-0"><canvas id="chart_variable3" width="200%" height="50"></canvas></div>
                            </div>
                          </div>
			</div>
		      </div>
		      <div class = "col-md-5 py-0 px-0  mr-0">
			
                        <div class="row">
			  
			  <div class="col-xl-5b px-1 py-0 mr-0">
			    <div class="card bg-primary text-white mb-2">
                              <div class="card-header d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="#">Temperature</a>
                              </div>
                              <div class="card-body"><span class = "reading" id="temperature">000.00</span> &#8451;</div>
                            </div>
                          </div>
		
                          <div class="col-xl-5b px-1 py-0 mr-0">
                            <div class="card bg-primary text-white mb-2">
                              <div class="card-header d-flex align-items-center justify-content-between">
				<a class="small text-white stretched-link" href="#">Pressure</a>
                              </div>
                             <div class="card-body"><span class = "reading" id = "pressure">000.00</span> Pa</div>
                            </div>
			  </div>
			</div>

                        <div class="row">
			  <div class="col-xl-5b col-md-8 px-1 py-0">
			    <div class="card bg-primary text-white mb-2">
                              <div class="card-header d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="#">variable3</a>
                              </div>
                              <div class="card-body"><span class = "reading" id = "variable3">000.00</span> &#8451;</div>
                            </div>
                          </div>
                          <div class="col-xl-5b px-1 py-0 col-md-8">
                            <div class="card bg-primary text-white mb-2">
                              <div class="card-header d-flex align-items-center justify-content-between">
				<a class="small text-white stretched-link" href="#">variable4</a>
                              </div>
                             <div class="card-body"><span class = "reading" id = "variable4">000.00</span> Pa</div>
                            </div>
			  </div>
			</div>

                        <div class="row">
			  <div class="col-xl-5b col-md-8 px-1 py-0">
			    <div class="card bg-primary text-white mb-2">
                              <div class="card-header d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="#">variable5</a>
                              </div>
                              <div class="card-body"><span class = "reading" id = "variable5">000.00</span> &#8451;</div>
                            </div>
                          </div>
                          <div class="col-xl-5b px-1 py-0 col-md-8">
                            <div class="card bg-primary text-white mb-2">
                              <div class="card-header d-flex align-items-center justify-content-between">
				<a class="small text-white stretched-link" href="#">variable6</a>
                              </div>
                             <div class="card-body"><span class = "reading" id = "variable6">000.00</span> Pa</div>
                            </div>
			  </div>
			</div>

			
			
			<!--<div class="row">
                          <div class="col-xl-3 col-md-6">
			    <div class="card bg-success text-white mb-4">
                              <div class="card-body">Success Card</div>
                              <div class="card-footer d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="#">View Details</a>
                                <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                              </div>
			    </div>
			    <div class="col-xl-3 col-md-6">
                              <div class="card bg-danger text-white mb-4">
                                <div class="card-body">Danger Card</div>
                                <div class="card-footer d-flex align-items-center justify-content-between">
                                  <a class="small text-white stretched-link" href="#">View Details</a>
                                  <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                                </div>
                              </div>
			    </div>
			  </div>
			</div>
			!-->
		      </div>
		    </div>
		  </div>
                </main>


                <!-- <footer class="py-4 bg-light mt-auto">
                    <div class="container-fluid">
                        <div class="d-flex align-items-center justify-content-between small">
                            <div class="text-muted">Copyright &copy; Your Website 2019</div>
                            <div>
                                <a href="#">Privacy Policy</a>
                                &middot;
                                <a href="#">Terms &amp; Conditions</a>
                            </div>
                        </div>
                    </div>
                </footer> !-->
            </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/Chart-plot.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>
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;
}
</script>


<script>
// Example for parsing Json
var txt = {{result.data|tojson|safe}} ;
var obj = JSON.parse(txt);
//document.getElementById("pressure").innerHTML = obj.pressure;
//document.getElementById("temperature").innerHTML = obj.temperature;
//document.getElementById("pressure2").innerHTML = obj.pressure;
//document.getElementById("temperature2").innerHTML = obj.temperature;
</script>



<script type=text/javascript>
function update_variables() {
    $.getJSON("live-data",
            function (data) {
                document.getElementById("pressure").innerHTML = data.pressure;
                document.getElementById("temperature").innerHTML = data.temperature;
                document.getElementById("variable3").innerHTML = data.variable3;
                document.getElementById("variable4").innerHTML = data.variable4;
                document.getElementById("variable5").innerHTML = data.variable5;
                document.getElementById("variable6").innerHTML = data.variable6;
            }
    );
}
setInterval('update_variables()', 2000);
</script>


<script type=text/javascript>
  function update_alarms() {
      $.getJSON("live-alarms",
              function (data) {
                  document.getElementById("alarms").innerHTML = data.alarms;                
              }
      );
  }
  setInterval('update_alarms()', 1000);
</script>


	
    </body>
</html>
