<!DOCTYPE html>
<html lang="en">
<head>

  <%- include('../partials/head.ejs') %>

</head>
<body>

  <%- include('../partials/scripts.ejs') %>
  <%- include('../partials/navbar.ejs') %>

  <div class="container-fluid">
      <div class="row flex-nowrap">
          <%- include('../partials/sidebar.ejs') %>
          <div class="col py-3">
            <div class="content-header">
              <h3>MQTT Broker Statistics</h3>
            </div>
            <div class="row">
                <% if(user.level >= 4){ %>
                <div class="row" style="margin-top:2%">
                  <div class="col-sm-3 mb-3 mb-sm-0">
                  </div>
                  <div class="col-sm-2 mb-3 mb-sm-0">
                    <div class="card text-white bg-primary mb-3" style="min-height: 10rem">
                      <br>
                      <h6 class="card-title" style="margin-left:5%">Available Users</h6>
                      <br>
                      <h2 id="registeredUsers" style="margin-left:30%" class="card-text"><b><%= users %></b></h2>
                    </div>
                  </div>
                  <div class="col-sm-2 mb-3 mb-sm-0">
                    <div class="card text-white bg-primary mb-3" style="min-height: 10rem">
                      <br>
                      <h6 class="card-title" style="margin-left:5%">Registered clients:</h6>
                      <br>
                      <h2 id="registeredClients" style="margin-left:30%" class="card-text"><b><%= clients %></b></h2>
                    </div>
                  </div>
                  <div class="col-sm-2 mb-3 mb-sm-0">
                    <div class="card text-white bg-primary mb-3" style="min-height: 10rem">
                      <br>
                      <h6 class="card-title" style="margin-left:5%">Available Projects:</h6>
                      <br>
                      <h2 id="registeredProjects" style="margin-left:30%" class="card-text"><b><%= projects %></b></h2>
                    </div>
                  </div>
                </div>
                <% } %>
                <div class="row">
                  <div class="col-sm-3 mb-3 mb-sm-0">
                  </div>
                  <div class="col-sm-2 mb-3 mb-sm-0">
                    <div class="card text-white bg-primary mb-3" style="min-height: 10rem">
                      <br>
                      <h6 class="card-title" style="margin-left:5%">Registered devices:</h6>
                      <br>
                      <h2 id="registeredDevices" style="margin-left:30%" class="card-text"><b></b></h2>
                    </div>
                  </div>
                  <div class="col-sm-2 mb-3 mb-sm-0">
                    <div class="card text-white bg-primary mb-3" style="min-height: 10rem">
                      <br>
                      <h6 class="card-title" style="margin-left:5%">Available Devices Models:</h6>
                      <br>
                      <h2 id="registeredModels" style="margin-left:30%" class="card-text"><b><%= models %></b></h2>
                    </div>
                  </div>
                  <div class="col-sm-2 mb-3 mb-sm-0">
                    <div class="card text-white bg-primary mb-3" style="min-height: 10rem">
                      <br>
                      <h6 class="card-title" style="margin-left:5%">Available Firmwares:</h6>
                      <br>
                      <h2 id="registeredFirmwares" style="margin-left:30%" class="card-text"><b><%= firmwares %></b></h2>
                    </div>
                  </div>
                </div>

            </div>
            <div class="row py-3">
              <!--<div class="col-sm-8 mb-3 mb-sm-0">-->
                <!--<div class="card">-->
                    <div class="row">
                      <div class="col-sm-6 mb-3 mb-sm-0 mx-auto d-flex align-items-center" style="max-height:30rem; max-width:30rem;">
                        <canvas id="myChart"></canvas>
                      </div>
                      <div class="col-sm-6 mb-3 mb-sm-0 mx-auto d-flex align-items-center" style="max-height:30rem;">
                        <canvas id="myChart2"></canvas>
                      </div>
                    </div>
                <!--</div>-->
              <!--</div>-->
            </div>
          </div>
      </div>
  </div>

  <script src="./assets/js/mqttws31.min.js" type="text/javascript"></script>
  <script src="./assets/js/chart.js"></script>

  <script>

  var ctx = document.getElementById('myChart');
  var ctx2 = document.getElementById('myChart2');
  var online_count = 0;
  var offline_count = 0;
  var switchedOff_count = 0;

  const Utils = {
    CHART_COLORS : {
      red: 'rgb(255, 99, 132)',
      orange: 'rgb(255, 159, 64)',
      yellow: 'rgb(255, 205, 86)',
      green: 'rgb(75, 192, 192)',
      blue: 'rgb(54, 162, 235)',
      purple: 'rgb(153, 102, 255)',
      grey: 'rgb(201, 203, 207)'
    }
  }

  var data2 = {}
  var chart2;
  var last_db_traffic_value = 0;

  var container_db_name = "<%= container.db %>"
  console.log("container:",container_db_name)

  $(document).ready(()=>{

    let mqtt = <%- JSON.stringify(mqtt) %>;

    api.getDevices((err,rows)=>{
      if(err) console.log(err)
      else{
        document.getElementById('registeredDevices').innerHTML = rows.length
        rows.forEach((item,i)=>{
          if(item.status == "online")
            online_count++;
          else
            offline_count++;
          if(i == rows.length-1){
            const data = {
              labels: [
                'Online',
                'Offline',
                'Switched Off'
              ],
              datasets: [{
                label: 'Devices Status',
                data: [online_count, offline_count, switchedOff_count],
                backgroundColor: [
                  Utils.CHART_COLORS.blue,
                  Utils.CHART_COLORS.orange,
                  Utils.CHART_COLORS.red
                ],
                hoverOffset: 4
              }]
            };

            const config = {
              type: 'doughnut',
              data: data,
              options: {
                responsive: true,
                plugins: {
                  legend: {
                    position: 'top',
                  },
                  title: {
                    display: true,
                    text: 'Devices Statistics'
                  }
                }
              },
            };

            new Chart(ctx, config);
          }
        })
      }
    })

    const DATA_COUNT = 7;
    const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

    const labels = [6,5,4,3,2,1,0];
    data2 = {
      labels: labels,
      datasets: [
        {
          label: 'TX',
          fill: false,
          backgroundColor: Utils.CHART_COLORS.blue,
          borderColor: Utils.CHART_COLORS.blue,
          data: [],
        }, {
          label: 'RX',
          fill: false,
          backgroundColor: Utils.CHART_COLORS.grey,
          borderColor: Utils.CHART_COLORS.grey,
          borderDash: [5, 5],
          data: [],
        }, {
          label: 'Memory',
          backgroundColor: Utils.CHART_COLORS.orange,
          borderColor: Utils.CHART_COLORS.orange,
          data: [],
          yAxisID: 'y1',
          fill: true,
        }
      ]
    };

    const config2 = {
      type: 'line',
      data: data2,
      options: {
        responsive: true,
        plugins: {
          title: {
            display: true,
            text: 'dB load'
          },
        },
        interaction: {
          mode: 'index',
          intersect: false
        },
        scales: {
          x: {
            display: true,
            title: {
              display: false,
              text: 'history'
            }
          },
          y: {
            display: true,
            title: {
              display: true,
              text: 'kB/s'
            },
            suggestedMin: 0,
          },
          y1: {
            display: true,
            position: 'right',
            title: {
              display: true,
              text: 'MB'
            },
            suggestedMin: 0,
            suggestedMax: 2000
          }
        }
      },
    };

    chart2 = new Chart(ctx2, config2);

    /*
    api.getUsers((err,rows)=>{
      document.getElementById('registeredUsers').innerHTML = rows.length
    })

    api.getClients((err,rows)=>{
      document.getElementById('registeredClients').innerHTML = rows.length
    })

    api.getFWModels((err,rows)=>{
      document.getElementById('registeredModels').innerHTML = rows.length
    })
    */
    // connect the client
    if(mqtt != null){

      client = new Paho.MQTT.Client(Settings.mqtt.host, Settings.mqtt.port, mqtt.nick);

      // set callback handlers
      client.onConnectionLost = onConnectionLost;
      client.onMessageArrived = onMessageArrived;

      client.connect({
        userName:mqtt.type,
        password:mqtt.password,
        useSSL:Settings.mqtt.ssl,
        timeout:3,
        onSuccess:onConnect
      });
    }

    // called when the client connects
    function onConnect() {
      // Once a connection has been made, make a subscription and send a message.
      console.log("mqtt connected")
      client.subscribe("docker/#");
    }

    // called when the client loses its connection
    function onConnectionLost(responseObject) {
      console.log("mqtt disconnected")
    }

    function onMessageArrived(message) {
      let topic = message.destinationName;
      let payload = message.payloadString;

      if(topic.endsWith("docker/container/"+container_db_name+"/network/rx")){
        if(data2.datasets[0].data.length > 8)
          data2.datasets[0].data.shift();
        data2.datasets[0].data.push(Number(payload));
        chart2.update()
      }else if(topic.endsWith("docker/container/"+container_db_name+"/network/tx")){
        if(data2.datasets[1].data.length > 8)
          data2.datasets[1].data.shift();
        data2.datasets[1].data.push(Number(payload));
        chart2.update()
      }else if(topic.endsWith("docker/container/"+container_db_name+"/memory/usage")){
        if(data2.datasets[2].data.length > 8)
          data2.datasets[2].data.shift();
        data2.datasets[2].data.push(Number(payload));
        chart2.update()
      }
    }

  });

  </script>
</body>
</html>
