diff options
Diffstat (limited to 'modules-available/locationinfo/templates/frontend-summary.html')
| -rw-r--r-- | modules-available/locationinfo/templates/frontend-summary.html | 225 |
1 files changed, 149 insertions, 76 deletions
diff --git a/modules-available/locationinfo/templates/frontend-summary.html b/modules-available/locationinfo/templates/frontend-summary.html index dd5fc25d..ec5d8aab 100644 --- a/modules-available/locationinfo/templates/frontend-summary.html +++ b/modules-available/locationinfo/templates/frontend-summary.html @@ -2,7 +2,9 @@ <html lang="de"> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> <head> - <script type='text/javascript' src='../../../script/jquery.js'></script> + <script type='text/javascript' src='{{dirprefix}}script/jquery.js'></script> + <script type='text/javascript' src='{{dirprefix}}modules/locationinfo/frontend/frontendscript.js'></script> + <style type='text/css'> body { @@ -32,6 +34,7 @@ .parent .parent, .parent .child { min-height: 5em; + min-width: 90px; } .border { @@ -59,7 +62,7 @@ border-style: solid; } - .pc-idle, .pc-occupied, .pc-off, .pc-broken { + .pc-idle, .pc-occupied, .pc-offline, .pc-broken, .pc-standby { padding: 2px 1px; text-align: center; font-size: 90%; @@ -78,10 +81,15 @@ border-radius: 3px 0px 0px 3px; } - .pc-off { + .pc-offline { background-color: darkgrey; } + .pc-standby { + background-color: darkgreen; + } + + .pc-broken { background-color: black; color: white; @@ -95,7 +103,8 @@ .paperEffect { margin: 0 auto; background-color: #fff; - box-shadow: 0 0 0.2vmin rgba(0, 0, 0, 0.4), inset 0 0 1vmin rgba(0, 0, 0, 0.1); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 0 0.2vmin rgba(0, 0, 0, 0.4), 0 0 1vmin rgba(0, 0, 0, 0.1) inset; border-radius: 1px; } @@ -106,22 +115,30 @@ var rooms = {}; var startdate; var roomidsString = ""; - + var config = {{{config}}}; $(document).ready(function () { - //temp - SetUpDate(new Date()); init(); }); function init() { - var ids = getUrlParameter("id"); - $.getJSON("../../../api.php?do=locationinfo&action=locationtree&id=" + ids, function (result) { - generateLayout(result); - - setTimeout(update, 1000); - }); - + var time = false; + if (config.time) { + var p = config.time.split('-'); + if (p.length === 6) { + time = new Date(p[0], (p[1] - 1), p[2], p[3], p[4], p[5]); + console.log(time); + } + if (time === false || isNaN(time.getTime()) || time.getFullYear() < 2010) { + time = new Date(config.time); + } + if (!time || isNaN(time.getTime()) || time.getFullYear() < 2010) { + time = new Date(); + } + } + SetUpDate(time); + generateLayout(config.tree); + update(); } function SetUpDate(d) { @@ -140,7 +157,7 @@ } /** - * generates the divs, decidecs if parent or child + * generates the divs, decides if parent or child * @param json Room tree json * @param myParent parent div * @param outermost if the object is a root node @@ -177,59 +194,89 @@ const ROOMUPDATE_MS = 2*60*1000; const CALUPDATE_MS = 20*60*1000; + var timeout = null; function update() { var calendarUpdateIds = ""; var rommUpdateIds = ""; var count = 0; var nextUpdate = 15000; - for (var property in rooms) { + var property; + // TODO: Only query a few rooms is not possible with the new api stuff ... + for (property in rooms) { if (rooms[property].lastCalendarUpdate === null || rooms[property].lastCalendarUpdate + CALUPDATE_MS < MyDate().getTime()) { + // TODO: NOT NECESSARY ANYMORE?! calendarUpdateIds = addIdToUpdateList(calendarUpdateIds, rooms[property].id); count++; rooms[property].lastCalendarUpdate = MyDate().getTime(); } if (rooms[property].lastRoomUpdate === null || rooms[property].lastRoomUpdate + ROOMUPDATE_MS < MyDate().getTime()) { + // TODO: NOT NECESSARY ANYMORE?! rommUpdateIds = addIdToUpdateList(rommUpdateIds, rooms[property].id); count++; rooms[property].lastRoomUpdate = MyDate().getTime(); } - if (count > 7) break; + // TODO if (count > 7) break; } if (calendarUpdateIds !== "") { - queryCalendars(calendarUpdateIds); + queryCalendars(); nextUpdate = 1000; } if (rommUpdateIds !== "") { - queryRooms(rommUpdateIds); + queryRooms(); nextUpdate = 1000; } - for (var property in rooms) { + for (property in rooms) { upDateRoomState(rooms[property]); } + clearTimeout(timeout); setTimeout(update, nextUpdate); } + function cleanDate(d) { + if (typeof d === 'string') { + // if is numeric + if (!isNaN(Number(d))) { + return cleanDate(parseInt(d, 10)); + } + + // this is a human readable date + if (d[d.length - 1] !== 'Z') d += 'Z'; + var o = new Date(d); + o.setTime(o.getTime() + (o.getTimezoneOffset() * 60 * 1000)); + return o; + } + + if (typeof d === 'number') { + return new Date(d); + } + + return d; + } function UpdateTimeTables(json) { var l = json.length; for (var i = 0; i < l; i++) { + if (rooms[json[i].id] == null) { + continue; + } rooms[json[i].id].timetable = json[i].calendar; for (var property in rooms[json[i].id].timetable) { - rooms[json[i].id].timetable[property].start = new Date(rooms[json[i].id].timetable[property].start); - rooms[json[i].id].timetable[property].end = new Date(rooms[json[i].id].timetable[property].end); + rooms[json[i].id].timetable[property].start = cleanDate(rooms[json[i].id].timetable[property].start); + rooms[json[i].id].timetable[property].end = cleanDate(rooms[json[i].id].timetable[property].end); } ComputeCurrentState(rooms[json[i].id]); } + update(); } /** * Querys Pc states - * @param ids Room ID's which should be queried. Format for e.g.: "20,5,6" + * Room are queried with the {{uuid}} of the panel. */ - function queryRooms(ids) { + function queryRooms() { $.ajax({ - url: "../../../api.php?do=locationinfo&action=pcstates&id=" + ids, + url: "{{dirprefix}}api.php?do=locationinfo&get=pcstates&uuid={{uuid}}", dataType: 'json', cache: false, timeout: 30000, @@ -241,6 +288,7 @@ return; } updatePcStates(result); + }, error: function () { } @@ -272,7 +320,6 @@ updateCourseText(room.id, "Geschlossen"); updateCoursTimer(room.id, ""); } - } /** @@ -282,10 +329,14 @@ function updatePcStates(json) { var l = json.length; for (var i = 0; i < l; i++) { - updateRoomUsage(json[i].id, json[i].idle, json[i].occupied, json[i].off, json[i].broken) + updateRoomUsage(json[i].id, json[i].idle, json[i].occupied, json[i].offline, json[i].broken, json[i].standby) } } + + const OT_DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + const OT_KEYS = ['HourOpen', 'HourClose', 'MinutesOpen', 'MinutesClose']; + /** * Generates a room Object and adds it to the rooms array * @param id ID of the room @@ -293,6 +344,22 @@ * @param config Config Json of the room */ function addRoom(id, name) { + var ot = []; + if (config && config.locations) { + for (var i = 0; i < config.locations.length; ++i) { + if (config.locations[i].id == id) { + // TODO: Messed up transformation from default panel + if (config.locations[i].openingtime) { + var raw_ot = config.locations[i].openingtime; + + for (var j = 0; j < OT_DAYS.length; ++j) { + ot.push(filterOpeningTimesDay(raw_ot[OT_DAYS[j]])); + } + } + } + } + } + var room = { id: id, name: name, @@ -301,7 +368,7 @@ nextEventEnd: null, timeTilFree: null, state: null, - openingTimes: null, + openingTimes: ot, lastCalendarUpdate: null, lastRoomUpdate: null, getState: function () { @@ -329,6 +396,33 @@ } } + /** + * Filter out invalid opening time entries from given array, + * also make sure all the values are of type number (int) + * + * @param {Array} arr + * @return {Array} list of valid opening times + */ + function filterOpeningTimesDay(arr) { + if (!arr || arr.constructor !== Array) return []; + return arr.map(function (el) { + if (!el || typeof el !== 'object') return null; + for (var i = 0; i < OT_KEYS.length; ++i) { + el[OT_KEYS[i]] = toInt(el[OT_KEYS[i]]); + if (isNaN(el[OT_KEYS[i]])) return null; + } + return el; + }).filter(function (el) { + if (!el) return false; + if (el.HourOpen < 0 || el.HourOpen > 23) return false; + if (el.HourClose < 0 || el.HourClose > 23) return false; + if (el.HourClose < el.HourOpen) return false; + if (el.MinutesOpen < 0 || el.MinutesOpen > 59) return false; + if (el.MinutesClose < 0 || el.MinutesClose > 59) return false; + if (el.HourOpen === el.HourClose && el.MinutesClose < el.MinutesOpen) return false; + return true; + }); + } /** * computes state of a room, states are: @@ -379,6 +473,7 @@ room.state = {state: "Free", end: closing, titel: "", next: "closing"}; } } + /** * checks if a room is open * @param room Room object @@ -391,6 +486,7 @@ // changes from falls needs testing return true; } + var tmp = room.openingTimes[now.getDay()]; if (tmp == null) { return false; @@ -460,7 +556,7 @@ openDate.setHours(tmp[i].HourOpen); openDate.setMinutes(tmp[i].MinutesOpen); if (openDate > now) { - if (!IsOpen(new Date(openDate.getTime() - 60000))) { + if (!IsOpen(new Date(openDate.getTime() - 60000), room)) { if (bestdate == null || bestdate > openDate) { bestdate = openDate; } @@ -500,7 +596,7 @@ closeDate.setHours(tmp[i].HourClose); closeDate.setMinutes(tmp[i].MinutesClose); if (closeDate > now) { - if (!IsOpen(new Date(closeDate.getTime() + 60000))) { + if (!IsOpen(new Date(closeDate.getTime() + 60000), room)) { if (bestdate == null || bestdate > closeDate) { bestdate = closeDate; } @@ -522,20 +618,24 @@ * @param id of the child * @param idle PC's on * @param occupied PC's used - * @param off PC's that are off + * @param offline PC's that are off * @param broken PC's that are broken + * @param standby PCs in standby mode */ - function updateRoomUsage(id, idle, occupied, off, broken) { - if (idle == 0 && occupied == 0 && off == 0) { + function updateRoomUsage(id, idle, occupied, offline, broken, standby) { + /* TODO Broken + if (idle === 0 && occupied === 0 && offline === 0 && broken === 0 && standby === 0) { $('#parent_' + id).parent().hide(); return; } $('#parent_' + id).parent().show(); - var total = parseInt(idle) + parseInt(occupied) + parseInt(off) + parseInt(broken); + */ + var total = parseInt(idle) + parseInt(occupied) + parseInt(offline) + parseInt(broken) + parseInt(standby); $("#pc_Idle_" + id).text(idle).width((idle / total) * 100 + '%'); $("#pc_Occupied_" + id).text(occupied).width((occupied / total) * 100 + '%'); - $("#pc_Off_" + id).text(off).width((off / total) * 100 + '%'); + $("#pc_Offline_" + id).text(offline).width((offline / total) * 100 + '%'); $("#pc_Broken_" + id).text(broken).width((broken / total) * 100 + '%'); + $("#pc_Standby_" + id).text(standby).width((standby / total) * 100 + '%'); } /** @@ -553,7 +653,13 @@ * @param time Time value */ function updateCoursTimer(id, time) { - $("#div_Time_" + id).text(time); + // TODO: Add seconds again with a better update rate. + var time_split = time.split(":"); + if (time != "") { + $("#div_Time_" + id).text(time_split[0] + ":" + time_split[1]); + } else { + $("#div_Time_" + id).text(time); + } } /** @@ -577,7 +683,8 @@ "<div class='pc-state-wrapper'>" + "<div id = 'pc_Occupied_" + id + "' class='pc-occupied'>?</div>" + "<div id = 'pc_Idle_" + id + "' class='pc-idle'>?</div>" + - "<div id = 'pc_Off_" + id + "' class='pc-off'>?</div>" + + "<div id = 'pc_Standby_" + id + "' class='pc-standby'>?</div>" + + "<div id = 'pc_Offline_" + id + "' class='pc-offline'>?</div>" + "<div id = 'pc_Broken_" + id + "' class='pc-broken'>?</div>" + "</div>" + "<div class='aroundCourse'>" + @@ -585,8 +692,7 @@ "<div id = 'div_Time_" + id + "'class='courseFont'></div></div></div></div>"; var obj = $(target).append(text); addRoom(id, name); - return obj - + return obj; } /** @@ -634,10 +740,11 @@ /** * querys the Calendar data - * @param ids ID'S of rooms to query as string, for e.g.: "5,17,8" or "5" + * Calender is queried with the {{uuid}} of the panel. + * api.inc.php / page.inc.php is getting the ids with the panel uuid. */ - function queryCalendars(ids) { - var url = "../../../api.php?do=locationinfo&action=calendar&id=" + ids; + function queryCalendars() { + var url = "{{dirprefix}}api.php?do=locationinfo&get=calendar&uuid={{uuid}}"; // Todo reimplement Frontend methode if needed /* @@ -652,46 +759,12 @@ timeout: 30000, success: function (result) { UpdateTimeTables(result); - - }, error: function () { } }); } - - /** - * used for countdown - * computes the time difference between 2 Date objects - * @param a Date Object - * @param b Date Object - * @returns time string - */ - function GetTimeDiferenceAsString(a, b) { - if (a == null || b == null) { - return ""; - } - var milliseconds = a.getTime() - b.getTime(); - var seconds = Math.floor((milliseconds / 1000) % 60); - milliseconds -= seconds * 1000; - var minutes = Math.floor((milliseconds / (1000 * 60)) % 60); - milliseconds -= minutes * 1000 * 60; - var hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24); - - var days = Math.floor((milliseconds / (1000 * 60 * 60 * 24)) % 31); - if (seconds < 10) { - seconds = "0" + seconds; - } - if (minutes < 10) { - minutes = "0" + minutes; - } - if (days != 0) { - // dont show? - return ""; - } - return hours + ":" + minutes + ":" + seconds; - } </script> </head> <body> |