Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Greenhau5</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
	<style type="text/css">
		.jumbotron {
			background-image: url(resources/img/bg.jpg);
			background-color: #17234E;
			color: white;
			margin-bottom: 75;`enter code here`
			min-height: 50%;
			background-repeat: no-repeat;
			background-position: center;
			-webkit-background-size: cover;
			background-size: cover;
			font-family: "Arial Black";
			letter-spacing: -8.7px;
			text-shadow: 0.7px 0.7px 1.3px #000000;
		}

		.jumbotron p {
			font-family: "Arial";
			letter-spacing: 0px;
		}

		div {
			margin: 15px 0;
		}
	</style>

	<!--<script type="text/javascript" src="/home/20016240/Downloads/pahojs/doc/js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="/home/20016240/Downloads/pahojs/doc/js/jquery-ui-1.10.4.min.js"></script>
	<script type="text/javascript" src="/home/20016240/Downloads/pahojs/doc/js/bootstrap.js"></script>
	<script type="text/javascript" src="/home/20016240/Downloads/pahojs/doc/js/fullscreen.js"></script>
	<script type="text/javascript" src="/home/20016240/Downloads/pahojs/doc/js/jquery-cookie.js" charset="utf-8" ></script>
	<script src="/home/20016240/Downloads/pahojs/doc/js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
	<script src="/home/20016240/Downloads/pahojs/doc/js/utility.js" charset="utf-8" type="text/javascript"></script>-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js" type="text/javascript"></script>
</head>

<body>
<div class="jumbotron text-center">
  <h1>greenhau5</h1>
  <p>ghost peppers n stuff</p>
</div>
<div class="container"></div>
<script>
var host = "193.206.55.23";
var client = new Paho.MQTT.Client(host, 9001, "sfgh");

client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

client.connect({onSuccess:onConnect});

function onConnect() {
	console.log("onConnect");
	//client.subscribe("serre2/#");
	client.subscribe("serre2/wgetr");
	mqtt_message = new Paho.MQTT.Message("DynamicPage.json");
	mqtt_message.destinationName = "serre2/wget/t1234";
	client.send(mqtt_message);
	client.subscribe("serre2/Temperatura");
	client.subscribe("serre2/Radiazione");
	client.subscribe("serre2/humidity/#");
}

function onMessageArrived(message) {
	var obj = JSON.parse(message.payloadString);

	if(message.destinationName.match("wgetr")){
	var keys = Object.keys(obj.list);
		keys.forEach(function(n) {
			//console.log(Object.keys(obj.list[n])[0]);
			if(!Object.keys(obj.list[n])[0].match(/Temperatura|Radiazione/))
				var elem = '<div class = "col-sm-3">'+
                     '<div> <img src="resources/img/' +Object.keys(obj.list[n])[0]+ '.png" alt= ' +Object.keys(obj.list[n])[0]+ ' height="80" width="80"> </div>'+
                     '<div>Flow rate: ' +obj.list[n][String(Object.keys(obj.list[n])[0])].FL+ ' l/m</div>'+
                     '<div>Optimal humidity: ' +obj.list[n][String(Object.keys(obj.list[n])[0])].DH+ '%</div>'+
                     '<div id=' +Object.keys(obj.list[n])[0]+ '> </div>'+
                   '</div>'
			else
				var elem = '<div class = "col-sm-6"> <div> <img src="resources/img/' + Object.keys(obj.list[n])[0] +
                   '.png" alt= '+ Object.keys(obj.list[n])[0] +' height="80" width="80"> </div> <div id=' +
                   Object.keys(obj.list[n])[0] + ' > </div> </div> '

			$(elem).appendTo($(".container"));
		});
	}

	if(message.destinationName.match("Temperatura")) {
		document.getElementById("Temperatura").innerText = 'Temperature: ' + obj.value;
	}

	if(message.destinationName.match("Radiazione")) {
		document.getElementById("Radiazione").innerText = 'Radiation: ' + obj.value;
	}

	if(message.destinationName.match("humidity")){
		document.getElementById(obj.device).innerText = "Actual humidity: " + obj.humidity + "% \n\n";
		if(obj.status.match("OFF")){
			var btn = $('<button/>', { class: "btn btn-danger", text: obj.status, id: obj.device+'_btn', click: function () {
					var markers = [{"coltura" : obj.device, "cmd" : "ON"}];
					$.ajax({ type: "POST", url: "/echoPost", data: JSON.stringify(markers), success: function (d) {
						BootstrapDialog.show({ message: d, buttons: [
						{ label: 'Procedi', action: function(dialog) {
							dialog.close();
							$.ajax({ type: "POST", url: "/echoPost", data: JSON.stringify([{"coltura" : obj.device, "cmd" : "ON_force"}])});}
						},
						{ label: 'Annulla', action: function(dialog) { dialog.close(); } }] });
					}});}
			});
		}

		else {
			var btn = $('<button/>', { class: "btn btn-success", text: obj.status, id: obj.device+'_btn', click: function () {
				var markers = [{"coltura" : obj.device, "cmd" : "OFF"}];
				$.ajax({type: "POST", url: "/echoPost", data: JSON.stringify(markers),  success: function (d) {
					BootstrapDialog.show({message: d, buttons:[
						{ label: 'Procedi', action: function(dialog) {
							dialog.close();
							$.ajax({ type: "POST", url: "/echoPost", data: JSON.stringify([{"coltura" : obj.device, "cmd" : "OFF_force"}]) });
						}},
						{ label: 'Annulla', action: function(dialog) { dialog.close(); } }
					]});
				}});
			}});
		}
		$('#'+obj.device).append(btn);
	}

}

function onConnectionLost(responseObject) {
	console.log("Connection lost");
	if (responseObject.errorCode !== 0) {
		console.log("onConnectionLost:"+responseObject.errorMessage);
	}
}
</script>

</body>