diff options
| author | Michael Scherle | 2017-02-22 06:29:22 +0100 |
|---|---|---|
| committer | Michael Scherle | 2017-02-22 06:29:22 +0100 |
| commit | 1762e53b2bcd2d2b8dceadc9076b3588d3567e7f (patch) | |
| tree | b2a0f75673445fc0500da88949a7068f8107dc28 /modules-available/locationinfo/frontend | |
| parent | API: Fixed a bug where parent locations werent added if the location didn't h... (diff) | |
| download | slx-admin-1762e53b2bcd2d2b8dceadc9076b3588d3567e7f.tar.gz slx-admin-1762e53b2bcd2d2b8dceadc9076b3588d3567e7f.tar.xz slx-admin-1762e53b2bcd2d2b8dceadc9076b3588d3567e7f.zip | |
frontend: added multidoorsing to not orverwrite doorsing.html since it's not fully function for now. Usage: just add id's seperated with a clloum Known issuses: - calendar date not working, waiting for backend. -scaling not working. -mode 4 statusbar on top. - 4 ids not scling correctly
Diffstat (limited to 'modules-available/locationinfo/frontend')
| -rwxr-xr-x | modules-available/locationinfo/frontend/multidoorsign.html | 1497 |
1 files changed, 1497 insertions, 0 deletions
diff --git a/modules-available/locationinfo/frontend/multidoorsign.html b/modules-available/locationinfo/frontend/multidoorsign.html new file mode 100755 index 00000000..1e315f21 --- /dev/null +++ b/modules-available/locationinfo/frontend/multidoorsign.html @@ -0,0 +1,1497 @@ +<!--
+
+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;
+ display:flex;
+
+ }
+
+ .row {
+ background-color: #404040;
+ box-shadow: 0 2px 4px 0 black;
+ margin-bottom: 4px;
+
+ width: 100%;
+
+ }
+
+ .header {
+ display: table;
+ color: white;
+ padding: 0;
+ height: 80px;
+
+ }
+ .progressbar{
+ width: 0px;
+ height: 2px;
+ position: relative;
+ background-color: red;
+ bottom: 0px;
+ z-index: 1;
+ }
+ .font {
+ display: table-cell;
+ vertical-align: middle;
+ font-size: 40px;
+ 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;
+ background: linear-gradient(#cccccc, white);
+ float: left;
+ boxSizing: border-box;
+ }
+ .room{
+
+ }
+
+ .calendar {
+ float: left;
+ padding: 0;
+ dboxSizing: 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: 80px;
+ height: 80px;
+ }
+
+ .FreeSeatsFont {
+ display: table-cell;
+ vertical-align: middle;
+ font-size: 65px;
+ color: white;
+ top: 0;
+ margin: 0 auto;
+ position: relative;
+ text-align: center;
+ font-weight: bold;
+ overflow: visible;
+ }
+
+ .pcImg {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ }
+
+ .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;
+ }
+
+ @media (max-width: 1200px) {
+ .square {
+ height: 60px;
+ width: 60px;
+ }
+
+ .FreeSeatsFont {
+ font-size: 45px;
+ }
+
+ .font {
+ font-size: 26px;
+ }
+
+ .header {
+ height: 60px;
+
+ }
+ }
+
+ @media (max-width: 800px) {
+ .square {
+ height: 50px;
+ width: 50px;
+ }
+
+ .FreeSeatsFont {
+ font-size: 35px;
+ }
+
+ .font {
+ font-size: 20px;
+ }
+
+ .header {
+ height: 50px;
+
+ }
+ }
+
+ @media (max-width: 600px) {
+ .square {
+ height: 40px;
+ width: 40px;
+ }
+
+ .FreeSeatsFont {
+ font-size: 30px;
+ }
+
+ .font {
+ font-size: 18px;
+ }
+
+ .header {
+ height: 40px;
+
+ }
+ }
+
+ </style>
+ <script type='text/javascript'>
+
+ // new
+ var rooms = {};
+ var lastSwitchTime;
+ var roomsToshow = 0;
+ var lastRoomUpdateTime;
+ var lastCalendarUpdateTime;
+ var roomIds;
+ //Todo change these
+ var CalendarUpdateTime = 60*1000;
+ var RoomUpdateTime = 60*1000;
+
+ var date;
+ var openingTimes;
+ //var state;
+ var openTimes;
+ var openingTimesCalendar = [];
+
+
+ var verticalmode = false;
+ var scaleLayout;
+ var switchTime;
+ var rotation;
+ var daysToShow;
+ var configJson;
+ var configupdate;
+ var scaleDaysAuto = false;
+ var eInkMode = false;
+ 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", "Freitrag", "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()) {
+
+ return;
+ }
+
+
+ });
+ // Downloads the config of a room
+ function getConfig(id) {
+ $.ajax({
+ url: "../../../api.php?do=locationinfo&action=config&id=" + id,
+ dataType: 'json',
+ cache: false,
+ timeout: 30000,
+ success: function (result) {
+ if (configJson == null) {
+ if (result.room == null) {
+ var heading = $("#courseHeading");
+ heading.text("Error: wrong id");
+ heading.css({'font-size': "30px"});
+ return;
+ }
+ var time = new Date(result.time);
+ if (isNaN(time.getTime())) {
+ time = new Date();
+ }
+ SetUpDate(time);
+ delete result.time;
+
+ addRoom(id,result.room,result);
+
+
+
+ } else {
+ // Todo resync time?
+ delete result.time;
+ if (JSON.stringify(rooms[id].config) != JSON.stringify(result)) {
+ location.reload(true);
+ }
+ }
+ roomsToshow++;
+ if(roomsToshow == getUrlParameter("id").split(',').length){
+
+ initRooms();
+
+ }
+
+
+
+ }, error: function () {
+ var heading = $("#courseHeading");
+ heading.text("Error: couldn't get the config");
+ heading.css({'font-size': "30px"});
+ }
+ })
+ }
+
+
+ // gets the Parameter IDs from the Urls
+ function getId() {
+ roomIds = getUrlParameter("id");
+ if (roomIds == null) {
+ $("#courseHeading").text("Error: id required");
+ return false;
+ }
+
+ roomIds = roomIds.split(',');
+ for (var i = 0; i < roomIds.length; i++){
+ getConfig(roomIds[i],i==0?true:false);
+ }
+
+ }
+
+
+ // gets Additional Parameters from the URL, and from the
+ // downloaded json.
+ // also makes sure parameters are in a given range
+ function getParamerter(room) {
+ var lang;
+
+ lang = room.config.lang;
+ /*
+ room.config.daysToShow = parseInt(json.daystoshow);
+ scaleLayout = parseInt(json.scale);
+ switchTime = parseInt(json.switchtime) * 1000;
+ queryTimeCalendar = parseInt(json.calupdate) * 60 * 1000;
+ queryTimeRoom = parseInt(json.roomupdate) * 1000;
+ rotation = parseInt(json.rotation);
+ calendarQueryUrl = json.calendarqueryurl;
+ if (json.scaledaysauto != null) {
+ scaleDaysAuto = JSON.parse(json.scaledaysauto)
+ }
+
+ if (json.vertical != null) {
+ verticalmode = JSON.parse(json.vertical);
+ }
+ if (json.einkmode != null) {
+ eInkMode = JSON.parse(json.einkmode);
+ }
+ configupdate = parseInt(json.configupdate) * 60 * 1000;
+ */
+
+
+ if(room.config != null) {
+ 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;
+ }
+
+ if (getUrlParameter("mode") != null) {
+ room.config.mode = parseInt(getUrlParameter("mode"));
+ }
+ if (getUrlParameter("calupdate") != null) {
+ room.config.calupdate = (parseInt(getUrlParameter("calupdate")) * 60 * 1000);
+ }
+ if (getUrlParameter("roomupdate") != null) {
+ room.config.roomupdate = (parseInt(getUrlParameter("roomupdate")) * 1000);
+ }
+ if (getUrlParameter("daystoshow") != null) {
+ room.config.daystoshow = parseInt(getUrlParameter("daystoshow"));
+ }
+ if (getUrlParameter("scaledaysauto") == "true") {
+ room.config.scaledaysauto = true;
+ }
+ if (getUrlParameter("vertical") == "true") {
+ room.config.vertical = true;
+ }
+ if (getUrlParameter("einkmode") == "true") {
+ room.config.einkmode = true;
+ }
+
+ if (getUrlParameter("scale") != null) {
+ room.config.scale = parseInt(getUrlParameter("scale"));
+ }
+ if (getUrlParameter("rotation") != null) {
+ room.config.rotation = parseInt(getUrlParameter("rotation"));
+ }
+ if (getUrlParameter("switchtime") != null) {
+ room.config.switchtime = (parseInt(getUrlParameter("switchtime")) * 1000);
+ }
+ if (getUrlParameter("configupdate") != null) {
+ room.config.configupdate = (parseInt(getUrlParameter("configupdate")) * 60 * 1000);
+ }
+
+ // parameter validation
+ if (room.config.switchtime == null || isNaN(room.config.switchtime) || room.config.switchtime > 120 || room.config.switchtime < 1) {
+ room.config.switchtime = 5;
+ }
+ if (room.config.scale == null || isNaN(room.config.scale) || room.config.scale > 90 || room.config.scale < 10) {
+ room.config.scale = 50;
+ }
+ if (room.config.vertical == null) {
+ room.config.vertical = false;
+ }
+ if (room.config.daystoshow == null || isNaN(room.config.daystoshow) || room.config.daystoshow > 7 || room.config.daystoshow < 1) {
+ room.config.daystoshow = 7;
+ }
+
+ if (room.config.roomupdate == null || isNaN(room.config.roomupdate) || room.config.roomupdate < 1000) {
+ room.config.roomupdate = 20 * 1000;
+ }
+ if (room.config.configupdate == null || isNaN(room.config.configupdate) || (room.config.configupdate < 1)) {
+ room.config.configupdate = 30 * 60 * 1000;
+ }
+
+ if (room.config.calupdate == null || isNaN(room.config.calupdate ) || room.config.calupdate < 60 * 1000) {
+ room.config.calupdate = 30 * 60 * 1000;
+ }
+ if (room.config.mode == null || isNaN(room.config.mode) || room.config.mode > 4 || room.config.mode < 1) {
+ room.config.mode = 1;
+ }
+ if (room.config.rotation == null || isNaN(room.config.rotation) || room.config.rotation < 0 || room.config.rotation > 4) {
+ room.config.rotation = 0;
+ }
+
+ if (getUrlParameter("lang") != null && getUrlParameter("lang") in translation) {
+ room.config.lang = getUrlParameter("lang");
+ }
+ $('html').attr('lang', lang);
+ }
+
+ // generates the Room divs
+ function initRooms() {
+
+ var width = "100%";
+ var height = "100%";
+ if(roomsToshow == 2 || roomsToshow == 2){
+ width = "50%";
+ }
+ if(roomsToshow == 3){
+ width = "33%";
+ }
+ if(roomsToshow == 4){
+ height = "50%";
+ }
+
+ for (var property in rooms) {
+
+ var text = "<div class='room' id ='room_" + rooms[property].id +"'></div>";
+
+ $("body").append(text);
+ var obj = document.getElementById("room_" + rooms[property].id);
+
+ obj.style.width = width;
+ obj.style.height = height;
+ 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 (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]);
+ }else if (rooms[property].config.mode == 4) {
+
+ setUpCalendar("100%", rooms[property].config.daystoshow,rooms[property]);
+ preInitRoom(rooms[property]);
+ generateProgressBar(rooms[property].id);
+ }
+ setInterval(mainUpdateLoop,1000);
+
+ }
+
+ }
+
+
+
+
+
+ function getUpdateIdsforMode(modearray) {
+ var roomIdsToUpdate = "";
+ for (var property in rooms) {
+ if (rooms[property].config.mode in modearray) {
+ if(roomIdsToUpdate ==""){
+ roomIdsToUpdate = rooms[property].id;
+ } else {
+ roomIdsToUpdate = roomIdsToUpdate + "," + rooms[property].id;
+ }
+ }
+ }
+ return roomIdsToUpdate;
+ }
+
+
+ function mainUpdateLoop(){
+
+ //todo add config reload
+
+
+ //updates calendar
+ if (lastCalendarUpdateTime == null || lastCalendarUpdateTime + CalendarUpdateTime < MyDate().getTime()) {
+
+ //Todo
+ var roomIdsToUpdate = getUpdateIdsforMode([1,2,4]);
+
+ if(roomIdsToUpdate != ""){
+ // Todo update calendars
+ queryCalendars(roomIdsToUpdate);
+ }
+
+ lastCalendarUpdateTime = MyDate().getTime();
+ }
+
+
+ // updates Pcs
+ if(lastRoomUpdateTime == null|| lastRoomUpdateTime + RoomUpdateTime < MyDate().getTime()) {
+
+ var roomIdsToUpdate = getUpdateIdsforMode([1,3,4]);
+
+ if(roomIdsToUpdate != ""){
+ //Todo queryRooms
+ queryRooms(roomIdsToUpdate);
+ }
+
+ lastRoomUpdateTime = MyDate().getTime();
+ }
+
+
+ // 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*1000 < MyDate().getTime()) {
+
+
+ switchLayout(rooms[property]);
+ MoveProgressBar(rooms[property].id,rooms[property].config.switchtime);
+
+
+ rooms[property].lastSwitchTime = MyDate().getTime();
+ }
+
+ //
+ }
+ // Updateing All room Headers
+
+ ComputeCurrentState(rooms[property]);
+
+
+ UpdateRoomHeader( rooms[property]);
+ }
+
+
+
+
+ // reload site at midnight
+ var now = new MyDate();
+ if (date != null) {
+ if (date.getDate() != now.getDate()) {
+ location.reload(true);
+ }
+ }
+ date = now;
+
+ }
+
+ 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,
+ 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;
+
+
+ }
+
+ function setUpCalendar(percent, daysToShow,room) {
+ generateCalendarDiv(percent,room);
+ var $calendar = $("#calendar_"+room.id).weekCalendar({
+ timeslotsPerHour: 1,
+ timeslotHeight: 20,
+ daysToShow: daysToShow,
+ height: function ($calendar) {
+ var height = $(window).height() - document.getElementById('header_'+room.id).clientHeight - 5;
+ if (room.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",
+ use24Hour: true,
+ readonly: true,
+ showHeader: false,
+ hourLine: true,
+ shortDays: t("shortDays"),
+ longDays: t("longDays"),
+ buttons: false,
+ timeSeparator: " " + t("to") + " ",
+ startOnFirstDayOfWeek: false,
+ displayFreeBusys: true,
+ defaultFreeBusy: {free: false}
+ });
+ $.getJSON("../../../api.php?do=locationinfo&action=openingtime&id=" + room.id, function (result) {
+ SetOpeningTimes(result[0].openingtime,room);
+ scaleCalendar(room);
+
+ })
+ .error(function () {
+ scaleCalendar(room);
+
+ })
+ }
+
+ 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.float = "Top";
+ }
+ div.style.width = width;
+ //document.body.appendChild(div);
+ $("#room_"+room.id).append(div);
+
+ }
+
+ function SetOpeningTimes(parsedOpenings,room) {
+ var opening = 24;
+ var close = 0;
+ openingTimesCalendar = [];
+ room.openingTimes = [parsedOpenings['Sunday'], parsedOpenings['Monday'], parsedOpenings['Tuesday'],
+ parsedOpenings['Wednesday'], parsedOpenings['Thursday'],
+ parsedOpenings['Friday'], parsedOpenings['Saturday']];
+ console.log(room.openingTimes);
+ 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);
+ 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;
+ }
+ openTimes = close - opening;
+ $('#calendar_'+room.id).weekCalendar("option", "businessHours", {
+ start: parseInt(opening),
+ end: parseInt(close),
+ limitDisplay: true
+ });
+ }
+ 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) {
+ console.log(result);
+ //todo Update every calendar
+ var l = result.length;
+ // Todo reimplement when backend working
+ /*
+ for (var i = 0; i < l;i++){
+
+ //todo test this
+ console.log(rooms[result[i].id]);
+ rooms[result[i]].timetable = result[i];
+ updateCalendar(result[i],rooms[result[i].id]);
+ }
+ */
+
+ }, error: function () {
+
+ }
+ });
+ }
+
+
+ function updateCalendar(json,room) {
+ 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", openingTimesCalendar);
+ }
+ ComputeCurrentState(room);
+ }
+
+ function scaleCalendar(room) {
+
+ if (openTimes == null) {
+ openTimes = 24;
+ }
+ var cal = $('#calendar_'+room.id);
+ var columnWidth = document.getElementsByClassName("wc-day-1")[0].clientWidth;
+
+ if (room.config.scaledaysauto) {
+ var result = (44 + 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() - document.getElementById('header_'+room.id).clientHeight - document.getElementsByClassName("wc-time-column-header")[0].clientHeight - 10;
+ if (room.config.mode == 1 && room.config.vertical) {
+
+ clientHeight = clientHeight * (room.config.scale / 100);
+ clientHeight -= 22;
+
+ }
+
+
+ var height = clientHeight / (openTimes * cal.weekCalendar("option", "timeslotsPerHour"));
+ cal.weekCalendar("option", "timeslotHeight", height);
+ cal.weekCalendar("updateFreeBusy", openingTimesCalendar);
+ }
+ /**
+ * @return {string}
+ * @return {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;
+ }
+ 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))) {
+ if (bestdate == null || bestdate > closeDate) {
+ bestdate = closeDate;
+ }
+ }
+ }
+ }
+ }
+ offset++;
+ day++;
+ if (day > 6) {
+ day = 0;
+ }
+ }
+ return bestdate;
+ }
+ /**
+ * @return {boolean}
+ */
+ function IsOpenNow(room) {
+ var now = new MyDate();
+ if (room.openingTimes == null) {
+
+ return false;
+ }
+ 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;
+ }
+ /**
+ * @return {boolean}
+ */
+ function IsOpen(date) {
+ if (openingTimes == null) {
+ return false;
+ }
+ var tmp = 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;
+ }
+
+
+ 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 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');
+ }
+ }
+
+ function UpdateRoomHeader(room) {
+ var tmp = room.getState();
+ if (tmp.state == "closed") {
+ $("#courseHeading_"+room.id).text(t("closed") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(),room));
+ SetFreeSeats(room.id,-1);
+ } else if (tmp.state == "ClaendarEvent") {
+ $("#courseHeading_"+room.id).text(state.titel);
+ SetFreeSeats(room.id,-1);
+ } else if (tmp.state == "Free") {
+ $("#courseHeading_"+room.id).text(t("free") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(),room));
+ SetFreeSeats(room.id,room.freePcs);
+ } else if (tmp.state == "FreeNoEnd") {
+ $("#courseHeading_"+room.id).text(t("free"));
+ SetFreeSeats(room.id,room.freePcs);
+ }
+ }
+
+
+
+ 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 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;
+
+
+ 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.float = "Top";
+ }
+
+ div.style.width = width;
+ //document.body.appendChild(div);
+ $("#room_"+room.id).append(div);
+
+ }
+ function preInitRoom(room) {
+ //todo use multi room
+ $.getJSON("../../../api.php?do=locationinfo&action=roominfo&id=" + room.id + "&coords=1", function (result) {
+ initRoom(result[0].computer, (100 - room.config.scale) + "%",room);
+
+ }).error(function () {
+
+ generateRoomLayoutDiv((100 - room.config.scale) + "%",room);
+ })
+ }
+
+
+ function initRoom(layout, scale,room) {
+ var maxX;
+ var maxY;
+ var minY;
+ var minX;
+ var xDifference;
+ var yDifference;
+
+
+ if (layout == null || layout.length == 0) {
+ return;
+ }
+ generateRoomLayoutDiv(scale,room);
+ 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;
+ generateOffsetAndScale(room,xDifference,yDifference,minX,minY,maxX,maxY);
+ setUpRoom(room,layout);
+ }
+
+ function generateOffsetAndScale(room,xDifference,yDifference,minX,minY,maxX,maxY) {
+ var clientHeight = ($(window).height() - document.getElementById('header_'+room.id).clientHeight - 5);
+ if (room.config.vertical && room.config.mode == 1) {
+ clientHeight = clientHeight * (1 - (room.config.scale / 100));
+ }
+ ($("#roomLayout")).height(clientHeight);
+ var clientWidth = document.getElementById('roomLayout_'+room.id).clientWidth;
+ var scaleX;
+ if (xDifference != 0) {
+ scaleX = clientWidth / xDifference;
+ } else {
+ scaleX = clientWidth;
+ }
+ var scaleY;
+ if (yDifference != 0) {
+ scaleY = clientHeight / yDifference;
+ } else {
+ scaleY = clientHeight;
+ }
+ var scaleYs = (clientHeight - (picSizeY * scaleY)) / yDifference;
+ var scaleXs = (clientWidth - (picSizeX * scaleX)) / xDifference;
+ if (scaleYs <= 0) {
+ scaleYs = 9999;
+ }
+ if (scaleXs <= 0) {
+ scaleXs = 9999;
+ }
+ var tmp = [scaleYs, scaleY, scaleXs, scaleX];
+ room.scale = Math.min.apply(Math, tmp);
+ room.xOffset = 0 - minX;
+ room.yOffset = 0 - minY;
+ room.xOffset += ((1 / 2 * (clientWidth - (((maxX + room.xOffset) * room.scale) + picSizeX * room.scale))) / room.scale);
+ room.yOffset += ((1 / 2 * (clientHeight - (((maxY + room.yOffset) * room.scale) + picSizeY * room.scale))) / room.scale);
+ }
+
+ 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 img = $('<img />',
+ {
+ id: "layout_PC_"+room.id+"_"+ layout[i].id,
+ class: "pcImg"
+ })
+ .appendTo($('#roomLayout_'+room.id));
+ }
+ }
+ scaleRoom(layout,room);
+ UpdatePc(layout,room);
+
+ }
+
+
+ function queryRooms(ids) {
+ $.ajax({
+ url: "../../../api.php?do=locationinfo&action=roominfo&id=" +ids +"&coords=0",
+ dataType: 'json',
+ cache: false,
+ timeout: 30000,
+ success: function (result) {
+ var l = result.length;
+ for (var i = 0; i < l;i++){
+
+ //todo test this
+ UpdatePc(result[i].computer,rooms[result[i].id]);
+ }
+ //Todo Update every room
+ /*
+ if (room.LayoutJson != JSON.stringify(result)) {
+ room.LayoutJson = JSON.stringify(result);
+ UpdatePc(result,room);
+
+ }*/
+
+ }, error: function () {
+
+ }
+ })
+ }
+
+ 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;
+ }
+ }
+ }
+
+ function scaleRoom(layout,room) {
+ if (layout == null) {
+ return;
+ }
+ 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 tmp = document.getElementById("layout_PC_"+room.id +"_"+ layout[i].id);
+ if(tmp != null) {
+ tmp.width = (picSizeX * room.scale);
+ tmp.height = (picSizeY * room.scale);
+ tmp.style.left = ((parseInt(layout[i].x) + room.xOffset) * room.scale) + "px";
+ tmp.style.top = ((parseInt(layout[i].y) + room.yOffset) * room.scale ) + "px";
+ }
+ }
+ }
+ }
+
+
+ function UpdatePc(update,room) {
+ var freePcs = 0;
+ for (var i = 0; i < update.length; i++) {
+ var imgobj = document.getElementById("layout_PC_" +room.id +"_"+update[i].id);
+ if (imgobj != null) {
+
+ var img;
+ // Pc free
+ if (update[i].pcState == "0") {
+ if (supportSvg) {
+ img = "img/pc_free";
+ } else {
+ imgobj.style.backgroundColor = "green";
+ }
+ freePcs++;
+ // Pc in use
+ } else if (update[i].pcState == "1") {
+ if (supportSvg) {
+ img = "img/pc_used";
+ } else {
+ imgobj.style.backgroundColor = "red";
+ }
+ // PC off
+ } else if(update[i].pcState == "2"){
+ 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";
+ }
+ }
+ }
+ if (room.getState() == null || room.getState() .state == "FreeNoEnd" || room.getState() .state == "Free") {
+ room.freePcs = freePcs;
+ }
+
+ }
+
+ /*
+ /========================================== Misc =============================================
+ */
+ var resized = false;
+ $(window).resize(function () {
+ resized = true;
+ setTimeout(function () {
+ if (mode != null) {
+ if (mode != 3) {
+ scaleCalendar();
+
+ }
+ if (mode != 2) {
+ generateOffsetAndScale();
+ scaleRoom();
+ }
+ }
+ }, 50);
+ });
+
+ 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 t(toTranslate) {
+ var r = translation[$('html')[0].lang][toTranslate];
+ if (r === undefined) {
+ r = translation['en'][toTranslate]
+ }
+ return r;
+ }
+
+ function switchLayout(room) {
+ var car = document.getElementById("calendar_"+room.id);
+ var room = document.getElementById("roomLayout_"+room.id);
+
+ if (car.style.display == "none") {
+ room.style.display = "none";
+ car.style.display = "block";
+ if (resized) {
+ scaleCalendar();
+ resized = false;
+ }
+ } else {
+ car.style.display = "none";
+ room.style.display = "block";
+ if (resized) {
+ generateOffsetAndScale();
+ scaleRoom();
+ resized = false;
+ }
+ }
+ }
+ function generateProgressBar(id) {
+
+ var div = document.createElement("div");
+ div.id = "progressBar_"+id;
+ div.classList.add("progressbar");
+ //document.body.appendChild(div);
+ $("#room_"+id).append(div);
+
+ }
+ function MoveProgressBar(id,time) {
+ var elem = document.getElementById("progressBar_"+id);
+ var width = 1;
+ var id = setInterval(frame, time * 10);
+
+ function frame() {
+ if (width >= 100) {
+ clearInterval(id);
+ } else {
+ width++;
+ elem.style.width = width + '%';
+ }
+ }
+ }
+
+
+ </script>
+</head>
+<body>
+
+
+</body>
+</html>
|