frontend: fixed loading bar in mode 4, mode 4 now supports up to 4 rooms, font scaling for 1-4 rooms

1 files changed, 60 insertions, 25 deletions

diff --git a/modules-available/locationinfo/frontend/doorsign.html b/modules-available/locationinfo/frontend/doorsign.html
index 378dbc69..e628b00d 100755
--- a/modules-available/locationinfo/frontend/doorsign.html
+++ b/modules-available/locationinfo/frontend/doorsign.html
@@ -43,9 +43,11 @@ optional:
 			height: 100%;

 			float: left;

 			box-sizing: border-box;

-			display: flex;

+

 			background-color: #cacaca;

 			overflow: hidden;

+			position: absolute;

+			display: table;

 

 		}

 

@@ -71,7 +73,7 @@ optional:
 			height: 2px;

 			position: absolute;

 			background-color: red;

-			bottom: 0px;

+			bottom: 2px;

 			z-index: 1;

 		}

 

@@ -114,6 +116,7 @@ optional:
 

 		.roompadding {

 			float: left;

+			position: relative;

 		}

 

 		.room {

@@ -185,7 +188,6 @@ optional:
 			position: absolute;

 			left: 0;

 			bottom: 0;

-			display: inline-block;

 			width: 100%;

 			height: 100%;

 			display: table;

@@ -520,19 +522,8 @@ optional:
 

 

 				var obj = document.getElementById("roompadding_" + rooms[property].id);

-				if (roomsToshow > 1) {

-					obj.style.padding = "5px";

-					if (i != 0) {

-						obj.style.paddingLeft = "0px";

-					}

-				}

-				/*

-				obj.style.width = width;

 				obj.style.height = height;

-				*/

-				obj.setAttribute("style","width:"+width);

-				obj.setAttribute("style","height:"+height);

-

+				obj.style.width = width;

 				text = "<div class='room'   id ='room_" + rooms[property].id + "'></div>";

 

 				$("#roompadding_" + rooms[property].id).append(text);

@@ -556,11 +547,39 @@ optional:
 				}

 

 				if (roomsToshow == 2) {

-					document.getElementById("square_" + rooms[property].id).style.width = "8vw";

-					document.getElementById("square_" + rooms[property].id).style.height = "8vw";

-					document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "2vw";

-					document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "5vw";

-					document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "2vw";

+					document.getElementById("square_" + rooms[property].id).style.width = "6vw";

+					document.getElementById("square_" + rooms[property].id).style.height = "6vw";

+					document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.8vw";

+					document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "4.5vw";

+					document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.8vw";

+					var headers =     document.getElementsByClassName('header');

+					for(var j=0; j<headers.length; j++) {

+						headers[j].style.height= "6vw";

+					}

+				}

+				if (roomsToshow == 3) {

+					document.getElementById("square_" + rooms[property].id).style.width = "4vw";

+					document.getElementById("square_" + rooms[property].id).style.height = "4vw";

+					document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.2vw";

+					document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "2.5vw";

+					document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.2vw";

+					var headers =     document.getElementsByClassName('header');

+					for(var j=0; j<headers.length; j++) {

+						headers[j].style.height= "4vw";

+					}

+

+				}

+				if (roomsToshow == 4) {

+					document.getElementById("square_" + rooms[property].id).style.width = "4vw";

+					document.getElementById("square_" + rooms[property].id).style.height = "4vw";

+					document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.5vw";

+					document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "2.5vw";

+					document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.5vw";

+

+					var headers =     document.getElementsByClassName('header');

+					for(var j=0; j<headers.length; j++) {

+						headers[j].style.height= "4vw";

+					}

 				}

 

 

@@ -719,11 +738,15 @@ optional:
 				timeslotHeight: 20,

 				daysToShow: daysToShow,

 				height: function ($calendar) {

-					var height = $(window).height() - document.getElementById('header_' + room.id).clientHeight - 5;

+					var height = $(window).height();

+					if(roomsToshow == 4) {

+						height = height/2;

+					}

+

+					height = height- document.getElementById('header_' + room.id).clientHeight - 5;

 					if (room.config.mode == 1 && room.config.vertical) {

 						height = height * (room.config.scale / 100)

 					}

-

 					return height;

 				},

 				eventRender: function (calEvent, $event) {

@@ -904,8 +927,13 @@ optional:
 			} else {

 				cal.weekCalendar("option", "useShortDayNames", false);

 			}

-			var clientHeight = $(window).height() - document.getElementById('header_' + room.id).clientHeight

-				- document.getElementsByClassName("wc-time-column-header")[0].clientHeight - 10;

+			var clientHeight = $(window).height();

+			if(roomsToshow == 4) {

+				clientHeight = clientHeight/2;

+			}

+

+			clientHeight = clientHeight	- document.getElementById('header_' + room.id).clientHeight

+				- document.getElementsByClassName("wc-time-column-header")[0].clientHeight -2;

 			if (roomsToshow > 1) {

 				clientHeight -= 5;

 			}

@@ -1287,7 +1315,14 @@ optional:
 		}

 

 		function generateOffsetAndScale(room) {

-			var clientHeight = ($(window).height() - document.getElementById('header_' + room.id).clientHeight - 5);

+

+

+			var clientHeight = $(window).height();

+			if(roomsToshow == 4) {

+				clientHeight = clientHeight/2;

+			}

+

+			clientHeight = clientHeight- document.getElementById('header_' + room.id).clientHeight - 5;

 

 			if (roomsToshow > 1) {

 				clientHeight -= 5;