<?php
session_start();
error_reporting(0);
//include('includes/config.php');
//require_once __DIR__."/loader.php";
include('includes/loader.php');
 // $loadSelect = new data;
 // $loadSelect = $loadSelect->getAllSelect();
if(strlen($_SESSION['alogin'])=="")
    {   
    header("Location: index.php"); 
    }
    else{
    ?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Graph View AWS</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" media="screen" >
        <link rel="stylesheet" href="css/font-awesome.min.css" media="screen" >
        <link rel="stylesheet" href="css/animate-css/animate.min.css" media="screen" >
        <link rel="stylesheet" href="css/lobipanel/lobipanel.min.css" media="screen" >
        <link rel="stylesheet" href="css/prism/prism.css" media="screen" > <!-- USED FOR DEMO HELP - YOU CAN REMOVE IT -->
        <link rel="stylesheet" type="text/css" href="js/DataTables/datatables.min.css"/>
        <link rel="stylesheet" href="css/main.css" media="screen" >
        <link rel="stylesheet" href="css/toastr/toastr.min.css" media="screen" >
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
        <script src="js/modernizr/modernizr.min.js"></script>
          <style>
        .errorWrap {
            padding: 10px;
            margin: 0 0 20px 0;
            background: #fff;
            border-left: 4px solid #dd3d36;
            -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
        }
        .succWrap{
            padding: 10px;
            margin: 0 0 20px 0;
            background: #fff;
            border-left: 4px solid #5cb85c;
            -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
        }
        </style>
    </head>
    <body class="top-navbar-fixed">
        <div class="main-wrapper">

            <!-- ========== TOP NAVBAR ========== -->
   <?php include('includes/topbar.php');?> 
            <!-- ========== WRAPPER FOR BOTH SIDEBARS & MAIN CONTENT ========== -->
            <div class="content-wrapper">
                <div class="content-container">
           

                    <div class="main-page">
                        <div class="container-fluid">
                            <div class="row page-title-div">
                                <div class="col-md-6">
                                    <h2 class="title">AWS Data</h2>
                                
                                </div>
                                
                                <!-- /.col-md-6 text-right -->
                            </div>
                            <!-- /.row -->
                            <div class="row breadcrumb-div">
                                <div class="col-md-6">
                                    <ul class="breadcrumb">
            							<li><a href="dashboard.php"><i class="fa fa-home"></i> Home</a></li>
                                        <li> AWS Data</li>
            							<li class="active">Detailed Graph </li>
            						</ul>
                                </div>
                             
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /.container-fluid -->

                        <section class="section">
                            <div class="container-fluid">
                                
                                                <div class="row">
                                                    <!-- Field Start -->
                                                    <div class="col-xs-12 col-md-3">
                                                        <div class="form-group">
                                                            <label for="txtStartDate">Start Time</label>
                                                            <input type="text" name="txtStartDate" id="txSt" class="form-control datepicker" id="txtStartDate"
                                                                placeholder="Start Date" required>
                                                        </div>
                                                    </div>
                                                    <!-- Field Ends -->
                                    
                                                    <!-- Field Start -->
                                                    <div class="col-xs-12 col-md-3">
                                                        <div class="form-group">
                                                            <label for="txtEndDate">End Time</label>
                                                            <input type="text" name="txtEndDate" id="txEn" class="form-control datepicker" id="txtEndDate"
                                                                placeholder="End Date" required>
                                                        </div>
                                                    </div>
                                                    <!-- Field Ends -->
                                    
                                                    <!-- Field Start -->
                                                    <div class="col-xs-12 col-md-3" >
                                                        <div class="form-group">
                                                            <label for="txtInterval">Param</label>
                                                                <!--<select name="interval" id="interval" style="margin-left:4px;margin-bottom:10px;background: #fff; cursor: pointer; padding: 5px 10px; border: 5px solid #ccc;">-->
                                                                <select class="form-control" name="txtInterval" id="txtInterval">
                                                                    AT max, AT min, WS max, WS min, RH max & RH min in  graph.
                                                                   <option value="WSavg"> WSAvg </option>
                                                                   <option value="WSmax"> WSMax </option>
                                                                   <option value="WSmin"> WSMin </option>
                                                                    <option value="TMPavg"> TMPavg </option>
                                                                    <option value="TMPmin"> TMPmin </option>
                                                                    <option value="TMPmax"> TMPmax </option>
                                                                    <option value="RHavg"> RHavg </option>
                                                                    <option value="RHmax"> RHmax </option>
                                                                    <option value="RHmin"> RHmin </option></option>
                                                                    <option value="BPavg"> BPavg </option>
                                                                    <option value="SOLARavg"> SOLARavg </option>
                                                                    <option value="WD"> WD </option>
                                                                    <option value="RAINavg"> RAIN </option>
                                                                    <option value="Battery"> Battery </option>
 
                                                                </select>
                                                        </div>
                                                    </div>
                                                    <!-- Field Ends -->
                                    
                                                    <div class="col-xs-12 col-md-3" style="top:23px;">
                                                        <input type="hidden" name="process" value="1">
                                                        <!--<button type="submit" class="btn btn-primary mt-1"> Submit </button>-->
                                                        <button class="btn btn-primary mt-1" id="graph"> Submit </button>

                                                    </div>
                                                </div>
                                
                                <div class="row">
				                     <div class="col-sm-12">
				                          <div class="panel panel-warning" >
				                            <div class="panel-heading" style="padding:17px;"> <h3 class="panel-title"> </h3> </div>  
				                           <div class="panel-body">
				                                <div id='detailed'><!-- Plotly chart wind speed will be drawn inside this DIV </div--></div>
				                            </div>
				                         </div>
                                     
				                    </div>
				            
				                </div>
                                
    				                      
    				            
                                                <!-- /.col-md-12 -->
                                            </div>
                                        </div>
                                        <!-- /.panel -->
                                    </div>
                                    <!-- /.col-md-6 -->

                                </div>
                                <!-- /.row -->

                            </div>
                            <!-- /.container-fluid -->
                        </section>
                        <!-- /.section -->

                    </div>
                    <!-- /.main-page -->

                    

                </div>
                <!-- /.content-container -->
            </div>
            <!-- /.content-wrapper -->

        </div>
        <!-- /.main-wrapper -->

	<!-- Confirmation dialog-->
        <div class="modal" id="delmodal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p>Are you sure?</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary delpopup" data-dismiss="modal">Confirm</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>



        <!-- ========== COMMON JS FILES ========== -->
        <script src="js/jquery/jquery-2.2.4.min.js"></script>
        <script src="js/bootstrap/bootstrap.min.js"></script>
        <script src="js/pace/pace.min.js"></script>
        <script src="js/lobipanel/lobipanel.min.js"></script>
        <script src="js/iscroll/iscroll.js"></script>
        <script src="js/toastr/toastr.min.js"></script>

        <!-- ========== PAGE JS FILES ========== -->
        <script src="js/prism/prism.js"></script>
        <script src="js/DataTables/datatables.min.js"></script>
         <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
	    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

        <!-- ========== THEME JS ========== -->
        <script src="js/main.js"></script>
        <!--<script src="js/awstable.js"></script>-->
        
        <script>
            $(function($) {
	    	    var awsData = <?php echo json_encode($results); ?>;
		        //console.log("results", awsData);
            
                //applyFilter(starTime, endTime);
                
             
                $("#graph").click(function(event){
                    event.preventDefault();
                     repSt = $("#txSt").val();
                     repEn = $("#txEn").val();
                     interval = $("#txtInterval").val();
                     
                    //  repSt = "2021-09-10";
                    //  repEn = "2021-09-17";
                    //  interval = "WSAvg";
                     console.log("rep st", repSt, repEn, interval);
                     
                     
                     $.ajax({                                                                                                             	
                      type: "POST",
                      url: 'graphView.php',
                      async: false,
                      data: {start: repSt, end: repEn, param: interval },
                      success: function(sensData)
                      {

                            sensData = JSON.parse(sensData);
                            console.log("aws data", sensData);
                            DataArr = []
                            timeStamp = []
                            for (let i = 0; i < sensData.length; i++) {  			
                              	//Temp Data
                              	//console.log("Data is ", sensData[i])
                              	
                              	DataArr[i] = sensData[i][interval];
                    
                                                                                                           
                              	timeStamp[i] =  sensData[i]["CreationDate"]
                            }
                            
                               
                            
                            var GraphView = {
                                //r: RHAvg,
                                y : DataArr,     
                                x : timeStamp,
                           
                               // theta: ["North"],
                                name: "Wind Avg",
                                //marker: {color: "#FFF"},
                                //type: "barpolar"
                                
                                mode: 'lines+markers',
                                type: 'scatter'
                              }
                              
                              var layout = {
                                 title: interval === "RAINavg" ? "RAIN" : interval,
                                 xaxis: {
                                    title: 'TIME'
                                 },
                                 yaxis: {
                                    title: interval === "RAINavg" ? "RAIN" : interval,
                                 },
                                 showlegend: false
                              }
                              
                              var data = [GraphView];
                              //console.log('mplot', mPlot);
                              var config = {responsive: true}
                              
                              Plotly.newPlot('detailed', data, layout, config);
                 
                        }
                    }); 
                    
                });
            
                $('.datepicker').daterangepicker({
                    timePicker: true,
                    singleDatePicker: true,
                    showDropdowns: true,
                    minYear: 1901,
                    maxYear: parseInt(moment().format('YYYY'),10),
                    // startDate: moment().startOf('hour'),
                    // endDate: moment().startOf('hour').add(32, 'hour'),
                    locale: {
                     format: 'YYYY-MM-DD hh:mm A'
                    }
                });
                
                // $('#reportend').daterangepicker({
                //     singleDatePicker: true,
                //     showDropdowns: true,
                //     minYear: 1901,
                //     maxYear: parseInt(moment().format('YYYY'),10)
                // });
                
        
		
            });
       
       </script>
    </body>
</html>
<?php } ?>

