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



{% block fan_classes %}
{% endblock %}

{% block content %}
<main>
  <div class="container-fluid">
    <div class="tab">
      <button class="tablinks" onclick="openChart(this, 'Trends')">Trends</button>
      <button class="tablinks" onclick="openChart(this, 'Loops')">Loops</button>
    </div>
  
    <!-- Tab content -->
    <div id="Trends" class="tabcontent">
      <div class = "row">
  
  
        <div class = "col-md-11 mr-2">
    <div class="row">
                <!-- <div class="card-chart-header small ">Pressure [mbar]</div> -->
                <div class="main-chart-container"><canvas id="pressure_chart"></canvas></div>
    </div>
    <div class = "row">
                <!-- <div class="card-chart-header small">Flow [mL/min]</div> -->
          <div class="main-chart-container"><canvas id="flow_chart"></canvas></div>
    </div>
    <div class = "row">
          <!-- <div class="card-chart-header small ">Volume [mL]</div> -->
          <div class="main-chart-container"><canvas id="volume_chart"></canvas></div>
    </div>
        </div>
      
        
        </div>
      </div>
  
    </div>
    <div id="Loops" 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 class="card-chart-header small ">Pressure [mbar]</div> -->
      </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 scripts %}
<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-display.js') }}"></script>
<script src="{{ url_for('static', filename='js/Chart-displayLoop.js') }}"></script>
<script src="{{ url_for('static', filename='js/HevUpdater.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 openChart(el, cityName) {
  // 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){
    openChart(tablinks[0],"Trends");
  }
  // decide what to unlock based on mode
  //var object = document.getElementById("Trends");
  //var opt = object.options[object.selectedIndex];
});
  </script>
{% endblock %}
