From ce5103be91203720cfafc335007aacfb7e4c60e3 Mon Sep 17 00:00:00 2001
From: Michael Scherle
Date: Wed, 8 Mar 2017 22:24:28 +0100
Subject: frontend: doorsing supports now multible overlays, overlay name has
 to be send from backend

---
 .../locationinfo/frontend/doorsign.html            | 99 +++++++++++++++-------
 1 file changed, 69 insertions(+), 30 deletions(-)

(limited to 'modules-available/locationinfo/frontend/doorsign.html')

diff --git a/modules-available/locationinfo/frontend/doorsign.html b/modules-available/locationinfo/frontend/doorsign.html
index 76a352ce..b01f520c 100755
--- a/modules-available/locationinfo/frontend/doorsign.html
+++ b/modules-available/locationinfo/frontend/doorsign.html
@@ -113,7 +113,7 @@ optional:
 		}
 
 		.roompadding {
-
+			float: left;
 		}
 
 		.room {
@@ -181,6 +181,15 @@ optional:
 			display: inline-block;
 
 		}
+		.OverlayDiv{
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			display: inline-block;
+			width: 100%;
+			height: 100%;
+			display: table;
+		}
 		.pcImg {
 			position: absolute;
 			left: 0;
@@ -190,14 +199,22 @@ optional:
 
 		}
 		.overlay{
-			position: absolute;
-			left: 0;
-			top: 0;
+			position: relative;
 			width: 50%;
-			height:50%;
+			height: 50%;
+			opacity: 0.5;
+			float:left;
 			z-index: 5;
 		}
 
+		.overlay-rollstuhl {
+			width: 25%;
+			height: 50%;
+			background-color: white;
+			opacity: 0.5;
+			float:left;
+		}
+
 		.wc-scrollable-grid {
 
 		}
@@ -250,16 +267,7 @@ optional:
 		[class*="wc-day-"] {
 			border-color: grey;
 		}
-	.overlay1 {
-		width: 20%;
-		height: 50%;
-		left: 0;
-		top: 0;
-		bottom: auto;
-		right: auto;
-		background-color: white;
-		opacity: 0.5
-	}
+
 
 	</style>
 	<script type='text/javascript'>
@@ -518,8 +526,13 @@ optional:
 						obj.style.paddingLeft = "0px";
 					}
 				}
+				/*
 				obj.style.width = width;
 				obj.style.height = height;
+				*/
+				obj.setAttribute("style","width:"+width);
+				obj.setAttribute("style","height:"+height);
+
 				text = "<div class='room'   id ='room_" + rooms[property].id + "'></div>";
 
 				$("#roompadding_" + rooms[property].id).append(text);
@@ -1196,7 +1209,6 @@ optional:
 		function preInitRoom(room) {
 
 			$.getJSON("../../../api.php?do=locationinfo&action=roominfo&id=" + room.id + "&coords=1", function (result) {
-				console.log(result);
 				generateRoomLayoutDiv((100 - room.config.scale) + "%", room);
 				if (result[0] == null) {
 
@@ -1309,7 +1321,6 @@ optional:
 
 
 			var tmp = [scaleYs, scaleY, scaleXs, scaleX,(clientHeight *0.9) / picSizeY,(clientWidth *0.9) / picSizeX];
-			console.log(tmp)
 			room.scale = Math.min.apply(Math, tmp);
 			room.xOffset = 0 - room.minX;
 			room.yOffset = 0 - room.minY;
@@ -1323,30 +1334,58 @@ optional:
 
 				if (layout[i].y != null && layout[i].x != null && !isNaN(layout[i].y) && !isNaN(layout[i].x)) {
 					var text =  "<div class= 'PCImgDiv'  id ='layout_PC_div_" + room.id + "_"+layout[i].id +"'>" +
-							"<img class= 'pcImg' id ='layout_PC_" + room.id + "_"+layout[i].id +"'> </img" +
+
+							"<div class= 'OverlayDiv' id ='layout_PC_overlay_"+ room.id + "_"+layout[i].id +"'>" +
+							"</div>"+
+						"<img class= 'pcImg' id ='layout_PC_" + room.id + "_"+layout[i].id +"'> </img>" +
 						"</div>";
 
 					$('#roomLayout_' + room.id).append(text);
-					addOverlay($('#layout_PC_div_'+ room.id + "_"+layout[i].id),1);
-					/*
-					var img = $('<img />',
-						{
-							id: "layout_PC_" + room.id + "_" + layout[i].id,
-							class: "pcImg"
-						})
-						.appendTo($('#roomLayout_' + room.id));
-						*/
+					if(layout[i].hasOwnProperty('overlay')) {
+						for (var a = 0; a < layout[i].overlay.length; a++) {
+							addOverlay($('#layout_PC_overlay_' + room.id + "_" + layout[i].id), layout[i].overlay[a]);
+						}
+					}
 				}
 			}
 		}
 
-		function addOverlay(object,overlayId) {
+		function addOverlay(object,overlayName) {
+
+
+			var a = [".svg",".png","jpg"];
+			var imgname;
+			for (var i = 0; i < a.length; a++ ) {
+				if(imageExists("img/overlay/" + overlayName + a[i])) {
+					imgname = "img/overlay/" + overlayName + a[i];
+					break;
+				}
 
-			var text = $("<img class='overlay'  src='img/overlay/"+ overlay[overlayId].name+ "'></img>")
-			text.addClass(overlay[overlayId].class);
+			}
+			if(imgname == null)
+			{
+				return;
+			}
+			var text = $("<img class='overlay'  src='"+ imgname+"'></img>");
+			text.addClass("overlay-"+overlayName);
 
 			object.append(text);
 
+
+		}
+
+		var imgExists = {};
+		// checks if images exists (chaches it also)
+		function imageExists(image_url){
+			if(!imgExists.hasOwnProperty(image_url))
+			{
+				var http = new XMLHttpRequest();
+				http.open('HEAD', image_url, false);
+				http.send();
+				imgExists[image_url] = http.status != 404;
+			}
+			return imgExists[image_url];
+
 		}
 
 		// querys Pc states
-- 
cgit v1.2.3-55-g7522