Pi2-FGABreja/FGABrejaWeb

{% extends "base.html" %}
{% load i18n %}

{% block title %}Monitoring{% endblock title %}

{% block main_content %}
  <div id="real-time" class="container">
    <div class="row">
      <div class="s12 m9 col">
        <div class="home-card">
          <div class="card-content">
            <span class="card-title brown-text js-stage">Loading...</span>
            <span class="js-state"></span>
            <div id="realtime-chart" class="graph"></div>
          </div>
          <div class="row">
            <div class="s2 col right-align"><i class="material-icons js-malt">highlight_off</i></div>
            <div class="s4 col">Malt</div>
            <div class="s2 col right-align"><i class="material-icons js-iodine-test">highlight_off</i></div>
            <div class="s4 col">iodine Test</div>
          </div>

        </div>
      </div>

      <div class="s12 m3 col">
        <div class="process-info">
          <h5>Process Info</h5>
          <div class="row">
            <div class="s2 col"><i class="material-icons">today</i></div>
            <div class="s10 col js-process-date">Loading...</div>
          </div>

          <h6>Status</h6>

          <div class="row">
            <div class="s2 col"><i class="material-icons js-water">power_settings_new</i></div>
            <div class="s10 col">Water</div>
          </div>

          <div class="row">
            <div class="s2 col"><i class="material-icons js-resistor-1">power_settings_new</i></div>
            <div class="s10 col">Resistor 1</div>
          </div>

          <div class="row">
            <div class="s2 col"><i class="material-icons js-engine">power_settings_new</i></div>
            <div class="s10 col">Engine</div>
          </div>

          <div class="row">
            <div class="s2 col"><i class="material-icons js-resistor-2">power_settings_new</i></div>
            <div class="s10 col">Resistor 2</div>
          </div>

          <div class="row">
            <div class="s2 col"><i class="material-icons js-chiller">power_settings_new</i></div>
            <div class="s10 col">Chiller</div>
          </div>

          <div class="row">
            <div class="s2 col"><i class="material-icons js-freezer">power_settings_new</i></div>
            <div class="s10 col">Freezer</div>
          </div>

          <!-- <div class="row">
            <div class="s2 col"><i class="material-icons">timer</i></div>
            <div class="s10 col js-process-time">Loading...</div>
          </div> -->
        </div>
      </div>
    </div>
  </div>


  <div id="malt-modal" class="modal">
    <div class="modal-content">
      <h4>It's malt time!</h4>
      <p>Please, put the malt on first pot :)</p>
    </div>
    <div class="modal-footer">
      <a href="#!" onclick="add_malt();" class=" modal-action modal-close waves-effect waves-green btn-flat">Done</a>
    </div>
  </div>

  <div id="iodine-modal" class="modal">
    <div class="modal-content">
      <h4>It's iodine test time!</h4>
      <p>Please, make the iodine test and open the first pot valve to init the filtering process :)</p>
    </div>
    <div class="modal-footer">
      <a onclick="iodine_test();" class=" modal-action modal-close waves-effect waves-green btn-flat">Done</a>
    </div>
  </div>

{% endblock main_content %}

{% block footer_scripts %}
  {% load staticfiles %}
  <script src="{% static 'js/highcharts.js' %}"></script>
  {% include "realtime_chart_js" %}
  {% include "realtime_monitoring_js" %}
{% endblock footer_scripts %}