<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Acceuil - P18</title>
	<!-- Bootstrap -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
	<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 60px;
      }

      /* Custom container */
      .container {
        margin: 0 auto;
        max-width: 1000px;
      }
      .container > hr {
        margin: 60px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 80px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 100px;
        line-height: 1;
      }
      .jumbotron .lead {
        font-size: 24px;
        line-height: 1.25;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }


      /* Customize the navbar links to be fill the entire space of the .navbar */
      .navbar .navbar-inner {
        padding: 0;
      }
      .navbar .nav {
        margin: 0;
        display: table;
        width: 100%;
      }
      .navbar .nav li {
        display: table-cell;
        width: 1%;
        float: none;
      }
      .navbar .nav li a {
        font-weight: bold;
        text-align: center;
        border-left: 1px solid rgba(255,255,255,.75);
        border-right: 1px solid rgba(0,0,0,.1);
      }
      .navbar .nav li:first-child a {
        border-left: 0;
        border-radius: 3px 0 0 3px;
      }
      .navbar .nav li:last-child a {
        border-right: 0;
        border-radius: 0 3px 3px 0;
      }
    </style>
        <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>

	<body>

		<?php include('include/barre.php') ?>
		
		<script type="text/javascript">

			function success(that)
			{
				if (that =='temp'){
					document.getElementById('success_temp').style.display="block";
				};
				return false;
			}

			function save_bat(that,type)
			{
				var valeur = 'bat'+that.options[that.selectedIndex].value;

				if (valeur=='batDefault'){
					document.getElementById('room_'+type).disabled=true;
				};

				for (var i = 1; i<=(that.length-1) ; i++) {
					if ((i == that.selectedIndex) && (valeur != "batDefault")) {
						document.getElementById('room_'+type).disabled=false;
						document.getElementById('bat_'+type+that.options[i].value).style.display="block";
					};
					if ((i != that.selectedIndex) && (valeur != "batDefault")) {
						document.getElementById('room_'+type).disabled=false;
						document.getElementById('bat_'+type+that.options[i].value).style.display="none";
					};

				}
				return false;
			}

		</script>

		<div class="container-fluid" style="margin-top:60px;" align="center">

			<?php
				include('include/database.params.inc');
				$link=	mysqli_connect($machine,$user,$pwd,$db);
				/* Vérification de la connexion */
				if (mysqli_connect_errno()) {
				    printf("Échec de la connexion MySQL : %s\n", mysqli_connect_error());
				    exit();
				}
			?>


			<!-- Affichage du résultat -->
			<div class="row-fluid">
				<form class="span4" align="center" method="POST">
				    <label for="bat_temp"><h5 class="page-header">Quelle température dans cette pièce ?</h5></label>
				    <select name="Batiment_temp" id="Batiment_temp" onChange="save_bat(this,'temp')">
				    	<option value="Default">Sélectionnez un batiment</option>

				       	<!-- Requête SQL -->

				       	<?php
				       		$query= "SELECT * FROM View_temp_piece";
							$result = mysqli_query($link, $query) or die("Erreur SQL".mysqli_error());
				       		$num = mysqli_num_rows($result);
							$i = 0;
							while ($i < $num){
								mysqli_data_seek($result,$i);
								$row = mysqli_fetch_row($result);
				       			echo "<option value=".$row[0].">".$row[0]."</option>";
				       			$i++;
				       		}
				       	?>

				   	</select>
				    <select name="room_temp" id="room_temp" disabled="true" onChange="submit()">
				       	<option value="Default">Sélectionnez une pièce</option>

				       	<?php
				       		$query2= "SELECT * FROM View_temp_piece";
							$result2 = mysqli_query($link, $query2) or die("Erreur SQL".mysqli_error());
				       		$num2 = mysqli_num_rows($result2);
							$i = 0;
							while ($i < $num2){
								mysqli_data_seek($result2,$i);
								$row2 = mysqli_fetch_row($result2);
								echo "<option id='bat_temp".$row2[0]."' value=".$row2[1].">".$row2[1]."</option>";
				       			$i++;
				       		}
				       	?>
				    </select>
					   <div id="success_temp" class="alert alert-success inline" style="display:none">
					   	<a href="" class="close">x</a>
					   	<?php
							$i = 0;
							while ($i < $num){
								mysqli_data_seek($result,$i);
								$row = mysqli_fetch_row($result);
								if ($_POST['Batiment_temp']==$row[0] & $_POST['room_temp']==$row[1]) {
									echo "<script type='text/javascript'>success('temp')</script>
									<p>Température de ".$row[1]." en ".$row[0]." : <strong>".number_format($row[2], 2)." °C</strong></p>";
								}
								$i++;
					      	}
					   	?>
						</div>
				</form>



				<form class="span5" align="center">	
					<label for="bat_rad"><h5 class="page-header">Mode manuel Radiateur</h5></label>
				    <select name="Batiment_rad" id="Batiment_rad" onChange="save_bat(this,'rad')">
				    	<option value="Default">Sélectionnez un batiment</option>
				    	<?php	
				    		$num = mysqli_num_rows($result);
							$i = 0;
							while ($i < $num){
								mysqli_data_seek($result,$i);
								$row = mysqli_fetch_row($result);
				    			echo "<option value=".$row[0].">".$row[0]."</option>";
				    			$i++;
				    		}
				    	?>
				    </select>
				    <select name="room_rad" id="room_rad" disabled="true">
				       	<option value="Default">Sélectionnez une pièce</option>

					    <?php
					    	$query2= "SELECT * FROM View_temp_piece";
							$result2 = mysqli_query($link, $query2) or die("Erreur SQL".mysqli_error());
					    	$num2 = mysqli_num_rows($result2);
							$i = 0;
							while ($i < $num2){
								mysqli_data_seek($result2,$i);
								$row2 = mysqli_fetch_row($result2);
								echo "<option id='bat_rad".$row2[0]."' value=".$row2[1].">".$row2[1]."</option>";
								$i++;
					    	}
					    ?>
					</select>
				</form>
			</div>


			<div class="row">
				<form class="span4">	
					<label for="forcast"><h5 class="page-header">Prévisions Météo</h5></label>
				</form>
				<h5 class="span4 page-header">Consommations</h5>
			</div>

		</div><!-- Container -->

		<!--<script src="http://code.jquery.com/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>-->


    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

		<?php
			mysqli_close($link);
		?>

		<script type="text/javascript">jQuery (function($){
			$('.alert-success .close').on('click',function(){
				$(this).parent().slideUp();
				return false;
			}),
			$(".collapse").collapse();
		});
		</script>

	</body>
	<footer>
		<p>
			Ceci est un prototypage
		</p>
	</footer>
</html>