From 85fc1c91141df28af0578460f77ce87594858f60 Mon Sep 17 00:00:00 2001
From: Michael Scherle
Date: Sun, 18 Dec 2016 21:10:04 +0100
Subject: frontend: frontend now supports direkt calendar query if backends
 sends query url

---
 .../locationinfo/frontend/doorsign.html            | 248 +++++++++++----------
 1 file changed, 132 insertions(+), 116 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 2ad34768..2b2ce50f 100755
--- a/modules-available/locationinfo/frontend/doorsign.html
+++ b/modules-available/locationinfo/frontend/doorsign.html
@@ -49,6 +49,7 @@ optional:
 			width: 100%;
 
 		}
+
 		.header {
 			display: table;
 			color: white;
@@ -88,7 +89,6 @@ optional:
 			width: 33%;
 		}
 
-
 		.roomLayoutDesign {
 			position: relative;
 			background: linear-gradient(#cccccc, white);
@@ -141,7 +141,6 @@ optional:
 			overflow: visible;
 		}
 
-
 		.pcImg {
 			position: absolute;
 			left: 0;
@@ -191,57 +190,70 @@ optional:
 			-khtml-border-left-right-radius: 0;
 			border-top-left-radius: 0;
 		}
+
 		.wc-scrollable-grid .wc-day-column-first {
-			border-style:solid;
+			border-style: solid;
 
 		}
+
 		[class*="wc-day-"] {
 			border-color: grey;
 		}
 
-		@media (max-width: 1200px){
+		@media (max-width: 1200px) {
 			.square {
 				height: 60px;
 				width: 60px;
 			}
+
 			.FreeSeatsFont {
 				font-size: 45px;
 			}
+
 			.font {
 				font-size: 26px;
 			}
+
 			.header {
 				height: 60px;
 
 			}
 		}
-		@media (max-width: 800px){
+
+		@media (max-width: 800px) {
 			.square {
 				height: 50px;
 				width: 50px;
 			}
+
 			.FreeSeatsFont {
 				font-size: 35px;
 			}
+
 			.font {
 				font-size: 20px;
 			}
+
 			.header {
 				height: 50px;
 
 			}
 		}
-		@media (max-width: 600px){
+
+		@media (max-width: 600px) {
 			.square {
 				height: 40px;
 				width: 40px;
 			}
+
 			.FreeSeatsFont {
 				font-size: 30px;
 			}
+
 			.font {
 				font-size: 18px;
 			}
+
 			.header {
 				height: 40px;
 
@@ -251,7 +263,6 @@ optional:
 	</style>
 	<script type='text/javascript'>
 		var date;
-
 		var room;
 		var freeSeats;
 		var queryTimeCalendar;
@@ -272,7 +283,8 @@ optional:
 		var configupdate;
 		var scaleDaysAuto = false;
 		var eInkMode = false;
-		var supportSvg = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect);
+		var supportSvg = typeof SVGRect != "undefined";
+		var calendarQueryUrl;
 		var translation = {
 			"en": {
 				"room": "Room",
@@ -319,7 +331,7 @@ optional:
 				timeout: 30000,
 				success: function (result) {
 					if (configJson == null) {
-						if(result.room == null) {
+						if (result.room == null) {
 							var heading = $("#courseHeading");
 							heading.text("Error: wrong id");
 							heading.css({'font-size': "30px"});
@@ -328,7 +340,7 @@ optional:
 						getParamerter(result);
 						startMode();
 						delete result.time;
-					} else{
+					} else {
 						// Todo resync time?
 						delete result.time;
 						if (JSON.stringify(configJson) != JSON.stringify(result)) {
@@ -367,18 +379,18 @@ optional:
 				queryTimeCalendar = parseInt(json.calupdate) * 60 * 1000;
 				queryTimeRoom = parseInt(json.roomupdate) * 1000;
 				rotation = parseInt(json.rotation);
-
-				if(json.scaledaysauto!=null) {
+				calendarQueryUrl = json.calendarqueryurl;
+				if (json.scaledaysauto != null) {
 					scaleDaysAuto = JSON.parse(json.scaledaysauto)
 				}
 
-				if(json.vertical!=null) {
+				if (json.vertical != null) {
 					verticalmode = JSON.parse(json.vertical);
 				}
-				if(json.einkmode!=null) {
+				if (json.einkmode != null) {
 					eInkMode = JSON.parse(json.einkmode);
 				}
-				configupdate = parseInt(json.configupdate)* 60 * 1000;
+				configupdate = parseInt(json.configupdate) * 60 * 1000;
 				room = json.room;
 			}
 			var time = new Date(json.time);
@@ -452,7 +464,7 @@ optional:
 			if (mode == null || isNaN(mode) || mode > 4 || mode < 1) {
 				mode = 1;
 			}
-			if(rotation ==null||isNaN(rotation)||rotation < 0 || rotation > 4){
+			if (rotation == null || isNaN(rotation) || rotation < 0 || rotation > 4) {
 				rotation = 0;
 			}
 
@@ -464,8 +476,8 @@ optional:
 
 		function startMode() {
 			var updateRate = 1000;
-			if(eInkMode){
-				updateRate =updateRate* 60;
+			if (eInkMode) {
+				updateRate = updateRate * 60;
 			}
 			// mixed mode
 			if (mode == 1) {
@@ -530,15 +542,15 @@ optional:
 					return height;
 				},
 				eventRender: function (calEvent, $event) {
-					if (calEvent.end.getTime() < new myDate().getTime()) {
+					if (calEvent.end.getTime() < new MyDate().getTime()) {
 						$event.css("backgroundColor", "#aaa");
 						$event.find(".time").css({"backgroundColor": "#999", "border": "1px solid #888"});
-					} else if (calEvent.end.getTime() > new myDate().getTime() && calEvent.start.getTime() < new myDate().getTime()) {
+					} else if (calEvent.end.getTime() > new MyDate().getTime() && calEvent.start.getTime() < new MyDate().getTime()) {
 						$event.css("backgroundColor", "#25B002");
 						$event.find(".time").css({"backgroundColor": "#25B002", "border": "1px solid #888"});
 					}
 				},
-				date:myDate(),
+				date: MyDate(),
 				dateFormat: "j.n",
 				timeFormat: "G:i",
 				use24Hour: true,
@@ -556,13 +568,14 @@ optional:
 			$.getJSON("../../../api.php?do=locationinfo&action=openingtime&id=" + roomId, function (result) {
 				SetOpeningTimes(result)
 			})
-				.success(function() {
+				.success(function () {
 					scaleCalendar();
 					queryCalendar();
 				})
-				.error(function() {
+				.error(function () {
 					scaleCalendar();
-					queryCalendar();})
+					queryCalendar();
+				})
 		}
 
 		function generateCalendarDiv(width) {
@@ -584,14 +597,14 @@ optional:
 			openingTimes = [parsedOpenings['Sunday'], parsedOpenings['Monday'], parsedOpenings['Tuesday'],
 				parsedOpenings['Wednesday'], parsedOpenings['Thursday'],
 				parsedOpenings['Friday'], parsedOpenings['Saturday']];
-			if(mode == 3) {
+			if (mode == 3) {
 				return;
 			}
 			for (var i = 0; i < 7; i++) {
 				var tmp = openingTimes[i];
 				if (tmp != null) {
 					for (var d = 0; d < tmp.length; d++) {
-						var day = getNextDayOfWeek(new myDate(), i);
+						var day = getNextDayOfWeek(new MyDate(), i);
 						openingTimesCalendar.push({
 							"start": new Date(day.getFullYear(), day.getMonth(), day.getDate(),
 								tmp[d]['HourOpen'], tmp[d]['MinutesOpen']),
@@ -623,8 +636,12 @@ optional:
 			});
 		}
 		function queryCalendar() {
+			var url =  "../../../api.php?do=locationinfo&action=calendar&id=" + roomId;
+			if(!(calendarQueryUrl === undefined)) {
+				url = calendarQueryUrl;
+			}
 			$.ajax({
-				url: "../../../api.php?do=locationinfo&action=calendar&id="+roomId,
+				url: url,
 				dataType: 'json',
 				cache: false,
 				timeout: 30000,
@@ -657,19 +674,19 @@ optional:
 			var cal = $('#calendar');
 			var columnWidth = document.getElementsByClassName("wc-day-1")[0].clientWidth;
 
-			if(scaleDaysAuto) {
-				var result = (44 + cal.weekCalendar("option","daysToShow")*columnWidth)/100;
-				result = parseInt(Math.min(Math.max(Math.abs(result),1),7));
-				if(result != parseInt(cal.weekCalendar("option","daysToShow"))){
+			if (scaleDaysAuto) {
+				var result = (44 + cal.weekCalendar("option", "daysToShow") * columnWidth) / 100;
+				result = parseInt(Math.min(Math.max(Math.abs(result), 1), 7));
+				if (result != parseInt(cal.weekCalendar("option", "daysToShow"))) {
 					cal.weekCalendar("option", "daysToShow", Math.abs(result));
 				}
 			}
-			if(((!scaleDaysAuto)||cal.weekCalendar("option","daysToShow")==1)	&& columnWidth < 85){
+			if (((!scaleDaysAuto) || cal.weekCalendar("option", "daysToShow") == 1) && columnWidth < 85) {
 				cal.weekCalendar("option", "useShortDayNames", true);
 			} else {
 				cal.weekCalendar("option", "useShortDayNames", false);
 			}
-			var clientHeight = $(window).height() - document.getElementById('header').clientHeight - document.getElementsByClassName("wc-time-column-header")[0].clientHeight-10 ;
+			var clientHeight = $(window).height() - document.getElementById('header').clientHeight - document.getElementsByClassName("wc-time-column-header")[0].clientHeight - 10;
 			if (mode == 1 && verticalmode) {
 
 				clientHeight = clientHeight * (scaleLayout / 100);
@@ -708,13 +725,13 @@ optional:
 				// dont show?
 				return "";
 			}
-			if(eInkMode){
-				return hours + ":" + minutes ;
+			if (eInkMode) {
+				return hours + ":" + minutes;
 			}
 			return hours + ":" + minutes + ":" + seconds;
 		}
 		function GetNextClosing() {
-			var now = new myDate();
+			var now = new MyDate();
 			var day = now.getDay();
 			var offset = 0;
 			var bestdate;
@@ -722,7 +739,7 @@ optional:
 				var tmp = openingTimes[day];
 				if (tmp != null) {
 					for (var i = 0; i < tmp.length; i++) {
-						var closeDate = new myDate();
+						var closeDate = new MyDate();
 						closeDate.setDate(now.getDate() + offset);
 						closeDate.setHours(tmp[i].HourClose);
 						closeDate.setMinutes(tmp[i].MinutesClose);
@@ -747,8 +764,8 @@ optional:
 		 * @return {boolean}
 		 */
 		function IsOpenNow() {
-			var now = new myDate();
-			if(openingTimes == null) {
+			var now = new MyDate();
+			if (openingTimes == null) {
 				return false;
 			}
 			var tmp = openingTimes[now.getDay()];
@@ -756,10 +773,10 @@ optional:
 				return false;
 			}
 			for (var i = 0; i < tmp.length; i++) {
-				var openDate = new myDate();
+				var openDate = new MyDate();
 				openDate.setHours(tmp[i].HourOpen);
 				openDate.setMinutes(tmp[i].MinutesOpen);
-				var closeDate = new myDate();
+				var closeDate = new MyDate();
 				closeDate.setHours(tmp[i].HourClose);
 				closeDate.setMinutes(tmp[i].MinutesClose);
 				if (openDate < now && closeDate > now) {
@@ -772,7 +789,7 @@ optional:
 		 * @return {boolean}
 		 */
 		function IsOpen(date) {
-			if(openingTimes == null) {
+			if (openingTimes == null) {
 				return false;
 			}
 			var tmp = openingTimes[date.getDay()];
@@ -780,10 +797,10 @@ optional:
 				return false;
 			}
 			for (var i = 0; i < tmp.length; i++) {
-				var openDate = new myDate();
+				var openDate = new MyDate();
 				openDate.setHours(tmp[i].HourOpen);
 				openDate.setMinutes(tmp[i].MinutesOpen);
-				var closeDate = new myDate();
+				var closeDate = new MyDate();
 				closeDate.setHours(tmp[i].HourClose);
 				closeDate.setMinutes(tmp[i].MinutesClose);
 				if (openDate < date && closeDate > date) {
@@ -795,18 +812,18 @@ optional:
 
 
 		function GetNextOpening() {
-			var now = new myDate();
+			var now = new MyDate();
 			var day = now.getDay();
 			var offset = 0;
 			var bestdate;
 			for (var a = 0; a < 7; a++) {
-				if(openingTimes == null) {
+				if (openingTimes == null) {
 					return null;
 				}
 				var tmp = openingTimes[day];
 				if (tmp != null) {
 					for (var i = 0; i < tmp.length; i++) {
-						var openDate = new myDate();
+						var openDate = new MyDate();
 						openDate.setDate(now.getDate() + offset);
 						openDate.setHours(tmp[i].HourOpen);
 						openDate.setMinutes(tmp[i].MinutesOpen);
@@ -849,17 +866,17 @@ optional:
 				return;
 			}
 			if (tmp.state == "closed") {
-				$("#courseHeading").text(t("closed") + " " + GetTimeDiferenceAsString(tmp.end, new myDate()));
+				$("#courseHeading").text(t("closed") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate()));
 				SetFreeSeats(-1);
 			} else if (tmp.state == "ClaendarEvent") {
 				$("#courseHeading").text(state.titel);
 				SetFreeSeats(-1);
 			} else if (tmp.state == "Free") {
-				$("#courseHeading").text(t("free") + " " + GetTimeDiferenceAsString(tmp.end, new myDate()));
+				$("#courseHeading").text(t("free") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate()));
 			} else if (tmp.state == "FreeNoEnd") {
 				$("#courseHeading").text(t("free"));
 			}
-			var now = new myDate();
+			var now = new MyDate();
 			//console.log(now.getHours()+":"+now.getMinutes()+":"+now.getSeconds());
 			// reload if date Changes
 			if (date != null) {
@@ -876,7 +893,7 @@ optional:
 				return state;
 			}
 			if (state.end != "") {
-				if (state.end < new myDate()) {
+				if (state.end < new MyDate()) {
 					ComputeCurrentState();
 				}
 			}
@@ -903,7 +920,7 @@ optional:
 			}
 
 			// event is at the moment
-			if (event.start.getTime() < closing.getTime() && event.start.getTime() < new myDate()) {
+			if (event.start.getTime() < closing.getTime() && event.start.getTime() < new MyDate()) {
 				state = {state: "ClaendarEvent", end: event.end, titel: event.title, next: ""};
 				return;
 			}
@@ -924,7 +941,7 @@ optional:
 
 		function getNextEvent(json) {
 			var event;
-			var now = new myDate();
+			var now = new MyDate();
 			for (var i = 0; i < json.length; i++) {
 				//event is now active
 				if (json[i].start.getTime() < now.getTime() && json[i].end.getTime() > now.getTime()) {
@@ -973,7 +990,7 @@ optional:
 			var div = document.createElement("div");
 			div.id = "roomLayout";
 			div.className = "roomLayoutDesign";
-			if ((verticalmode && mode == 1) || (mode == 3)|| (mode == 4)) {
+			if ((verticalmode && mode == 1) || (mode == 3) || (mode == 4)) {
 				width = 100 + "%";
 				div.float = "Top";
 			}
@@ -985,58 +1002,58 @@ optional:
 		function preInitRoom() {
 			$.getJSON("../../../api.php?do=locationinfo&action=roominfo&id=" + roomId + "&coords=1", function (result) {
 				initRoom(result, (100 - scaleLayout) + "%")
-			}).error(function() {
+			}).error(function () {
 				generateRoomLayoutDiv((100 - scaleLayout) + "%");
 			})
 		}
 
 
-			function initRoom(Json, scale) {
+		function initRoom(Json, scale) {
 
-				Layout = Json;
-				if(Layout == null||Layout.length == 0) {
-					return;
-				}
-				generateRoomLayoutDiv(scale);
-				if (rotation != 0) {
-					rotateRoom(rotation);
-				}
+			Layout = Json;
+			if (Layout == null || Layout.length == 0) {
+				return;
+			}
+			generateRoomLayoutDiv(scale);
+			if (rotation != 0) {
+				rotateRoom(rotation);
+			}
 
-				for (var i = 0; i < Layout.length; i++) {
-					if(!isNaN(parseInt(Layout[i].x)) && ! isNaN(parseInt(Layout[i].y))) {
-						if(minX === undefined){
-							minX = parseInt(Layout[i].x);
-						}
-						if(minY === undefined){
-							minY = parseInt(Layout[i].y);
-						}
-						if(maxX === undefined){
-							maxX = parseInt(Layout[i].x);
-						}
-						if(maxY === undefined){
-							maxY = parseInt(Layout[i].y);
-						}
-						if (parseInt(Layout[i].x) < parseInt(minX)) {
-							minX = parseInt(Layout[i].x);
-						}
-						if (parseInt(Layout[i].y) < parseInt(minY)) {
-							minY = parseInt(Layout[i].y);
-						}
-						if (parseInt(Layout[i].x) > parseInt(maxX)) {
-							maxX = parseInt(Layout[i].x);
-						}
-						if (parseInt(Layout[i].y) > parseInt(maxY)) {
-							maxY = parseInt(Layout[i].y);
-						}
+			for (var i = 0; i < Layout.length; i++) {
+				if (!isNaN(parseInt(Layout[i].x)) && !isNaN(parseInt(Layout[i].y))) {
+					if (minX === undefined) {
+						minX = parseInt(Layout[i].x);
+					}
+					if (minY === undefined) {
+						minY = parseInt(Layout[i].y);
+					}
+					if (maxX === undefined) {
+						maxX = parseInt(Layout[i].x);
+					}
+					if (maxY === undefined) {
+						maxY = parseInt(Layout[i].y);
+					}
+					if (parseInt(Layout[i].x) < parseInt(minX)) {
+						minX = parseInt(Layout[i].x);
+					}
+					if (parseInt(Layout[i].y) < parseInt(minY)) {
+						minY = parseInt(Layout[i].y);
+					}
+					if (parseInt(Layout[i].x) > parseInt(maxX)) {
+						maxX = parseInt(Layout[i].x);
+					}
+					if (parseInt(Layout[i].y) > parseInt(maxY)) {
+						maxY = parseInt(Layout[i].y);
 					}
 				}
-
-				xDifference = maxX - minX;
-				yDifference = maxY - minY;
-				generateOffsetAndScale();
-				setUpRoom();
 			}
 
+			xDifference = maxX - minX;
+			yDifference = maxY - minY;
+			generateOffsetAndScale();
+			setUpRoom();
+		}
+
 		function generateOffsetAndScale() {
 			var clientHeight = ($(window).height() - document.getElementById('header').clientHeight - 5);
 			if (verticalmode && mode == 1) {
@@ -1079,7 +1096,7 @@ optional:
 				var img = $('<img />',
 					{
 						id: Layout[i].id,
-						class: "pcImg",
+						class: "pcImg"
 					})
 					.appendTo($('#roomLayout'));
 			}
@@ -1120,11 +1137,11 @@ optional:
 		}
 
 		function scaleRoom() {
-			if(Layout== null) {
+			if (Layout == null) {
 				return;
 			}
 			for (var i = 0; i < Layout.length; i++) {
-				if(Layout[i].y!= null & Layout[i].x!=null) {
+				if (Layout[i].y != null && Layout[i].x != null) {
 					document.getElementById(Layout[i].id).width = (picSizeX * scale);
 					document.getElementById(Layout[i].id).height = (picSizeY * scale);
 					document.getElementById(Layout[i].id).style.left = ((parseInt(Layout[i].x) + xOffset) * scale) + "px";
@@ -1137,35 +1154,35 @@ optional:
 		function UpdatePc(update) {
 			var freePcs = 0;
 			for (var i = 0; i < update.length; i++) {
-				var imgobj =document.getElementById(update[i].id);
+				var imgobj = document.getElementById(update[i].id);
 
 				var img;
 				if (update[i].pcState == "0") {
 					//add time to prevent caching
-					if(supportSvg) {
+					if (supportSvg) {
 						img = "img/pc_free";
 					} else {
-						imgobj.style.backgroundColor="green";
+						imgobj.style.backgroundColor = "green";
 					}
 					freePcs++;
 				} else if (update[i].pcState == "1") {
-					if(supportSvg) {
+					if (supportSvg) {
 						img = "img/pc_used";
-					}else {
-						imgobj.style.backgroundColor="red";
+					} else {
+						imgobj.style.backgroundColor = "red";
 					}
 				} else {
-					if(supportSvg) {
+					if (supportSvg) {
 						img = "img/pc_defect?";
-					}else {
-						imgobj.style.backgroundColor="black";
+					} else {
+						imgobj.style.backgroundColor = "black";
 					}
 				}
-				if(imgobj !=null && supportSvg) {
-					if(eInkMode){
+				if (imgobj != null && supportSvg) {
+					if (eInkMode) {
 						img = img + "_eink";
 					}
-					imgobj.src = img+ ".svg";
+					imgobj.src = img + ".svg";
 				}
 			}
 			if (state == null || state.state == "FreeNoEnd" || state.state == "Free") {
@@ -1200,7 +1217,7 @@ optional:
 				sParameterName,
 				i;
 
-			for (var i = 0; i < sURLVariables.length; i++) {
+			for (i = 0; i < sURLVariables.length; i++) {
 				sParameterName = sURLVariables[i].split('=');
 
 				if (sParameterName[0] === sParam) {
@@ -1224,14 +1241,14 @@ optional:
 			if (car.style.display == "none") {
 				room.style.display = "none";
 				car.style.display = "block";
-				if(resized){
+				if (resized) {
 					scaleCalendar();
 					resized = false;
 				}
 			} else {
 				car.style.display = "none";
 				room.style.display = "block";
-				if(resized){
+				if (resized) {
 					generateOffsetAndScale();
 					scaleRoom();
 					resized = false;
@@ -1265,16 +1282,15 @@ optional:
 		}
 
 
-
 	</script>
 </head>
 <body>
 <div id="header" class="row">
 	<div class="header col-2">
-		<div class ="font" id="roomHeader"></div>
+		<div class="font" id="roomHeader"></div>
 	</div>
 	<div class="col-1 courseText header">
-		<div class ="font"  id="courseHeading"></div>
+		<div class="font" id="courseHeading"></div>
 	</div>
 	<div class="square .col-2">
 		<div class="FreeSeatsFont" id="freeSeatsHeader"></div>
-- 
cgit v1.2.3-55-g7522