<!DOCTYPE html>
<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>
<style type='text/css'>
.main{
background-color: lightgrey;
}
.child{
background-color: white;
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 1vmin;
}
.border{
display: inline-block;
padding: 0.4vmin;
}
.courseFont{
padding: 0.5vmin;
font-size: 2vmin;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
}
.headerFont{
font-size: 4vmin;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
border: 0px;
border-bottom: 0.2vmin;
margin-bottom: 1vmin;
border-color: grey;
border-style:solid;
}
.divPcOn, .divPcPcUsed, .divPcPcOff, .divPcPcDefect{
width: 4vmin;
height: 4vmin;
text-align: center;
font-size: 3vmin;
font-weight: 800;
border-radius: 0.4vmin;
}
.divPcOn {
background-color: green;
text-align: center;
}
.divPcPcUsed{
background-color: red;
}
.divPcPcOff{
background-color: darkgrey;
}
.divPcPcDefect{
background-color: black;
color: white;
}
.divAroundPcStates{
display: flex;
justify-content: flex-end;
}
.paperEffect
{
margin: 0 auto;
background-color: #fff;
-webkit-box-shadow: 0 0 0.2vmin rgba(0, 0, 0, 0.4), inset 0 0 1vmin rgba(0, 0, 0, 0.1);
-moz-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 0.2vmin rgba(0, 0, 0, 0.4), inset 0 0 1vmin rgba(0, 0, 0, 0.1);
border-radius: 1px;
}
</style>
<script type='text/javascript'>
var rooms = {};
var startdate;
var roomidsString = "";
var lastPcUpdate;
var lastTimeTableUpdate;
var pcStateUpdateTime = 60; // in seconds
var TimeTableUpdateTime = 60*30; //in seconds
$(document).ready(function () {
//temp
SetUpDate(new Date());
init();
});
function init() {
var ids = getUrlParameter("id");
$.getJSON("../../../api.php?do=locationinfo&action=roomtree&ids=" + ids, function (result) {
generateLayout(result);
setInterval(update,1000);
});
}
function SetUpDate(d) {
startdate = d.getTime()-new Date().getTime();
}
function MyDate() {
return new Date(startdate +new Date().getTime());
}
function generateLayout(json) {
for (var i = 0; i< json.length;i++){
generateObject(json[i],($("body")));
}
}
function generateObject(json,myParent){
if(json.childs.length == 0) {
generateChild(myParent,json.id,json.name)
} else {
generateParent(myParent,json.id,json.name);
for (var i = 0; i < json.childs.length;i++){
generateObject(json.childs[i],$("#parent_"+json.id));
}
}
}
function getNextEvent(json) {
var event;
var now = new MyDate();
for (var i = 0; i < json.length; i++) {
//event is now active
if (json[i].start.getTime() < now.getTime() && json[i].end.getTime() > now.getTime()) {
return json[i];
}
//first element to consider
if (event == null) {
if (json[i].start.getTime() > now.getTime()) {
event = json[i];
}
}
if (json[i].start.getTime() > now.getTime() && event.start.getTime() > json[i].start.getTime()) {
event = json[i];
}
}
return event;
}
function update() {
if(lastPcUpdate ==null || (new MyDate().getTime()-lastPcUpdate.getTime()) > pcStateUpdateTime*1000){
$.getJSON("../../../api.php?do=locationinfo&action=pcstates&ids=" + roomidsString, function (result) {
updatePcStates(result);
lastPcUpdate = new MyDate();
});
}
if(lastTimeTableUpdate ==null || (new MyDate().getTime()-lastTimeTableUpdate.getTime()) > TimeTableUpdateTime*1000){
$.getJSON("../../../api.php?do=locationinfo&action=calendars&ids=" + roomidsString, function (result) {
UpdateTimeTables(result);
lastTimeTableUpdate = new MyDate();
});
}
// todo get opeing time
if(lastTimeTableUpdate != null && lastPcUpdate !=null ) {
for (var property in rooms) {
upDateRoomState(rooms[property]);
}
}
}
function UpdateTimeTables(json) {
var l = json.length;
for (var i = 0; i < l;i++){
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);
}
ComputeCurrentState(rooms[json[i].id]);
}
}
function upDateRoomState(room) {
if(room === undefined){
console.log("error");
return;
}
var state = room.getState();
if(state.state == "ClaendarEvent") {
updateCourseText(room.id,state.titel);
updateCoursTimer(room.id,GetTimeDiferenceAsString(state.end,MyDate()));
} else if(state.state == "Free") {
updateCourseText(room.id,"Frei");
updateCoursTimer(room.id,GetTimeDiferenceAsString(state.end,MyDate()));
} else if(state.state == "FreeNoEnd") {
updateCourseText(room.id,"Frei");
updateCoursTimer(room.id,"");
}
else if(state.state == "closed") {
updateCourseText(room.id,"Geschlossen");
updateCoursTimer(room.id,"");
}
}
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)
}
}
function addRoom(id,name) {
var room = {
id: id,
name: name,
timetable: null,
currentEvent: null,
nextEventEnd: null,
timeTilFree: null,
state: null,
openingTimes: null,
getState: function () {
if (this.state == null) {
ComputeCurrentState(this);
return this.state;
}
if (this.state.end != "") {
if (this.state.end < new MyDate()) {
ComputeCurrentState(this);
}
}
return this.state;
}
}
rooms[id]=room;
if(roomidsString == "") {
roomidsString = id;
} else {
roomidsString = roomidsString +","+id;
}
}
//need testing
function ComputeCurrentState(room) {
if (!IsOpenNow(room)) {
room.state = {state: "closed", end: GetNextOpening(room), titel: "", next: ""};
return;
}
var closing = GetNextClosing(room);
var event = getNextEvent(room.timetable);
// no event and no closing
if (closing == null && event == null) {
room.state = {state: "FreeNoEnd", end: "", titel: "", next: ""};
return;
}
// no event so closing is next
if (event == null) {
room.state = {state: "Free", end: closing, titel: "", next: "closing"};
return;
}
// event is at the moment
if ((closing==null||event.start.getTime() < closing.getTime()) && event.start.getTime() < new MyDate()) {
room.state = {state: "ClaendarEvent", end: event.end, titel: event.title, next: ""};
return;
}
// no closing so event is next
if (closing == null) {
room.state = {state: "Free", end: event.start, titel: "", next: "event"};
return;
}
// event sooner then closing
if (event.start.getTime() < closing) {
room.state = {state: "Free", end: event.start, titel: "", next: "event"};
} else if (event.start.getTime() > closing) {
room.state = {state: "Free", end: closing, titel: "", next: "closing"};
}
}
function IsOpenNow(room) {
var now = new MyDate();
if (room.openingTimes == null) {
// changes from falls needs testing
return true;
}
var tmp = room.openingTimes[now.getDay()];
if (tmp == null) {
return false;
}
for (var i = 0; i < tmp.length; i++) {
var openDate = new MyDate();
openDate.setHours(tmp[i].HourOpen);
openDate.setMinutes(tmp[i].MinutesOpen);
var closeDate = new MyDate();
closeDate.setHours(tmp[i].HourClose);
closeDate.setMinutes(tmp[i].MinutesClose);
if (openDate < now && closeDate > now) {
return true;
}
}
return false;
}
//need testing
function getNextEvent(json) {
var event;
var now = new MyDate();
for (var i = 0; i < json.length; i++) {
//event is now active
if (json[i].start.getTime() < now.getTime() && json[i].end.getTime() > now.getTime()) {
return json[i];
}
//first element to consider
if (event == null) {
if(json[i].start.getTime() > now.getTime()) {
event = json[i];
}
}
if (json[i].start.getTime() > now.getTime() && event.start.getTime() > json[i].start.getTime()) {
event = json[i];
}
}
return event;
}
function GetNextOpening(room) {
var now = new MyDate();
var day = now.getDay();
var offset = 0;
var bestdate;
for (var a = 0; a < 7; a++) {
if (room.openingTimes == null) {
return null;
}
var tmp = room.openingTimes[day];
if (tmp != null) {
for (var i = 0; i < tmp.length; i++) {
var openDate = new MyDate();
openDate.setDate(now.getDate() + offset);
openDate.setHours(tmp[i].HourOpen);
openDate.setMinutes(tmp[i].MinutesOpen);
if (openDate > now) {
if (!IsOpen(new Date(openDate.getTime() - 60000))) {
if (bestdate == null || bestdate > openDate) {
bestdate = openDate;
}
}
}
}
}
offset++;
day++;
if (day > 6) {
day = 0;
}
}
return bestdate;
}
function GetNextClosing(room) {
var now = new MyDate();
var day = now.getDay();
var offset = 0;
var bestdate;
for (var a = 0; a < 7; a++) {
//Test
if(room.openingTimes=== null) {
return null;
}
var tmp = room.openingTimes[day];
if (tmp != null) {
for (var i = 0; i < tmp.length; i++) {
var closeDate = new MyDate();
closeDate.setDate(now.getDate() + offset);
closeDate.setHours(tmp[i].HourClose);
closeDate.setMinutes(tmp[i].MinutesClose);
if (closeDate > now) {
if (!IsOpen(new Date(closeDate.getTime() + 60000))) {
if (bestdate == null || bestdate > closeDate) {
bestdate = closeDate;
}
}
}
}
}
offset++;
day++;
if (day > 6) {
day = 0;
}
}
return bestdate;
}
function updateRoomUsage(id,on,used,off,defect){
$("#div_pc_On_"+id).text(on);
$("#div_pc_Used_"+id).text(used);
$("#div_pc_Off_"+id).text(off);
$("#div_pc_Defect_"+id).text(defect);
}
function updateCourseText(id,text) {
$("#div_course"+id).text(text);
}
function updateCoursTimer(id,time) {
$("#div_Time_"+id).text(time);
}
function generateChild(target,id,name) {
var text="<div class='border'>" +
"<div class='child paperEffect'>" +
"<div class='headerFont'>"+name+"</div>" +
"<div class='divAroundPcStates'>" +
"<div id = 'div_pc_On_"+id+"' class='divPcOn '></div>" +
"<div id = 'div_pc_Used_"+id+"' class='divPcPcUsed'></div>" +
"<div id = 'div_pc_Off_"+id+"' class='divPcPcOff'></div>" +
"<div id = 'div_pc_Defect_"+id+"' class='divPcPcDefect'></div>" +
"</div>" +
"<div id = 'div_course"+id+"'class='courseFont'></div>" +
"<div id = 'div_Time_"+id+"'class='courseFont'></div></div></div>";
$(target).append(text);
addRoom(id,name);
}
function generateParent(target,id,name) {
var text="<div class='border'>" +
"<div class='child paperEffect'>" +
"<div class='headerFont'>"+name+"</div>" +
"<div id='parent_"+ id +"'</div>"+
"</div></div>";
$(target).append(text);
}
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
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 class="main">
<h1>Raum Übersicht</h1>
</body>
</html>