<!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">
    <link rel="stylesheet" href="../static/css/style.css">
    <title>HEV monitoring</title>

          <!-- Bootstrap -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body onload="startTime()">


<br> </br>
<br> </br>   
<div class="sidenav">
  <a> <br> </br> </a>
  <a> <img src="../static/img/fan-solid.svg" style="width:50px;height:50px;"></img> Main </a>
  <a> <img src="../static/img/chart-area-solid.svg" style="width:50px;height:50px;"></img> Info </a>
  <a> <img src="../static/img/sliders-h-solid.svg" style="width:50px;height:50px;"></img> Modes </a>
</div>

  <div class="topnav">
    <!-- <a > <img src="../static/img/settings.png" style="width:40px;height:40px;"></img> Settings</a> -->
    <div class="topnav-right" Text color: black>
    <span id="time"></span> &emsp; 
    </div>
  </div>





<div style="position: absolute; 
            left: 165px; 
            top: 70px; 
            width: 100%; 
            height: 100%; 
            background-color: #666"> 





  <div class="container-fluid" style="display: inline-block" >
    <div class="row" style="width: 200%">
        <div class="container-fluid" id="data-container-var-1" ></div>
    </div>
  </div>


  <div class="container-fluid" style="display: inline-block" >
    <div class="row" style="width: 200%">
        <div class="container-fluid" id="data-container-var-2" ></div>
    </div>
  </div>


<br> </br>

  <div class="container-fluid" style="display: inline-block" >

    <div class="row" style="width: 200%">
        <div class="container-fluid" id="data-container-var-3" ></div>
    </div>
  </div>

  <div class="spacer"></div>


<div class="square" id='temperature'></div>
<div class="square" id='pressure'></div>

</div>






  </body>
<!-- external libraries -->
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/highcharts_lib.js"></script>
    <script src="../static/js/highcharts-more.js"></script>
    <script src="../static/js/exporting.js"></script>

    <script src="../static/js/highcharts.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="../static/js/bootstrap.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 = '{ "fruit": "pineapple", "fingers": 10 }';
//var obj = JSON.parse(txt);
//console.log(obj.fruit);

var txt = {{result.data|tojson|safe}} ;
//var obj = JSON.stringify(txt)
var obj = JSON.parse(txt);
document.getElementById("pressure").innerHTML = obj.pressure;
document.getElementById("temperature").innerHTML = obj.temperature;

</script>


</html>
