/*
======================
JavaScript for AJAX request.
Gets and handles JSON data from the server.


Virtuaaliluonto 3.11.2017
======================
*/


// Points to a table class in HTML
var dataContainer = document.getElementById("datatable");

// Request & receive JSON Data
var pageRequest = new XMLHttpRequest();
pageRequest.open('GET', '/static/json/sensor_data.json');
pageRequest.onload = function() {
	
	// Save JSON data to a variable
	var mySensorData = JSON.parse(pageRequest.responseText);
	// Call the renderTest function and pass it to mySensorData variable
	renderData(mySensorData);
};

// Send the request

/*
function proxy()
{
  pageRequest.send();
}

setInterval( proxy, 10000 ); // last arg is in milliseconds


*/


pageRequest.send();


// Add HTML to the page. Array of objects is accessed with "data".
function renderData(data) {
	
	var htmlString = "";


	if (data.length > 0) {

		for (i = 0; i < data.length; i++) {
		
		// Variables for HTML classes
		var pirhtml = "<td class='AreaStatusNo'>"
		var flamehtml = "<td class='FlameStatusNo'>"

			// If the amount of rows from the PIR sensor is higher than 5, then use the HMTL class "AreaStatusYes"
			if (data[i].pir_rows > 5) {
				
				pirhtml = "<td class='AreaStatusYes'>"

			}
			
			// If the amount of rows from the flame sensor is higher than 5, then use the HMTL class "AreaStatusYes"
			if (data[i].flame_rows > 2) {
				
				flamehtml = "<td class='FlameStatusYes'>"

			}

			// Add elements to htmlString
			htmlString += "<tr><td>" + data[i].location + "</td>"+ pirhtml + data[i].pir_rows + "</td>" + flamehtml + data[i].flame_rows + "</td></tr>";



		}

	// Add htmlString as content to HTML
	dataContainer.insertAdjacentHTML('beforeend', htmlString)
				
				// Text values for the classes
				$( ".AreaStatusNo" ).text("Available");

				$( ".AreaStatusYes" ).text("Occupied");

 			
				$( ".FlameStatusNo" ).text("No fire");

				$( ".FlameStatusYes" ).text("Fire!");

	}


}

@@ -18,16 +18,38 @@
 ========
+======================
 %0AJavaScr
@@ -114,18 +114,16 @@
 server.%0A
-%0A%0A
 Virtuaal
@@ -162,16 +162,38 @@
 ========
+======================
 %0A*/%0A%0A%0A//
@@ -284,16 +284,41 @@
 ble%22);%0A%0A
+function getData () %7B%0A%0A%0A%09
 // Reque
@@ -340,16 +340,17 @@
 ON Data%0A
+%09
 var page
@@ -381,16 +381,17 @@
 uest();%0A
+%09
 pageRequ
@@ -411,21 +411,8 @@
 ', '
-/static/json/
 sens
@@ -427,16 +427,17 @@
 json');%0A
+%09
 pageRequ
@@ -464,16 +464,21 @@
 n() %7B%0A%09%0A
+%0A
+%09%09%0A%09
 %09// Save
@@ -502,16 +502,17 @@
 ariable%0A
+%09
 %09var myS
@@ -561,16 +561,18 @@
 eText);%0A
+%0A
+%09
 %09// Call
@@ -633,16 +633,17 @@
 ariable%0A
+%09
 %09renderD
@@ -665,12 +665,14 @@
 a);%0A
+%09
 %7D;%0A%0A
+%0A
 // S
@@ -691,96 +691,143 @@
 est%0A
-%0A/*%0Afunction proxy()%0A%7B%0A  pageRequest.send();%0A%7D%0A%0AsetInterval( proxy, 10000 ); // l
+pageRequest.send();%0A%0A%7D // Function ends here%0A %0A%09// Call function before setting an interval%0A%09getData();%0A%09// Set Interval. L
 ast arg
+ument
  is 
@@ -845,35 +845,158 @@
 onds
-%0A%0A%0A*/%0A%0A%0ApageRequest.send();
+ NOTE: setInterval() keeps triggering expression again and again unless you tell it to stop%0A%09setInterval( getData, 10000 ); // Try setTimeout as well.
 %0A%0A%0A/
@@ -1114,17 +1114,16 @@
  = %22%22;%0A%0A
-%0A
 %09if (dat
@@ -1877,17 +1877,16 @@
 tr%3E%22;%0A%0A%0A
-%0A
 %09%09%7D%0A%0A%09//
@@ -1920,16 +1920,17 @@
 to HTML%0A
+%0A
 %09dataCon
@@ -2206,11 +2206,375 @@
 );%0A%0A
+%0A
 %09%7D%0A%0A%0A%7D%0A
+%0A%0A// PS. KATSO: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started%0A%09%09//https://stackoverflow.com/questions/5215181/proper-way-to-handle-304-not-modified-in-jquery-ajax%0A%0A%0A%09//dataContainer.insertAdjacentHTML('afterend', %22%22)%0A%0A%0A%09//$(htmlString).html(%22%22);%0A%0A%09//dataContainer.html(%22%22);%0A%0A%09//var htmlStringEmpty = %22%22;%0A%0A%09//$(%22#datatable%22).html(htmlstringEmpty);%0A

Update main.js