<commit_before><?php 
/*
*Project:IoT-Connected-valves-for-irrigation-of-greenhouse
*File name: sensorData.php
*Author: <NAME>
*This is the sensor data page of the website, which will basically show graphical view of the data gathered from various sensors
*/
session_start();
include_once 'settings/iotdb.php';

?>
<!DOCTYPE html>
<html lang="en" ng-app="IOT-App">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Sensors Data</title>

    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../bower_components/angularjs-datetime-picker/angularjs-datetime-picker.css" />
    <link rel="stylesheet" type="text/css" href="../dist/css/bootstrap-fullscreen-select.css" />
    <style>
    /* .modal-fullscreen */

    .modal-fullscreen {
      background: transparent;
    }
    .modal-fullscreen .modal-content {
      background: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    .modal-backdrop.modal-backdrop-fullscreen {
      background: #000000;
    }
    .modal-backdrop.modal-backdrop-fullscreen.in {
      opacity: .80;
      filter: alpha(opacity=80);
    }

    /* .modal-fullscreen size: we use Bootstrap media query breakpoints */

    .modal-fullscreen .modal-dialog {
      margin: 0;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
    }
    @media (min-width: 768px) {
      .modal-fullscreen .modal-dialog {
        width: 750px;
      }
    }
    @media (min-width: 992px) {
      .modal-fullscreen .modal-dialog {
        width: 970px;
      }
    }
    @media (min-width: 1200px) {
      .modal-fullscreen .modal-dialog {
         width: 1170px;
      }
    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <?php include_once "layouts/navigation.php";?>

        <!-- Page Content -->
        <div id="page-wrapper">
            <div class="container-fluid" ng-controller="devicesChart">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header text-info">Sensors Data</h1>
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <div class="row" id="devCharts">
                    <div class=" col-md-12 content">
                        <label class="text text-info">Select group</label>
                        <div class="row">
                            <div class="col-md-6">
                            <select class='mobileSelect form-control' id='chartselect' name='chartselect' >
                               <!--  <option selected="true" disabled='disabled'>Choose</option> -->
                              <?php 
                                mysql_select_db($dbname) or die(mysql_error());
                                $query="SELECT * FROM groups"; //displaying groups
                                $results=mysql_query($query);
                                if (mysql_num_rows($results) > 0) 
                                    {       
                                        while($row=mysql_fetch_assoc($results)) 
                                        {   //$id=$row['id'];
                                            $group=$row['name'];
                                            $id=$row['id'];
                                            echo "<option value=$id>$group</option>";
                                        }
                                    }
                                ?>
                            </select><span class="pull-right"><button id="back" class="btn btn-primary" ng-click="showDevice()" style="display:none;">Back</button></span></br></br>
                            <div class="row">
                              <div class="col-md-6">
                                <fieldset class='form-group'>
                                  <label for='results'>Results</label>
                                  <input type='text' class='form-control' id='results' ng-model=count placeholder='Total Reading' value='{{count}}'>
                                </fieldset>
                                <fieldset class='form-group'>
                                  <label for='color'>Chart Color</label>
                                  <input type='text' class='form-control' id='color' ng-model=background_color placeholder='Color of the Chart' value='{{background_color}}'>
                                </fieldset>
                              </div>
                              <div class="col-md-6">
                                <fieldset class='form-group'>
                                  <label for='results'>Results</label><br>
                                  <select ng-model=theme class='form-control' name='chartselect' >
                                    <option value="dark">Dark</option>
                                    <option value="light">Light</option>
                                  </select>
                                </fieldset>
                                <fieldset class='form-group'>
                                  <label for='color'>Starting Date</label>
                                  <input type="text" datetime-picker datetime-picker date-format="yyyy-MM-dd HH:mm" year="2016" month="4" day="1" hour="23" minute="59" ng-model=startDate class="form-control floating-label" placeholder="Start Date" value="{{startDate}}">
                                </fieldset>
                              </div>
                            </div>
                            <strong>Group Selected <big class ="label label-primary">{{devices[0].groupName}}</big></strong><hr/>
                          </div>
                         </div>
                         <div class="row">
                            <div>
                              <div class="row list-group" ng-repeat="device in devices">
                                  <div class="dev" >
                                    <div class="col-md-8 col-lg-4 list-group-item" data-toggle="collapse" data-target="#deV{{$index}}">
                                      <strong class="text text-info glyphicon glyphicon-list-alt"></strong> {{device.deviceName}}: <strong class="text text-info">{{device.deviceId}}</strong>
                                      <span class="glyphicon glyphicon-chevron-down pull-right"></span>
                                      <span ng-if="device.status==1" class="label label-success pull-right">Online</span>
                                      <span ng-if="!device.status==0" class="label label-danger pull-right">Offline</span>
                                      
                                      <div id="deV{{$index}}" class="collapse">
                                         <blockquote>
                                            <p><strong class="text text-info">Type:</strong> {{device.type}}</p>
                                            <!-- <p><strong class="text text-info">Status:</strong> {{device.action}}</p> -->
                                            <p>
                                              <span ng-if="device.switchCount==1">
                                                <p><strong class="text text-info">Primary Battery:</strong> <strong>{{device.PbatValue/1024 | number : 3}} Volts </strong></p>
                                                <button class="btn btn-default dev" ng-click="showGraph(1,device.deviceId,'battery')">Visualise</button>
                                              </span>
                                              <span ng-if="device.switchCount==0"><!-- for sensors data -->
                                                <span ng-if="device.field1=='b'">
                                                  <button class="btn btn-default dev" ng-click="showGraph('b',device.deviceId,'battery')">Visualise</button>
                                                </span>
                                                <span ng-if="device.field1=='bm'">
                                                  <button class="btn btn-default dev" ng-click="showGraph('bm',device.deviceId,'battery')">Visualise</button>
                                                </span>
                                                <span ng-if="device.field1=='bthm'">
                                                  <button class="btn btn-default dev" ng-click="showGraph('bthm',device.deviceId,'battery')">Visualise</button>
                                                </span>
                                              </span>
                                            </p>
                                        </blockquote>
                                      </div>
                                    </div>
                                  </div><!-- end inner div -->
                                  <div class="chartMenu" ng-if="deviceId==device.deviceId">

                                          <span ng-if="device.switchCount==0"><!-- for sensors data -->
                                            <span ng-if="device.field1=='b'">
                                              <ul class="nav nav-tabs" role="tablist">
                                                  <li name='battery' role="presentation"  ng-class="{active:isSelected(1)}">
                                                  <a class="text text-danger" ng-click="showGraph('b',device.deviceId,'battery')">Battery</a></li>
                                              </ul>
                                            </span>
                                            <span ng-if="device.field1=='bm'">
                                               <ul class="nav nav-tabs" role="tablist">
                                                  <li name='battery' role="presentation" ng-class="{active:isSelected(2)}">
                                                  <a class="text text-danger" ng-click="showGraph('bm',device.deviceId,'battery')">Battery</a></li>
                                                  <li name="Moisture" role="presentation" ng-class="{active:isSelected(3)}">
                                                  <a class="text text-danger" ng-click="showGraph('bm',device.deviceId,'moist')">Moisture</a></li>
                                              </ul>
                                            </span>
                                            <span ng-if="device.field1=='bthm'">
                                               <ul class="nav nav-tabs" role="tablist">
                                                  <li name='battery' role="presentation" ng-class="{active:isSelected(4)}">
                                                  <a class="text text-danger" ng-click="showGraph('bthm',device.deviceId,'battery')">Battery</a></li>
                                                  <li name="temperature" role="presentation" ng-class="{active:isSelected(5)}">
                                                  <a class="text text-danger" ng-click="showGraph('bthm',device.deviceId,'temp')">Temperature</a></li>
                                                  <li name='humidity' role="presentation" ng-class="{active:isSelected(6)}">
                                                  <a class="text text-danger" ng-click="showGraph('bthm',device.deviceId,'humid')">Humidity</a></li>
                                                  <li  name='moisture' role="presentation" ng-class="{active:isSelected(7)}">
                                                  <a class="text text-danger" ng-click="showGraph('bthm',device.deviceId,'moist')">Moisture</a></li>
                                              </ul>
                                            </span>
                                          </span>
                                          <span ng-if="device.switchCount==1"><!-- for ESP data , single switch-->
                                              <ul class="nav nav-tabs" role="tablist">
                                                  <li name='Pbattery' role="presentation" ng-class="{active:isSelected(8)}">
                                                  <a class="text text-danger" ng-click="showGraph('1',device.deviceId,'battery')">Primary Battery</a></li>
                                                  <li name="Sbattery" role="presentation" ng-class="{active:isSelected(9)}">
                                                  <a class="text text-danger" ng-click="showGraph('2',device.deviceId,'battery')">Secondary Battery</a></li>
                                              </ul>
                                          </span> 
                                          <div class="pagination-center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<big><span ng-if="device.deviceName!=''"><span class="text-info">Device Name:</span>{{device.deviceName}}</span> <span class="text-info">Device Id:</span>{{device.deviceId}}</big></div>
                                  </div>
                            </div><!-- loop ends here -->
                              <div class='row' id="chartDisplay" style="display:none;">
                                  <div class="col-md-10 col-md-offset-1 app-font family-light size-biggerer" id="chart"  style="height:500px;">
                                    Chart will be displayed here
                                  </div>
                              </div>
                            </div>                           
                        </div>

                         </div>
                         
                      </div><!-- end of content div -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->
    <footer class="footers">
        <?php
        include_once "app.php";
        ?>
    </footer>
    <!-- AngularJs -->
    <script src="../bower_components/angular/angular.min.js"></script>
    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/angularjs-datetime-picker/angularjs-datetime-picker.min.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
     <script type="text/javascript" src="../dist/js/bootstrap-fullscreen-select.js"></script>
     <script src="../bower_components/amcharts3/amcharts/amcharts.js"></script>
     <script src="../bower_components/amcharts3/amcharts/serial.js"></script>
     <script src="../bower_components/amcharts3/amcharts/themes/dark.js"></script>
     
    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>
    <script>
          $(".modal-fullscreen").on('show.bs.modal', function () {

        setTimeout( function() {
          $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
        }, 0);
      });
      $(".modal-fullscreen").on('hidden.bs.modal', function () {
        $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
      });

    </script>
    <script>
      var ws=null;
      $(function() { //websocket
          //var wscon=null;
          ws = new WebSocket("ws://10.129.139.139:8180");
          ws.onopen = function(e) {
            console.log('Connection to server opened');
          }
              //var valElem = $('#sss');
                 
          ws.onclose = function(e) {
            console.log("Connection closed");
          }

          function disconnect() {
            ws.close();
          }
      });
    </script>
    <script>
       var app = angular.module('IOT-App',['angularjs-datetime-picker']);
       app.controller('devicesChart', function($scope, $http) {
            var devices=null;
            var deviceId=null;
            var dataPoints=null;
            var groupId=null;
            var custom=null;
            var tab=null;
            var count='';
            var theme="dark";
            var startDate='';
            var background_color="#525263";
           /* $http.get("dd.php")
            .then(function(response) {
                $scope.devices = response.data;                
            });*/
            $scope.devices = devices;
            $scope.deviceId = deviceId;
            $scope.tab=tab;
            $scope.count=count;
            $scope.startDate=startDate;
            $scope.dataPoints=dataPoints;
            $scope.custom=custom;
            $scope.theme=theme;
            $scope.groupId = groupId;
            $scope.background_color=background_color;
            $scope.groupId = 1;//default

            $scope.selectGroup = function() {
                $http.get("sensors.php?grp="+$scope.groupId)//calling dd.php for retrieving the data
                .then(function(response) {
                    $scope.devices = response.data;
                    alert(JSON.stringify(response.data))
                    $("#chartDisplay").fadeOut(100);
                    //alert(JSON.stringify($scope.devices));
                });
                
            }
            $scope.showDevice=function() {
                    $($scope.device).fadeOut(100);
                    $("#chartDisplay").fadeOut(100);
                    $(".chartMenu").fadeOut(100);
                    $("#back").fadeOut(100);
                    $('#demo').attr('id','page-wrapper');
                    $(".dev").fadeIn(500);
                    $(".navigationIOT").fadeIn(500);

                  }
            $scope.showChart=function(deviceId) {
                    //alert(deviceId)
                    $scope.deviceId = deviceId;
                    $(".navigationIOT").fadeOut(100);
                    $(".dev").fadeOut(100);
                    //$(".chartmenu").fadeOut(100);
                   // $('#wrapper').addClass('col-md-12');
                    $('#page-wrapper').attr('id','demo');
                    //$('#page-wrapper').addClass('col-md-12');
                    $(deviceId).fadeIn(500); 
                    //$("#chart").fadeIn(500);
                    $("#back").fadeIn(500);
                    $(".chartMenu").fadeIn(500);<commit_msg>page UI improvement<commit_after><?php 
/*
*Project:IoT-Connected-valves-for-irrigation-of-greenhouse
*File name: sensorData.php
*Author: <NAME>
*This is the sensor data page of the website, which will basically show graphical view of the data gathered from various sensors
*/
session_start();
include_once 'settings/iotdb.php';

?>
<!DOCTYPE html>
<html lang="en" ng-app="IOT-App">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Sensors Data</title>

    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../bower_components/angularjs-datetime-picker/angularjs-datetime-picker.css" />
    <link rel="stylesheet" type="text/css" href="../dist/css/bootstrap-fullscreen-select.css" />
    <style>
    /* .modal-fullscreen */

    .modal-fullscreen {
      background: transparent;
    }
    .modal-fullscreen .modal-content {
      background: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    .modal-backdrop.modal-backdrop-fullscreen {
      background: #000000;
    }
    .modal-backdrop.modal-backdrop-fullscreen.in {
      opacity: .80;
      filter: alpha(opacity=80);
    }

    /* .modal-fullscreen size: we use Bootstrap media query breakpoints */

    .modal-fullscreen .modal-dialog {
      margin: 0;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
    }
    @media (min-width: 768px) {
      .modal-fullscreen .modal-dialog {
        width: 750px;
      }
    }
    @media (min-width: 992px) {
      .modal-fullscreen .modal-dialog {
        width: 970px;
      }
    }
    @media (min-width: 1200px) {
      .modal-fullscreen .modal-dialog {
         width: 1170px;
      }
    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <?php include_once "layouts/navigation.php";?>

        <!-- Page Content -->
        <div id="page-wrapper">
            <div class="container-fluid" ng-controller="devicesChart">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header text-info">Sensors Data</h1>
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <div class="row" id="devCharts">
                    <div class=" col-md-12 content">
                        <label class="text text-info">Select group</label>
                        <div class="row">
                            <div class="col-md-6">
                            <select class='mobileSelect form-control' id='chartselect' name='chartselect' >
                               <!--  <option selected="true" disabled='disabled'>Choose</option> -->
                              <?php 
                                mysql_select_db($dbname) or die(mysql_error());
                                $query="SELECT * FROM groups"; //displaying groups
                                $results=mysql_query($query);
                                if (mysql_num_rows($results) > 0) 
                                    {       
                                        while($row=mysql_fetch_assoc($results)) 
                                        {   //$id=$row['id'];
                                            $group=$row['name'];
                                            $id=$row['id'];
                                            echo "<option value=$id>$group</option>";
                                        }
                                    }
                                ?>
                            </select><span class="pull-right"><button id="back" class="btn btn-primary" ng-click="showDevice()" style="display:none;">Back</button></span></br></br>
                            <div class="row">
                              <div class="col-md-6">
                                <fieldset class='form-group'>
                                  <label for='results'>Results</label>
                                  <input type='text' class='form-control' id='results' ng-model=count placeholder='Total Reading' value='{{count}}'>
                                </fieldset>
                                <fieldset class='form-group'>
                                  <label for='color'>Chart Color</label>
                                  <input type='text' class='form-control' id='color' ng-model=background_color placeholder='Color of the Chart' value='{{background_color}}'>
                                </fieldset>
                              </div>
                              <div class="col-md-6">
                                <fieldset class='form-group'>
                                  <label for='results'>Results</label><br>
                                  <select ng-model=theme class='form-control' name='chartselect' >
                                    <option value="dark">Dark</option>
                                    <option value="light">Light</option>
                                  </select>
                                </fieldset>
                                <fieldset class='form-group'>
                                  <label for='color'>Starting Date</label>
                                  <input type="text" datetime-picker datetime-picker date-format="yyyy-MM-dd HH:mm" year="2016" month="4" day="1" hour="23" minute="59" ng-model=startDate class="form-control floating-label" placeholder="Start Date" value="{{startDate}}">
                                </fieldset>
                              </div>
                            </div>
                            <strong>Group Selected <big class ="label label-primary">{{devices[0].groupName}}</big></strong><hr/>
                          </div>
                         </div>
                         <div class="row">
                            <div>
                              <div class="row list-group" ng-repeat="device in devices">
                                  <div class="dev" >
                                    <div class="col-md-8 col-lg-4 list-group-item" data-toggle="collapse" data-target="#deV{{$index}}">
                                      <strong class="text text-info glyphicon glyphicon-list-alt"></strong> {{device.deviceName}}: <strong class="text text-info">{{device.deviceId}}</strong>
                                      <span class="glyphicon glyphicon-chevron-down pull-right"></span>
                                      <span ng-if="device.status==1" class="label label-success pull-right">Online</span>
                                      <span ng-if="device.status==0" class="label label-danger pull-right">Offline</span>
                                      
                                      <div id="deV{{$index}}" class="collapse">
                                         <blockquote>
                                            <p>
                                              <div class="text-info" ng-if="device.switchCount==1">
                                                <p><strong class="text text-info">Type:</strong> {{device.switchCount}} {{device.type}}</p>
                                                <p><strong class="text text-success">Primary Battery:</strong> <strong>{{device.Pbatvalue/1024 | number : 3}} Volts </strong></p>
                                                <p><strong class="text text-warning">Secondary Battery:</strong> <strong>{{device.Sbatvalue/137.1428571428571 | number : 3}} Volts </strong></p>
                                                <button class="btn btn-default dev" ng-click="showGraph(1,device.deviceId,'battery')">Visualise</button>
                                              </div>
                                              <div class="text-info" ng-if="device.switchCount>=2">{{device.switchCount}} {{device.type}}s</div>
                                              <div ng-if="device.switchCount==0"><!-- for sensors data -->
                                                <div class="text-info"  ng-if="device.field1=='b'">
                                                  <p><strong class="text text-info">Type:</strong> Hub Device</p>
                                                  <button class="btn btn-default dev" ng-click="showGraph('b',device.deviceId,'battery')">Visualise</button>
                                                </div>
                                                <div class="text-info"  ng-if="device.field1=='bm'">
                                                  <p><strong class="text text-info">Type:</strong> Moisture only Sensor</p>
                                                  <button class="btn btn-default dev" ng-click="showGraph('bm',device.deviceId,'battery')">Visualise</button>
                                                </div>
                                                <div class="text-info"  ng-if="device.field1=='bthm'">
                                                  <p><strong class="text text-info">Type:</strong> Temp, Humidity and Moisture Sensor</p>
                                                  <button class="btn btn-default dev" ng-click="showGraph('bthm',device.deviceId,'battery')">Visualise</button>
                                                </div>
                                              </div>
                                            </p>
                                            <!-- <p><strong class="text text-info">Status:</strong> {{device.action}}</p> -->
                                        </blockquote>
                                      </div>
                                    </div>
                                  </div><!-- end inner div -->
                                  <div class="chartMenu" ng-if="deviceId==device.deviceId">

                                          <span ng-if="device.switchCount==0"><!-- for sensors data -->
                                            <span ng-if="device.field1=='b'">
                                              <ul class="nav nav-tabs" role="tablist">
                                                  <li name='battery' role="presentation"  ng-class="{active:isSelected(1)}">
                                                  <a class="text text-danger" ng-click="showGraph('b',device.deviceId,'battery')">Battery</a></li>
                                              </ul>
                                            </span>
                                            <span ng-if="device.field1=='bm'">
                                               <ul class="nav nav-tabs" role="tablist">
                                                  <li name='battery' role="presentation" ng-class="{active:isSelected(2)}">
                                                  <a class="text text-danger" ng-click="showGraph('bm',device.deviceId,'battery')">Battery</a></li>
                                                  <li name="Moisture" role="presentation" ng-class="{active:isSelected(3)}">
                                                  <a class="text text-danger" ng-click="showGraph('bm',device.deviceId,'moist')">Moisture</a></li>
                                              </ul>
                                            </span>
                                            <span ng-if="device.field1=='bthm'">
                                               <ul class="nav nav-tabs" role="tablist">
                                                  <li name='battery' role="presentation" ng-class="{active:isSelected(4)}">
                                                  <a class="text text-danger" ng-click="showGraph('bthm',device.deviceId,'battery')">Battery</a></li>
                                                  <li name="temperature" role="presentation" ng-class="{active:isSelected(5)}">
                                                  <a class="text text-danger" ng-click="showGraph('bthm',device.deviceId,'temp')">Temperature</a></li>
                                                  <li name='humidity' role="presentation" ng-class="{active:isSelected(6)}">
                                                  <a class="text text-danger" ng-click="showGraph('bthm',device.deviceId,'humid')">Humidity</a></li>
                                                  <li  name='moisture' role="presentation" ng-class="{active:isSelected(7)}">
                                                  <a class="text text-danger" ng-click="showGraph('bthm',device.deviceId,'moist')">Moisture</a></li>
                                              </ul>
                                            </span>
                                          </span>
                                          <span ng-if="device.switchCount==1"><!-- for ESP data , single switch-->
                                              <ul class="nav nav-tabs" role="tablist">
                                                  <li name='Pbattery' role="presentation" ng-class="{active:isSelected(8)}">
                                                  <a class="text text-danger" ng-click="showGraph('1',device.deviceId,'battery')">Primary Battery</a></li>
                                                  <li name="Sbattery" role="presentation" ng-class="{active:isSelected(9)}">
                                                  <a class="text text-danger" ng-click="showGraph('2',device.deviceId,'battery')">Secondary Battery</a></li>
                                              </ul>
                                          </span> 
                                          <div class="pagination-center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<big><span ng-if="device.deviceName!=''"><span class="text-info">Device Name:</span>{{device.deviceName}}</span> <span class="text-info">Device Id:</span>{{device.deviceId}}</big></div>
                                  </div>
                            </div><!-- loop ends here -->
                              <div class='row' id="chartDisplay" style="display:none;">
                                  <div class="col-md-10 col-md-offset-1 app-font family-light size-biggerer" id="chart"  style="height:500px;">
                                    Chart will be displayed here
                                  </div>
                              </div>
                            </div>                           
                        </div>

                         </div>
                         
                      </div><!-- end of content div -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->
    <footer class="footers">
        <?php
        include_once "app.php";
        ?>
    </footer>
    <!-- AngularJs -->
    <script src="../bower_components/angular/angular.min.js"></script>
    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/angularjs-datetime-picker/angularjs-datetime-picker.min.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
     <script type="text/javascript" src="../dist/js/bootstrap-fullscreen-select.js"></script>
     <script src="../bower_components/amcharts3/amcharts/amcharts.js"></script>
     <script src="../bower_components/amcharts3/amcharts/serial.js"></script>
     <script src="../bower_components/amcharts3/amcharts/themes/dark.js"></script>
     
    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>
    <script>
          $(".modal-fullscreen").on('show.bs.modal', function () {

        setTimeout( function() {
          $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
        }, 0);
      });
      $(".modal-fullscreen").on('hidden.bs.modal', function () {
        $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
      });

    </script>
    <script>
      var ws=null;
      $(function() { //websocket
          //var wscon=null;
          ws = new WebSocket("ws://10.129.139.139:8180");
          ws.onopen = function(e) {
            console.log('Connection to server opened');
          }
              //var valElem = $('#sss');
                 
          ws.onclose = function(e) {
            console.log("Connection closed");
          }

          function disconnect() {
            ws.close();
          }
      });
    </script>
    <script>
       var app = angular.module('IOT-App',['angularjs-datetime-picker']);
       app.controller('devicesChart', function($scope, $http) {
            var devices=null;
            var deviceId=null;
            var dataPoints=null;
            var groupId=null;
            var custom=null;
            var tab=null;
            var count='';
            var theme="dark";
            var startDate='';
            var background_color="#525263";
           /* $http.get("dd.php")
            .then(function(response) {
                $scope.devices = response.data;                
            });*/
            $scope.devices = devices;
            $scope.deviceId = deviceId;
            $scope.tab=tab;
            $scope.count=count;
            $scope.startDate=startDate;
            $scope.dataPoints=dataPoints;
            $scope.custom=custom;
            $scope.theme=theme;
            $scope.groupId = groupId;
            $scope.background_color=background_color;
            $scope.groupId = 1;//default

            $scope.selectGroup = function() {
                $http.get("sensors.php?grp="+$scope.groupId)//calling dd.php for retrieving the data
                .then(function(response) {
                    $scope.devices = response.data;
                    //alert(JSON.stringify(response.data))
                    $("#chartDisplay").fadeOut(100);
                    //alert(JSON.stringify($scope.devices));
                });
                
            }
            $scope.showDevice=function() {
                    $($scope.device).fadeOut(100);
                    $("#chartDisplay").fadeOut(100);
                    $(".chartMenu").fadeOut(100);
                    $("#back").fadeOut(100);
                    $('#demo').attr('id','page-wrapper');
                    $(".dev").fadeIn(500);
                    $(".navigationIOT").fadeIn(500);

                  }
            $scope.showChart=function(deviceId) {
                    //alert(deviceId)
                    $scope.deviceId = deviceId;
                    $(".navigationIOT").fadeOut(100);
                    $(".dev").fadeOut(100);
                    //$(".chartmenu").fadeOut(100);
                   // $('#wrapper').addClass('col-md-12');
                    $('#page-wrapper').attr('id','demo');
                    //$('#page-wrapper').addClass('col-md-12');
                    $(deviceId).fadeIn(500); 
                    //$("#chart").fadeIn(500);
                    $("#back").fadeIn(500);
                    $(".chartMenu").fadeIn(500);
{'fraction_non_alphanumeric': 0.1474223163841808, 'fraction_numerical': 0.009685230024213076, 'mean_word_length': 1.2209836432892673, 'pattern_counts': {'":': 0, '<': 591, '<?xml version=': 0, '>': 594, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 2, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 324, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7618857', 'n_tokens_mistral': 9901, 'n_tokens_neox': 9231, 'n_words': 1584}