<?php
/*





*/
?>

<!DOCTYPE html>
<html>
  <head>
    <title>Gauges</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="480" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="theme-color" content="#2f434e" />
    <meta http-equiv="cleartype" content="on" />
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="dark.css" />
	<script src="script.js"></script>

    <style>
      .example {
        overflow: visible;
        border-bottom: 1px solid rgba(0,0,0,0.6);
        border-left: 1px solid rgba(0,0,0,0.6);
        box-sizing: border-box;
        clear: both;
        margin-bottom: 0px;
      }
      
      .example > .code {
      }
      .example > #display {
        text-align: center;
        overflow: auto;
        padding: 20px 0;
        overflow: visible;
      }
      .example > #display {
		width: 300px;
      }

      pre {
        padding: 0;
        margin: 0;
      }
	 .parents1{
		width = 100%;
		display: flex;
	 }
	 .parents2{
		width = 100%;
		display: flex;
	 }
	 .parents3{
		width = 100%;
		display: flex;
	 }


      @media only screen and (min-device-width: 768px) {
        .gauge-container {
          width: 200px;
          height: 200px;
		  display:block;
         margin:auto;
        }
        .example > .code {
          width: 65%;
          float: left;
        }
        .example > .display {
		  display:block;
         margin:auto;
        }
      }
    </style>


  </head>

  <body>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<?php 
echo "<br>";
echo "<br>";
echo "<br>";
echo "<br>";
echo "<br>";
require_once ('result.php');
require_once ('config.php');
$l=1; $k=5;
function getdata(){
    global $conn;
    for($i = 1; $i <=15 ; $i++){
        $sql = "SELECT * FROM weather_online WHERE id='$i'";
        $result = mysqli_query($conn, $sql);
        $row_all = mysqli_fetch_assoc($result);
        $thiarray[$i] = $row_all['thi'];
    }
    return $thiarray;
}
?>
<?php for($j = 1;$j<=2;$j++):?>     <!--1=5 2=10 3=15 -->
<div class="parents<?php echo$j ?>">
<?php for($i = $l;$i<=$k;$i++):?>
<?php 
    $sql = "SELECT * FROM weather_online WHERE id='$i'";
    $result = mysqli_query($conn, $sql);
    $row_all = mysqli_fetch_assoc($result);
    $temp = $row_all['temp'];
    $hum = $row_all['hum'];
    $thi = $row_all['thi']; 
    $name = $row_all['name']; 
?>

 <div class="example">
    <div id="display">
       <!-- <p style="color:#D11E90;">سالن<?php echo" $i"; // $temp = $i+70;$hum = $i+70; $thi=$i+70;?></p> -->
        <div id="name<?php echo "$i"; ?>" style="color:#FFC300 ; font-family:tahoma; font-weight:700;" > <?php echo" $name"; ?></div>
        <div id="gauge<?php echo "$i"; ?>" class="gauge-container two"></div>
        <div id="temp<?php echo "$i"; ?>" style="color: #C70039 ; font-family:tahoma;">دما :<?php echo" $temp"; ?></div>
        <div id="hum<?php echo "$i"; ?>" style="color:#3364ff; font-family:tahoma;">رطوبت :<?php echo" $hum"; ?></div>
    </div>

    <script>
		google.charts.load('current', {'packages':['gauge']});
			  google.charts.setOnLoadCallback(drawChart);

			  function drawChart() {
				 function create(y,len){
					  var y = Number(y);
					  var data = google.visualization.arrayToDataTable([
						  ['Label', 'Value'],
						  ['', y]
						]);

						var options = {
						  width: 400, height: 180,
						  redFrom: 80, redTo: 120,
						  yellowFrom:70, yellowTo: 80,
						  minorTicks: 5
						};
						var chart = new google.visualization.Gauge(document.getElementById("gauge"+len));
						chart.draw(data, options);
				  }
				create(<?php echo $thi; ?>,<?php echo $i; ?>);
			  }
   </script>
   </div>
      <?php endfor;?>
      </div>
	  <?php $l=$l+5; $k=$k+5; endfor;?>
	     <script>
var xmlHttp = null;
var response = '';
var template = '';
var count = 0;
var d = new Date();
function getAjaxLive(){
    var rand_string = d.getFullYear() + '' + d.getMonth() + '' + d.getDate() + '' + d.getHours() + '' + d.getMinutes() + '' + d.getSeconds() + '' + count++;
    

    if(window.XMLHttpRequest){
        //IE7+, Firefox, Chrome, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } else{
        //IE6, IE5
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlHttp.open('GET', 'result.php?new=' + rand_string, true);
    xmlHttp.send(null);

    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){
            response = xmlHttp.responseText;

            if(response != ''){
                
                //usage:
                
				google.charts.load('current', {'packages':['gauge']});
    			  google.charts.setOnLoadCallback(drawChart);
    
    			  function drawChart() {
    				 function create(y,len){
    					  var y = Number(y);
    					  var data = google.visualization.arrayToDataTable([
    						  ['Label', 'Value'],
    						  ['', y]
    						]);
    
    						var options = {
    						  width: 400, height: 180,
    						  redFrom: 80, redTo: 100,
    						  yellowFrom:70, yellowTo: 80,
    						  minorTicks: 5
    						};
    						var chart = new google.visualization.Gauge(document.getElementById("gauge"+len));
    						chart.draw(data, options);
    				  }
    			    function readTextFile(file, callback) {
                        var rawFile = new XMLHttpRequest();
                        rawFile.overrideMimeType("application/json");
                        rawFile.open("GET", file, true);
                        rawFile.onreadystatechange = function() {
                            if (rawFile.readyState === 4 && rawFile.status == "200") {
                                callback(rawFile.responseText);
                            }
                        }
                        rawFile.send(null);
                    }
                    function temphum(counter){
                        var temp_result = document.getElementById("temp"+counter);
                        var hum_result = document.getElementById("hum"+counter);
                        var template1 = 'دما :'+data2[counter]['temp'];
                        var template2 = 'رطوبت :'+data2[counter]['hum'];
                        temp_result.innerHTML = template1;
                        hum_result.innerHTML = template2;
                    }
                    readTextFile("output.json", function(text){
                        data1 = JSON.parse(text);
                        data2 = data1;
                        create(data2['1']['thi'],1);
                        temphum(1);
                        create(data2['2']['thi'],2);
                        temphum(2);
        				create(data2['3']['thi'],3);
                        temphum(3);
        				create(data2['4']['thi'],4);
        				temphum(4);
        				create(data2['5']['thi'],5);
        				temphum(5);
        				create(data2['6']['thi'],6);
        				temphum(6);
        				create(data2['7']['thi'],7);
        				temphum(7);
        				create(data2['8']['thi'],8);
        				temphum(8);
        				create(data2['9']['thi'],9);
        				temphum(9);
        				create(data2['10']['thi'],10);
        				temphum(10);
        				//create(data2['11']['thi'],11);
        				//temphum();
        				//create(data2['12']['thi'],12);
        				//temphum();
        				//create(data2['13']['thi'],13);
        				//temphum();
        				//create(data2['14']['thi'],14);
        				//temphum();
        				//create(data2['15']['thi'],15);
        				//temphum();
                    });
        			
    				
    			    
    				<?php //endfor; ?>
    			  }
            }

            if(xmlHttp.status == 200){
                setTimeout('getAjaxLive();', 2000);
            } else{
                alert('Something Is Not True! Please Refresh The Page.');
            }
        }
    }
}

window.onload = function(){
    getAjaxLive();
}   
   </script>
  </body>
</html>
