<!--
parameter
required:
id: [integer] room id, see in admin panel
optional:
lang:[en,de] set the language
mode:[1,2,3,4] sets the displaying
1: Calendar & Room
2: only Calendar
3: only Room
4: Calendar & Room alternately
daystoshow:[1,2,3,4,5,6,7] sets how many days the calendar shows
scale:[10-90] scales the calendar and Roomplan in mode 1
switchtime:[1-120] sets the time between switchen in mode 4 (in seconds)
calupdate: Time the calender querys for updates,in minutes.
roomupdate: Time the PCs in the room gets updated,in seconds.
rotation:[0-3] rotation of the roomplan
vertical:[true] only mode 1, sets the calendar above the roomplan
configupdate: Time interval the config gets updated (in minutes)
scaledaysauto: [true] if true it finds automaticly the daystoshow parameter depending on display size
-->
<!DOCTYPE html>
<html lang="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<head>
<title>DoorSign</title>
<script type='text/javascript' src='../../../script/jquery.js'></script>
<script type='text/javascript' src='../../js_jqueryui/clientscript.js'></script>
<link rel='stylesheet' type='text/css' href='../../js_jqueryui/style.css'/>
<link rel='stylesheet' type='text/css' href='jquery-week-calendar/jquery.weekcalendar.css'/>
<script type='text/javascript' src="jquery-week-calendar/jquery.weekcalendar.js"></script>
<style type='text/css'>
body {
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
margin: 0;
width: 100%;
height: 100%;
float: left;
box-sizing: border-box;
background-color: #cacaca;
overflow: hidden;
position: absolute;
display: table;
}
.row {
background-color: #404040;
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
margin-bottom: 4px;
width: 100%;
}
.header {
display: table;
color: white;
padding: 0;
height: 8vw;
}
.progressbar {
width: 0px;
height: 2px;
position: absolute;
background-color: red;
bottom: 2px;
z-index: 1;
}
.font {
display: table-cell;
vertical-align: middle;
font-size: 3vw;
font-weight: bold
}
.courseText {
text-align: center;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;;
padding: 0;
box-sizing: border-box;
}
.col-1 {
width: 33%;
}
.col-2 {
width: 33%;
}
.roomLayoutDesign {
position: relative;
float: left;
boxSizing: border-box;
}
.roompadding {
float: left;
position: relative;
}
.room {
position: relative;
background-color: white;
width: 100%;
height: 100%;
overflow: hidden;
border-width: 1px;
border-color: darkgrey;
border-style: solid;
}
.calendar {
float: left;
padding: 0;
box-sizing: border-box;
background: linear-gradient(#cccccc, white);
}
.free-busy-busy {
background: grey;
}
.ui-widget-content {
color: white;
}
.wc-header {
background-color: #404040;
font-weight: bold;
}
.ui-state-default {
text-shadow: none;
}
.square {
display: table;
float: right;
padding: 0;
width: 8vw;
height: 8vw;
}
.FreeSeatsFont {
display: table-cell;
vertical-align: middle;
font-size: 6vw;
color: white;
top: 0;
margin: 0 auto;
position: relative;
text-align: center;
font-weight: bold;
overflow: visible;
}
.PCImgDiv {
position: absolute;
left: 0;
bottom: 0;
display: inline-block;
}
.OverlayDiv {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: table;
}
.pcImg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.overlay {
position: relative;
width: 50%;
height: 50%;
opacity: 0.5;
float: left;
z-index: 5;
}
.overlay-rollstuhl {
width: 25%;
height: 50%;
background-color: white;
opacity: 0.5;
float: left;
}
.wc-scrollable-grid {
}
.ui-widget-content .ui-state-active {
font-weight: bold;
color: black;
}
.wc-container {
font-weight: bold;
}
.wc-today {
background-color: white;
}
.wc-time-header-cell {
background-color: #eeeeee;
border: none;
}
.ui-corner-all {
moz-border-radius-bottomright: 0;
webkit-border-bottom-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
moz-border-radius-topright: 0;
webkit-border-top-right-radius: 0;
-khtml-border-top-right-radius: 0;
border-top-right-radius: 0;
moz-border-radius-bottomleft: 0;
webkit-border-bottom-left-radius: 0;
-khtml-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
moz-border-radius-topleft: 0;
webkit-border-left-right-radius: 0;
-khtml-border-left-right-radius: 0;
border-top-left-radius: 0;
}
.wc-scrollable-grid .wc-day-column-first {
border-style: solid;
}
[class*="wc-day-"] {
border-color: grey;
}
</style>
<script type='text/javascript'>
var rooms = {};
var lastSwitchTime;
var roomsToshow = 0;
var roomIds;
//Todo change these
var date;
var supportSvg = typeof SVGRect != "undefined";
var calendarQueryUrl;
var translation = {
"en": {
"room": "Room",
"closed": "Closed",
"free": "Free",
"shortDays": ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
"longDays": ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
"to": "to"
},
"de": {
"room": "Raum",
"closed": "Geschlossen",
"free": "Frei",
"shortDays": ["Son", "Mon", "Die", "Mit", "Don", "Frei", "Sam"],
"longDays": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
"to": "bis"
},
"pt": {
"room": "Quarto",
"closed": "Fechado",
"free": "Livre",
"shortDays": ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Se', 'Sáb'],
"longDays": ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira',
'Sexta-feira', 'Sábado'],
"to": "para"
}
};
$(document).ready(function () {
if (!getId()) {
}
});
/**
* Downloads the config of a room, also reloads the page if the config hase changed over time
* @param id ID of the room
* @param room Room Object, only needed if it already exists
*/
function getConfig(id, room) {
$.ajax({
url: "../../../api.php?do=locationinfo&action=config&id=" + id,
dataType: 'json',
cache: false,
timeout: 30000,
success: function (result) {
if (room == null) {
if (result.room == null) {
for (var i = roomIds.length - 1; i >= 0; i--) {
if (roomIds[i] === id) {
roomIds.splice(i, 1);
}
}
if (roomsToshow == roomIds.length) {
initRooms();
}
return;
}
var time = new Date(result.time);
if (isNaN(time.getTime())) {
time = new Date();
}
SetUpDate(time);
delete result.time;
room = addRoom(id, result.room, result);
roomsToshow++;
if (roomsToshow == roomIds.length) {
initRooms();
}
} else {
delete result.time;
if (JSON.stringify(rooms[id].config) != JSON.stringify(result)) {
// reload Page if someone changed config
location.reload(true);
}
}
// check for config changes from time to time
setTimeout(function () {
getConfig(id, room);
}, room.config.configupdate);
}, error: function () {
//Todo Error handling:
}
})
}
/**
* gets the Parameter IDs from the Urls
*/
function getId() {
roomIds = getUrlParameter("id");
if (roomIds == null) {
var text = "<h1>Error: No Room Id's given in parameter </h1>";
$("body").append(text);
return false;
}
roomIds = roomIds.split(',');
if (roomIds.length > 4) {
roomIds.length = 4;
}
for (var i = 0; i < roomIds.length; i++) {
getConfig(roomIds[i], null);
}
}
const PARAM_STRING = 1;
const PARAM_INT = 2;
const PARAM_BOOL = 3;
/**
* Read given parameter from URL, replacing it in the config object if present.
* @param config object config object
* @param property string name of property in object, URL param of same name is being checked
* @param paramType int one of PARAM_STRING, PARAM_INT, PARAM_BOOL
* @param intScaleFactor int optional scale factor that will be applied if paramType == PARAM_INT
*/
function setRoomConfigFromUrl(config, property, paramType, intScaleFactor) {
var val = getUrlParameter(property);
if (val === true || val === false)
return;
if (paramType === PARAM_STRING) {
config[property] = val;
} else if (paramType === PARAM_INT) {
config[property] = parseInt(val);
if (intScaleFactor) {
config[property] *= intScaleFactor;
}
} else if (paramType === PARAM_BOOL) {
val = val.toLowerCase();
config[property] = val.length > 0 && val !== 'false' && val !== 'off' ? true : false;
} else {
console.log('Invalid paramType: ' + paramType);
}
}
/**
* Put given numeric config property in range min..max (both inclusive),
* if not in range, set to default.
* @param config - object config object
* @param property - string config property
* @param min int - min allowed value (inclusive)
* @param max int - max allowed value (inclusive)
* @param defaultval - default value to use if out of range
* @param scaleFactor int - optional scale factor to apply
*/
function putInRange(config, property, min, max, defaultval, scaleFactor) {
var v = config[property];
if (!scaleFactor) {
scaleFactor = 1;
}
if (!v || !isFinite(v) || isNaN(v) || v < min * scaleFactor || v > max * scaleFactor) {
config[property] = defaultval * scaleFactor;
}
}
/**
* gets Additional Parameters from the URL, and from the
* downloaded json.
* also makes sure parameters are in a given range
* @param room Room Object
*/
function getParamerter(room) {
if (room.config) {
room.config.switchtime = room.config.switchtime * 1000;
room.config.calupdate = room.config.calupdate * 60 * 1000;
room.config.roomupdate = room.config.roomupdate * 1000;
room.config.configupdate = room.config.configupdate * 60 * 1000;
}
setRoomConfigFromUrl(room.config, 'mode', PARAM_INT);
setRoomConfigFromUrl(room.config, 'calupdate', PARAM_INT, 60 * 1000);
setRoomConfigFromUrl(room.config, 'roomupdate', PARAM_INT, 1000);
setRoomConfigFromUrl(room.config, 'daystoshow', PARAM_INT);
setRoomConfigFromUrl(room.config, 'scaledaysauto', PARAM_BOOL);
setRoomConfigFromUrl(room.config, 'vertical', PARAM_BOOL);
setRoomConfigFromUrl(room.config, 'einkmode', PARAM_BOOL);
setRoomConfigFromUrl(room.config, 'scale', PARAM_INT);
setRoomConfigFromUrl(room.config, 'rotation', PARAM_INT);
setRoomConfigFromUrl(room.config, 'switchtime', PARAM_INT, 1000);
setRoomConfigFromUrl(room.config, 'configupdate', PARAM_INT, 60 * 1000);
// parameter validation
putInRange(room.config, 'switchtime', 5, 120, 6, 1000);
putInRange(room.config, 'scale', 10, 90, 50);
putInRange(room.config, 'daystoshow', 1, 7, 7);
putInRange(room.config, 'roomupdate', 15, 5*60, 60, 1000);
putInRange(room.config, 'configupdate', 5, 60, 30, 60*1000);
putInRange(room.config, 'calupdate', 1, 60, 30, 60*1000);
putInRange(room.config, 'mode', 1, 4, 1);
putInRange(room.config, 'rotation', 0, 3, 0);
if (getUrlParameter("lang") != null && getUrlParameter("lang") in translation) {
room.config.language = getUrlParameter("lang");
}
$('html').attr('lang', room.config.language);
}
/**
* generates the Room divs and calls the needed functions depending on the rooms mode
*/
function initRooms() {
var width = "100%";
var height = "100%";
if (roomsToshow == 2 || roomsToshow == 4) {
width = "50%";
}
if (roomsToshow == 3) {
width = "33%";
}
if (roomsToshow == 4) {
height = "50%";
}
var i = 0;
for (var t = 0; t < roomIds.length; t++) {
var property = roomIds[t];
var text = "<div class='roompadding' id ='roompadding_" + rooms[property].id + "'></div>";
$("body").append(text);
var obj = document.getElementById("roompadding_" + rooms[property].id);
obj.style.height = height;
obj.style.width = width;
text = "<div class='room' id ='room_" + rooms[property].id + "'></div>";
$("#roompadding_" + rooms[property].id).append(text);
text = "<div id='header_" + rooms[property].id + "' class='row'>" +
"<div class='header col-2'>" +
"<div class='font' id='roomHeader_" + rooms[property].id + "'></div>" +
"</div>" +
"<div class='col-1 courseText header'>" +
"<div class='font' id='courseHeading_" + rooms[property].id + "'></div>" +
"</div>" +
"<div class='square .col-2' id='square_" + rooms[property].id + "'>" +
"<div class='FreeSeatsFont' id='freeSeatsHeader_" + rooms[property].id + "'></div>" +
"</div>" +
"</div>";
$("#room_" + rooms[property].id).append(text);
if (rooms[property].name != null) {
$("#roomHeader_" + rooms[property].id).text(rooms[property].name);
}
if (roomsToshow == 2) {
document.getElementById("square_" + rooms[property].id).style.width = "6vw";
document.getElementById("square_" + rooms[property].id).style.height = "6vw";
document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.8vw";
document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "4.5vw";
document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.8vw";
var headers = document.getElementsByClassName('header');
for (var j = 0; j < headers.length; j++) {
headers[j].style.height = "6vw";
}
}
if (roomsToshow == 3) {
document.getElementById("square_" + rooms[property].id).style.width = "4vw";
document.getElementById("square_" + rooms[property].id).style.height = "4vw";
document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.2vw";
document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "2.5vw";
document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.2vw";
var headers = document.getElementsByClassName('header');
for (var j = 0; j < headers.length; j++) {
headers[j].style.height = "4vw";
}
}
if (roomsToshow == 4) {
document.getElementById("square_" + rooms[property].id).style.width = "4vw";
document.getElementById("square_" + rooms[property].id).style.height = "4vw";
document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.5vw";
document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "2.5vw";
document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.5vw";
var headers = document.getElementsByClassName('header');
for (var j = 0; j < headers.length; j++) {
headers[j].style.height = "4vw";
}
}
if (rooms[property].config.mode == 1) {
setUpCalendar(rooms[property].config.scale + "%", rooms[property].config.daystoshow, rooms[property]);
preInitRoom(rooms[property]);
} else if (rooms[property].config.mode == 2) {
setUpCalendar("100%", rooms[property].config.daystoshow, rooms[property]);
} else if (rooms[property].config.mode == 3) {
preInitRoom(rooms[property]);
getOpeningTimes(rooms[property]);
} else if (rooms[property].config.mode == 4) {
setUpCalendar("100%", rooms[property].config.daystoshow, rooms[property]);
preInitRoom(rooms[property]);
generateProgressBar(rooms[property].id);
}
i++;
}
setInterval(mainUpdateLoop, 1000);
}
/**
* Helper function to generate id string used in query functions
* @param list A string, wicht contains ids or not(for now)
* @param id An ID which should be added to the list
*/
function addIdToUpdateList(list, id) {
if (list == "") {
list += id;
} else {
list += ("," + id);
}
return list;
}
var timeSteps = 10;
/**
* Main Update loop, this loop runs every 1 seconds and calls all
* function which should be called periodically
*/
function mainUpdateLoop() {
// check ervery 10 sec if rooms need new calendar data or room data
// groups request
if (timeSteps > 9) {
timeSteps = 0;
var calendarUpdateIds = "";
var rommUpdateIds = "";
for (var property in rooms) {
if (rooms[property].config.lastCalendarUpdate == null || rooms[property].config.lastCalendarUpdate + rooms[property].config.calupdate < MyDate().getTime()) {
calendarUpdateIds = addIdToUpdateList(calendarUpdateIds, rooms[property].id);
rooms[property].config.lastCalendarUpdate = MyDate().getTime();
}
if (rooms[property].config.lastRoomUpdate == null || rooms[property].config.lastRoomUpdate + rooms[property].config.roomupdate < MyDate().getTime()) {
rommUpdateIds = addIdToUpdateList(rommUpdateIds, rooms[property].id);
rooms[property].config.lastRoomUpdate = MyDate().getTime();
}
}
if (calendarUpdateIds != "") {
queryCalendars(calendarUpdateIds);
}
if (rommUpdateIds != "") {
queryRooms(rommUpdateIds);
}
}
// switches calendar and roomlayout in mode 4
for (var property in rooms) {
if (rooms[property].config.mode == 4) {
if (rooms[property].lastSwitchTime == null
|| rooms[property].lastSwitchTime + rooms[property].config.switchtime < MyDate().getTime()) {
switchLayout(rooms[property]);
MoveProgressBar(rooms[property].id, rooms[property].config.switchtime);
if (rooms[property].lastSwitchTime == null) {
rooms[property].lastSwitchTime = MyDate().getTime();
} else {
rooms[property].lastSwitchTime = rooms[property].lastSwitchTime + rooms[property].config.switchtime;
}
}
//
}
// Updateing All room Headers
UpdateRoomHeader(rooms[property]);
}
// reload site at midnight
var now = new MyDate();
if (date != null) {
if (date.getDate() != now.getDate()) {
location.reload(true);
}
}
date = now;
timeSteps++;
}
/**
* Generates a room Object and adds it to the rooms array
* @param id ID of the room
* @param name Name of the room
* @param config Config Json of the room
*/
function addRoom(id, name, config) {
var room = {
id: id,
name: name,
timetable: null,
currentEvent: null,
nextEventEnd: null,
timeTilFree: null,
state: null,
openingTimes: null,
config: config,
currentfreePcs: 0,
layout: null,
freePcs: 0,
resized: true,
lastCalendarUpdate: null,
lastRoomUpdate: 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;
}
};
getParamerter(room);
rooms[id] = room;
return room;
}
/**
* inilizes the Calendar for an room
* @param percent Percentages of how mucht width the Calendar div should get (only used in mode 1)
* @param daysToShow How many days the calendar should show
* @param room Room Object
*/
function setUpCalendar(percent, daysToShow, room) {
generateCalendarDiv(percent, room);
var $calendar = $("#calendar_" + room.id).weekCalendar({
timeslotsPerHour: 1,
timeslotHeight: 30,
daysToShow: daysToShow,
height: function ($calendar) {
var height = $(window).height();
if (roomsToshow == 4) {
height = height / 2;
}
height = height - document.getElementById('header_' + room.id).clientHeight - 5;
if (room.config.mode == 1 && room.config.vertical) {
height = height * (room.config.scale / 100)
}
return height;
},
eventRender: function (calEvent, $event) {
if (calEvent.end.getTime() < new MyDate().getTime()) {
$event.css("backgroundColor", "#aaa");
$event.find(".time").css({"backgroundColor": "#999", "border": "1px solid #888"});
} else if (calEvent.end.getTime() > new MyDate().getTime() && calEvent.start.getTime() < new MyDate().getTime()) {
$event.css("backgroundColor", "#25B002");
$event.find(".time").css({"backgroundColor": "#25B002", "border": "1px solid #888"});
}
},
date: MyDate(),
dateFormat: "j.n",
timeFormat: "G:i",
scrollToHourMillis: 500,
use24Hour: true,
readonly: true,
showHeader: false,
hourLine: true,
shortDays: t("shortDays", room.config.language),
longDays: t("longDays", room.config.language),
buttons: false,
timeSeparator: " " + t("to", room.config.language) + " ",
startOnFirstDayOfWeek: false,
displayFreeBusys: true,
defaultFreeBusy: {free: false}
});
getOpeningTimes(room);
}
/**
* downloads openingTimes for an room
* @param room Room Object
*/
function getOpeningTimes(room) {
$.getJSON("../../../api.php?do=locationinfo&action=openingtime&id=" + room.id, function (result) {
if (Object.prototype.toString.call(result) === '[object Array]') {
if (result.length > 0) {
SetOpeningTimes(result[0].openingtime, room);
}
}
scaleCalendar(room);
})
.error(function () {
scaleCalendar(room);
})
}
/**
* Generates the Calendar Div, depending on it's width
* @param width width of the Calendar Div
* @param room Room Object
*/
function generateCalendarDiv(width, room) {
var div = document.createElement("div");
div.id = "calendar_" + room.id;
div.className = "calendar";
if (room.config.vertical && room.config.mode == 1) {
width = 100 + "%";
$(div).css('float', "none");
}
div.style.width = width;
//document.body.appendChild(div);
$("#room_" + room.id).append(div);
}
/**
* sets the opening Time in the calendar plugin and saves it in the room object
* @param parsedOpenings Dictonary of Opening times.
* @param room Room Object
*/
function SetOpeningTimes(parsedOpenings, room) {
var opening = 24;
var close = 0;
room.openingTimesCalendar = [];
room.openingTimes = [parsedOpenings['Sunday'], parsedOpenings['Monday'], parsedOpenings['Tuesday'],
parsedOpenings['Wednesday'], parsedOpenings['Thursday'],
parsedOpenings['Friday'], parsedOpenings['Saturday']];
if (room.config.mode == 3) {
return;
}
for (var i = 0; i < 7; i++) {
var tmp = room.openingTimes[i];
if (tmp != null) {
for (var d = 0; d < tmp.length; d++) {
var day = getNextDayOfWeek(new MyDate(), i);
room.openingTimesCalendar.push({
"start": new Date(day.getFullYear(), day.getMonth(), day.getDate(),
tmp[d]['HourOpen'], tmp[d]['MinutesOpen']),
"end": new Date(day.getFullYear(), day.getMonth(),
day.getDate(), tmp[d]['HourClose'], tmp[d]['MinutesClose']),
"free": true
});
if (parseInt(tmp[d]['HourOpen']) < opening) {
opening = tmp[d]['HourOpen'];
}
if (parseInt(tmp[d]['HourClose']) > close) {
close = tmp[d]['HourClose'];
if (parseInt(tmp[d]['MinutesClose']) != 0) {
close++;
}
}
}
}
}
if (parsedOpenings.length == 0) {
opening = 0;
close = 24;
}
room.openTimes = close - opening;
$('#calendar_' + room.id).weekCalendar("option", "businessHours", {
start: parseInt(opening),
end: parseInt(close),
limitDisplay: true
});
}
/**
* querys the Calendar data
* @param ids ID'S of rooms to query as string, for e.g.: "5,17,8" or "5"
*/
function queryCalendars(ids) {
var url = "../../../api.php?do=locationinfo&action=calendar&id=" + ids;
// Todo reimplement Frontend methode if needed
/*
if(!(room.config.calendarqueryurl === undefined)) {
url = room.config.calendarqueryurl;
}
*/
$.ajax({
url: url,
dataType: 'json',
cache: false,
timeout: 30000,
success: function (result) {
var l = result.length;
for (var i = 0; i < l; i++) {
updateCalendar(result[i].calendar, rooms[result[i].id]);
}
}, error: function () {
}
});
}
/**
* applays new calendar data to the calendar plugin and also saves it to the room object
* @param json Calendar data JSON
* @param room Room Object
*/
function updateCalendar(json, room) {
if (!json) {
console.log("Error: Calendar data was an empty string.");
return;
}
try {
room.timetable = json;
if (room.config.mode != 3) {
var cal = $('#calendar_' + room.id);
cal.weekCalendar("option", "data", json);
cal.weekCalendar("refresh");
cal.weekCalendar("option", "defaultFreeBusy", {free: false});
cal.weekCalendar("updateFreeBusy", room.openingTimesCalendar);
}
ComputeCurrentState(room);
} catch (e) {
console.log("Error: Couldnt add calendar data");
console.log(e);
}
}
/**
* scales calendar, called once on create and on window resize
* @param room Room Object
*/
function scaleCalendar(room) {
if (room.config.mode == 3) {
return;
}
if (room.openTimes == null) {
room.openTimes = 24;
}
var cal = $('#calendar_' + room.id);
var columnWidth = document.getElementById("calendar_" + room.id).getElementsByClassName("wc-day-1")[0].clientWidth;
if (room.config.scaledaysauto) {
var result = (cal.weekCalendar("option", "daysToShow") * columnWidth) / 100;
result = parseInt(Math.min(Math.max(Math.abs(result), 1), 7));
if (result != parseInt(cal.weekCalendar("option", "daysToShow"))) {
cal.weekCalendar("option", "daysToShow", Math.abs(result));
}
}
if (((!room.config.scaledaysauto) || cal.weekCalendar("option", "daysToShow") == 1) && columnWidth < 85) {
cal.weekCalendar("option", "useShortDayNames", true);
} else {
cal.weekCalendar("option", "useShortDayNames", false);
}
var clientHeight = $(window).height();
if (roomsToshow == 4) {
clientHeight = clientHeight / 2;
}
clientHeight = clientHeight - document.getElementById('header_' + room.id).clientHeight
- document.getElementsByClassName("wc-time-column-header")[0].clientHeight - 2;
if (room.config.mode == 1 && room.config.vertical) {
clientHeight = clientHeight * (room.config.scale / 100);
clientHeight -= 22;
}
clientHeight -= 6;
var height = clientHeight / (room.openTimes * cal.weekCalendar("option", "timeslotsPerHour"));
if (height < 30) {
height = 30;
}
// Scale calendar font
if (height > 120) {
cal.weekCalendar("option", "textSize", 28);
}
else if (height > 100) {
cal.weekCalendar("option", "textSize", 24);
} else if (height > 80) {
cal.weekCalendar("option", "textSize", 22);
} else if (height > 70) {
cal.weekCalendar("option", "textSize", 20);
} else if (height > 60) {
cal.weekCalendar("option", "textSize", 14);
} else {
cal.weekCalendar("option", "textSize", 13);
}
cal.weekCalendar("option", "timeslotHeight", height);
if (room.openingTimesCalendar != null) {
cal.weekCalendar("updateFreeBusy", room.openingTimesCalendar);
}
cal.weekCalendar("resizeCalendar");
cal.weekCalendar("scrollToHour");
}
/**
* used for countdown
* computes the time difference between 2 Date objects
* @param a Date Object
* @param b Date Object
* @param room Room Object
* @returns time string
*/
function GetTimeDiferenceAsString(a, b, room) {
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 "";
}
if (room.config.einkmode) {
return hours + ":" + minutes;
}
return hours + ":" + minutes + ":" + seconds;
}
/**
* returns next closing time of a given room
* @param room
* @returns Date Object of next closing
*/
function GetNextClosing(room) {
var now = new MyDate();
var day = now.getDay();
var offset = 0;
var bestdate;
for (var a = 0; a < 7; a++) {
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);
closeDate.setSeconds(0);
if (closeDate > now) {
if (!IsOpen(new Date(closeDate.getTime() + 60000), room)) {
if (bestdate == null || bestdate > closeDate) {
bestdate = closeDate;
}
}
}
}
}
offset++;
day++;
if (day > 6) {
day = 0;
}
}
return bestdate;
}
/**
* checks if a room is on a given date/time open
* @param date Date Object
* @param room Room object
* @returns bool for open or not
*/
function IsOpen(date, room) {
if (room.openingTimes == null) {
return false;
}
var tmp = room.openingTimes[date.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 < date && closeDate > date) {
return true;
}
}
return false;
}
/**
* Retruns next Opening
* @param room Room Object
* @returns bestdate Date Object of next opening
*/
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), room)) {
if (bestdate == null || bestdate > openDate) {
bestdate = openDate;
}
}
}
}
}
offset++;
day++;
if (day > 6) {
day = 0;
}
}
return bestdate;
}
/**
* Sets the free PCs number in the right corner and updates the sqare color acordingly
* @param id Room id
* @param seats Number of free PC's in the room
*/
function SetFreeSeats(id, seats) {
if (seats > 0) {
$("#freeSeatsHeader_" + id).text(seats);
$("#square_" + id).css('background-color', '#00dd10');
} else if (seats == -1) {
$("#freeSeatsHeader_" + id).text("");
$("#square_" + id).css('background-color', 'red');
} else {
$("#freeSeatsHeader_" + id).text("0");
$("#square_" + id).css('background-color', 'red');
}
}
/**
* Updates the Header of an Room
* @param room Room Object
*/
function UpdateRoomHeader(room) {
var tmp = room.getState();
if (tmp.state == "closed") {
$("#courseHeading_" + room.id).text(t("closed", room.config.language) + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(), room));
SetFreeSeats(room.id, room.freePcs);
} else if (tmp.state == "ClaendarEvent") {
$("#courseHeading_" + room.id).text(tmp.title);
SetFreeSeats(room.id, -1);
} else if (tmp.state == "Free") {
$("#courseHeading_" + room.id).text(t("free", room.config.language) + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(), room));
SetFreeSeats(room.id, room.freePcs);
} else if (tmp.state == "FreeNoEnd") {
$("#courseHeading_" + room.id).text(t("free", room.config.language));
SetFreeSeats(room.id, room.freePcs);
}
}
/**
* computes state of a room, states are:
* closed, FreeNoEnd, Free, ClaendarEvent.
* @param Room Object
*/
function ComputeCurrentState(room) {
if (!IsOpen(new MyDate(), room)) {
room.state = {state: "closed", end: GetNextOpening(room), title: "", 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: "", title: "", next: ""};
return;
}
// no event so closing is next
if (event == null) {
room.state = {state: "Free", end: closing, title: "", 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, title: event.title, next: ""};
return;
}
// no closing so event is next
if (closing == null) {
room.state = {state: "Free", end: event.start, title: "", next: "event"};
return;
}
// event sooner then closing
if (event.start.getTime() < closing) {
room.state = {state: "Free", end: event.start, title: "", next: "event"};
} else if (event.start.getTime() > closing) {
room.state = {state: "Free", end: closing, title: "", next: "closing"};
}
}
/**
* returns next event from a given json of events
* @param json Json which contains the calendar data.
* @returns event next Carlendar Event
*/
function getNextEvent(json) {
var event;
var now = new MyDate();
if (json == null) {
return;
}
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 getNextDayOfWeek(date, dayOfWeek) {
// Code to check that date and dayOfWeek are valid left as an exercise ;)
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
return resultDate;
}
/*
/========================================== Room Layout =============================================
*/
var picSizeX = 3.8;
var picSizeY = 3;
/**
* Generates the RoomLayout Div
* @param width The width the RoomLayout should have (in percent).
* @param room Room Object
*/
function generateRoomLayoutDiv(width, room) {
var div = document.createElement("div");
div.id = "roomLayout_" + room.id;
div.className = "roomLayoutDesign";
if ((room.config.vertical && room.config.mode == 1) || (room.config.mode == 3) || (room.config.mode == 4)) {
width = 100 + "%";
$(div).css('float', "none");
}
div.style.width = width;
if (room.config.mode == 4) {
div.style.display = "none";
}
//document.body.appendChild(div);
$("#room_" + room.id).append(div);
}
/**
* Donwloads Room Layout Json (which contains the pc information for a given room)
* @param room Room Object
*/
function preInitRoom(room) {
$.getJSON("../../../api.php?do=locationinfo&action=locationinfo&id=" + room.id + "&coords=1", function (result) {
generateRoomLayoutDiv((100 - room.config.scale) + "%", room);
if (result && result[0] && result[0].computer) {
initRoom(result[0].computer, room);
} else {
initRoom([], room);
}
}).error(function () {
generateRoomLayoutDiv((100 - room.config.scale) + "%", room);
})
}
/**
* Main funciton for generating the Room Layout
* @param layout Layout Json
* @param room Room Object
*/
function initRoom(layout, room) {
var maxX;
var maxY;
var minY;
var minX;
var xDifference;
var yDifference;
room.layout = layout;
if (layout == null || layout.length == 0) {
return;
}
if (room.config.rotation != 0) {
rotateRoom(room.config.rotation, layout);
}
for (var i = 0; i < layout.length; i++) {
if (!isNaN(parseInt(layout[i].x)) && !isNaN(parseInt(layout[i].y)) && layout[i].y != null && layout[i].y != null) {
if (minX === undefined) {
minX = parseInt(layout[i].x);
}
if (minY === undefined) {
minY = parseInt(layout[i].y);
}
if (maxX === undefined) {
maxX = parseInt(layout[i].x);
}
if (maxY === undefined) {
maxY = parseInt(layout[i].y);
}
if (parseInt(layout[i].x) < parseInt(minX)) {
minX = parseInt(layout[i].x);
}
if (parseInt(layout[i].y) < parseInt(minY)) {
minY = parseInt(layout[i].y);
}
if (parseInt(layout[i].x) > parseInt(maxX)) {
maxX = parseInt(layout[i].x);
}
if (parseInt(layout[i].y) > parseInt(maxY)) {
maxY = parseInt(layout[i].y);
}
}
}
xDifference = maxX - minX;
yDifference = maxY - minY;
room.xDifference = xDifference;
room.yDifference = yDifference;
room.minX = minX;
room.minY = minY;
room.maxX = maxX;
room.maxY = maxY;
generateOffsetAndScale(room);
setUpRoom(room, layout);
scaleRoom(room);
UpdatePc(layout, room);
}
/**
* Computes offsets and scaling's for the RoomLayout
* @param room Room Object
*/
function generateOffsetAndScale(room) {
var clientHeight = $(window).height();
if (roomsToshow == 4) {
clientHeight = clientHeight / 2;
}
clientHeight = clientHeight - document.getElementById('header_' + room.id).clientHeight - 5;
if (roomsToshow > 1) {
clientHeight -= 5;
}
if (room.config.vertical && room.config.mode == 1) {
clientHeight = clientHeight * (1 - (room.config.scale / 100));
}
var roomLayout = document.getElementById('roomLayout_' + room.id);
var clientWidth = roomLayout.clientWidth;
//roomLayout.style.height = clientHeight + "px";
var scaleX;
if (room.xDifference != 0) {
scaleX = clientWidth / room.xDifference;
} else {
scaleX = clientWidth;
}
var scaleY;
if (room.yDifference != 0) {
scaleY = clientHeight / room.yDifference;
} else {
scaleY = clientHeight;
}
var scaleYs = (clientHeight - (picSizeY * scaleY)) / room.yDifference;
var scaleXs = (clientWidth - (picSizeX * scaleX)) / room.xDifference;
if (scaleYs <= 0) {
scaleYs = 9999;
}
if (scaleXs <= 0) {
scaleXs = 9999;
}
var tmp = [scaleYs, scaleY, scaleXs, scaleX, (clientHeight * 0.9) / picSizeY, (clientWidth * 0.9) / picSizeX];
room.scale = Math.min.apply(Math, tmp);
room.xOffset = 0 - room.minX;
room.yOffset = 0 - room.minY;
room.xOffset += ((1 / 2 * (clientWidth - (((room.maxX + room.xOffset) * room.scale) + picSizeX * room.scale))) / room.scale);
room.yOffset += ((1 / 2 * (clientHeight - (((room.maxY + room.yOffset) * room.scale) + picSizeY * room.scale))) / room.scale);
}
/**
* adds images for each pc to Room Layout
* @param room Room Object
* @param layout Layout json
*/
function setUpRoom(room, layout) {
for (var i = 0; i < layout.length; i++) {
if (layout[i].y != null && layout[i].x != null && !isNaN(layout[i].y) && !isNaN(layout[i].x)) {
var text = "<div class= 'PCImgDiv' id ='layout_PC_div_" + room.id + "_" + layout[i].id + "'>" +
"<div class= 'OverlayDiv' id ='layout_PC_overlay_" + room.id + "_" + layout[i].id + "'>" +
"</div>" +
"<img class= 'pcImg' id ='layout_PC_" + room.id + "_" + layout[i].id + "'> </img>" +
"</div>";
$('#roomLayout_' + room.id).append(text);
if (layout[i].hasOwnProperty('overlay')) {
for (var a = 0; a < layout[i].overlay.length; a++) {
addOverlay($('#layout_PC_overlay_' + room.id + "_" + layout[i].id), layout[i].overlay[a]);
}
}
}
}
}
/**
* Adds an overlay to an div(here the PC's shown in the RoomLayout).
* @param object Object where the overlay should be added
* @param overlayName name of the overlay (image name without ending)
*/
function addOverlay(object, overlayName) {
var a = [".svg", ".png", "jpg"];
var imgname;
for (var i = 0; i < a.length; a++) {
if (imageExists("img/overlay/" + overlayName + a[i])) {
imgname = "img/overlay/" + overlayName + a[i];
break;
}
}
if (imgname == null) {
return;
}
var text = $("<img class='overlay' src='" + imgname + "'></img>");
text.addClass("overlay-" + overlayName);
object.append(text);
}
var imgExists = {};
/**
* checks if images exists on the webserver(chaches it also)
* @param image_url Path to the image
*/
function imageExists(image_url) {
if (!imgExists.hasOwnProperty(image_url)) {
var http = new XMLHttpRequest();
http.open('HEAD', image_url, false);
http.send();
imgExists[image_url] = http.status != 404;
}
return imgExists[image_url];
}
/**
* Querys Pc states
* @param ids Room ID's which should be queried. Format for e.g.: "20,5,6"
*/
function queryRooms(ids) {
$.ajax({
url: "../../../api.php?do=locationinfo&action=locationinfo&id=" + ids + "&coords=0",
dataType: 'json',
cache: false,
timeout: 30000,
success: function (result) {
for (var i = 0; i < result.length; i++) {
UpdatePc(result[i].computer, rooms[result[i].id]);
}
}
})
}
/**
* Adjust pc coordinate depending on room rotation
* @param r Rotation, from 0 - 3 (int)
* @param layout Layout json
*/
function rotateRoom(r, layout) {
for (var z = 0; z < r; z++) {
for (var i = 0; i < layout.length; i++) {
var x = parseInt(layout[i].x);
var y = parseInt(layout[i].y);
layout[i].x = y;
layout[i].y = -x;
}
}
}
/**
* Positions the computer images in the roomLayout div accoring to ther potion and div size
* @param room Room object
*/
function scaleRoom(room) {
if (room.layout == null) {
return;
}
for (var i = 0; i < room.layout.length; i++) {
if (room.layout[i].y != null && room.layout[i].x != null && !isNaN(room.layout[i].y) && !isNaN(room.layout[i].x)) {
var tmp = document.getElementById("layout_PC_div_" + room.id + "_" + room.layout[i].id);
var img = document.getElementById("layout_PC_" + room.id + "_" + room.layout[i].id);
if (tmp != null) {
tmp.style.width = (picSizeX * room.scale);
tmp.setAttribute("style", "width:" + (picSizeX * room.scale) + "px");
tmp.style.height = (picSizeY * room.scale) + "px";
tmp.style.left = ((parseInt(room.layout[i].x) + room.xOffset) * room.scale) + "px";
tmp.style.top = ((parseInt(room.layout[i].y) + room.yOffset) * room.scale ) + "px";
}
}
}
}
/**
* Updates the PC's (images) in the room layout. Also Updates how many pc's are free.
* @param update Update Json from query for one(!) room
* @param room Room object
*/
function UpdatePc(update, room) {
if (update === undefined || update == null) {
return;
}
var freePcs = 0;
for (var i = 0; i < update.length; i++) {
var imgobj = document.getElementById("layout_PC_" + room.id + "_" + update[i].id);
var img;
// Pc free
if (update[i].pcState == "IDLE") {
if (supportSvg) {
img = "img/pc_free";
} else {
imgobj.style.backgroundColor = "green";
}
freePcs++;
// Pc in use
} else if (update[i].pcState == "OCCUPIED") {
if (supportSvg) {
img = "img/pc_used";
} else {
imgobj.style.backgroundColor = "red";
}
// PC off
} else if (update[i].pcState == "OFF") {
if (supportSvg) {
img = "img/pc_off";
} else {
imgobj.style.backgroundColor = "black";
}
freePcs++;
} else {
if (supportSvg) {
img = "img/pc_defect";
} else {
imgobj.style.backgroundColor = "black";
}
}
if (imgobj != null && supportSvg) {
if (room.config.einkmode) {
img = img + "_eink";
}
imgobj.src = img + ".svg";
}
}
room.freePcs = freePcs;
}
/*
/========================================== Misc =============================================
*/
var resizeTimeout;
// called when browser window changes size
// scales calendar and room layout acordingly
$(window).resize(function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function () {
for (var property in rooms) {
rooms[property].resized = true;
if (rooms[property].config.mode != null) {
if (rooms[property].config.mode != 3) {
scaleCalendar(rooms[property]);
}
if (rooms[property].config.mode != 2) {
generateOffsetAndScale(rooms[property]);
scaleRoom(rooms[property]);
}
}
}
}, 50);
});
/**
* returns parameter value from the url
* @param sParam
* @returns value for given parameter
*/
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('=', 2);
if (sParameterName[0] === sParam) {
if (sParameterName.length === 1) return true;
return sParameterName[1];
}
}
return false;
};
/**
* Function for translation
* @param toTranslate key which we wan't to translate
* @param lang languages in which should be translated
* @returns r translated string
*/
function t(toTranslate, lang) {
var r;
if (lang === undefined) {
r = translation['en'][toTranslate];
} else {
r = translation[lang][toTranslate];
}
return r;
}
/**
* Used in Mode 4, switches given room from Timetable to Roomlayout and vice versa
* @param room
*/
function switchLayout(room) {
var car = document.getElementById("calendar_" + room.id);
var roomLayout = document.getElementById("roomLayout_" + room.id);
if (car.style.display == "none") {
roomLayout.style.display = "none";
car.style.display = "block";
if (room.resized) {
scaleCalendar(room);
room.resized = false;
}
} else {
car.style.display = "none";
roomLayout.style.display = "block";
if (room.resized) {
generateOffsetAndScale(room);
scaleRoom(room);
room.resized = false;
}
}
}
/**
* adds a progressbar to a given room (id) used in mode 4
* @param id room id
*/
function generateProgressBar(id) {
var div = document.createElement("div");
div.id = "progressBar_" + id;
div.classList.add("progressbar");
//document.body.appendChild(div);
$("#room_" + id).append(div);
}
/**
* Animates the progressbar used in mode 4
* @param roomId
* @param time
* @constructor
*/
function MoveProgressBar(roomId, time) {
var elem = document.getElementById("progressBar_" + roomId);
var width = 1;
var id = setInterval(frame, time / 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
</head>
<body>
</body>
</html>
