<!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>
<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 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');
});
$("#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 lid = $(this).data("light");
document.getElementById("LlightSN").value = lid;
var id = $(this).data("id");
document.getElementById("LlightId").value = id;
changeLight();
});
$("#communityList").on("click", "a", function() {
var id = $(this).attr("data-id");
document.getElementById("communityId").value = id;
changeCommunity();
});
});
function changeCommunity(){
$("#community_list_form").attr("action", "${pageContext.request.contextPath}/community/controlLights.action");
$("#community_list_form").submit();
}
function changeBlock(){
$("#block_list_form").attr("action", "${pageContext.request.contextPath}/community/blockList.action");
$("#block_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 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>
Areas
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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" >
<br>
<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 >
<c:forEach items="${communityList}" var="item" >
<c:if test="${item.communityId==communityId}">
${item.communityName}
</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>
<form action="" method="post" id="block_list_form">
<input id="BcommunityId" name="communityId" type="hidden" value="${communityId}"/>
<input id="BblockId" name="blockId" type="hidden" value="${blockId}"/>
<table width="100%" id="blocks">
<tr><th><div class="page-header"><h4>Select a Block<br></h4></div></th></tr>
<tr style="width: 100%; display: flex; justify-content: space-between; ">
<c:forEach items="${blockList}" var="item" varStatus="curr">
<c:if test="${((curr.index)%3) != 0}">
<td class="zoom" name="blockId" value="${item.blockId}" style="text-align: center; width: 30%; background: #87ceeb;" class="rounded" data-id="${item.blockId}">
<div><img src="${pageContext.request.contextPath}/img/block.png" style="height:25%; width:25%; padding-top:20%; padding-bottom:10% "></img></div>
<!-- <span class="fa fa-building" style="height:25%; width:25%; padding-top:20%; padding-bottom:10% "></span> -->
<div style="color:white;"><b>${item.blockName} (${lightNoListBlock[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="blockId" value="${item.blockId}" style="text-align: center; width: 30%; background: #87ceeb;" class="rounded" data-id="${item.blockId}">
<div><img src="${pageContext.request.contextPath}/img/block.png" style="height:25%; width:25%; padding-top:20%; padding-bottom:10% "></img></div>
<div style="color:white;"><b>${item.blockName} (${lightNoListBlock[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="#blocks">Blocks / </a><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="FfloorId" name="floorId" type="hidden" value="${floorId}"/>
<input id="FfloorNO" name="floorNO" type="hidden" value="${floorNO}"/>
<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; font-size:12px;">
<c:forEach items="${blockList}" var="item2" >
<c:if test="${item2.blockId==item.blockId}">
Block: ${item2.blockName}
</c:if>
</c:forEach>
</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; font-size:12px;">
<c:forEach items="${blockList}" var="item2" >
<c:if test="${item2.blockId==item.blockId}">
Block: ${item2.blockName}
</c:if>
</c:forEach>
</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="#blocks">Blocks / </a><a href="#floors">Floors</a></h6>
<p>
<form action="" method="post" id="light_list_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}"/>
<input id="LlightSN" name="lightSN" type="hidden" value="${lightSN}"/>
<table width="100%" id="lights">
<tr><th><div class="page-header"><h4>Select a Light<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}" data-light="${item.lightSN}">
<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; font-size:12px;">
<c:if test="${item.isOnline == 255}">[Offline]</c:if>
<c:if test="${item.isOnline == 0}">[Turned off]</c:if>
<c:if test="${item.isOnline != 0 && item.isOnline != 255}">[Turned on]</c:if>
</div> -->
<div style="padding-bottom:5%; color:white; font-size:12px;">
<c:forEach items="${blockList}" var="item2" >
<c:if test="${item2.blockId==item.blockId}">
Location: <br>${item2.blockName} >
</c:if>
</c:forEach>
<c:forEach items="${floorList}" var="item3" >
<c:if test="${item3.floorId==item.floorId}">
${item3.floorName}
</c:if>
</c:forEach>
</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}" data-light="${item.lightSN}">
<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; font-size:12px;">
<c:forEach items="${blockList}" var="item2" >
<c:if test="${item2.blockId==item.blockId}">
Location: <br>${item2.blockName} >
</c:if>
</c:forEach>
<c:forEach items="${floorList}" var="item3" >
<c:if test="${item3.floorId==item.floorId}">
${item3.floorName}
</c:if>
</c:forEach>
</div>
</td>
</c:if>
<c:if test="${curr.last}">
</tr>
</c:if>
</c:forEach>
</tr>
</table>
</form>
</p>
<div id="bottom">
<p>
</br> <font color="#999">Copyright © 1986 - 2018</font> <b>Learn Group Ltd. All rights reserved.</b>
</p>
</div>
</div>
</div>
</body>
</html>
4573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
