<!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 - Dashboard</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);
}
.trZoom:hover {
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05); /* Safari 3-8 */
transform: scale(1.05);
cursor: pointer;
font-weight: bold;
}
#bottom {
width: 100%;
text-align: center;
font-size: 15px;
}
#lightDate{
border: solid 1px #000;
border-collapse:collapse;
width:102px;
height: 25px;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url(${pageContext.request.contextPath}/img/options_unclicked.png) no-repeat right center;
font-size: 12px;
color: white;
cursor: pointer;
}
.option_color {
background:#60626a;
}
.collapsible {
background-color: #15a2b3;
color: white;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapseActive, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.collapseActive:after {
content: "\2212";
}
.collapsibleContent {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width: 100%;
margin: 0 auto;
background-color: #f1f1f1;
}
</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/Chart.bundle.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/My97DatePicker/WdatePicker.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');
});
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
console.log("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);
$(document).on('change','#FcommunityId',function() {
changeDate();
});
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("collapseActive");
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
$("#inactiveLights").on("click", "tr", 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 lid = $(this).data("light");
document.getElementById("LlightSN").value = lid;
if (typeof id === 'undefined') {
} else {
changeLight();
}
});
$("#inactiveLights2").on("click", "tr", function() {
//var cid = document.getElementById("communityId").value;
//document.getElementById("LcommunityId").value = cid;
var bid = $(this).data("block");
document.getElementById("LblockId2").value = bid;
var fid = $(this).data("floor");
document.getElementById("LfloorId2").value = fid;
var id = $(this).data("id");
document.getElementById("LlightId2").value = id;
var lid = $(this).data("light");
document.getElementById("LlightSN2").value = lid;
if (typeof id === 'undefined') {
} else {
changeLight2();
}
});
$("#activeLights").on("click", "tr", function() {
//var cid = document.getElementById("communityId").value;
//document.getElementById("LcommunityId").value = cid;
var bid = $(this).data("block");
document.getElementById("LblockId3").value = bid;
var fid = $(this).data("floor");
document.getElementById("LfloorId3").value = fid;
var id = $(this).data("id");
document.getElementById("LlightId3").value = id;
var lid = $(this).data("light");
document.getElementById("LlightSN3").value = lid;
if (typeof id === 'undefined') {
} else {
changeLight3();
}
});
$("#activeLights2").on("click", "tr", function() {
//var cid = document.getElementById("communityId").value;
//document.getElementById("LcommunityId").value = cid;
var bid = $(this).data("block");
document.getElementById("LblockId4").value = bid;
var fid = $(this).data("floor");
document.getElementById("LfloorId4").value = fid;
var id = $(this).data("id");
document.getElementById("LlightId4").value = id;
var lid = $(this).data("light");
document.getElementById("LlightSN4").value = lid;
if (typeof id === 'undefined') {
} else {
changeLight4();
}
});
//console.log("floorList",${floorList});
$("#refreshLights").click(function(){
var r = confirm("Refresh the lights?");
if (r == true) {
var myData = new Date();
var eventId = myData.getTime();
<c:forEach items="${floorList}" var="item" >
var floorId = ${item.floorNO};
var idArr = [{whatId:3,idValues:[floorId]}];
var blockId = ${item.blockId};
sendMessage();
function sendMessage(){
var params = {
eventId:eventId,
messageCode:3,
idArr:idArr,
blockIdValue:blockId
}
//var str = JSON.stringify(params);
//console.info("str display: " + str);
var msg = JSON.stringify(params);
var topic = ""
<c:forEach items="${blockList}" var="item2" >
<c:if test="${item.blockId == item2.blockId}">
topic = "${item2.gatewayTopic}";
</c:if>
</c:forEach>
publish(msg, topic, 1);
console.log("Published msg:",msg);
}
</c:forEach>
}
});
var title;
<c:forEach items="${communityList}" var="item" >
<c:if test="${item.communityId == communityId}">
title = "Light activity across ${item.communityName} [past 24 hrs]";
</c:if>
</c:forEach>
var chartData = {
type: 'pie',
data: {
datasets: [{
backgroundColor: []
}]
},
options: {
title: {
display: true,
text: title,
fontSize: '20',
fontFamily: 'Calibri'
}
}
}
var pieChart = new Chart(document.getElementById("pie-chart-main"), chartData);
var ctx = document.getElementById("pie-chart-main").getContext("2d");
//var myNewChart = new Chart(ctx).Pie(data);
$("#pie-chart-main").click (
function(evt){
var activePoints = pieChart.getElementsAtEvent(evt);
console.log(activePoints);
var index = activePoints[0]._index;
var url = "Clicked: " + activePoints[0]._chart.data.labels[index] + ", number of lights: " + activePoints[0]._chart.data.datasets[0].data[index];
alert(url);
}
);
var activeLights = new Array();
var inactiveLights = new Array();
<c:forEach items="${blockList}" var="item" >
activeLights.length = 0;
inactiveLights.length = 0;
<c:forEach items="${activeLights}" var="item2" >
<c:if test="${item.blockId == item2.blockId}">
activeLights.push("${item2.displayName}");
</c:if>
</c:forEach>
<c:forEach items="${inactiveLights}" var="item2" >
<c:if test="${item.blockId == item2.blockId}">
inactiveLights.push("${item2.displayName}");
</c:if>
</c:forEach>
addData(pieChart, "${item.blockName} [Active lights]", activeLights.length);
addData(pieChart, "${item.blockName} [Inactive lights]", inactiveLights.length);
</c:forEach>
var chartData = {
type: 'line',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
datasets: [{
data: [
<c:forEach items="${blockList}" var="item2" >
<c:if test="${item2.blockId==item.blockId}">
Block: ${item2.blockName}
</c:if>
</c:forEach>
${communityYearEnergyDTO.communityMonthEnergy1},
${communityYearEnergyDTO.communityMonthEnergy2},
${communityYearEnergyDTO.communityMonthEnergy3},
${communityYearEnergyDTO.communityMonthEnergy4},
${communityYearEnergyDTO.communityMonthEnergy5},
${communityYearEnergyDTO.communityMonthEnergy6},
${communityYearEnergyDTO.communityMonthEnergy7},
${communityYearEnergyDTO.communityMonthEnergy8},
${communityYearEnergyDTO.communityMonthEnergy9},
${communityYearEnergyDTO.communityMonthEnergy10},
${communityYearEnergyDTO.communityMonthEnergy11},
${communityYearEnergyDTO.communityMonthEnergy12}
],
label: "Ubi",
borderColor: "#3e95cd",
fill: false,
backgroundColor: "#3e95cd"
}, {
data: [0.5,1,0.5,2,3.5,1,6,1,2,3,8,1],
label: "Punggol",
borderColor: "yellow",
fill: false,
backgroundColor: "yellow"
}, {
data: [0.5,1,1,2,3.5,2,2.5,4,5,3,0,5],
label: "UBM",
borderColor: "white",
fill: false,
backgroundColor: "white"
}
]
},
options: {
title: {
display: true,
text: 'Overall yearly consumption (KW/h)',
fontColor: 'black',
fontStyle: 'bold'
},
legend: {
labels: {
fontColor: 'black',
}
},
scales: {
yAxes: [{
ticks: {
reverse: false,
fontStyle: 'bold'
}
}],
xAxes: [{
ticks: {
reverse: false,
fontStyle: 'bold'
}
}]
}
}
}
new Chart(document.getElementById("line-chart-main"), chartData);
});
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets[0].data.push(data);
var ctx = document.getElementById("pie-chart-main").getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(229, 239, 255, 1)');
gradient.addColorStop(1, getRandomColor());
chart.data.datasets[0].backgroundColor.push(gradient);
chart.update();
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function changeDate(){
$("#change_date_form").attr("action", "${pageContext.request.contextPath}/community/dashboard.action#overview");
$("#change_date_form").submit();var i = 5000;
}
function changeLight(){
$("#light_list_form").attr("action", "${pageContext.request.contextPath}/community/lightList.action");
$("#light_list_form").submit();
};
function changeLight2(){
$("#light_list_form2").attr("action", "${pageContext.request.contextPath}/community/lightList.action");
$("#light_list_form2").submit();
};
function changeLight3(){
$("#light_list_form3").attr("action", "${pageContext.request.contextPath}/community/lightList.action");
$("#light_list_form3").submit();
};
function changeLight4(){
$("#light_list_form4").attr("action", "${pageContext.request.contextPath}/community/lightList.action");
$("#light_list_form4").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 class="active">
<a href="${pageContext.request.contextPath}/community/dashboard.action">Home dashboard</a>
</li>
<li>
<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 = " Sunday";
} else if (day == 1) {
day = " Monday";
} else if (day == 2) {
day = " Tuesday";
} else if (day == 3) {
day = " Wednesday";
} else if (day == 4) {
day = " Thursday";
} else if (day == 5) {
day = " Friday";
} else {
day = " 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>
</div>
</nav>
<!-- <h3 style="color: green">Dashboard</h3>
<p>
<table width="100%">
<tr>
<td style="text-align: center">
<a href="${pageContext.request.contextPath}/community/controlLights.action" class="zoom" style="float: left; background: #87ceeb;">
<img src="${pageContext.request.contextPath}/img/settings.png" style="height:25%; width:25%; padding-top:25%; padding-bottom:10%"></img>
<div style="padding-bottom: 20%; color:white"><b>Control<br> lights</b></div>
</a>
<a href="${pageContext.request.contextPath}/configParam.action" class="zoom" style="background: #addfad;">
<img src="${pageContext.request.contextPath}/img/light.png" style="height:25%; width:25%; padding-top:25%; padding-bottom:10%"></img>
<div style="padding-bottom: 20%; color:white"><b>Configure<br> lights</b></div>
</a>
<a href="${pageContext.request.contextPath}/user/user_management.action" class="zoom" style="float: right; background: #15a2b3;">
<img src="${pageContext.request.contextPath}/img/manage_accounts.png" style="height:25%; width:25%; padding-top:25%; padding-bottom:10%"></img>
<div style="padding-bottom: 20%; color:white"><b>Manage<br> Account</b></div>
</a>
</td>
</tr>
</table>
<div class ="custom_line"></div>
-->
<table style="width:100%" id="overview">
<tr><th>
<div style="color: green"><h3>Overview<br></h3></div>
<br>
</th></tr>
<tr><td>
<form action="" method="post" id="change_date_form" >
<!-- Date: <input type="text" onClick="WdatePicker({lang:'en',onpicked:changeDate,maxDate:new Date()})" readonly="readonly" class="Wdate" value="${lightDate}" id="lightDate" name="lightDate" />
-->
Area:
<select name="communityId" id="FcommunityId">
<c:forEach items="${communityList}" var="item" >
<option value="${item.communityId}" <c:if test="${item.communityId == communityId}">selected</c:if>>${item.communityName}</option>
</c:forEach>
</select>
</form>
</td></tr>
<tr>
<td><br>
<div style="width: 100%; background: #DEF3FD; border-radius:10px;">
<div style="padding:10px">
<canvas id="pie-chart-main" width="8" height="2" class="pie-chart-main"></canvas>
</div>
<table style="width:100%">
<tr><td>
<button type="button" class="btn btn-secondary" id="refreshLights" style="margin:10px 10px 10px 10px;">Refresh lights' status</button>
</td></tr>
<tr>
<td>
<div style="width: 48%; float: left; background: #DEF3FD; padding:10px; border-radius:10px" >
<c:if test="${totalNoOfActiveLightsLastHr==totalNoOfLights}">
<font color="green"><b>Active lights (past hr):
${totalNoOfActiveLightsLastHr} / ${totalNoOfLights}</b></font>
<span class="fa fa-check fa" style="color:green"></span>
</c:if>
<c:if test="${totalNoOfActiveLightsLastHr!=totalNoOfLights}">
<font color="red"><b>Active lights (past hr):
${totalNoOfActiveLightsLastHr} / ${totalNoOfLights}</b></font>
<span class="fa fa-exclamation-triangle fa" style="color:red"></span>
</c:if>
<br><br>
<p style="text-align: center">
<button class="collapsible">Status of active light(s)</button>
<div class="collapsibleContent">
<form action="" method="post" id="light_list_form3">
<input id="LcommunityId3" name="communityId" type="hidden" value="${communityId}"/>
<input id="LblockId3" name="blockId" type="hidden" value="${blockId}"/>
<input id="LfloorId3" name="floorId" type="hidden" value="${floorId}"/>
<input id="LlightId3" name="lightId" type="hidden" value="${lightId}"/>
<input id="LlightSN3" name="lightSN" type="hidden" value="${lightSN}"/>
<table style="width: 100%" id="activeLights">
<tr><th><u>Light</u></th><th><u>Last active</u></th><th><u>Last status</u></th></tr>
<c:forEach items="${activeLightsLastHr}" var="item" >
<tr class="trZoom" data-id="${item.lightId}" data-block="${item.blockId}" data-floor="${item.floorId}" data-light="${item.lightSN}">
<td>${item.displayName}</td>
<c:if test="${item.reportDateTime != null}">
<td><fmt:formatDate value="${item.reportDateTime}" pattern="dd/MM/yyyy HH:mm"/></td>
<td>
<c:if test="${item.isOnline == 0}">
Off
</c:if>
<c:if test="${item.isOnline == 100}">
On
</c:if>
<c:if test="${item.isOnline > 0 && item.isOnline < 100}">
Dimmed
</c:if>
<c:if test="${item.isOnline == 255}">
No Data
</c:if>
</td>
</c:if>
<c:if test="${item.reportDateTime == null}">
<td colspan="2" style="text-align:center;">- No Data -</td>
</c:if>
</tr>
</c:forEach>
</table>
</form>
</div>
</p>
<p style="text-align: center">
<button class="collapsible">Light(s) that went inactive</button>
<div class="collapsibleContent">
<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 style="width: 100%" id="inactiveLights">
<tr><th><u>Light</u></th><th><u>Last active</u></th><th><u>Last status</u></th></tr>
<c:forEach items="${inactiveLightsLastHr}" var="item" >
<tr class="trZoom" data-id="${item.lightId}" data-block="${item.blockId}" data-floor="${item.floorId}" data-light="${item.lightSN}">
<td>${item.displayName}</td>
<c:if test="${item.reportDateTime != null}">
<td><fmt:formatDate value="${item.reportDateTime}" pattern="dd/MM/yyyy HH:mm"/></td>
<td>
<c:if test="${item.isOnline == 0}">
Off
</c:if>
<c:if test="${item.isOnline == 100}">
On
</c:if>
<c:if test="${item.isOnline > 0 && item.isOnline < 100}">
Dimmed
</c:if>
<c:if test="${item.isOnline == 255}">
No Data
</c:if>
</td>
</c:if>
<c:if test="${item.reportDateTime == null}">
<td colspan="2" style="text-align:center;">- No Data -</td>
</c:if>
</tr>
</c:forEach>
</table>
</form>
</div>
</p>
</div>
<div style="width: 48%; float: right; background: #DEF3FD; padding:10px; border-radius:10px">
<c:if test="${totalNoOfActiveLights==totalNoOfLights}">
<font color="green"><b>Active lights (past 24 hrs):
${totalNoOfActiveLights} / ${totalNoOfLights}</b></font>
<span class="fa fa-check fa" style="color:green"></span>
</c:if>
<c:if test="${totalNoOfActiveLights!=totalNoOfLights}">
<font color="red"><b>Active lights (past 24 hrs):
${totalNoOfActiveLights} / ${totalNoOfLights}</b></font>
<span class="fa fa-exclamation-triangle fa" style="color:red"></span>
</c:if>
<br><br>
<p style="text-align: center">
<button class="collapsible">Status of active light(s)</button>
<div class="collapsibleContent">
<form action="" method="post" id="light_list_form4">
<input id="LcommunityId4" name="communityId" type="hidden" value="${communityId}"/>
<input id="LblockId4" name="blockId" type="hidden" value="${blockId}"/>
<input id="LfloorId4" name="floorId" type="hidden" value="${floorId}"/>
<input id="LlightId4" name="lightId" type="hidden" value="${lightId}"/>
<input id="LlightSN4" name="lightSN" type="hidden" value="${lightSN}"/>
<table style="width: 100%" id="activeLights2">
<tr><th><u>Light</u></th><th><u>Last active</u></th><th><u>Last status</u></th></tr>
<c:forEach items="${activeLights}" var="item" >
<tr class="trZoom" data-id="${item.lightId}" data-block="${item.blockId}" data-floor="${item.floorId}" data-light="${item.lightSN}">
<td>${item.displayName}</td>
<c:if test="${item.reportDateTime != null}">
<td><fmt:formatDate value="${item.reportDateTime}" pattern="dd/MM/yyyy HH:mm"/></td>
<td>
<c:if test="${item.isOnline == 0}">
Off
</c:if>
<c:if test="${item.isOnline == 100}">
On
</c:if>
<c:if test="${item.isOnline > 0 && item.isOnline < 100}">
Dimmed
</c:if>
<c:if test="${item.isOnline == 255}">
No Data
</c:if>
</td>
</c:if>
<c:if test="${item.reportDateTime == null}">
<td colspan="2" style="text-align:center;">- No Data -</td>
</c:if>
</tr>
</c:forEach>
</table>
</form>
</div>
</p>
<p style="text-align: center">
<button class="collapsible">Light(s) that went inactive</button>
<div class="collapsibleContent">
<form action="" method="post" id="light_list_form2">
<input id="LcommunityId2" name="communityId" type="hidden" value="${communityId}"/>
<input id="LblockId2" name="blockId" type="hidden" value="${blockId}"/>
<input id="LfloorId2" name="floorId" type="hidden" value="${floorId}"/>
<input id="LlightId2" name="lightId" type="hidden" value="${lightId}"/>
<input id="LlightSN2" name="lightSN" type="hidden" value="${lightSN}"/>
<table style="width: 100%" id="inactiveLights2">
<tr><th><u>Light</u></th><th><u>Last active</u></th><th><u>Last status</u></th></tr>
<c:forEach items="${inactiveLights}" var="item" >
<tr class="trZoom" data-id="${item.lightId}" data-block="${item.blockId}" data-floor="${item.floorId}" data-light="${item.lightSN}">
<td>${item.displayName}</td>
<c:if test="${item.reportDateTime != null}">
<td><fmt:formatDate value="${item.reportDateTime}" pattern="dd/MM/yyyy HH:mm"/></td>
<td>
<c:if test="${item.isOnline == 0}">
Off
</c:if>
<c:if test="${item.isOnline == 100}">
On
</c:if>
<c:if test="${item.isOnline > 0 && item.isOnline < 100}">
Dimmed
</c:if>
<c:if test="${item.isOnline == 255}">
No Data
</c:if>
</td>
</c:if>
<c:if test="${item.reportDateTime == null}">
<td colspan="2" style="text-align:center;">- No Data -</td>
</c:if>
</tr>
</c:forEach>
</table>
</form>
</div>
</p>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</p>
<div class ="custom_line"></div>
<p>
<table style="width:100%">
<tr><th><div class="page-header"><h3>Energy Consumption Graph<br></h3></div></th></tr>
<tr>
<td><br>
<div style="width: 100%; background: #DEF3FD; border-radius:10px;">
<div style="padding:10px">
<canvas id="line-chart-main" width="8" height="2" class="line-chart-main"></canvas>
</div>
</div>
</td>
</tr>
<!-- <tr><td><br>
Date: <input type="text" onClick="WdatePicker({lang:'en',onpicked:changeDate,maxDate:new Date()})" readonly="readonly" class="Wdate" value="${lightDate}" id="lightDate" name="lightDate" />
Area:
<select name="communityId" id="FcommunityId">
<c:forEach items="${communityList}" var="item" >
<option value="${item.communityId}" <c:if test="${item.communityId == communityId}">selected</c:if>>${item.communityName}</option>
</c:forEach>
</select>
</td></tr> -->
<tr>
<td><br>
<div style="width: 48%; float: left; background: #EDEEF2;" class="zoom" >
<canvas id="line-chart" width="3" height="2" class="line-chart"></canvas>
</div>
<div
style="width: 48%; float: right; background: #EDEEF2;" class="zoom" >
<canvas id="line-chart2" width="3" height="2" class="line-chart2"></canvas>
</div>
</td>
</tr>
<tr>
<td><br>
<div style="width: 48%; float: left; background: #EDEEF2;" class="zoom" >
<canvas id="line-chart3" width="3" height="2" class="line-chart3"></canvas>
</div>
<div style="width: 48%; float: right; background: #EDEEF2;" class="zoom" >
<canvas id="line-chart4" width="3" height="2" class="line-chart4"></canvas>
</div>
</td>
</tr>
</table>
</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>
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
