From 3cfaa2e036aed5dc11a2724c3574bdd1b3c8085c Mon Sep 17 00:00:00 2001
From: wez3 <wez3@users.noreply.github.com>
Date: Sat, 14 Jan 2017 18:00:22 +0100
Subject: [PATCH] Modify top tiles to allow multiple devices with the same IDX.
 Issue #61

---
 static/js/domoboard.js   | 18 +++++++++---------
 templates/top_tiles.html |  6 ++++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/static/js/domoboard.js b/static/js/domoboard.js
index 4f987b6..0731dc5 100644
--- a/static/js/domoboard.js
+++ b/static/js/domoboard.js
@@ -102,24 +102,24 @@ function refreshTopTiles(updateDivs, block, tilesPreviousArray, updateDivsTypeAr
 		tilesArray = re.exec(data);
 		if (tilesArray != null) {
 			if (tilesArray[1] < tilesPreviousArray[i]) {
-				$("#" + block + divID).html(tilesArray[1] + "<font size='3'>" + tilesArray[2] + " <i class='fa fa-caret-down fa-lg' style='color:red'></font>");
+				$("#" + block + divID + "_" + updateDivsTypeArray[i]).html(tilesArray[1] + "<font size='3'>" + tilesArray[2] + " <i class='fa fa-caret-down fa-lg' style='color:red'></font>");
 				tilesPreviousArray[i] = tilesArray[1];
 			} else if (tilesArray[1] > tilesPreviousArray[i]) {
-				$("#" + block + divID).html(tilesArray[1] + "<font size='3'>" + tilesArray[2] + " <i class='fa fa-caret-up fa-lg' style='color:green'></font>");
+				$("#" + block + divID  + "_" + updateDivsTypeArray[i]).html(tilesArray[1] + "<font size='3'>" + tilesArray[2] + " <i class='fa fa-caret-up fa-lg' style='color:green'></font>");
 				tilesPreviousArray[i] = tilesArray[1];
 			}
 		} else {
-			$("#" + block + divID).html(data);
+			$("#" + block + divID + "_" + updateDivsTypeArray[i]).html(data);
 		}
 		if(data == "On") {
-			$("#" + block + divID).removeClass("red");
-			$("#" + block + divID).addClass("green");
+			$("#" + block + divID + "_" + updateDivsTypeArray[i]).removeClass("red");
+			$("#" + block + divID + "_" + updateDivsTypeArray[i]).addClass("green");
 		} else if(data == "Off") {
-			$("#" + block + divID).removeClass("green");
-			$("#" + block + divID).addClass("red");
+			$("#" + block + divID + "_" + updateDivsTypeArray[i]).removeClass("green");
+			$("#" + block + divID + "_" + updateDivsTypeArray[i]).addClass("red");
 		} else {
-			$("#" + block + divID).removeClass("green");
-			$("#" + block + divID).removeClass("red");
+			$("#" + block + divID + "_" + updateDivsTypeArray[i]).removeClass("green");
+			$("#" + block + divID + "_" + updateDivsTypeArray[i]).removeClass("red");
 		}
 	});
     i = i++;
diff --git a/templates/top_tiles.html b/templates/top_tiles.html
index 359530f..cbf2779 100644
--- a/templates/top_tiles.html
+++ b/templates/top_tiles.html
@@ -5,7 +5,7 @@
     <div class="left"></div>
     <div class="right">
       <span class="count_top"><i class="fa fa-{{v[2]}}"></i> {{k}}</span>
-      <div class="count{% if v[2] == "On" %} green{% elif v[2] == "Off" %} red{% endif %} loading" id="top_tiles_block_{{count}}_{{v[1]}}" style="white-space: nowrap;"></div>
+      <div class="count{% if v[2] == "On" %} green{% elif v[2] == "Off" %} red{% endif %} loading" id="top_tiles_block_{{count}}_{{v[1]}}_{% if v[3] %}{{v[3]}}{% else %}Data{% endif %}" style="white-space: nowrap;"></div>
     </div>
   </div>
   {% endfor %}
@@ -26,8 +26,10 @@
 
   tilesPreviousArray_{{count}} = refreshTopTiles(updateDivs_block_{{count}}, "top_tiles_block_{{count}}_", tilesPreviousArray_{{count}}, updateDivsType_block_{{count}});
   tilesPreviousArray_{{count}} = setInterval(refreshTopTiles, 9000, updateDivs_block_{{count}}, "top_tiles_block_{{count}}_", tilesPreviousArray_{{count}}, updateDivsType_block_{{count}});
+  var counter = 0;
   for (var i in updateDivs_block_{{count}}) {
-    $("#top_tiles_block_{{count}}_" + updateDivs_block_{{count}}[i]).removeClass("loading");
+    $("#top_tiles_block_{{count}}_" + updateDivs_block_{{count}}[i] + "_" + updateDivsType_block_{{count}}[counter]).removeClass("loading");
+    counter += 1;
   }
 });
 </script>