frontend: doorsing supports now multible overlays, overlay name has to be send from backend

1 files changed, 69 insertions, 30 deletions

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