{% extends 'main.html' %}
{% block content %}

<div class="content-wrapper">

    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-primary o-hidden h-100">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gpu-card" viewBox="0 0 16 16">
                                <path d="M4 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm7.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/>
                                <path d="M0 1.5A.5.5 0 0 1 .5 1h1a.5.5 0 0 1 .5.5V4h13.5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H2v2.5a.5.5 0 0 1-1 0V2H.5a.5.5 0 0 1-.5-.5Zm5.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM9 8a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0Z"/>
                                <path d="M3 12.5h3.5v1a.5.5 0 0 1-.5.5H3.5a.5.5 0 0 1-.5-.5v-1Zm4 1v-1h4v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5Z"/>
                              </svg>
                        </div>
                        <div class="mr-5">
                            <span id="message-count" class="sensor1">Sensor: </span>
                        </div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="/temp_data">
                        <span class="float-left">Подробнее</span>
                        <span class="float-right">
                            <i class="fa fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>

            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-secondary o-hidden h-100">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cpu-fill" viewBox="0 0 16 16">
                                <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
                                <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
                              </svg>
                        </div>
                        <div class="mr-5">
                            <span id="message-count" class="sensor2">Sensor: </span>
                        </div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="/hum_data">
                        <span class="float-left">Подробнее</span>
                        <span class="float-right">
                            <i class="fa fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>


            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-success o-hidden h-100">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-memory" viewBox="0 0 16 16">
                                <path d="M1 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.586a1 1 0 0 0 .707-.293l.353-.353a.5.5 0 0 1 .708 0l.353.353a1 1 0 0 0 .707.293H15a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H1Zm.5 1h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Zm5 0h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Zm4.5.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4ZM2 10v2H1v-2h1Zm2 0v2H3v-2h1Zm2 0v2H5v-2h1Zm3 0v2H8v-2h1Zm2 0v2h-1v-2h1Zm2 0v2h-1v-2h1Zm2 0v2h-1v-2h1Z"/>
                              </svg>
                        </div>
                        <div class="mr-5">
                            <span id="order-count" class="sensor3">Sensor: </span>
                        </div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="#">
                        <span class="float-left">Подробнее</span>
                        <span class="float-right">
                            <i class="fa fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>

            <!--       Блок -->
            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-danger o-hidden h-100">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="fa fa-fw fa-list-alt"></i>
                        </div>
                        <div class="mr-5">
                            <span id="order-count" class="sensor4"> </span>
                        </div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="#">
                        <span class="float-left">Подробнее</span>
                        <span class="float-right">
                            <i class="fa fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<br>


<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body" id="map-container-google-1" class="z-depth-1-half map-container">
                <h5 class="card-title">Местонахождение</h5>
                <div>
                    <div id="world_map" style="height:285px;"></div>
                </div><br>

            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">

                <table class="table">
                    <thead>
                        <tr>
                            <th>Время</th>
                            <th>Камера</th>
                            <th>Статус</th>
                        </tr>

                    </thead>
                    <tbody id="body">



                    </tbody>
                </table>


            </div>
        </div>
    </div>
</div>


<br>


<!--  График -->
<div class="container-fluid">
    <div class="row">
        <div class="container-fluid" id="data-gpu">
        </div>
    </div>
</div>
<br>
<br>
<!-- График -->
<div class="container-fluid">
    <div class="row">
        <div class="container-fluid" id="data-ram">
        </div>
    </div>
</div>


<script>

    var chartGPU;
    var chartRAM;

    function requestData() {

        var requests = $.get('/data');

        var tm = requests.done(function (result) {

            var seriesGPU = chartGPU.series[0],
                shiftGPU = seriesGPU.data.length > 20;


            var seriesRAM = chartRAM.series[0],
                shiftRAM = seriesGPU.data.length > 20;

            var data1 = [];
            data1.push(result[0]);
            data1.push(result[1]);



            var data2 = [];
            data2.push(result[0]);
            data2.push(result[3]);


            chartGPU.series[0].addPoint(data1, true, shiftGPU);
            chartRAM.series[0].addPoint(data2, true, shiftRAM);
            $(".sensor1").text("");
            $(".sensor1").text("Занято видеопамяти : " + Math.round(result[1])+" Мб");

            $(".sensor2").text("");
            $(".sensor2").text("Нагрузка на процессор: " + Math.round(result[2])+" %");

            $(".sensor3").text("");
            $(".sensor3").text("Занято оперативной памяти: " + result[3]+" %");

            setTimeout(requestData, 2000);

        });
    }



    function updateTable(tableId, jsonData){
   
        var tableHTML = "<tr>";
        for (var key in Object.keys(jsonData))
        {   
          tableHTML+="<td>"+ jsonData[key][0]+ "</td>";  
          tableHTML+="<td>"+ key+ "</td>"; 
          tableHTML+="<td>"+ jsonData[key][1]+ "</td>";  
          tableHTML += "</tr>";
        }    
        document.getElementById(tableId).innerHTML = tableHTML;
      }


    function req() {
        var camreq = $.get('/kafka/camera');

        var tm = camreq.done(function (result) {
     
            updateTable('body',result);


        });
        setTimeout(req, 5000);
    }




    $(document).ready(function () {
        req();
        chartGPU = new Highcharts.Chart({
            chart:
            {
                renderTo: 'data-gpu',
                defaultSeriesType: 'area',
                events: {
                    load: requestData
                }
            },
            title:
            {
                text: 'Использование видеопамяти'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Значение',
                    margin: 80
                }
            },
            series: [{

                lineColor: 'red',
                name: 'GPURAM',
                data: []
            }]
        });


        chartRAM = new Highcharts.Chart({
            chart:
            {
                renderTo: 'data-ram',
                defaultSeriesType: 'area',
                events: {
                    load: requestData
                }
            },
            title:
            {
                text: 'Использование оперативной памяти'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Значение',
                    margin: 80
                }
            },
            series: [{
                lineColor: 'black',
                color: '#ffff4c',
                name: 'RAM',
                data: []
            }]
        });


    });


</script>

<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoic2VudGhpbHYiLCJhIjoiY2tjMnd1Y2o2MXp6NTJxbGppOGo1dmlkNCJ9.h40bt2YHKWtq2lfPD4I9aQ';
    var map = new mapboxgl.Map({
        container: 'world_map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [34.34691, 61.78491],
        zoom: 8
    });

    var marker = new mapboxgl.Marker()
        .setLngLat([34.34691, 61.78491])
        .addTo(map);
</script>
{% endblock content %}