summaryrefslogtreecommitdiffstats
path: root/modules-available/locationinfo/templates/frontend-default.html
diff options
context:
space:
mode:
Diffstat (limited to 'modules-available/locationinfo/templates/frontend-default.html')
-rwxr-xr-xmodules-available/locationinfo/templates/frontend-default.html316
1 files changed, 178 insertions, 138 deletions
diff --git a/modules-available/locationinfo/templates/frontend-default.html b/modules-available/locationinfo/templates/frontend-default.html
index c59679ee..cc62075e 100755
--- a/modules-available/locationinfo/templates/frontend-default.html
+++ b/modules-available/locationinfo/templates/frontend-default.html
@@ -15,7 +15,7 @@ optional:
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.
+ calupdate: Time the calendar queries 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
@@ -26,8 +26,8 @@ optional:
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<head>
<title>DoorSign</title>
- <link rel='stylesheet' type='text/css' href='{{dirprefix}}modules/js_jqueryui/style.css'/>
- <link rel='stylesheet' type='text/css' href='{{dirprefix}}modules/js_weekcalendar/style.css'/>
+ <link rel='stylesheet' type='text/css' href='modules/js_jqueryui/style.css'/>
+ <link rel='stylesheet' type='text/css' href='modules/js_weekcalendar/style.css'/>
<style type="text/css">
@@ -51,12 +51,21 @@ optional:
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
margin-bottom: 4px;
width: 100%;
- display: flex;
- flex-wrap: nowrap;
- align-items: center;
- justify-content: space-between;
+ font-size: 25pt;
+ font-size: 1.8vw;
+ font-weight: bold;
}
+ .count-3 {
+ font-size: 16pt;
+ font-size: 1.2vw;
+ }
+
+ .count-1 {
+ font-size: 30pt;
+ font-size: 2.25vw;
+ }
+
.pull-left {
float: left;
}
@@ -66,15 +75,11 @@ optional:
}
.col {
- padding: 0 4px;
+ padding: 3px 5px 0;
color: white;
overflow: hidden;
- flex: 1 1 auto;
text-overflow: ellipsis;
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: center;
+ line-height: 106%;
}
.col-square {
@@ -90,6 +95,9 @@ optional:
text-align: center;
padding: 0;
overflow: visible;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.count-1 .col-square {
@@ -119,30 +127,19 @@ optional:
z-index: 100;
}
- .header-font {
- font-size: 25pt;
- font-size: 1.8vw;
- font-weight: bold;
- padding: 10px;
- }
-
.nowrap {
white-space: nowrap;
overflow: hidden;
}
- .timer {
- color: #ddd;
+ .location-name {
+ font-size: 80%;
+ font-weight: normal;
}
- .count-3 .header-font {
- font-size: 16pt;
- font-size: 1.2vw;
- }
-
- .count-1 .header-font {
- font-size: 30pt;
- font-size: 2.25vw;
+ .timer {
+ color: #ddd;
+ font-size: 80%;
}
.seats-counter {
@@ -215,13 +212,28 @@ optional:
.screen-frame {
position: relative;
- background: black;
+ background: #000;
border-radius: 11%;
width: 100%;
height: 83%;
padding: 6%;
}
+ .screen-foot1 {
+ margin: 0 auto;
+ width: 10%;
+ height: 7%;
+ background: #000;
+ }
+
+ .screen-foot2 {
+ margin: 0 auto;
+ width: 80%;
+ height: 7%;
+ background: #000;
+ border-radius: 30% 30% 0 0;
+ }
+
.screen-inner {
width: 100%;
height: 100%;
@@ -233,6 +245,17 @@ optional:
color: #fff;
}
+ .pcname {
+ display: block;
+ text-wrap: avoid;
+ white-space: nowrap;
+ position: relative;
+ overflow: visible;
+ height: 0;
+ font-size: 10pt;
+ text-shadow: #000 1px 1px;
+ }
+
.BROKEN .screen-inner {
background: #000;
}
@@ -243,31 +266,25 @@ optional:
.IDLE .screen-inner,
.STANDBY .screen-inner {
- background: #250;
+ background: linear-gradient(to bottom, #0d0, #0c0 10%, #250 13%, #050 100%);
}
.OCCUPIED .screen-inner {
background: #d23;
}
+ .OCCUPIED.rm-remoteaccess .screen-inner {
+ background: linear-gradient(to bottom, #d23, #f90 80%);
+ }
+
.OCCUPIED .screen-inner:after {
content: '\01F464';
font-weight: bold;
}
- .screen-foot1 {
- margin: 0 auto;
- width: 10%;
- height: 7%;
- background: black;
- }
-
- .screen-foot2 {
- margin: 0 auto;
- width: 80%;
- height: 7%;
- background: black;
- border-radius: 30% 30% 0 0;
+ .STANDBY .screen-inner:after {
+ content: '\01F319';
+ font-weight: bold;
}
.pc-overlay-container {
@@ -279,15 +296,6 @@ optional:
display: table;
}
- .pc-img {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
-
- }
-
.overlay {
display: inline-block;
position: relative;
@@ -330,21 +338,33 @@ optional:
overflow-y: hidden !important;
}
- .wc-grid-timeslot-header,
.wc-header .wc-time-column-header {
+ width: 49px;
+ }
+
+ .wc-grid-timeslot-header {
width: 50px;
}
+ .wc-scrollbar-shim {
+ width: 0 !important;
+ }
+
+ .ui-state-active {
+ border-left-width: 3px !important;
+ border-right-width: 3px !important;
+ }
+
#i18n {
display: none;
}
</style>
- <script type='text/javascript' src='{{dirprefix}}script/jquery.js'></script>
- <script type='text/javascript' src='{{dirprefix}}modules/js_jqueryui/clientscript.js'></script>
- <script type='text/javascript' src="{{dirprefix}}modules/js_weekcalendar/clientscript.js"></script>
- <script type='text/javascript' src='{{dirprefix}}modules/locationinfo/frontend/frontendscript.js'></script>
+ <script type='text/javascript' src='script/jquery.js'></script>
+ <script type='text/javascript' src='modules/js_jqueryui/clientscript.js'></script>
+ <script type='text/javascript' src="modules/js_weekcalendar/clientscript.js"></script>
+ <script type='text/javascript' src='modules/locationinfo/frontend/frontendscript.js'></script>
</head>
<body>
@@ -500,7 +520,6 @@ optional:
scaleFactor = 1;
}
if (v === null || !isFinite(v) || isNaN(v) || v < min * scaleFactor || v > max * scaleFactor) {
- console.log(property)
config[property] = defaultval * scaleFactor;
}
}
@@ -545,6 +564,8 @@ optional:
putInRange(config, 'rotation', 0, 3, 0);
}
+ var updateTimer = null;
+
/**
* generates the Room divs and calls the needed functions depending on the rooms mode
*/
@@ -577,21 +598,21 @@ optional:
left = ((t % 2) * 50) + '%';
}
- var $loc = $("<div>").addClass('location-container');
+ var $loc = $("<div>").addClass('location-container').attr('id', rid);
$loc.css({top: top, left: left, width: width, height: height});
$("body").append($loc);
room.$.container = $loc;
- room.$.locationName = $('<div>').addClass('col').addClass('header-font').addClass('pull-left');
+ room.$.locationName = $('<div>').addClass('col location-name nowrap');
room.$.currentEvent = $("<span>").addClass('nowrap');
- room.$.currentRemain = $("<span>").addClass('nowrap').addClass('timer');
+ room.$.currentRemain = $("<span>").addClass('nowrap timer');
room.$.seatsCounter = $('<span>').addClass('seats-counter');
room.$.seatsBackground = $('<div>').addClass('col col-square').append(room.$.seatsCounter);
- var $header = $('<div>').addClass('row').addClass('count-' + columns);
- $header.append(room.$.locationName);
+ var $header = $('<div>').addClass('row count-' + columns);
$header.append(room.$.seatsBackground);
- $header.append($('<div>').addClass('col header-font center').append(room.$.currentEvent).append(' ').append(room.$.currentRemain));
+ $header.append(room.$.locationName);
+ $header.append($('<div>').addClass('col center').append(room.$.currentEvent).append(' ').append(room.$.currentRemain));
room.$.header = $header;
$loc.append($header);
$header.append('<div class="clearfix">');
@@ -628,11 +649,11 @@ optional:
}
if (hasMode4) {
- generateProgressBar();
+ generateRoomSwitchIntervals();
}
mainUpdateLoop();
- setInterval(mainUpdateLoop, 10000);
+ updateTimer = setInterval(mainUpdateLoop, 10000);
setInterval(updateHeaders, globalConfig.eco ? 10000 : 1000);
}
@@ -660,7 +681,14 @@ optional:
var today = date.getDate();
if (lastDate !== false) {
if (lastDate !== today) {
- location.reload(true);
+ if (updateTimer !== null) {
+ clearInterval(updateTimer);
+ updateTimer = null;
+ }
+ // Delay by a minute, sometimes the calendar shows the previous day if we load too quickly.
+ setTimeout(function() {
+ location.reload(true);
+ }, 60000);
}
} else {
lastDate = today;
@@ -736,14 +764,31 @@ optional:
}
/**
+ * Calculate the correct start date based on the number of days shown in the calendar
+ * @param startDay Start week day (0 = current day, 1 = Monday, 7 = Sunday)
+ * @param daysToShow Number of days to show in the calendar
+ * @return {Date} Start date
+ */
+ function getStartDate(startDay, daysToShow) {
+ var now = new Date();
+ var startDate = new Date(now.getTime());
+ if (startDay > 0) {
+ startDate.setDate(startDate.getDate() - startDate.getDay() + (startDay % 7));
+ if (startDate > now) startDate.setDate(startDate.getDate() - 7);
+ var endDayDate = new Date(startDate.getTime());
+ endDayDate.setDate(endDayDate.getDate() + daysToShow);
+ if (endDayDate <= now) startDate.setDate(startDate.getDate() + 7);
+ }
+ return startDate;
+ }
+
+ /**
* inilizes the Calendar for an room
* @param room Room Object
*/
function setUpCalendar(room) {
var daysToShow = room.config.daystoshow;
- var startDay = room.config.startday;
- var startDayDate = new Date();
- if (startDay > 0) startDayDate.setDate((startDayDate.getDate() - (startDayDate.getDay() + 6) % 7) + (startDay - 1));
+ var startDate = getStartDate(room.config.startday, daysToShow);
generateCalendarDiv(room);
room.$.calendar.weekCalendar({
timeslotsPerHour: 1,
@@ -771,7 +816,7 @@ optional:
$event.find(".time").css({"backgroundColor": "#25B002", "border": "1px solid #888"});
}
},
- date: startDayDate,
+ date: startDate,
dateFormat: "j.n",
timeFormat: "G:i",
scrollToHourMillis: 500,
@@ -908,11 +953,11 @@ optional:
}
/**
- * querys the Calendar data
+ * queries the Calendar data
*/
function queryCalendars() {
if (!panelUuid) return;
- var url = "{{dirprefix}}api.php?do=locationinfo&get=calendar&uuid=" + panelUuid;
+ var url = "{{{api}}}get=calendar&uuid=" + panelUuid;
$.ajax({
url: url,
dataType: 'json',
@@ -988,7 +1033,7 @@ optional:
room.state = null;
UpdateRoomHeader(room);
} catch (e) {
- console.log("Error: Couldnt add calendar data");
+ console.log("Error: Couldn't add calendar data");
console.log(e);
}
}
@@ -1032,6 +1077,7 @@ optional:
result = Math.min(Math.max(Math.abs(result), 1), 7);
if (result !== $cal.weekCalendar("option", "daysToShow")) {
$cal.weekCalendar("option", "daysToShow", result);
+ $cal.weekCalendar("gotoDate", getStartDate(room.config.startday, result));
columnWidth = $cal.find(".wc-day-1").width();
}
}
@@ -1059,22 +1105,10 @@ optional:
if (height < 30) {
height = 30;
}
- var fontHeight = Math.min(height, columnWidth / 2.1);
+
// Scale calendar font
- if (fontHeight > 120) {
- $cal.weekCalendar("option", "textSize", 28);
- }
- else if (fontHeight > 100) {
- $cal.weekCalendar("option", "textSize", 24);
- } else if (fontHeight > 80) {
- $cal.weekCalendar("option", "textSize", 22);
- } else if (fontHeight > 70) {
- $cal.weekCalendar("option", "textSize", 20);
- } else if (fontHeight > 60) {
- $cal.weekCalendar("option", "textSize", 14);
- } else {
- $cal.weekCalendar("option", "textSize", 13);
- }
+ $cal.weekCalendar("option", "textSize", (columnWidth+height)/50+10);
+
$cal.weekCalendar("option", "timeslotHeight", height);
if (room.timetable) {
$cal.weekCalendar("option", "data", {events: room.timetable});
@@ -1184,7 +1218,7 @@ optional:
var newText = false, newTime = false;
var seats = room.freePcs;
if (tmp.state === 'closed' || tmp.state === 'CalendarEvent' || tmp.state === 'Free') {
- newTime = GetTimeDiferenceAsString(tmp.end, MyDate(), globalConfig);
+ newTime = GetTimeDiferenceAsString(tmp.end, MyDate(), room.config);
}
if (tmp.state === "closed") {
if (!same) newText = t("closed");
@@ -1301,7 +1335,6 @@ optional:
/========================================== Room Layout =============================================
*/
-
const picSizeX = 3.8;
const picSizeY = 3;
@@ -1407,10 +1440,9 @@ optional:
function setUpRoom(room, layout) {
for (var i = 0; i < layout.length; i++) {
if (!isNaN(layout[i].y) && !isNaN(layout[i].x)) {
- //var $img = $('<img>').prop('id', "pc-img_" + room.id + "_" + layout[i].id).addClass('pc-img');
var $overlays = $('<div>').addClass('pc-overlay-container');
layout[i].$div = $('<div>').prop('id', "pc_" + room.id + "_" + layout[i].id).addClass('pc-container');
- layout[i].$div.append($('<div>').addClass('screen-frame').append($('<div>').addClass('screen-inner')));
+ layout[i].$div.append($('<div>').addClass('screen-frame').append($('<div>').addClass('screen-inner').append($('<div>').addClass('pcname').text(layout[i].host))));
layout[i].$div.append($('<div>').addClass('screen-foot1'));
layout[i].$div.append($('<div>').addClass('screen-foot2'));
//layout[i].$div.append($overlays).append($img);
@@ -1476,13 +1508,13 @@ optional:
*/
function queryPanelChange() {
$.ajax({
- url: "{{dirprefix}}api.php?do=locationinfo&get=timestamp&uuid=" + panelUuid,
+ url: "{{{api}}}get=timestamp&uuid=" + panelUuid,
dataType: 'json',
cache: false,
timeout: 5000,
success: function (result) {
if (!result || !result.ts) {
- console.log('Warning: get=timestamp didnt return json with ts field');
+ console.log("Warning: get=timestamp didn't return json with ts field");
return;
}
if (globalConfig.ts && globalConfig.ts !== result.ts) {
@@ -1499,13 +1531,13 @@ optional:
*/
function queryRooms() {
$.ajax({
- url: "{{dirprefix}}api.php?do=locationinfo&get=machines&uuid=" + panelUuid,
+ url: "{{{api}}}get=machines&uuid=" + panelUuid,
dataType: 'json',
cache: false,
timeout: 30000,
success: function (result) {
if (!result || result.constructor !== Array) {
- console.log('Warning: get=machines didnt return array');
+ console.log("Warning: get=machines didn't return array");
return;
}
for (var i = 0; i < result.length; i++) {
@@ -1548,8 +1580,14 @@ optional:
freePcs++;
}
}
-
- $div.removeClass('BROKEN OFFLINE IDLE OCCUPIED STANDBY'.replace(update[i].pcState, '')).addClass(update[i].pcState);
+ if (!$div.hasClass(update[i].pcState)) {
+ $div.removeClass('BROKEN OFFLINE IDLE OCCUPIED STANDBY'.replace(update[i].pcState, '')).addClass(update[i].pcState);
+ }
+ if (!$div.hasClass('rm-' + update[i].runmode)) {
+ $div.removeClass(function (i, cn) {
+ return (cn.match(/\brm-\S*/g) || []).join(' ');
+ }).addClass('rm-' + update[i].runmode);
+ }
}
room.freePcs = freePcs;
room.numPcs = numPcs;
@@ -1614,7 +1652,6 @@ optional:
scaleCalendar(rooms[property]);
scaleRoom(rooms[property]);
}
- SetProgressBarSpeed();
}, 200);
});
@@ -1663,56 +1700,59 @@ optional:
}
}
-
/**
* Used in Mode 4, switches given room from Timetable to room layout and vice versa
*/
- function switchLayouts() {
+ roomSwitchIntervals = [];
+ progressBarUpdateIntervals = [];
+ lastSwitchTimes = [];
+
+ function switchRoomLayout(room) {
+ if (room.config.mode !== 4) return;
+ if (room.$.layout.is(':visible')) {
+ room.$.layout.hide();
+ room.$.calendar.show();
+ } else {
+ room.$.layout.show();
+ room.$.calendar.hide();
+ }
+ lastSwitchTimes[room.id] = MyDate().getTime();
+ resizeIfRequired(room);
+
+ }
+
+ function generateRoomSwitchIntervals() {
for (var roomKey in rooms) {
- var room = rooms[roomKey];
+ const room = rooms[roomKey];
if (room.config.mode !== 4) continue;
- if (room.$.layout.is(':visible')) {
- room.$.layout.hide();
- room.$.calendar.show();
- } else {
- room.$.layout.show();
- room.$.calendar.hide();
- }
- resizeIfRequired(room);
+ if (roomSwitchIntervals[room.id]) clearInterval(roomSwitchIntervals[room.id]);
+ lastSwitchTimes[room.id] = MyDate().getTime();
+ generateProgressBar(room);
+ var interval = room.config.switchtime;
+ roomSwitchIntervals[room.id] = setInterval(function () {
+ switchRoomLayout(room);
+ }, interval);
}
- lastSwitchTime = MyDate().getTime();
}
- var $pbar = false;
- var pbarTimer = false;
- const PX_PER_SEC_TARGET = 10;
+ function generateProgressBar(room) {
+ if ($('#progressbar_' + room.id).length > 0 ) return;
+ var $progressBar = $('<div class="progressbar">').attr('id', 'progressbar_' + room.id);
+ $('#' + room.id).append($progressBar);
- /**
- * adds a progressbar (id) used in mode 4
- */
- function generateProgressBar() {
- if ($pbar) return;
- $pbar = $('<div class="progressbar">');
- $('body').append($pbar);
- SetProgressBarSpeed();
- }
+ if (progressBarUpdateIntervals[room.id]) clearInterval(progressBarUpdateIntervals[room.id]);
- function SetProgressBarSpeed() {
- if (!$pbar || !globalConfig.switchtime) return;
- if (pbarTimer) clearInterval(pbarTimer);
var interval = 1000;
if (!globalConfig.eco) {
- var pxPerMSec = $('body').width() / globalConfig.switchtime;
- interval = Math.max(1 / (pxPerMSec / PX_PER_SEC_TARGET), 100);
+ var pxPerMSec = $('body').width() / room.config.switchtime;
+ interval = Math.max(1 / (pxPerMSec / 100), 100);
}
- pbarTimer = setInterval(function () {
- var width = ((MyDate().getTime() - lastSwitchTime) / globalConfig.switchtime) * 100;
+
+ progressBarUpdateIntervals[room.id] = setInterval(function() {
+ var width = ((MyDate().getTime() - lastSwitchTimes[room.id]) / room.config.switchtime) * 100;
if (width < 0) width = 0;
- if (width >= 100) {
- width = 100;
- switchLayouts();
- }
- $pbar.width(width + '%');
+ if (width >= 100) width = 100;
+ $('#progressbar_' + room.id).width(width + '%');
}, interval);
}
generated by cgit v1.2.3-55-g7522 (git 2.39.0) at 2024-05-05 23:54:42 +0200