sps100_block-CSDN博客

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/102684906
<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	    <title>Learn LMS - Control Lights</title>
	
	    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">
	    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.mCustomScrollbar.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style2.css">
		<style>
			.zoom {
				transition: transform .2s;
				margin: 0 auto;
				border-radius: 10px;
				cursor: pointer;
				width: 31%;
				display: inline-block; 
			}
				
			.zoom:hover {
				-ms-transform: scale(1.1); /* IE 9 */
				-webkit-transform: scale(1.1); /* Safari 3-8 */
				transform: scale(1.1); 
			}
				
			#bottom {
				width: 100%;
				text-align: center;
				font-size: 15px;
			}

		</style>
		
		<!-- STATIC LIGHT CSS -->
		<!-- <style>
			.content {
				position:absolute;
				/*width:1200px;
				height:800px;
				border:1px solid red; */
				top: 0; bottom: 0; right: 0; left: 0;
			  	outline: thin dashed blue;
				background: url(${pageContext.request.contextPath}/img/content_Holder.png) center; 
				background-size: cover;
				background-position: center;	
							
			}	
			
			.mapContainer {
			  	width: 100%;
			  	position: relative;
			}
			
			.mapFiller {
			  	width: 100%; 
			}
			
			.mapLight {
				cursor: pointer;
				position:absolute;
				width:2%;
				height:9%;
				background: url(${pageContext.request.contextPath}/img/sps100.jpg) center; 
				background-size: contain;							
			}
			.mapLightTitle {
				cursor: pointer;
				position:absolute;
				font-size:18px;
				color:red;
			}
			
			.mapLight:hover{
				-ms-transform: scale(1.5); /* IE 9 */
				-webkit-transform: scale(1.5); /* Safari 3-8 */
				transform: scale(1.5); 
			}
		</style> -->
			
		<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/solid.js"></script>
		<script src="${pageContext.request.contextPath}/js/fontawesome.js"></script>
	    <script src="${pageContext.request.contextPath}/js/jquery.mCustomScrollbar.concat.min.js"></script>
	  	<script src="${pageContext.request.contextPath}/js/popper.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/mqttws31.js"></script>
		
		<script type="text/javascript">
	        $(document).ready(function() {
	            $("#sidebar").mCustomScrollbar({
	                theme: "minimal"
	            });
	
	            $('#sidebarCollapse').on('click', function () {
	                $('#sidebar, #content').toggleClass('active');
	                $('.collapse.in').toggleClass('in');
	                $('a[aria-expanded=true]').attr('aria-expanded', 'false');
	            });

	    	    
	    	    {document.getElementById("stopLoopAllLight").style.display="none";}
	    	    {document.getElementById("stopLoopLight").style.display="none";}
	    	    
	            alert('Connecting to MQTT. \nPlease press OK and wait for \'Connected\' to appear');
	            
	            var clientName = "lms_server" + new Date().getTime();
				//Using the HiveMQ public Broker, with a random client Id
				var client = new Messaging.Client("broker.hivemq.com", 8000, clientName);
				//var client = new Messaging.Client("localhost", 9001, clientName);

				 //Gets  called if the websocket/mqtt connection gets disconnected for any reason
				 client.onConnectionLost = function (responseObject) {
				     //Depending on your scenario you could implement a reconnect logic here
				     alert("connection lost: " + responseObject.errorMessage);
				 };

				 //Gets called whenever you receive a message for your subscriptions
				 client.onMessageArrived = function (message) {
				     //Do something with the push message you received
				     $('#messages').append('<span>Topic: ' + message.destinationName + '  | ' + message.payloadString + '</span><br/>');
				 };

				 //Connect Options
				 var options = {
				     timeout: 3,
				     userName: clientName,
				     password: clientName,
				     //Gets Called if the connection has sucessfully been established
				     onSuccess: function () {
				    	 /*var msg = "Hello from LMS"
				    	 var topic = "${topic}"
				         alert("Topic: " + topic + ", Msg: ");
		    	  		 publish(msg, topic, 1);
		    	  		 client.disconnect();*/
		    	  		 alert('Connected');
				     },
				     //Gets Called if the connection could not be established
				     onFailure: function (message) {
				         alert("Connection failed: " + message.errorMessage);
				     }
				 };

				 //Creates a new Messaging.Message Object and sends it to the HiveMQ MQTT Broker
				 var publish = function (payload, topic, qos) {
				     //Send your message (also possible to serialize it as JSON or protobuf or just use a string, no limitations)
				     var message = new Messaging.Message(payload);
				     message.destinationName = topic;
				     message.qos = qos;
				     client.send(message);
					 console.info("mqtt msg: " + message);
				 }
				 
 	  			client.connect(options);

	         	<c:forEach items="${lightList}" var="item" varStatus="loop">
			    	var coordinate = "${item.coordinates}";
			    	//console.info(groupMap);
   					var pair = coordinate.split(",");
   					//console.info(pair);
   					var top2 = pair[0];
   					//var top3 = +pair[0] + +8;
   					var top3 = +pair[0] + +9;
   					var left2 = pair[1];
   					var left3 = pair[1] - +0.4;
		            $('#mapLight'+${item.lightId}).css({top : top2 + '%', left : left2 + '%' });
		            $('#mapLightTitle'+${item.lightId}).css({top : top3 + '%', left : left3 + '%' });
			    </c:forEach>

				
	    	    $("#blocks").on("click", "td", function() {
	    	        var cid = document.getElementById("communityId").value;
	    	        document.getElementById("BcommunityId").value = cid;
	
	    	        var id = $(this).data("id");
	    	        document.getElementById("BblockId").value = id;
	    	        
	    	        changeBlock();
	    	    });
	        
	    	    $("#floors").on("click", "td", function() {
	    	        var cid = document.getElementById("communityId").value;
	    	        document.getElementById("FcommunityId").value = cid;
	
	    	    	var bid = $(this).data("block-id");
	    	        document.getElementById("FblockId").value = bid;
	    	        
	    	        var fid = $(this).data("floor-id");
	    	        document.getElementById("FfloorNO").value = fid;
	    	        
	    	    	var id = $(this).data("id");
	    	        document.getElementById("FfloorId").value = id;
	
	    	        changeFloor();
	    	    });
	    	    
	    	    $("#lights").on("click", "td", function() {
	    	        var cid = document.getElementById("communityId").value;
	    	        document.getElementById("LcommunityId").value = cid;
	
	    	    	var bid = $(this).data("block");
	    	        document.getElementById("LblockId").value = bid;
	    	        
	    	    	var fid = $(this).data("floor");
	    	        document.getElementById("LfloorId").value = fid;
	    	        
	    	    	var id = $(this).data("id");
	    	        document.getElementById("LlightId").value = id;
	    			
	    	        var chk = $(this).find("input:checkbox").get(0);
	    	       	chk.checked = !chk.checked;
	    	    });
	    	    
			    $("#mapLights").on("click", "a", function() {
			    	var cid = document.getElementById("communityId").value;
		    	    document.getElementById("MLcommunityId").value = cid;
		    	        
		    	    var bid = $(this).data("block");
	    	        document.getElementById("MLblockId").value = bid;
	    	        
	    	    	var fid = $(this).data("floor");
	    	        document.getElementById("MLfloorId").value = fid;
	    	        
	    	    	var id = $(this).data("id");
	    	        document.getElementById("MLlightId").value = id;
	    	        	    	        
			        changeLight();
			      });
	    	    
			    
	    	    $("#turnOnLight").on("click", function() {
	    	       	var chk = [];
	    	        $.each($("input[name='lightChecked']:checked"), function(){            
	    	        	chk.push($(this).val());
	    	       	});
	    	     	
	    	     	var r = confirm("Turn ON selected light(s)? \n" + chk.join(","));
	    	    	if (r == true) {
	    	    		var myData = new Date(); 
	    				var eventId = myData.getTime();
	    					//var lightId = ${lightId};
	    				var idArr = [{whatId:4,idValues:chk}];
	    				var blockId = ${blockId};
	    					
	    	  			var params = {
	    	  				eventId:eventId,
							messageCode:2,
							idArr:idArr,
							//Turnon ctrl = 1
							ctrl:1,								
							blockIdValue:blockId
	  					}
	  					var msg = JSON.stringify(params);
					    var topic = "${topic}"
					    //alert("Topic: " + topic + ", Msg: " + msg);
			    	    publish(msg, topic, 1);
	    	    	} else {
	    	    	    alert("Cancelled!");
	    	    	}
	    	    });
	    	    
	    	    $("#turnOffLight").on("click", function() {
	    	       	var chk = [];
	    	        $.each($("input[name='lightChecked']:checked"), function(){            
	    	        	chk.push($(this).val());
	    	       	});
	    	     	
	    	     	var r = confirm("Turn OFF selected light(s) \n" + chk.join(","));
	    	    	if (r == true) {
	    	    		var myData = new Date(); 
	    				var eventId = myData.getTime();
	    				//var lightId = ${lightId};
	    				var idArr = [{whatId:4,idValues:chk}];
	    				var blockId = ${blockId};
	    					
		    	  		var params = {
		    	  				eventId:eventId,
								messageCode:2,
								idArr:idArr,
								//Turnoff ctrl = 0
								ctrl:0,								
								blockIdValue:blockId
		  				}
		  				var msg = JSON.stringify(params);
						var topic = "${topic}"
						//alert("Topic: " + topic + ", Msg: " + msg);
				    	publish(msg, topic, 1);
	    	    	} else {
	    	    		alert("Cancelled!");
	    	    	}
	    	    });
	    	    
	    	    $("#turnNormalLight").on("click", function() {
	    	       	var chk = [];
	    	        $.each($("input[name='lightChecked']:checked"), function(){            
	    	        	chk.push($(this).val());
	    	       	});
	    	     	
	    	     	var r = confirm("Turn NORMAL selected light(s) \n" + chk.join(","));
	    	    	if (r == true) {
	    	    		var myData = new Date(); 
	    				var eventId = myData.getTime();
	    				//var lightId = ${lightId};
	    				var idArr = [{whatId:4,idValues:chk}];
	    				var blockId = ${blockId};
	    				
	    				var params = {
	    	  				eventId:eventId,
							messageCode:2,
							idArr:idArr,
							//Turn normal ctrl = 2
							ctrl:2,								
							blockIdValue:blockId
		  				}
		  				var msg = JSON.stringify(params);
						var topic = "${topic}"
				    	publish(msg, topic, 1);
	    	    	} else {
	    	    	    alert("Cancelled!");
	    	    	}
	    	    });
	    	    
	    	    $("#turnOnAllLight").click(function(){
	    	    	 var r = confirm("Turn ON all lights?");
	    	    	  if (r == true) {
	    	    		var myData = new Date(); 
	    	  			var eventId = myData.getTime();
	    	  			var blockId = ${blockId};
	    	  			var idArr = [{whatId:2,idValues:[blockId]}];
	    	  		
	    	  			var params = {
	  							eventId:eventId,
	  							messageCode:2,
	  							idArr:idArr,
	  							//Turnon ctrl = 1
	  							ctrl:1
	  					}
	  					var msg = JSON.stringify(params);
					    var topic = "${topic}"
					    //alert("Topic: " + topic + ", Msg: " + msg);
			    	    publish(msg, topic, 1);
			    	    //client.disconnect();
	    	    	  } else {
	    	    	    alert("Cancelled!");
	    	    	  }
	    		});
	    	   
	    	    
	    	    $("#turnOffAllLight").click(function(){
	    	    	 var r = confirm("Turn OFF all lights?");
	    	    	  if (r == true) {
	    	    		var myData = new Date(); 
	    	  			var eventId = myData.getTime();
	    	  			var blockId = ${blockId};
	    	  			var idArr = [{whatId:2,idValues:[blockId]}];
	    	  			var ws;
	    	  			
	    	  			var params = {
	  							eventId:eventId,
	  							messageCode:2,
	  							idArr:idArr,
	  							//Turnoff ctrl = 0
	  							ctrl:0
	  					}
	  					var msg = JSON.stringify(params);
					    var topic = "${topic}"
					    //alert("Topic: " + topic + ", Msg: " + msg);
			    	    publish(msg, topic, 1);
			    	    //client.disconnect();
	    	    	  } else {
	    	    	    alert("Cancelled!");
	    	    	  }
	    		});
	    	    

	    	    $("#turnNormalAllLight").click(function(){
	    	    	 var r = confirm("Turn NORMAL all lights?");
	    	    	  if (r == true) {
	    	    		var myData = new Date(); 
	    	  			var eventId = myData.getTime();
	    	  			var blockId = ${blockId};
	    	  			var idArr = [{whatId:2,idValues:[blockId]}];
	    	  			
	    	  			var params = {
	  							eventId:eventId,
	  							messageCode:2,
	  							idArr:idArr,
	  							//Turn normal ctrl = 2
	  							ctrl:2
	  					}
	  					var msg = JSON.stringify(params);
					    var topic = "${topic}"
					    //alert("Topic: " + topic + ", Msg: " + msg);
			    	    publish(msg, topic, 1);
			    	    //client.disconnect();
	    	    	  } else {
	    	    	    alert("Cancelled!");
	    	    	  }
	    		});
	    	    
	    	    interval = null;
	    	    interval2 = null;

	    	    $("#loopAllLight").click(function(){
	    	    	var i = 5000;
	    	    	 var r = confirm("Loop the lights?");
	    	    	  if (r == true) {
	    		    	{document.getElementById("stopLoopAllLight").style.display="inline";}
	    	    	    {document.getElementById("loopAllLight").style.display="none";}

		    	        interval = setInterval(function () {
				    	    //eventFire(document.getElementById('turnOnAllLight'), 'click');
				    		//console.info("Off " + new Date().toLocaleString());
				    		var myData = new Date(); 
		    	  			var eventId = myData.getTime();
		    	  			var blockId = ${blockId};
		    	  			var idArr = [{whatId:2,idValues:[blockId]}];
		    	  			
    	  					var params = {
		    	  					eventId:eventId,
    	  							messageCode:2,
    	  							idArr:idArr,
    	  							//Turnoff ctrl = 0
    	  							ctrl:0
    	  					}
    	  					var msg = JSON.stringify(params);
    					    var topic = "${topic}"
    					    //alert("Topic: " + topic + ", Msg: " + msg);
    			    	    publish(msg, topic, 1);
		    	        }, i);
			    	    //eventFire(document.getElementById('turnOnAllLight'), 'click');
			    	    //i = 0;
			    	    
			    	    interval2 = setInterval(function () {
				    	    //eventFire(document.getElementById('turnOffAllLight'), 'click');
				    		//console.info("On " + new Date().toLocaleString());
				    		var myData = new Date(); 
		    	  			var eventId = myData.getTime();
		    	  			var blockId = ${blockId};
		    	  			var idArr = [{whatId:2,idValues:[blockId]}];
		    	  			
		    	  			var params = {
		    	  					eventId:eventId,
    	  							messageCode:2,
    	  							idArr:idArr,
    	  							//Turnon ctrl = 1
    	  							ctrl:1
    	  					}
    	  					var msg = JSON.stringify(params);
    					    var topic = "${topic}"
    					    //alert("Topic: " + topic + ", Msg: " + msg);
    			    	    publish(msg, topic, 1);
		    	        }, i*2);
	    	    	 }
	    		});

	    	    $("#stopLoopAllLight").click(function(){
	    	    	 var r = confirm("Stop looping?");
	    	    	  if (r == true) {
		    		    {document.getElementById("stopLoopAllLight").style.display="none";}
		    	    	{document.getElementById("loopAllLight").style.display="inline";}
		    	        clearInterval(interval);
		    	        clearInterval(interval2);
	    	    	  }
		    	    //eventFire(document.getElementById('turnOnAllLight'), 'click');
	    		});
	    	    
	    	    
	    	    interval3 = null;
	    	    interval4 = null;
	    	    
	    	    $("#loopLight").click(function(){
	    	       	var chk = [];
	    	        $.each($("input[name='lightChecked']:checked"), function(){            
	    	        	chk.push($(this).val());
	    	       	});
	    	        
	    	    	var i = 5000;
	    	    	 var r = confirm("Loop the lights?");
	    	    	  if (r == true) {		    	    
	    	    		  if (chk.length != 0) {
			    		   	{document.getElementById("stopLoopLight").style.display="inline";}
			    	    	{document.getElementById("loopLight").style.display="none";}
			    	    	    
		    	        	interval3 = setInterval(function () {
				    	    //eventFire(document.getElementById('turnOnAllLight'), 'click');
				    		//console.info("Off " + new Date().toLocaleString());
				    		var myData = new Date(); 
	    					var eventId = myData.getTime();
	    					//var lightId = ${lightId};
	    					var idArr = [{whatId:4,idValues:chk}];
	    					var blockId = ${blockId};
	    					
	    					var params = {
	    							eventId:eventId,
									messageCode:2,
									idArr:idArr,
									//Turnoff ctrl = 0
									ctrl:0,								
									blockIdValue:blockId
    	  					}
    	  					var msg = JSON.stringify(params);
    					    var topic = "${topic}"
    					    //alert("Topic: " + topic + ", Msg: " + msg);
    			    	    publish(msg, topic, 1);
		    	        }, i);
			    	    //eventFire(document.getElementById('turnOnAllLight'), 'click');
			    	    //i = 0;
			    	    
			    	    interval4 = setInterval(function () {
				    	    //eventFire(document.getElementById('turnOffAllLight'), 'click');
				    		//console.info("On " + new Date().toLocaleString());
				    		var myData = new Date(); 
	    					var eventId = myData.getTime();
	    					//var lightId = ${lightId};
	    					var idArr = [{whatId:4,idValues:chk}];
	    					console.log("idArr:" + idArr)
	    					var blockId = ${blockId};
	    					
	    					var params = {
	    							eventId:eventId,
									messageCode:2,
									idArr:idArr,
									//Turnon ctrl = 1
									ctrl:1,								
									blockIdValue:blockId
    	  					}
    	  					var msg = JSON.stringify(params);
    					    var topic = "${topic}"
    					    //alert("Topic: " + topic + ", Msg: " + msg);
    			    	    publish(msg, topic, 1);
		    	        }, i*2);
	    	    	  } else {
							alert("Please choose a light");
	    	    		  
	    	    	  }
	    	    	 }
	    		});

	    	    $("#stopLoopLight").click(function(){
	    	    	 var r = confirm("Stop looping?");
	    	    	  if (r == true) {
		    		   	{document.getElementById("stopLoopLight").style.display="none";}
		    	    	{document.getElementById("loopLight").style.display="inline";}
		    	        clearInterval(interval3);
		    	        clearInterval(interval4);
	    	    	  }
		    	    //eventFire(document.getElementById('turnOnAllLight'), 'click');
	    		});
	    	    
	    	    $("#communityList").on("click", "a", function() {
	    	        var id = $(this).attr("data-id");
	    	        document.getElementById("communityId").value = id;
	    	        changeCommunity();
	    	    });
	    	    
	    	    $("#communityList2").on("click", "a", function() {
	    	        var id = $(this).attr("data-id");
	    	        document.getElementById("communityId").value = id;
	    	        changeCommunity2();
	    	    });
	        });
	        
	        /*function eventFire(el, etype){
	        	  if (el.fireEvent) {
	        	    el.fireEvent('on' + etype);
	        	  } else {
	        	    var evObj = document.createEvent('Events');
	        	    evObj.initEvent(etype, true, false);
	        	    el.dispatchEvent(evObj);
	        	  }
	        	}*/
	        
	        function changeCommunity2(){		
				$("#community_list_form2").attr("action", "${pageContext.request.contextPath}/community/controlLights.action");
				$("#community_list_form2").submit();
			};
			
			function changeCommunity(){		
				$("#community_list_form").attr("action", "${pageContext.request.contextPath}/community/controlLights.action");
				$("#community_list_form").submit();
			};
			
			function changeFloor(){		
				$("#floor_list_form").attr("action", "${pageContext.request.contextPath}/community/floorList.action");
				$("#floor_list_form").submit();					
			};
			
			function changeLight(){		
				$("#light_list_form").attr("action", "${pageContext.request.contextPath}/community/lightList.action");
				$("#light_list_form").submit();					
			};
    	</script>
	</head>

	<body>
	    <div class="wrapper">
	        <!-- Sidebar  -->
	        <nav id="sidebar">
	            <div class="sidebar-header">
	                <font color="#1c6299" size="7" face="Arial"><b>Learn</b></font>
	                <font color="#15a2b3" size="7" face="Helvetica"><b>tech</b></font>
	                <br><font color="#5d5b5d" size="5" face="Calibri">Smart LMS v1.0.1</font>
	            </div>
	            
	            <div class="sidebar-username"><font color="black">Welcome, ${currentUser.userName}</font></div>
	            
	            <ul class="list-unstyled components">            
	                <li>
	                    <a href="${pageContext.request.contextPath}/community/dashboard.action">Home dashboard</a>
	                </li>
	                <li class="active">
	                    <a href="${pageContext.request.contextPath}/community/controlLights.action">Control lights</a>
	                </li>
	                <li>
	                    <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Configure lights</a>
	                    <ul class="collapse list-unstyled" id="pageSubmenu2">
	                        <li>
	                            <a href="${pageContext.request.contextPath}/configParam.action">SPS100</a>
	                        </li>
	                        <li>
	                            <a href="${pageContext.request.contextPath}/sps200Config.action">SPS200</a>
	                        </li>
	                        <li>
	                            <a href="${pageContext.request.contextPath}/photoParam.action">Photosensor</a>
	                        </li>
	                        <li>
	                            <a href="${pageContext.request.contextPath}/configAddNew.action">Add new data</a>
	                        </li>
	                    </ul>
	                </li>
	                <li>
	                	<a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Manage account</a>
	                    <ul class="collapse list-unstyled" id="pageSubmenu3">
	                   		<li>
	                            <a href="${pageContext.request.contextPath}/user/user_account.action">Update profile</a>
	                        </li>
	                   		<c:if test="${currentUser.userType == 1}">
		                        <li>
		                            <a href="${pageContext.request.contextPath}/user/user_register.action">Register new user</a>
		                        </li>
								<li>
		                            <a href="${pageContext.request.contextPath}/user/user_management.action">User management</a>
		                        </li>		                        
	                        </c:if>
	                    </ul>
	                </li>
	            </ul>
	
	            <ul class="list-unstyled CTAs">
	                <li>
	                    <a href="${pageContext.request.contextPath}/user/logout.action" class="download">Logout</a>
	                </li>
					<li><br>
						<div id="time" style="text-align:center">
							<script>
								updateTime();
								function updateTime() {
									var date = new Date().toLocaleString();
									var day = new Date().getDay();
									var datetime;
									if (day == 0) {
										day = "<br>Sunday";
									} else if (day == 1) {
										day = "<br>Monday";
									} else if (day == 2) {
										day = "<br>Tuesday";
									} else if (day == 3) {
										day = "<br>Wednesday";
									} else if (day == 4) {
										day = "<br>Thursday";
									} else if (day == 5) {
										day = "<br>Friday";
									} else {
										day = "<br>Saturday";
									}
	
									datetime = date + day;
									document.getElementById('time').innerHTML = datetime;
								}
								setInterval("updateTime()", 1000);
							</script>
						</div>
					</li>
				</ul>
	        </nav>

	        <!-- Page Content  -->
	        <div id="content">
	            <nav class="navbar navbar-expand-lg navbar-light bg-light">
	                <div class="container-fluid">
	                	<!-- <button type="button" id="sidebarCollapse" class="btn btn-info">
	                        <i class="fas fa-align-left"></i><span> Toggle Sidebar</span>
	                    </button> -->
	                    
	                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	                        <i class="fas fa-align-justify"></i>
	                        &nbsp;Areas	                        
	                    </button>
	
	                    <div class="collapse navbar-collapse" id="navbarSupportedContent" style="float: right">
	            			<form action="" method="post" id="community_list_form">
	            				<input id="communityId" name="communityId" type="hidden" value="${communityId}"/>
		                        <ul class="nav navbar-nav ml-auto" id="communityList" >
		                        	<c:forEach items="${communityList}" var="item" >
			                            <li class="nav-item">
			                            	<c:if test="${item.communityId==communityId}">
			                            		<a style="cursor: pointer;" class="nav-link" data-id="${item.communityId}"><b>${item.communityName}</b></a>
			                           		</c:if>
			                           		<c:if test="${item.communityId!=communityId}">             		
			                           			<a style="cursor: pointer;" class="nav-link" data-id="${item.communityId}">${item.communityName}</a>
			                            	</c:if>
			                            </li>
									</c:forEach>
		                        </ul>
	                        </form>
	                    </div>
	                </div>
	            </nav>

				<h4 style="color: green">Control lights > 
					<form style="display: inline-block" action="" method="post" id="community_list_form2">
	            		<input id="communityId" name="communityId" type="hidden" value="${communityId}"/>
			        	<div id="communityList2" >
				        	<c:forEach items="${communityList}" var="item" >
						    	<c:if test="${item.communityId==communityId}">
					            	<a style="cursor: pointer;" data-id="${item.communityId}">${item.communityName}</a>
						      	</c:if>
							</c:forEach>
						</div>
					</form>
					> 
					<c:forEach items="${blockList}" var="item" >
				    	<c:if test="${item.blockId==blockId}">
			            	${item.blockName}
				      	</c:if>
					</c:forEach>
				</h4>

	  			<p>
	            	<h6 style="color: #15a2b3; float: right">Go to: <a href="#floors">Floors / </a><a href="#lights">Lights</a></h6>
	            </p>
	            
	            <p>
					<table width="100%" id="blocks">
						<tr><th><div class="page-header"><h4>Block control<br></h4></div></th></tr>
						<!--<tr style="width: 100%; display: flex; justify-content: space-between; ">
							<td style="height:100%; width:100%">
								<!-- <div><br><img src="${pageContext.request.contextPath}/img/UbiFloorPage.jpg" style="height:100%; width:100%; padding:1px; border:1px solid #021a40;"></img></div> -->
								<!-- <br>
								<div class="mapContainer">
									<img class="mapFiller" src="${pageContext.request.contextPath}/img/content_holder.png" />
									<div class="content" id ="mapLights">	
										<form action="" method="post" id="light_list_form">
											<input id="MLcommunityId" name="communityId" type="hidden" value="${communityId}"/>
								           	<input id="MLblockId" name="blockId" type="hidden" value="${blockId}"/>
								           	<input id="MLfloorId" name="floorId" type="hidden" value="${floorId}"/>
								           	<input id="MLlightId" name="lightId" type="hidden" value="${lightId}"/>
						           	
						           			<c:forEach items="${lightList}" var="item" varStatus="curr">
													<a class="mapLight" id="mapLight${item.lightId}" data-id="${item.lightId}" data-block="${item.blockId}" data-floor="${item.floorId}" data-coords=${item.coordinates}></a>
													<a class="mapLightTitle" id="mapLightTitle${item.lightId}" data-id="${item.lightId}" data-block="${item.blockId}" data-floor="${item.floorId}" data-coords=${item.coordinates}>${item.displayName}</a>
											</c:forEach>
										</form>
									</div>
								</div>
							</td>
						</tr> -->
						<tr>
							<td style="float: left; padding-top:20px">
								<button type="button" class="btn btn-success" id="turnOnAllLight">Turn On All Lights</button>
								<button type="button" class="btn btn-danger" id="turnOffAllLight">Turn Off All Lights</button>
								<button type="button" class="btn btn-primary" id="turnNormalAllLight">Turn Normal All Lights</button>
		                   		<c:if test="${currentUser.userType == 1}">
									<button type="button" class="btn btn-secondary" id="loopAllLight">Loop All Lights</button>
									<button type="button" class="btn btn-secondary" id="stopLoopAllLight">Stop Loop</button>
								</c:if>
							</td>
						</tr>
					</table>
				</p>
				
				<div class ="custom_line"></div>
				
	  			<h6 style="color: #15a2b3; float: right">Go to: <a href="#lights">Lights</a></h6>
	  			
	            <p>
	            	<form action="" method="post" id="floor_list_form">
		           		<input id="FcommunityId" name="communityId" type="hidden" value="${communityId}"/>
		            	<input id="FblockId" name="blockId" type="hidden" value="${blockId}"/>
		            	<input id="FfloorNO" name="floorNO" type="hidden" value="${floorNO}"/>
		            	<input id="FfloorId" name="floorId" type="hidden" value="${floorId}"/>
			       
						<table width="100%" id="floors">
						<tr><th><div class="page-header"><h4>Select a Floor<br></h4></div></th></tr>
							<tr style="width: 100%; display: flex; justify-content: space-between; ">
								<c:forEach items="${floorList}" var="item" varStatus="curr">
									<c:if test="${((curr.index)%3) != 0}">
										<td class="zoom" name="floorId" value="${item.floorId}" style="text-align: center; width: 30%; background: #addfad;" class="rounded" data-id="${item.floorId}" data-block-id="${item.blockId}" data-floor-id="${item.floorNO}">
											<div><img src="${pageContext.request.contextPath}/img/floor.png" style="height:25%; width:25%; padding-top:20%; padding-bottom:10% "></img></div>												
											<div style="color:white;"><b>${item.floorName} (${lightNoListFloor[curr.index]} Lights)</b></div>
											<br><div style="padding-bottom: 20%; color:white"></div>
										</td>
									</c:if>
											
									<c:if test="${((curr.index)%3) == 0}">
										<tr style="width: 100%; display: flex; justify-content: space-between; padding-top:20px">
											<td class="zoom" name="floorId" value="${item.floorId}" style="text-align: center; width: 30%; background: #addfad;" class="rounded" data-id="${item.floorId}" data-block-id="${item.blockId}" data-floor-id="${item.floorNO}">
												<div><img src="${pageContext.request.contextPath}/img/floor.png" style="height:25%; width:25%; padding-top:20%; padding-bottom:10% "></img></div>
												<div style="color:white;"><b>${item.floorName} (${lightNoListFloor[curr.index]} Lights)</b></div>
												<br><div style="padding-bottom: 20%; color:white"></div>
											</td>
										</c:if>
													
									<c:if test="${curr.last}">
										</tr>
									</c:if>
								</c:forEach>
							</tr>
						</table> 
					</form>
				</p>
	
	            <div class ="custom_line"></div>
	
	            <h6 style="color: #15a2b3; float: right">Go to: <a href="#floors">Floors</a></h6>

	            <p>
	             	<form>
			           	<input id="LcommunityId" name="communityId" type="hidden" value="${communityId}"/>
			           	<input id="LblockId" name="blockId" type="hidden" value="${blockId}"/>
			           	<input id="LfloorId" name="floorId" type="hidden" value="${floorId}"/>
			           	<input id="LlightId" name="lightId" type="hidden" value="${lightId}"/>
		           	
						<table width="100%" id="lights">
							<tr><th><div class="page-header"><h4>Lights in this block<br></h4></div></th></tr>
							<tr style="width: 100%; display: flex; justify-content: space-between; ">
								<c:forEach items="${lightList}" var="item" varStatus="curr">
									<c:if test="${((curr.index)%5) != 0}">
										<td class="zoom" name="lightId" value="${item.lightId}" style="text-align: center; width: 18%; background: #15a2b3;" class="rounded" data-id="${item.lightId}" data-block="${item.blockId}" data-floor="${item.floorId}">
											<div><img src="${pageContext.request.contextPath}/img/light.png" style="height:25%; width:25%; padding-top:20%; padding-bottom:10% "></img></div>
											<div style="color:white;"><b>${item.displayName}</b></div>
											<div style="padding-bottom:5%; color:white; font-size:12px;">
												<c:if test="${item.lightType == 1}">[SPS100]</c:if>
												<c:if test="${item.lightType == 2}">[SPS200]</c:if>
											</div>
											<div style="padding-bottom: 5%; color:white"></div>
											<div><input type="checkbox" name="lightChecked" value="${item.lightSN}"/></div>
										</td>
									</c:if>
											
									<c:if test="${((curr.index)%5) == 0}">
										<tr style="width: 100%; display: flex; justify-content: space-between; padding-top:20px">
											<td class="zoom" name="lightId" value="${item.lightId}" style="text-align: center; width: 18%; background: #15a2b3;" class="rounded" data-id="${item.lightId}" data-block="${item.blockId}" data-floor="${item.floorId}">
												<div><img src="${pageContext.request.contextPath}/img/light.png" style="height:25%; width:25%; padding-top:20%; padding-bottom:10% "></img></div>
												<div style="color:white;"><b>${item.displayName}</b></div>
												<div style="padding-bottom:5%; color:white; font-size:12px;">
													<c:if test="${item.lightType == 1}">[SPS100]</c:if>
													<c:if test="${item.lightType == 2}">[SPS200]</c:if>
												</div>
												<div style="padding-bottom: 5%; color:white"></div>
												<div><input type="checkbox" name="lightChecked" value="${item.lightSN}"/></div>
											</td>
									</c:if>
												
									<c:if test="${curr.last}">
										</tr>
									</c:if>
								</c:forEach>
							</tr>
									
							<tr>
								<td style="float: right; padding-top:20px">
									<button type="button" class="btn btn-success" id="turnOnLight">Turn On Selected Lights</button>
									<button type="button" class="btn btn-danger" id="turnOffLight">Turn Off Selected Lights</button>
									<button type="button" class="btn btn-primary" id="turnNormalLight">Turn Normal Selected Lights</button>
		                   			<c:if test="${currentUser.userType == 1}">
										<button type="button" class="btn btn-secondary" id="loopLight">Loop Selected Lights</button>
										<button type="button" class="btn btn-secondary" id="stopLoopLight">Stop Loop</button>
									</c:if>
								</td>
							</tr>
						</table>
					</form>
				</p>         
			
				<div id="bottom">
					<p>
						</br> <font color="#999">Copyright &copy; 1986 - 2018</font> <b>Learn Group Ltd. All rights reserved.</b>
					</p>
				</div>   
			</div>
	    </div>
	</body>
</html>