Presentazione di ThermoWeb - Domotica IP - c/php/js/sql

Ci aggiungo anche la pagina in .php che contiene la parte ajax per la visualizzazione dinamica dei parametri:

<?php

	session_start();
	
	if (!isset($_SESSION['id'])) {
		
		header('location:session_expired.php');
		exit;
		
	}
	
	else

		$userId = $_SESSION['id'];

	$dbHostname = "";
	$dbUsername = "";
	$dbPassword = "";
	$dbDatabase = "";
	
	$con = mysql_connect($dbHostname, $dbUsername, $dbPassword);
	
	if (!$con)
	
		die("Unable to connect to MySQL: " . mysql_error());
		
	mysql_select_db($dbDatabase, $con) or die("Unable to select database: " . mysql_error());
	
	$sql = "SELECT host.addr, host.proto, host.rqst, host.desc FROM host, rela WHERE rela.userId = " . $userId . " AND rela.hostId = host.id";
	
	$result = mysql_query($sql);
	
	if (!$result)
	
		die("Database access failed: " . mysql_error());
		
	$numRows = mysql_num_rows($result);
	
	mysql_free_result($result);
	
	if (empty($_GET['place']))
	
		$place = 0;
		
	else
	
		$place = $_GET['place'];
		
	$sql = "SELECT host.id, host.addr, host.proto, host.rqst, host.desc FROM host, rela WHERE rela.userId = " . $userId . " AND rela.hostId = host.id LIMIT " . $place . ", 1";
		
	$result = mysql_query($sql);
	
	if (!$result)
	
		die("Database access failed: " . mysql_error());
		
	$obj = mysql_fetch_object($result);
	
	mysql_free_result($result);
	
	mysql_close($con);

?>
<!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" />
	<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
	<title>ThermoWeb 1.0</title>
	<link href="css/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	
		var url = "get.php?addr=<?php echo $obj->addr; ?>&proto=<?php echo $obj->proto; ?>&rqst=<?php echo $obj->rqst; ?>";
		var set;
		
		function ajaxRequest() {

			var xmlhttp = new XMLHttpRequest();

			xmlhttp.onreadystatechange = function() {
				
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

					var json=eval("("+xmlhttp.responseText+")");

					document.getElementById("temp").innerHTML = Math.round(json.temp * 10) / 10 + "&deg;C";
					document.getElementById("tSet").innerHTML = json.tSet;

					switch (json.mode) {

						case 0: document.getElementById("offOff").style.visibility = "hidden";
								document.getElementById("onOff").style.visibility = "visible";
								document.getElementById("autoOff").style.visibility = "visible"; break;
								
						case 1: document.getElementById("offOff").style.visibility = "visible";
								document.getElementById("onOff").style.visibility = "hidden";
								document.getElementById("autoOff").style.visibility = "visible"; break;
								
						case 2: document.getElementById("offOff").style.visibility = "visible";
								document.getElementById("onOff").style.visibility = "visible";
								document.getElementById("autoOff").style.visibility = "hidden";

					}

					switch (json.info) {

						case 0: document.getElementById("info").innerHTML = "St-By"; break;

						case 1: document.getElementById("info").innerHTML = "Run";

					}

					set = json.tSet;

					if (set <= json.tMin) {
						
						document.getElementById("mOn").style.visibility = "hidden";

					}
			
					else {
					
						document.getElementById("mOn").style.visibility = "visible";
					
					}
			
					if (set >= json.tMax) {

						document.getElementById("pOn").style.visibility = "hidden";

					}
			
					else {
						
						document.getElementById("pOn").style.visibility = "visible";

					}
			
				}

			}
  
			xmlhttp.open("GET", url, true);
			
			xmlhttp.send();

		}

		function setMode(val) {

			var oldUrl = url;
			url = url + "91" + val + "000";
			
			ajaxRequest();
			
			url = oldUrl;

		}

		function setTemp(val) {

			var oldUrl = url;
	
			if (val == 0)
		
				set--;
		
			if (val == 1)

				set++;
	
			url = url + "9001" + set;
			
			ajaxRequest();
			
			url = oldUrl;

		}

		window.onLoad = ajaxRequest();
		setInterval(ajaxRequest, 1000);

	</script>
</head>
<body>
	<div class="container">
		<h1><?php
				
        		if ($place != 0) {
				
					echo '<a href="show.php?place=';
					echo $place - 1;
					echo '">&lt;</a>';
			
				}
				
				else
				
					echo '&lt;';
				
				echo ' ' . $obj->desc . ' ';
				
				if ($place + 1 < $numRows) {
				
					echo ' <a href="show.php?place=';
					echo $place + 1;
					echo '">&gt;</a>';
				
				}
				
				else
				
					echo '&gt;';
				
			?></h1>
		<div class="content">
			<h1 id="temp">00.0&deg;C</h1>
			<div class="barElements">
				<h1>Set</h1>
				<div id="mOff">
					<a id="mOn" href="javascript:setTemp(0)"><img src="images/mOn.png" width="30" height="30" alt="-" /></a>
				</div>
				<h2 id="tSet">00</h2>
				<div id="pOff">
					<a id="pOn" href="javascript:setTemp(1)"><img src="images/pOn.png" width="30" height="30" alt="+" /></a>
				</div>
			</div>
			<div class="barElements">
				<h1>Mode</h1>
				<div id="offOn">
					<a id="offOff" href="javascript:setMode(0)"><img src="images/offOff.png" width="30" height="30" alt="Off" /></a>
				</div>
				<div id="onOn">
					<a id="onOff" href="javascript:setMode(1)"><img src="images/onOff.png" width="30" height="30" alt="On" /></a>
				</div>
				<div id="autoOn">
					<a id="autoOff" href="javascript:setMode(2)"><img src="images/autoOff.png" width="30" height="30" alt="Auto" /></a>
				</div>
			</div>
			<div class="barElements">
				<h1>Status</h1>
				<h2 id="info">null</h2>
			</div>
			<div class="barElements">
				<h1>Preferences</h1>
				<div class="ico">
					<a href="crono.php?hostId=<?php echo $obj->id; ?>"><img src="images/crono.png" width="30" height="30" alt="Crono" /></a>
				</div>
				<div class="ico">
					<a href="#"><img src="images/pref.png" width="30" height="30" alt="Preferences" /></a>
				</div>
			</div>
		</div>
		<div class="footer">
			<p>&copy; ThermoWeb <?php echo date("Y"); ?> | <a href="#">help</a> |</p>
		</div>
	</div>
</body>
</html>