--- /dev/null
+// Program to show opengatem usage log in web page\r
+// Programmed by Yoshiaki Watanabe, 2013\r
+// Revised by Minoru Kishira, 2013\r
+//\r
+// canvas.js by Satoru Takabayashi is used partially.\r
+// http://0xcc.net/blog/archives/canvas.js\r
+//\r
+// You can redistribute it and/or modify it under the terms of \r
+// the GNU General Public License version 2.\r
+//\r
+\r
+// variables\r
+var nTime=24; // time division per day\r
+var beginTime;\r
+var endTime;\r
+var cellWidth="20px";\r
+var cellHeight="8px";\r
+var deviceList=[]; // devices used\r
+\r
+var colorList={0:"LimeGreen", 1:"Orange", 2:"SkyBlue", 3:"Tan", 4:"Thistle",\r
+ "none":"WhiteSmoke", "sunday":"Pink","saturday":"LightBlue", "blank":"white", "popup":"yellow"};\r
+var weekString = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");\r
+var today = new Date();\r
+var weekday;\r
+var monthday;\r
+\r
+////////////////////////////\r
+// make handler of mouseover\r
+function onmouseoverHandler(element, logItemNo) {\r
+\r
+ // save local values\r
+ var day=monthday;\r
+ var week=weekday;\r
+\r
+ // return the mandler \r
+ return function(e) {\r
+ \r
+ // if log item is found, show the item as popup\r
+ if(logItemNo[0]>=0){\r
+\r
+ // popup style\r
+ popup.style.position = "fixed"; \r
+ popup.style.left = e.clientX+20; \r
+ popup.style.top = e.clientY+10; \r
+ popup.style.background = colorList["popup"]; \r
+ popup.style.display = "block";\r
+\r
+ // popup string\r
+ popup.innerHTML=loglist[logItemNo[0]].device +" ["+loglist[logItemNo[0]].macAddress+"]<BR>";\r
+ for(var i=0; i<logItemNo.length; i++){\r
+ popup.innerHTML+="Used at "+ loglist[logItemNo[i]].gateway+"<BR>"\r
+ +"( "+loglist[logItemNo[i]].openTime+" -> "+loglist[logItemNo[i]].closeTime+" )<BR>";\r
+ }\r
+ }\r
+ }\r
+}\r
+\r
+////////////////////////////\r
+// make handler of mouseout\r
+function onmouseoutHandler(element) {\r
+\r
+ // off the display\r
+ return function() {\r
+ popup.style.display = "none";\r
+ }\r
+}\r
+\r
+////////////////////////////\r
+// make cells to show every date-time range\r
+function makeCells() {\r
+\r
+ // make html table\r
+ var table = document.createElement("table");\r
+ var tbody = document.createElement("tbody");\r
+ table.border ="2px #808080 solid";\r
+\r
+ // grouping columns (title, 0-5, 6-11, 12-17, 18-23 hours)\r
+ table.rules ="groups";\r
+ cgroup0=document.createElement("colgroup"); cgroup0.span=1; table.appendChild(cgroup0);\r
+ cgroup1=document.createElement("colgroup"); cgroup1.span=6; table.appendChild(cgroup1);\r
+ cgroup2=document.createElement("colgroup"); cgroup2.span=6; table.appendChild(cgroup2);\r
+ cgroup3=document.createElement("colgroup"); cgroup3.span=6; table.appendChild(cgroup3);\r
+ cgroup4=document.createElement("colgroup"); cgroup4.span=6; table.appendChild(cgroup4);\r
+\r
+ // add header to display the hours\r
+ tbody.appendChild(makeHeaderRow());\r
+\r
+ // make row for each day and each device \r
+ var nDate=loglist["info"].dateCount;\r
+ var nDevice=deviceList.length;\r
+ for (var date = 0; date < nDate; date++) {\r
+ for(var iDevice = 0; iDevice < nDevice+1; iDevice++){\r
+ var tr = document.createElement("tr");\r
+\r
+ // make leftmost title column spanning 6 rows\r
+ if(iDevice==0) tr.appendChild(makeHeaderColumn(date));\r
+\r
+ // make column representing 0 hour to 23 hour\r
+ for (var time = 0; time < nTime; time++) {\r
+ var td = document.createElement("td");\r
+ setupCellProperties(td, date, time, iDevice);\r
+ if(iDevice==nDevice) td.style.background=colorList["blank"];\r
+ tr.appendChild(td);\r
+ }\r
+\r
+ tbody.appendChild(tr);\r
+ }\r
+ }\r
+ table.appendChild(tbody);\r
+ return table;\r
+}\r
+\r
+////////////////////////////\r
+// make the top title row to display hours\r
+function makeHeaderRow(){\r
+ var tr = document.createElement("tr");\r
+ var td = document.createElement("td");\r
+ tr.appendChild(td);\r
+ for (var time = 0; time < nTime; time++) {\r
+ var td = document.createElement("td");\r
+ var text = document.createTextNode(time);\r
+ td.appendChild(text);\r
+ tr.appendChild(td);\r
+ }\r
+ return tr;\r
+}\r
+\r
+////////////////////////////\r
+// make the leftmost title comumn spanning to all devices row\r
+function makeHeaderColumn(date){\r
+ var td = document.createElement("td");\r
+ var nDevice=deviceList.length;\r
+\r
+ td.rowSpan=nDevice+1;\r
+ dateStr=getRealDate(date);\r
+ var text = document.createTextNode(dateStr);\r
+ td.appendChild(text);\r
+ if(dateStr.indexOf(weekString[0])!=-1)\r
+ td.style.background=colorList["sunday"];\r
+ else if(dateStr.indexOf(weekString[6])!=-1)\r
+ td.style.background=colorList["saturday"];\r
+ return td;\r
+}\r
+\r
+////////////////////////////\r
+// get the real date string from date number(0 means begin date)\r
+function getRealDate(date){\r
+ var beginTime=new Date(loglist["info"].beginTime.replace(/-/g, "/"));\r
+ var y=beginTime.getFullYear();\r
+ var m=beginTime.getMonth();\r
+ var d=beginTime.getDate();\r
+ var realDate = new Date(y, m, d+date);\r
+ return (realDate.getMonth()+1)+"/"+realDate.getDate()+" "+ weekString[realDate.getDay()];\r
+}\r
+\r
+////////////////////////////\r
+// setup cell properties\r
+function setupCellProperties(td, date, time, iDevice){\r
+\r
+ td.width=cellWidth; td.height=cellHeight;\r
+\r
+ // search log for the time range;\r
+ var logItemNo = searchLog(date, time, iDevice);\r
+\r
+ td.onmouseover = onmouseoverHandler(td, logItemNo);\r
+ td.onmouseout = onmouseoutHandler(td);\r
+ \r
+ //set background color of the cell\r
+ //if two or more items are found, display red border\r
+ if(logItemNo.length > 1){\r
+ td.style.background=colorList[iDevice];\r
+ td.style.border="3px solid Red";\r
+ }\r
+ // one item is found (if the item number == -1, no log is matched)\r
+ else if(logItemNo.length == 1){\r
+ if(logItemNo[0] == -1) td.style.background=colorList["none"];\r
+ else td.style.background=colorList[iDevice];\r
+ }\r
+ // no item\r
+ else td.style.background=colorList["blank"];\r
+}\r
+\r
+////////////////////////////\r
+// search the usage log corresponding to to the time range and the device number\r
+function searchLog(date, hour, iDevice){\r
+\r
+ var y=beginTime.getFullYear();\r
+ var m=beginTime.getMonth();\r
+ var d=beginTime.getDate();\r
+\r
+ var timeRangeBegin = new Date(y, m, d+date, hour);\r
+ var timeRangeEnd = new Date(y, m, d+date, hour+1);\r
+\r
+ // omit the range before beginTime or after endTime\r
+ if(timeRangeEnd < beginTime || endTime < timeRangeBegin) return -2;\r
+\r
+ // make the week number and month/date string\r
+ weekday=timeRangeBegin.getDay();\r
+ monthday=timeRangeBegin.getFullYear()+"/"+(timeRangeBegin.getMonth()+1)+"/"+timeRangeBegin.getDate();\r
+\r
+ // search the device in loglist \r
+ var logItemNoArray = new Array();\r
+ \r
+ nList=loglist["info"].listCount;\r
+ for (var i=0; i<nList; i++){\r
+ if(deviceList[iDevice] == loglist[i].device){\r
+\r
+ // loglist includes '2000-10-10 00:00:00' but Date() reads '2000/10/10 00:00:00'\r
+ var openTime = new Date(loglist[i].openTime.replace(/-/g, "/"));\r
+ var closeTime = new Date(loglist[i].closeTime.replace(/-/g, "/"));\r
+\r
+ // if the device is used in the time range, return the log item number\r
+ // second line check the device not closed yet\r
+ if(timeRangeBegin < closeTime && openTime < timeRangeEnd) logItemNoArray.push(i);\r
+ \r
+ if(loglist[i].closeTime=="0000-00-00 00:00:00" && openTime < timeRangeEnd) logItemNoArray.push(i);\r
+ }\r
+ }\r
+\r
+ // cannot found\r
+ if(logItemNoArray.length==0) logItemNoArray.push(-1);\r
+ return logItemNoArray;\r
+}\r
+\r
+////////////////////////////\r
+// make table for the legend of devices\r
+function makeDevicesLegend() {\r
+\r
+ var table = document.createElement("table");\r
+ table.border ="2px #808080 solid";\r
+ var tbody = document.createElement("tbody");\r
+ var nDevice=deviceList.length;\r
+\r
+ if(nDevice>0){\r
+ for (var iDevice = 0; iDevice<nDevice; iDevice++) {\r
+ var tr = document.createElement("tr");\r
+ var td = document.createElement("td");\r
+ td.innerHTML=deviceList[iDevice];\r
+ tr.appendChild(td);\r
+ var td = document.createElement("td");\r
+ td.width=50;\r
+ td.style.background=colorList[iDevice];\r
+ tr.appendChild(td);\r
+ tbody.appendChild(tr);\r
+ }\r
+ }else{\r
+ var tr = document.createElement("tr");\r
+ var td = document.createElement("td");\r
+ td.innerHTML="No device is used in this period";\r
+ tr.appendChild(td);\r
+ tbody.appendChild(tr);\r
+ }\r
+\r
+ table.appendChild(tbody);\r
+ return table;\r
+}\r
+\r
+////////////////////////////\r
+// get the device names in loglist\r
+function getDeviceList(){\r
+\r
+ var nList=loglist["info"].listCount;\r
+ var deviceList = new Array();\r
+ for (var i=0; i<nList; i++){\r
+ logItem=loglist[i];\r
+ if(deviceList.indexOf(logItem.device)==-1){\r
+ deviceList.push(logItem.device);\r
+ }\r
+ }\r
+ return deviceList;\r
+}\r
+\r
+// make canvas to display usage log\r
+function makeCanvas() {\r
+ var canvas = document.getElementById("usagelog");\r
+ if (canvas) {\r
+ var cell = makeCells();\r
+ canvas.appendChild(cell);\r
+ var devicesLegend = makeDevicesLegend();\r
+ canvas.appendChild(devicesLegend);\r
+ }\r
+}\r
+\r
+////////////////////////////\r
+// set up event listner\r
+function addOnLoadEvent(func) {\r
+ if (window.addEventListener) {\r
+ window.addEventListener("load", func, false);\r
+ } else if (window.attachEvent) { // for IE\r
+ window.attachEvent("onload", func);\r
+ } else {\r
+ window.onload = func;\r
+ }\r
+}\r
+\r
+////////////////////////////\r
+// initialize\r
+function init(){\r
+\r
+ // get loglist info\r
+ beginTime=new Date(loglist["info"].beginTime.replace(/-/g, "/"));\r
+ endTime=new Date(loglist["info"].endTime.replace(/-/g, "/"));\r
+ // get device names in loglist\r
+ deviceList=getDeviceList();\r
+\r
+ // set up onLoad event listner\r
+ addOnLoadEvent(makeCanvas);\r
+}\r
+\r
+////////////////////////////\r
+// startup from here\r
+init();\r
+\r
OSDN Git Service
