{% extends '::base.html.twig' %}
{% block menuTop %}{% endblock %}

{% block dashboard %}
    <script>
        updateMonitor();

        window.pollingPeriod = 20000;
        window.progressInterval;

        window.progressInterval = setInterval(updateMonitor, window.pollingPeriod);
        function updateMonitor() {

           $.getJSON('{{path('monitor_tablaReporteDiario',{'idproyectos':idproyectos})}}', function (data) {
                var monitor = data.monitor;
                
                var table = "<table class='table table-bordered table-hover table-fixed-header '>" + "<thead>";
                table += "<tr class='btn-info'>";
                table += "<th class='text-center'>";
                table += "CODIGO";
                table += "</th>";
                table += "<th class='text-center'>";
                table += "SITIO";
                table += "</th>";
                table += "<th class='text-center'>";
                table += "SUPERVISOR VIRTUAL";
                table += "</th>";                
                table += "<th class='text-center'>";
                table += "ESTATUS";
                table += "</th>";
                table += "<th class='text-center'>";
                table += "ACTIVIDAD";
                table += "</th>"
                table += "<th class='text-center'>";
                table += "%AVANCE";
                table += "</th>";                
                table += "<th class='text-center'>";
                table += "ULTIMA <br>DOCUMENTACION";
                table += "</th>"

                table += "</tr>";

                if (monitor.length > 0){
                    for(var i=0; i<monitor.length;i++){
                        table += "<tr>";
                        table += "<td >"; table += monitor[i].codigo; table += "</td>";
                        table += "<td>"; table += monitor[i].Sitio; table += "</td>";
                        table += "<td align='left'>"; table += monitor[i].Supervisor; table += "</td>";                        
                        table += "<td>"; table += monitor[i].Estado; table += "</td>";
                        table += "<td align='left'>"; table += monitor[i].Actividad; table += "</td>";
                        table += "<td align='left'>"; table += monitor[i].avance; table += "%</td>";    
                        var comentarioCortado = monitor[i].comentario.split('*');
                        table += "<td align='left'>"; if (monitor[i].comentario!=null) table += comentarioCortado[0]; else table += 'SIN COMENTARIOS'; table += "</td>";
                        table += "</tr>";
                    }
                    table += "<thead>";
                    table += "</table>";                    
                    
                }

                $("#tablaDiaria").empty();
                $("#tablaDiaria").append(table);

            });

        }
 </script>
 
    <div class='panel-body'>
        
         <table align='center'>
            <tr>
                <td class='panel-title' align='center' style="height: 150px;"><b>REPORTE DIARIO DE SITIOS</b>
                </td>
            </tr>
         </table>
        <div style="overflow-x: auto;" id="tablaDiaria"></div>
    </div> 
<div>

{% endblock %}