{% extends 'base.html.twig' %}

{% block body_id 'main-weighs' %}



{% block header %}
{% endblock %}



{% block body %}



    <!-- Wrap all page content here -->
    <div id="wrapfree">
      <!-- Make page fluid -->
      <div class="row">
        
        <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation" id="navbar">
         <div align="center"> 
         <h1 class="title-main-weight"><font face="Arial, sans-serif" color="#ffffff"> W W W. C<span style="color:#66ccff">4</span>RGO.COM</font></h1>
         <br>
         <br>
         </div>
          </div>     
          <div id="contentfree" class="col-md-12 main-weight">

          <!-- page header -->
          <div class="pageheader text-left">
            
            <h2> &nbsp; &nbsp; &nbsp; <i class="fas fa-weight-hanging " style="line-height: 40px;padding-left: 5px;"></i> Weight  <span>//MAX 20 ton.</span></h2>
           
<!--            <div class="breadcrumbs">
              <ol class="breadcrumb">
                <li>MODALE_PESA</li>
                <li><a href="index.html">CHIUDI </a></li>
              </ol>
           </div>
-->

          </div>
          <!-- /page header -->
          
          




 <!-- content main container -->
          <div class="main">
            <!-- row AWB -->
            <div class="row">
<!-- col 12 -->
              <div class="col-md-12"><br><br>

   <section class="tile transparent" >
<!-- tile header - AWB-->
                  <div class="tile-header color transparent-black textured rounded-top-corners text-center">
                  <span class="fas fa-weight-hanging color-orange " style="font-size:9.5vw; margin-bottom: 60px;" ></span>
                  <!-- tile widget -->
                  <div class="tile-widget color transparent-black textured text-center">
                    <div style="height: 800px;">

                  <!-- tile body -->
                  <p class="chart-overall">
                  <span class="big-big color-orange" style="font-size:9.5vw">&nbsp;[1]&nbsp;<span id="id-weight-val1"></span>&nbsp;<span id="id-weight-um1"></span>
                    <button id="btn-zero1" data-bilancia="1" class="btn zero-bilancia" style="left: unset;right: 10px;font-size: 3.6vw;color: black;margin: 10px;padding: 30px;">ZERO</button>                  </p>
				  </span>
                  <p class="chart-overall">
                  <span class="big-big color-orange" style="font-size:9.5vw">&nbsp;[2]&nbsp;<span id="id-weight-val2"></span>&nbsp;<span id="id-weight-um2"></span>
                    <button id="btn-zero2" data-bilancia="2" class="btn zero-bilancia" style="left: unset;right: 10px;font-size:3.6vw;color: black;margin: 10px;padding: 30px;">ZERO</button>                  </p>
				  
				  </span>
	          </div>
            </div>
                  <!-- /tile body -->

        </div>
      
</section>
        
          <!-- /content container -->
                <!-- START/  3^ RIGA  MISURE -->              
                
                <!-- /tile -->
                <!-- START/  4^ RIGA BOTTONI -->              
                
            <div class="row cards">
 <br>           
        <div id="card-content" class="col-md-12 ">
        
             <div class="card-container col-md-2 col-md-offset-5 " card-center>

   <!-- tile - 1 box-->
   <section class="tile transparent">
            
                              <!-- tile header - BOX 2-->
                      <div class="tile-header color transparent-black textured rounded-top-corners" text-center>
<!--                                <h3> BOX 1 </h3>
-->                        <div style="height: 45px;" >
                                <!--<span class="title">Check Box Hover</span>-->
                           <div class="sub-mainx">
                              <!-- <button id="btn-reset" class="button-threex">[  RESET ! ]</button> -->
                           </div>
                         </div>
                    </div>
   </section>
                     </div>
                  </div>
                <!-- /tile -->
</div>          
<div class="pageheader text-left">
            
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span><img src="{{ asset('static/images/Consitech.png') }}"" width="160" height="34" alt=""/><br>
          <h50><font color="#FFFFFF" >  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  DS-C4RGO-Air- 3D // Mod. 4050- 20KKg-60Mc <span></span></font></h50>
           
       <!--     <div class="breadcrumbs">
              <ol class="breadcrumb">
                <li>WEIGHT - DISPLAY &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>
                <li ><a href="# CLOSED "><i class="fa fa-window-close" style="font-size:48px;color:red"></i></a></li>
              </ol>
           </div> -->
            </span></div>
          </div>
         </div>
  <!-- /col 12 -->
        </div>
      </div>
        </div>
      </div>       


{% endblock %}

{% block footer %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
<script type="text/javascript" src="{{ asset('static/js/number_format.js') }}"></script>    
<script>
var refreshInterval;

function refInterval() {
    clearInterval(refreshInterval);
    var url = ("{{ path('app_status', {'n': 'pageid'}) }}").replace('pageid', 0);
    $.ajax(url)
      .done(function(v) {
        if (typeof v !== "undefined") {
          if (v.err == 0) {
            if (v.machine.lastUpdateDiff > 30) {
                $("#id-weight-val1").html("{{ 'No Connect'|trans }}");
                $("#id-weight-um1").html("");
                $("#id-weight-val2").html("{{ 'No Connect'|trans }}");
                $("#id-weight-um2").html("");
            }
            else {
              $("#id-weight-val1").html(number_format(v.machine.netWeight.toString(), 2, '.', ','));
              $("#id-weight-um1").html(v.machine.umNetWeight);
              $("#id-weight-val2").html(number_format(v.machine.netWeight2.toString(), 2, '.', ','));
              $("#id-weight-um2").html(v.machine.umNetWeight2);
            }
          }
          else {
                $("#id-weight-val1").html("{{ 'No Connect'|trans }}");
                $("#id-weight-um1").html("");
                $("#id-weight-val2").html("{{ 'No Connect'|trans }}");
                $("#id-weight-um2").html("");
          }
        }
        else {
                $("#id-weight-val1").html("{{ 'No Connect'|trans }}");
                $("#id-weight-um1").html("");
                $("#id-weight-val2").html("{{ 'No Connect'|trans }}");
                $("#id-weight-um2").html("");
        }          
      })
      .fail(function(er) {
      })
      .always(function() {
        refreshInterval = setInterval(refInterval, 500);
      });
}

$(document).ready(function(){
  
  $("#btn-reset").off("click", "#btn-reset");
  $("#btn-reset").click(function(event) {
    event.preventDefault();
  }); 

  refreshInterval = setInterval(refInterval, 1000);

})
$('.btn.zero-bilancia').on('click', function(v) {
    var bilancia = $(this).data('bilancia')
    $.ajax({
        url: "{{ path('zero_bilancia') }}",
        type: "PUT",
        dataType: 'json',
        contentType: 'application/json',
        data: "{\"bilancia\":\"%%numero_bilancia\"}".replace('%%numero_bilancia', bilancia)
    })
    .done(function (v) {
        console.log(v);
    })
    .fail(function (v) {
    })
    .always(function (v) {
    }); 
    
    
});
</script>
         
{% endblock %}