diff options
Diffstat (limited to 'modules-available/locationinfo/templates')
12 files changed, 817 insertions, 872 deletions
diff --git a/modules-available/locationinfo/templates/ajax-config-location.html b/modules-available/locationinfo/templates/ajax-config-location.html index 47d4ba8a..a5e7e45e 100644 --- a/modules-available/locationinfo/templates/ajax-config-location.html +++ b/modules-available/locationinfo/templates/ajax-config-location.html @@ -1,192 +1,59 @@ <input type="hidden" name="locationid" value="{{id}}"> -<div id="settings-outer"> - <h3>{{lang_openingTime}}</h3> - {{^expertMode}} - <div id="simple-mode"> - - <div align="right"> - <a href="#" class="btn btn-default btn-sm" id="btn-show-expert">{{lang_expertMode}}</a> - </div> - <div class="clearfix"></div> - - <table class="table table-condensed" style="margin-bottom:0"> - <tr> - <th>{{lang_day}}</th> - <th>{{lang_openingTime}}</th> - <th>{{lang_closingTime}}</th> - </tr> - - <tr class="tablerow"> - <td>{{lang_monTilFr}}</td> - <td> - <div class="input-group bootstrap-timepicker"> - <span class="input-group-addon"> - <span class="glyphicon glyphicon-time"></span> - </span> - <input type="text" class="form-control timepicker2" id="week-open" pattern="[0-9]{1,2}:[0-9]{2}"> - </div> - </td> - <td> - <div class="input-group bootstrap-timepicker"> - <span class="input-group-addon"> - <span class="glyphicon glyphicon-time"></span> - </span> - <input type="text" class="form-control timepicker2" id="week-close" pattern="[0-9]{1,2}:[0-9]{2}"> - </div> - </td> - </tr> - <tr class="tablerow"> - <td>{{lang_saturday}}</td> - <td> - <div class="input-group bootstrap-timepicker"> - <span class="input-group-addon"> - <span class="glyphicon glyphicon-time"></span> - </span> - <input type="text" class="form-control timepicker2" id="saturday-open" pattern="[0-9]{1,2}:[0-9]{2}"> - </div> - </td> - <td> - <div class="input-group bootstrap-timepicker"> - <span class="input-group-addon"> - <span class="glyphicon glyphicon-time"></span> - </span> - <input type="text" class="form-control timepicker2" id="saturday-close" pattern="[0-9]{1,2}:[0-9]{2}"> - </div> - </td> - </tr> - <tr class="tablerow"> - <td>{{lang_sunday}}</td> - <td> - <div class="input-group bootstrap-timepicker"> - <span class="input-group-addon"> - <span class="glyphicon glyphicon-time"></span> - </span> - <input type="text" class="form-control timepicker2" id="sunday-open" pattern="[0-9]{1,2}:[0-9]{2}"> - </div> - </td> - <td> - <div class="input-group bootstrap-timepicker"> - <span class="input-group-addon"> - <span class="glyphicon glyphicon-time"></span> - </span> - <input type="text" class="form-control timepicker2" id="sunday-close" pattern="[0-9]{1,2}:[0-9]{2}"> - </div> - </td> - </tr> - </table> - </div> - {{/expertMode}} - - <div id="expert-mode" style="{{^expertMode}}display:none{{/expertMode}}"> - <div class="pull-right"> - <a class="btn btn-success btn-sm" id="new-openingtime"> - <span class="glyphicon glyphicon-plus-sign"></span> - {{lang_openingTime}} - </a> - </div> - <div class="clearfix"></div> - <div id="expert-table"> - <div class="row"> - <div class="col-xs-9">{{lang_day}}</div> - <div class="col-xs-3 text-right">{{lang_delete}}</div> - <div class="col-sm-6">{{lang_openingTime}}</div> - <div class="col-sm-6">{{lang_closingTime}}</div> - </div> - </div> - </div> +<h3>{{lang_openingTime}}</h3> +<table class="table"> + {{#openingtimes}} + <tr> + <td>{{days}}</td> + <td class="text-right">{{open}} - {{close}}</td> + </tr> + {{/openingtimes}} +</table> + +<div class="row" style="margin-top: 20px; margin-right: 15px;"> + <a class="pull-right" title="{{lang_goToLocationWarning}}" href='?do=locations#{{id}}'> + {{lang_goToLocation}} + <span class="glyphicon glyphicon-arrow-right"></span> + </a> </div> +<hr> <h3>{{lang_remoteSchedule}}</h3> <div class="row"> - <div class="col-sm-3"> + <div class="col-sm-4"> <label for="backend-select">{{lang_backend}}</label> </div> - <div class="col-sm-7"> + <div class="col-sm-8"> <select id="backend-select" class="form-control" name="serverid"> <option value="0">{{lang_noServer}}</option> {{#serverlist}} - <option value="{{serverid}}" {{selected}}>{{servername}}</option> + <option value="{{serverid}}" {{selected}}>{{servername}}</option> {{/serverlist}} </select> </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_serverTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> + <div class="col-sm-12 small text-muted slx-smallspace"> + {{lang_serverTooltip}} </div> </div> <div class="row"> - <div class="col-sm-3"></div> - <div class="col-sm-7"> + <div class="col-sm-4"></div> + <div class="col-sm-8"> <div class="checkbox"> <input type="checkbox" name="recursive" id="recursive-check"> <label for="recursive-check">{{lang_recursiveServerSet}}</label> </div> </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_recursiveSetTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> + <div class="col-sm-12 small text-muted slx-smallspace"> + {{lang_recursiveSetTooltip}} </div> </div> <div class="row"> - <div class="col-sm-3"> + <div class="col-sm-4"> <label for="roomid-input">{{lang_roomId}}</label> </div> - <div class="col-sm-7"> + <div class="col-sm-8"> <input id="roomid-input" class="form-control" name="serverlocationid" id="serverlocationid" value="{{serverlocationid}}"> </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_roomIdTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> + <div class="col-sm-12 small text-muted slx-smallspace"> + {{lang_roomIdTooltip}} </div> </div> - -<script type="application/javascript"><!-- - (function() { - - var scheduleData = {{{schedule_data}}}; - - {{#expertMode}} - for (var i = 0; i < scheduleData.length; ++i) { - newOpeningTime(scheduleData[i]); - } - {{/expertMode}} - {{^expertMode}} - for (var i = 0; i < scheduleData.length; ++i) { - if (scheduleData[i].days.length === 5) { - $('#week-open').val(scheduleData[i]['openingtime']); - $('#week-close').val(scheduleData[i]['closingtime']); - } else if (scheduleData[i].days.length === 1 && scheduleData[i].days[0] === 'Saturday') { - $('#saturday-open').val(scheduleData[i]['openingtime']); - $('#saturday-close').val(scheduleData[i]['closingtime']); - } else if (scheduleData[i].days.length === 1 && scheduleData[i].days[0] === 'Sunday') { - $('#sunday-open').val(scheduleData[i]['openingtime']); - $('#sunday-close').val(scheduleData[i]['closingtime']); - } - } - {{/expertMode}} - - setTimepicker($('#settings-outer').find('.timepicker2')); - - $('p.helptext').tooltip(); - - $('#new-openingtime').click(function (e) { - e.preventDefault(); - setTimepicker(newOpeningTime({}).find('.timepicker2')); - }) - - $('#btn-show-expert').click(function (e) { - e.preventDefault(); - scheduleData = simpleToExpert(); - for (var i = 0; i < scheduleData.length; ++i) { - setTimepicker(newOpeningTime(scheduleData[i]).find('.timepicker2')); - } - $('#simple-mode').remove(); - $('#expert-mode').show(); - }); - - })(); - -//--></script> diff --git a/modules-available/locationinfo/templates/ajax-config-server.html b/modules-available/locationinfo/templates/ajax-config-server.html index 8c2cb3ba..c61927c0 100644 --- a/modules-available/locationinfo/templates/ajax-config-server.html +++ b/modules-available/locationinfo/templates/ajax-config-server.html @@ -1,43 +1,37 @@ <div class="panel panel-default"> <div class="panel-heading">{{lang_general}}</div> - <div class="panel-body"> - <div class="list-group"> - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_entryName}}</label> - </div> - <div class="col-md-7"> - <input required class="form-control" name="name" type="text" value="{{name}}" id="name-input" - form="form-{{currentbackend}}"> - </div> - <div class="col-md-2"> - <p class="btn btn-static" title="{{lang_nameTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group"> + <div class="list-group-item"> + <div class="row"> + <div class="col-md-4"> + <label>{{lang_entryName}}</label> + </div> + <div class="col-md-8"> + <input required class="form-control" name="name" type="text" value="{{name}}" id="name-input" + form="form-{{currentbackend}}"> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_nameTooltip}} </div> </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_serverType}}</label> - </div> - <div class="col-md-7"> - <select class="form-control" onchange="servertype_changed(this.value)"> - {{#defaultBlank}} - <option value="" selected>{{lang_pleaseSelect}}</option> - {{/defaultBlank}} - {{#backendList}} - <option value="{{backendtype}}" {{#active}}selected{{/active}}>{{display}}</option> - {{/backendList}} - </select> - </div> - <div class="col-md-2"> - <p class="btn btn-static" id="help-type" title="{{lang_typeTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-md-4"> + <label>{{lang_serverType}}</label> + </div> + <div class="col-md-8"> + <select class="form-control" onchange="servertype_changed(this.value)"> + {{#defaultBlank}} + <option value="" selected>{{lang_pleaseSelect}}</option> + {{/defaultBlank}} + {{#backendList}} + <option value="{{backendtype}}" {{#active}}selected{{/active}}>{{display}}</option> + {{/backendList}} + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_typeTooltip}} </div> </div> </div> @@ -57,12 +51,10 @@ <div class="panel panel-default"> <div class="panel-heading">{{lang_credentials}}</div> - <div class="panel-body"> - <div class="list-group"> - {{#credentials}} - {{{credentialsHtml}}} - {{/credentials}} - </div> + <div class="list-group"> + {{#credentials}} + {{{credentialsHtml}}} + {{/credentials}} </div> </div> </form> @@ -92,7 +84,6 @@ currentBackend = value; } - $('p.btn[title]').tooltip(); $('#myModalSubmitButton').attr('form', 'form-' + currentBackend); $('.settings-bs-switch').bootstrapSwitch({size:'small'}); 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); } diff --git a/modules-available/locationinfo/templates/frontend-summary.html b/modules-available/locationinfo/templates/frontend-summary.html index ae089da5..136ac3a5 100644 --- a/modules-available/locationinfo/templates/frontend-summary.html +++ b/modules-available/locationinfo/templates/frontend-summary.html @@ -2,8 +2,8 @@ <html lang="{{language}}"> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> <head> - <script type='text/javascript' src='{{dirprefix}}script/jquery.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/locationinfo/frontend/frontendscript.js'></script> <style type='text/css'> @@ -244,12 +244,12 @@ } /** - * Querys Pc states + * Queries Pc states * Room are queried with the {{uuid}} of the panel. */ function queryRooms() { $.ajax({ - url: "{{dirprefix}}api.php?do=locationinfo&get=pcstates&uuid={{uuid}}", + url: "{{{api}}}get=pcstates&uuid={{uuid}}", dataType: 'json', cache: false, timeout: 30000, @@ -483,7 +483,7 @@ } /** - * Retruns next Opening + * Returns next Opening * @param room Room Object * @returns bestdate Date Object of next opening */ @@ -691,14 +691,14 @@ /** - * querys the Calendar data - * Calender is queried with the {{uuid}} of the panel. + * queries the Calendar data + * Calendar is queried with the {{uuid}} of the panel. * api.inc.php / page.inc.php is getting the ids with the panel uuid. */ function queryCalendars() { - var url = "{{dirprefix}}api.php?do=locationinfo&get=calendar&uuid={{uuid}}"; + var url = "{{{api}}}get=calendar&uuid={{uuid}}"; - // Todo reimplement Frontend methode if needed + // Todo reimplement Frontend method if needed /* if(!(room.config.calendarqueryurl === undefined)) { url = room.config.calendarqueryurl; @@ -723,13 +723,13 @@ */ function queryPanelChange() { $.ajax({ - url: "{{dirprefix}}api.php?do=locationinfo&get=timestamp&uuid={{uuid}}", + url: "{{{api}}}get=timestamp&uuid={{uuid}}", 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 (config.ts && config.ts !== result.ts) { diff --git a/modules-available/locationinfo/templates/page-config-panel-default.html b/modules-available/locationinfo/templates/page-config-panel-default.html index eee01875..a289d26a 100644 --- a/modules-available/locationinfo/templates/page-config-panel-default.html +++ b/modules-available/locationinfo/templates/page-config-panel-default.html @@ -20,108 +20,117 @@ <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">{{lang_generalSettings}}</div> - <div class="panel-body"> - <div class="list-group"> + <div class="list-group"> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="panel-title">{{lang_displayName}}</label> - </div> - <div class="col-sm-7"> - <input class="form-control" name="name" id="panel-title" type="text" value="{{panelname}}"> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_displayNameTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="panel-title">{{lang_displayName}}</label> + </div> + <div class="col-sm-8"> + <input class="form-control" name="name" id="panel-title" type="text" value="{{panelname}}"> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_displayNameTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="language">{{lang_language}}</label> - </div> - <div class="col-sm-7"> - <select class="form-control" name="language" id="language"> - {{#languages}} - <option value="{{cc}}" id="lang-{{cc}}" {{selected}}>{{name}}</option> - {{/languages}} - </select> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_languageTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="language">{{lang_language}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" name="language" id="language"> + {{#languages}} + <option value="{{cc}}" id="lang-{{cc}}" {{selected}}>{{name}}</option> + {{/languages}} + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_languageTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-eco">{{lang_ecoMode}}</label> - </div> - <div class="col-sm-7"> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-eco">{{lang_ecoMode}}</label> + </div> + <div class="col-sm-8"> + <div class="checkbox"> <input id="input-eco" type="checkbox" name="eco" {{eco_checked}}> + <label></label> </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_ecoTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_ecoTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-prettytime">{{lang_prettytime}}</label> - </div> - <div class="col-sm-7"> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-prettytime">{{lang_prettytime}}</label> + </div> + <div class="col-sm-8"> + <div class="checkbox"> <input id="input-prettytime" type="checkbox" name="prettytime" {{prettytime_checked}}> + <label></label> </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_prettytimeTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_prettytimeTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-calupdate">{{lang_calendarUpdate}}</label> - </div> - <div class="col-sm-7"> - <input class="form-control" name="calupdate" type="number" min="30" id="input-calupdate" - max="1440" value="{{calupdate}}" required> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_calupdateTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> + <div class="list-group-item m1-s m2-h m3-s m4-s"> + <div class="row"> + <div class="col-sm-4"> + <label for="show-hostname">{{lang_showHostname}}</label> + </div> + <div class="col-sm-8"> + <div class="checkbox"> + <input id="show-hostname" class="btstrpCheckbox" type="checkbox" name="hostname" {{hostname_checked}}> + <label></label> </div> </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_hostnameTooltip}} + </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="form-roomupdate">{{lang_roomUpdate}}</label> - </div> - <div class="col-sm-7"> - <input class="form-control" name="roomupdate" type="number" min="15" id="form-roomupdate" - max="86400" value="{{roomupdate}}" required> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_roomupdateTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-calupdate">{{lang_calendarUpdate}}</label> + </div> + <div class="col-sm-8"> + <input class="form-control" name="calupdate" type="number" min="30" id="input-calupdate" + max="1440" value="{{calupdate}}" required> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_calupdateTooltip}} + </div> + </div> + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="form-roomupdate">{{lang_roomUpdate}}</label> + </div> + <div class="col-sm-8"> + <input class="form-control" name="roomupdate" type="number" min="15" id="form-roomupdate" + max="86400" value="{{roomupdate}}" required> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_roomupdateTooltip}} </div> </div> </div> @@ -132,181 +141,164 @@ <div class="col-md-6"> <div class="panel panel-default" id="extra-div"> <div class="panel-heading">{{lang_mode}}</div> - <div class="panel-body"> - <div class="list-group" id="overridableConfigs"> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="mode">{{lang_mode}}</label> - </div> - <div class="col-sm-7"> - <select class="form-control" name="mode" id="mode" onchange="modeChange()"> - <option value="1" id="mode1">{{lang_mode1}}</option> - <option value="2" id="mode2">{{lang_mode2}}</option> - <option value="3" id="mode3">{{lang_mode3}}</option> - <option value="4" id="mode4">{{lang_mode4}}</option> - </select> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_modeTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group" id="overridableConfigs"> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="mode">{{lang_mode}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" name="mode" id="mode" onchange="modeChange(id)"> + <option value="1" id="mode1">{{lang_mode1}}</option> + <option value="2" id="mode2">{{lang_mode2}}</option> + <option value="3" id="mode3">{{lang_mode3}}</option> + <option value="4" id="mode4">{{lang_mode4}}</option> + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_modeTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-roomplanner">{{lang_useRoomplanner}}</label> - </div> - <div class="col-sm-7"> - <select class="form-control" name="roomplanner" id="input-roomplanner"> - <option value="0" id="roomplanner0">{{lang_countIp}}</option> - <option value="1" id="roomplanner1">{{lang_countRoomplan}}</option> - </select> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_roomplannerTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-roomplanner">{{lang_useRoomplanner}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" name="roomplanner" id="input-roomplanner"> + <option value="0" id="roomplanner0">{{lang_countIp}}</option> + <option value="1" id="roomplanner1">{{lang_countRoomplan}}</option> + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_roomplannerTooltip}} </div> </div> + </div> - <div class="list-group-item m1-s m2-h m3-h m4-h"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-vertical">{{lang_vertical}}</label> - </div> - <div class="col-sm-7"> - <input id="input-vertical" class="btstrpCheckbox" type="checkbox" name="vertical" {{vertical_checked}}> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_verticalTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item m1-s m2-h m3-h m4-h"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-vertical">{{lang_vertical}}</label> + </div> + <div class="col-sm-8"> + <input id="input-vertical" class="btstrpCheckbox" type="checkbox" name="vertical" {{vertical_checked}}> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_verticalTooltip}} </div> </div> + </div> - <div class="list-group-item m1-s m2-s m3-h m4-s"> - <div class="row"> - <div class="col-sm-3"> - <label for="startday">{{lang_startDay}}</label> - </div> - <div class="col-sm-7"> - <select class="form-control" id="startday" name="startday"> - <option value="0">{{lang_currentDay}}</option> - <option value="1">{{lang_monday}}</option> - <option value="2">{{lang_thuesday}}</option> - <option value="3">{{lang_wednesday}}</option> - <option value="4">{{lang_thursday}}</option> - <option value="5">{{lang_friday}}</option> - <option value="6">{{lang_saturday}}</option> - <option value="7">{{lang_sunday}}</option> - </select> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_startDayTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item m1-s m2-s m3-h m4-s"> + <div class="row"> + <div class="col-sm-4"> + <label for="startday">{{lang_startDay}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" id="startday" name="startday"> + <option value="0">{{lang_currentDay}}</option> + <option value="1">{{lang_monday}}</option> + <option value="2">{{lang_thuesday}}</option> + <option value="3">{{lang_wednesday}}</option> + <option value="4">{{lang_thursday}}</option> + <option value="5">{{lang_friday}}</option> + <option value="6">{{lang_saturday}}</option> + <option value="7">{{lang_sunday}}</option> + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_startDayTooltip}} </div> </div> + </div> - <div class="list-group-item m1-s m2-s m3-h m4-s"> - <div class="row"> - <div class="col-sm-3"> - <label for="scaledaysauto">{{lang_autoScale}}</label> - </div> - <div class="col-sm-7"> + <div class="list-group-item m1-s m2-s m3-h m4-s"> + <div class="row"> + <div class="col-sm-4"> + <label for="scaledaysauto">{{lang_autoScale}}</label> + </div> + <div class="col-sm-8"> + <div class="checkbox"> <input id="scaledaysauto" class="btstrpCheckbox" type="checkbox" name="scaledaysauto" {{scaledaysauto_checked}}> + <label></label> </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_autoscaleTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_autoscaleTooltip}} </div> </div> + </div> - <div class="list-group-item m1-s m2-s m3-h m4-s"> - <div class="row"> - <div class="col-sm-3"> - <label for="daystoshow">{{lang_daysToShow}}</label> - </div> - <div class="col-sm-7"> - <select class="form-control" id="daystoshow" name="daystoshow"> - <option value="1">1</option> - <option value="2">2</option> - <option value="3">3</option> - <option value="4">4</option> - <option value="5">5</option> - <option value="6">6</option> - <option value="7">7</option> - </select> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_daysToShowTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item m1-s m2-s m3-h m4-s"> + <div class="row"> + <div class="col-sm-4"> + <label for="daystoshow">{{lang_daysToShow}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" id="daystoshow" name="daystoshow"> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + <option value="4">4</option> + <option value="5">5</option> + <option value="6">6</option> + <option value="7">7</option> + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_daysToShowTooltip}} </div> </div> + </div> - <div class="list-group-item m1-s m2-h m3-s m4-s"> - <div class="row"> - <div class="col-sm-3"> - <label for="rotation">{{lang_rotation}}</label> - </div> - <div class="col-sm-7"> - <select class="form-control" id="rotation" name="rotation"> - <option value="0">{{lang_rotation0}}</option> - <option value="3">{{lang_rotation3}}</option> - <option value="2">{{lang_rotation2}}</option> - <option value="1">{{lang_rotation1}}</option> - </select> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_rotationTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item m1-s m2-h m3-s m4-s"> + <div class="row"> + <div class="col-sm-4"> + <label for="rotation">{{lang_rotation}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" id="rotation" name="rotation"> + <option value="0">{{lang_rotation0}}</option> + <option value="3">{{lang_rotation3}}</option> + <option value="2">{{lang_rotation2}}</option> + <option value="1">{{lang_rotation1}}</option> + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_rotationTooltip}} </div> </div> + </div> - <div class="list-group-item m1-s m2-h m3-h m4-h"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-scale">{{lang_scale}}</label> - </div> - <div class="col-sm-7"> - <span><span class="range-display"></span> %</span> - <input id="input-scale" name="scale" type="range" step="1" min="10" max="90" value="{{scale}}"> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_scaleTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item m1-s m2-h m3-h m4-h"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-scale">{{lang_scale}}</label> + </div> + <div class="col-sm-8"> + <span><span class="range-display"></span> %</span> + <input id="input-scale" name="scale" type="range" step="1" min="10" max="90" value="{{scale}}"> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_scaleTooltip}} </div> </div> + </div> - <div class="list-group-item m1-h m2-h m3-h m4-s"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-switchtime">{{lang_switchTime}}</label> - </div> - <div class="col-sm-7"> - <span><span class="range-display"></span> {{lang_sec}}</span> - <input id="input-switchtime" name="switchtime" type="range" step="1" min="1" max="120" value="{{switchtime}}"> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_switchTimeTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item m1-h m2-h m3-h m4-s"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-switchtime">{{lang_switchTime}}</label> + </div> + <div class="col-sm-8"> + <span><span class="range-display"></span> {{lang_sec}}</span> + <input id="input-switchtime" name="switchtime" type="range" step="1" min="1" max="120" value="{{switchtime}}"> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_switchTimeTooltip}} </div> </div> </div> @@ -384,9 +376,6 @@ document.addEventListener("DOMContentLoaded", function () { var $owPanels = $('#overrideRoomConfigs'); var overrides = {{{overrides}}} - // Initialize fancy tooltips - $('p.helptext').tooltip(); - // Add listener to range sliders so their label can be updated var $range = $('input[type="range"]'); $range.change(function () { @@ -394,8 +383,7 @@ document.addEventListener("DOMContentLoaded", function () { }); // Set state of input controls that aren't statically initialized server side $('.modify-inputs input[type="checkbox"]') - .bootstrapSwitch({size: 'small'}) - .on('switchChange.bootstrapSwitch', function () { + .on('click', function () { if (this.name === 'scaledaysauto') { $('#daystoshow').prop('disabled', this.checked); } @@ -418,7 +406,7 @@ document.addEventListener("DOMContentLoaded", function () { $('#daystoshow').prop('disabled', document.getElementById('scaledaysauto').checked); $range.change(); - modeChange(); + modeChange('mode'); // Adding/removing locations $locList.find('a').click(function(ev) { @@ -455,12 +443,12 @@ document.addEventListener("DOMContentLoaded", function () { // Add Panel for overwriting room specific config $owPanels.find('#overrideRoom' + id).remove(); $owPanels.append('<div class="col-md-6" id="overrideRoom' + id + '">' + - '<div class="panel panel-default">' + + '<div class="panel panel-default body-dest">' + '<div class="panel-heading clearfix">' + name + ' {{lang_configOverride}}' + '<div class="checkbox-inline pull-right">' + '<input type="checkbox" id="override' + id + '" name="override' + id + '"/>' + - '</div></div><div class="panel-body"></div></div></div>'); + '</div></div></div></div>'); // Load content into panel @@ -485,26 +473,10 @@ document.addEventListener("DOMContentLoaded", function () { var overVal = false; if (overrides !== null && overrides[locId] !== undefined) overVal = true; - // Make Bootstrap switches to normal checkboxes to be able to clone them correctly - var btstrpCheckboxes = $('.modify-inputs input[class="btstrpCheckbox"]'); - btstrpCheckboxes.bootstrapSwitch('destroy'); - // Clone needed content var $contentCopy = $('#overridableConfigs').clone(true); $contentCopy.closest('#overridableConfigs').prop('id', ''); - // Change mode show/hide classes - $contentCopy.find('.m1-s, .m1-h, .m2-s, .m2-h, .m3-s, .m3-h, .m4-s, .m4-h').each(function() { - if ($( this ).hasClass('m1-s')) $( this ).removeClass('m1-s').addClass('om1-s'); - else if ($( this ).hasClass('m1-h')) $( this ).removeClass('m1-h').addClass('om1-h'); - if ($( this ).hasClass('m2-s')) $( this ).removeClass('m2-s').addClass('om2-s'); - else if ($( this ).hasClass('m2-h')) $( this ).removeClass('m2-h').addClass('om2-h'); - if ($( this ).hasClass('m3-s')) $( this ).removeClass('m3-s').addClass('om3-s'); - else if ($( this ).hasClass('m3-h')) $( this ).removeClass('m3-h').addClass('om3-h'); - if ($( this ).hasClass('m4-s')) $( this ).removeClass('m4-s').addClass('om4-s'); - else if ($( this ).hasClass('m4-h')) $( this ).removeClass('m4-h').addClass('om4-h'); - }); - // Change labels $contentCopy.find('label').each(function() { var oldFor = $( this ).attr('for'); @@ -515,7 +487,6 @@ document.addEventListener("DOMContentLoaded", function () { $contentCopy.find('select').each(function() { var oldId = $( this ).attr('id'); var oldName = $( this ).attr('name'); - if (oldId === 'mode') $( this ).attr('onchange', 'modeChangeOverride(id)'); $( this ).attr('id', 'override' + locId + oldId); $( this ).attr('name', 'override' + locId + oldName); $( this ).val(overVal ? overrides[locId][oldName] : $('#' + oldId).val()); @@ -539,20 +510,19 @@ document.addEventListener("DOMContentLoaded", function () { if ($( this ).attr('type') === 'range') $( this ).val(overVal ? overrides[locId][oldName] : $('#' + oldId).val()); else if ($( this ).attr('type') === 'checkbox') { $( this ) - .bootstrapSwitch({size: 'small'}) - .on('switchChange.bootstrapSwitch', function () { + .on('click', function () { var regex = RegExp('[a-b0-9]*scaledaysauto'); var substr = this.name.substring(0, this.name.length - 13); if (regex.test(this.name)) { $('#' + substr + 'daystoshow').prop('disabled', this.checked); } }); - $( this ).bootstrapSwitch('state', overVal ? overrides[locId][oldName] : $('#' + oldId).val()); + $( this ).prop('checked', overVal ? overrides[locId][oldName] : $('#' + oldId).prop('checked')); } }); // Append copied content to location specific <div> - var $panelBody = $('#overrideRoom' + locId).find('div.panel-body'); + var $panelBody = $('#overrideRoom' + locId).find('div.body-dest'); $panelBody.append($contentCopy); // Specific extra stuff needed @@ -561,18 +531,7 @@ document.addEventListener("DOMContentLoaded", function () { $('#override' + locId + 'daystoshow').prop('disabled', document.getElementById('override' + locId + 'scaledaysauto').checked); // Call modeChange once to correctly show/hide fields - modeChangeOverride('override'+ locId + 'mode'); - - // Recreate Bootstrap switches from checkboxes - btstrpCheckboxes - .bootstrapSwitch({size: 'small'}) - .on('switchChange.bootstrapSwitch', function () { - var regex = RegExp('[a-b0-9]*scaledaysauto'); - var substr = this.name.substring(0, this.name.length - 13); - if (regex.test(this.name)) { - $('#' + substr + 'daystoshow').prop('disabled', this.checked); - } - }); + modeChange('override'+ locId + 'mode'); // Add listener to range inputs for updating value text var range = $('input[type="range"]'); @@ -583,7 +542,7 @@ document.addEventListener("DOMContentLoaded", function () { } function unloadOverrideContent(id) { - var $panelBody = $('#overrideRoom' + id).find('div.panel-body'); + var $panelBody = $('#overrideRoom' + id).find('div.body-dest'); $panelBody.find('div.list-group').remove(); if (overrides !== null && overrides[id] !== undefined) delete overrides[id] } @@ -609,18 +568,13 @@ document.addEventListener("DOMContentLoaded", function () { /** * If the mode was changed the mode settings have to be adjusted. */ -function modeChange() { - var value = $('#mode').val(); - $('.m' + value + '-h').hide(); - $('.m' + value + '-s').show(); -} -function modeChangeOverride(id) { - id = id.replace('override', ''); - id = id.replace('mode', ''); - var value = $('#override' + id + 'mode').val(); - $('#overrideRoom' + id + ' .om' + value + '-h').hide(); - $('#overrideRoom' + id + ' .om' + value + '-s').show(); +function modeChange(id) { + var isOverride = (id !== 'mode'); + if (isOverride) id = id.replace('override', '').replace('mode', ''); + var value = $('#' + (isOverride ? 'override' + id : '') + 'mode').val(); + $('#' + (isOverride ? 'overrideRoom' + id : 'extra-div') + ' .m' + value + '-h').hide(); + $('#' + (isOverride ? 'overrideRoom' + id : 'extra-div') + ' .m' + value + '-s').show(); } //--></script> diff --git a/modules-available/locationinfo/templates/page-config-panel-summary.html b/modules-available/locationinfo/templates/page-config-panel-summary.html index 2dc556ce..a7a34217 100644 --- a/modules-available/locationinfo/templates/page-config-panel-summary.html +++ b/modules-available/locationinfo/templates/page-config-panel-summary.html @@ -16,97 +16,88 @@ <div class="col-md-6"> <div class="modify-inputs panel panel-default"> <div class="panel-heading">{{lang_display}}</div> - <div class="panel-body"> - <div class="list-group"> + <div class="list-group"> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="panel-title">{{lang_displayName}}</label> - </div> - <div class="col-sm-7"> - <input class="form-control" name="name" id="panel-title" type="text" value="{{panelname}}"> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_displayNameTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="panel-title">{{lang_displayName}}</label> + </div> + <div class="col-sm-8"> + <input class="form-control" name="name" id="panel-title" type="text" value="{{panelname}}"> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_displayNameTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="language">{{lang_language}}</label> - </div> - <div class="col-sm-7"> - <select class="form-control" name="language" id="language"> - {{#languages}} - <option value="{{cc}}" id="lang-{{cc}}" {{selected}}>{{name}}</option> - {{/languages}} - </select> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_languageTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="language">{{lang_language}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" name="language" id="language"> + {{#languages}} + <option value="{{cc}}" id="lang-{{cc}}" {{selected}}>{{name}}</option> + {{/languages}} + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_languageTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-eco">{{lang_ecoMode}}</label> - </div> - <div class="col-sm-7"> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-eco">{{lang_ecoMode}}</label> + </div> + <div class="col-sm-8"> + <div class="checkbox"> <input id="input-eco" type="checkbox" name="eco" {{eco_checked}}> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_ecoTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> + <label></label> </div> </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_ecoTooltip}} + </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-roomplanner">{{lang_useRoomplanner}}</label> - </div> - <div class="col-sm-7"> - <select class="form-control" name="roomplanner" id="input-roomplanner"> - <option value="0" id="roomplanner0">{{lang_countIp}}</option> - <option value="1" id="roomplanner1">{{lang_countRoomplan}}</option> - </select> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_roomplannerTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-roomplanner">{{lang_useRoomplanner}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" name="roomplanner" id="input-roomplanner"> + <option value="0" id="roomplanner0">{{lang_countIp}}</option> + <option value="1" id="roomplanner1">{{lang_countRoomplan}}</option> + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_roomplannerTooltip}} </div> </div> + </div> <!-- - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-prettytime">{{lang_prettytime}}</label> - </div> - <div class="col-sm-7"> - <input id="input-prettytime" type="checkbox" name="prettytime" {{prettytime_checked}}> - </div> - <div class="col-sm-2"> - <a class="btn btn-default helptext" title="{{lang_prettytimeTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </a> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-prettytime">{{lang_prettytime}}</label> + </div> + <div class="col-sm-8"> + <input id="input-prettytime" type="checkbox" name="prettytime" {{prettytime_checked}}> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_prettytimeTooltip}} </div> </div> ---> </div> +--> </div> </div> </div> @@ -114,27 +105,23 @@ <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">{{lang_updateRates}}</div> - <div class="panel-body"> - <div class="list-group"> + <div class="list-group"> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="form-panelupdate">{{lang_panel}}</label> - </div> - <div class="col-sm-7"> - <input class="form-control" name="panelupdate" type="number" min="15" id="form-panelupdate" - max="86400" value="{{panelupdate}}" required> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_summaryUpdateIntervalTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="form-panelupdate">{{lang_panel}}</label> + </div> + <div class="col-sm-8"> + <input class="form-control" name="panelupdate" type="number" min="15" id="form-panelupdate" + max="86400" value="{{panelupdate}}" required> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_summaryUpdateIntervalTooltip}} </div> </div> - </div> + </div> </div> </div> @@ -202,16 +189,11 @@ document.addEventListener("DOMContentLoaded", function () { var $locList = $('#location-list'); var $locInput = $('#locationids'); - // Initialize fancy tooltips - $('p.helptext').tooltip(); // Add listener to range sliders so their label can be updated $('input[type="range"]').change(function () { $(this).siblings().find('.range-display').text($(this).val()); }); // Set state of input controls that aren't statically initialized server side - $('.modify-inputs input[type="checkbox"]') - .bootstrapSwitch({size: 'small'}); - var lids = $locInput.val().split(','); $selLocs.empty(); for (var i = 0; i < lids.length; ++i) { diff --git a/modules-available/locationinfo/templates/page-config-panel-url.html b/modules-available/locationinfo/templates/page-config-panel-url.html index 57b518ce..3aaf8620 100644 --- a/modules-available/locationinfo/templates/page-config-panel-url.html +++ b/modules-available/locationinfo/templates/page-config-panel-url.html @@ -13,102 +13,227 @@ <div class="panel panel-default"> <div class="panel-heading">{{lang_display}}</div> - <div class="panel-body"> - <div class="list-group"> + <div class="list-group"> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="panel-title">{{lang_displayName}}</label> - </div> - <div class="col-sm-7"> - <input class="form-control" name="name" id="panel-title" type="text" value="{{panelname}}"> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_displayNameTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="panel-title">{{lang_displayName}}</label> + </div> + <div class="col-sm-8"> + <input class="form-control" name="name" id="panel-title" type="text" value="{{panelname}}"> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_displayNameTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="panel-url">{{lang_url}}</label> - </div> - <div class="col-sm-7"> - <input class="form-control" name="url" id="panel-url" type="text" value="{{url}}" - placeholder="http://www.bwlehrpool.de/" pattern=".*://.*" required> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_urlTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="panel-url">{{lang_url}}</label> + </div> + <div class="col-sm-8"> + <input class="form-control" name="url" id="panel-url" type="text" value="{{url}}" + placeholder="http://www.bwlehrpool.de/" pattern=".*://.*" required> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_urlTooltip}} </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-ssl">{{lang_insecureSsl}}</label> - </div> - <div class="col-sm-7"> - <div class="checkbox"> - <input id="input-ssl" type="checkbox" name="insecure-ssl" {{ssl_checked}} value="1"> - <label></label> - </div> - </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_ignoreSslTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-ssl">{{lang_insecureSsl}}</label> + </div> + <div class="col-sm-8"> + <div class="checkbox"> + <input id="input-ssl" type="checkbox" name="insecure-ssl" {{ssl_checked}} value="1"> + <label></label> </div> </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_ignoreSslTooltip}} + </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <label for="input-reload">{{lang_reloadIntervalMins}}</label> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label>{{lang_allowTtySwitch}}</label> + </div> + <div class="col-sm-8"> + <div class="radio"> + <input id="tty1" type="radio" name="allow-tty" {{allow-tty__checked}} value=""> + <label for="tty1">{{lang_useDefault}}</label> </div> - <div class="col-sm-7"> - <input class="form-control" id="input-reload" type="number" min="0" max="999" name="reloadminutes" pattern="\d*" value="{{reloadminutes}}"> + <div class="radio"> + <input id="tty2" type="radio" name="allow-tty" {{allow-tty_yes_checked}} value="yes"> + <label for="tty2">{{lang_yes}}</label> </div> - <div class="col-sm-2"> - <p class="btn btn-static helptext" title="{{lang_reloadIntervalTooltip}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> + <div class="radio"> + <input id="tty3" type="radio" name="allow-tty" {{allow-tty_no_checked}} value="no"> + <label for="tty3">{{lang_no}}</label> </div> </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_allowTtySwitchTooltip}} + </div> + </div> + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="input-reload">{{lang_reloadIntervalMins}}</label> + </div> + <div class="col-sm-8"> + <input class="form-control" id="input-reload" type="number" min="0" max="999" name="reloadminutes" pattern="\d*" value="{{reloadminutes}}"> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_reloadIntervalTooltip}} + </div> + </div> + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-6"> + <label for="whitelist">{{lang_whitelist}}</label> + <textarea id="whitelist" name="whitelist" rows="10" class="form-control">{{whitelist}}</textarea> + </div> + <div class="col-sm-6"> + <label for="blacklist">{{lang_blacklist}}</label> + <textarea id="blacklist" name="blacklist" rows="10" class="form-control">{{blacklist}}</textarea> + </div> + <div class="col-sm-12 slx-smallspace"> + {{lang_urlListHelp}} + </div> </div> + </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-sm-3"> - <div class="radio"> - <input type="radio" name="iswhitelist" value="1" {{iswhitelist_1_checked}} id="iswhitelist1" class="form-control"> - <label for="iswhitelist1"> - {{lang_urlWhitelist}} - </label> - </div> - <div class="radio"> - <input type="radio" name="iswhitelist" value="0" {{iswhitelist_0_checked}} id="iswhitelist0" class="form-control"> - <label for="iswhitelist0"> - {{lang_urlBlacklist}} - </label> - </div> + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="split-login">{{lang_splitlogin}}</label> + </div> + <div class="col-sm-8"> + <div class="checkbox"> + <input id="split-login" type="checkbox" name="split-login" {{split-login_checked}} value="1"> + <label></label> </div> - <div class="col-sm-7"> - <textarea name="urllist" rows="10" class="form-control">{{urllist}}</textarea> - <p>{{lang_urlListHelp}}</p> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_splitloginTooltip}} + </div> + </div> + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="browser">{{lang_browser}}</label> + </div> + <div class="col-sm-8"> + <select class="form-control" name="browser" id="browser" onchange="browserChange()"> + <option value="slx-browser" id="slx">{{lang_slxbrowser}}</option> + <option value="chromium" id="chrome">{{lang_chromium}}</option> + </select> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_browserTooltip}} + </div> + </div> + </div> + + <div class="list-group-item b0-h"> + <div class="row"> + <div class="col-sm-4"> + <label for="interactive">{{lang_interactive}}</label> + </div> + <div class="col-sm-8"> + <div class="checkbox"> + <input id="interactive" type="checkbox" name="interactive" {{interactive_checked}} value="1"> + <label></label> </div> - <div class="col-sm-2"></div> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_interactiveTooltip}} + </div> + </div> + </div> + + <div class="list-group-item b0-h" id="bookmarks"> + <div class="row"> + <div class="col-sm-4"> + <label for="bookmarks">{{lang_bookmarks}}</label> + </div> + <div class="col-sm-8"> + <button type="button" class="btn btn-success" onclick="addBookmark()"> + <span class="glyphicon glyphicon-plus"></span> + </button> + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_bookmarksTooltip}} + </div> + </div> + <div class="row" style="margin-top: 1em;" id="bookmarkRow" hidden> + <div class="col-sm-3 col-sm-offset-3"> + <input class="form-control" name="bookmarkNames[]" type="text" value="" + placeholder="bwLehrpool"> + </div> + <div class="col-sm-3"> + <input class="form-control" name="bookmarkUrls[]" type="text" value="" + placeholder="https://www.bwlehrpool.de/" pattern=".*://.*"> + </div> + <div class="col-sm-1"> + <button type="button" class="btn btn-danger" onclick="$(this).closest('.row').remove()"> + <span class="glyphicon glyphicon-minus"></span> + </button> </div> </div> + {{#bookmarks}} + <div class="row" style="margin-top: 1em;"> + <div class="col-sm-3 col-sm-offset-3"> + <input class="form-control" name="bookmarkNames[]" type="text" value="{{name}}" + placeholder="bwLehrpool" required> + </div> + <div class="col-sm-3"> + <input class="form-control" name="bookmarkUrls[]" type="text" value="{{url}}" + placeholder="http://www.bwlehrpool.de/" pattern=".*://.*" required> + </div> + <div class="col-sm-1"> + <button type="button" class="btn btn-danger" onclick="$(this).closest('.row').remove()"> + <span class="glyphicon glyphicon-minus"></span> + </button> + </div> + </div> + {{/bookmarks}} + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-4"> + <label for="zoom-factor">{{lang_zoomFactor}}</label> + </div> + <div class="col-sm-7 col-xs-10"> + <input class="form-control" id="zoom-factor" type="range" min="50" max="300" step="5" + name="zoom-factor" value="{{zoom-factor}}"> + </div> + <div class="col-sm-1 col-xs-2" id="zoom-value"> + + </div> + <div class="col-sm-12 small text-muted spacebottop"> + {{lang_zoomFactorTooltip}} + </div> + </div> </div> + </div> </div> <div class="text-right"> @@ -120,12 +245,41 @@ </div> </form> -<script type="text/javascript"><!-- +<script> document.addEventListener("DOMContentLoaded", function () { - // Initialize fancy tooltips - $('p.helptext').tooltip(); - + // load value to dropdown menus + $('#browser option[value="{{browser}}"]').prop("selected", true); + browserChange(); + var $zv = $('#zoom-value'); + var $zf = $('#zoom-factor'); + var sliderUpdate = function() { + $zv.text($zf.val() + '%'); + }; + $zf.on('input', sliderUpdate); + sliderUpdate(); }); -//--></script> +// Hide interactive-input if slx-browser is selected +function browserChange() { + var value = $('#browser').val(); + if (value !== 'slx-browser') { + $('.b0-h').show(); + } else { + $('.b0-h').hide(); + } +} + +// Add another bookmark input field to the form +function addBookmark() { + var rowCopy = $('#bookmarkRow').clone(); + rowCopy.attr('id', ''); + rowCopy.show(); + rowCopy.find('input').each(function() { + $( this ).val(''); + $( this ).prop('required', true); + }); + $('#bookmarks').append(rowCopy); +} + +</script> diff --git a/modules-available/locationinfo/templates/page-locations.html b/modules-available/locationinfo/templates/page-locations.html index f90a0f35..c09b5336 100644 --- a/modules-available/locationinfo/templates/page-locations.html +++ b/modules-available/locationinfo/templates/page-locations.html @@ -35,7 +35,7 @@ {{/backend}} </td> <td class="text-center"> - <span class="glyphicon glyphicon-{{openingGlyph}}"></span> + <span class="glyphicon glyphicon-{{openingGlyph}} {{^strong}}text-muted{{/strong}}"></span> </td> </tr> {{/list}} @@ -50,7 +50,7 @@ <input type="hidden" name="token" value="{{token}}"> <input type="hidden" name="action" value="writeLocationConfig"> <input type="hidden" name="openingtimes" id="json-openingtimes" value=""> - <div class="modal-header"><h2 id="location-modal-header"></h2></div> + <div class="modal-header"><h3 id="location-modal-header"></h3></div> <div class="modal-body"></div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal">{{lang_close}}</a> @@ -65,35 +65,7 @@ </div> </div> -<div class="hidden" id="expert-template"> - <div class="row expert-row" style="margin-top:1em;border-top:1px solid #ddd"> - <div class="col-xs-12 days-box"> - <div class="pull-right checkbox checkbox-inline"><input type="checkbox" class="i-delete"><label><span class="glyphicon glyphicon-trash"></span></label></div> - <div class="checkbox checkbox-inline"><input type="checkbox" class="i-Monday"><label>{{lang_shortMonday}}</label></div> - <div class="checkbox checkbox-inline"><input type="checkbox" class="i-Tuesday"><label>{{lang_shortTuesday}}</label></div> - <div class="checkbox checkbox-inline"><input type="checkbox" class="i-Wednesday"><label>{{lang_shortWednesday}}</label></div> - <div class="checkbox checkbox-inline"><input type="checkbox" class="i-Thursday"><label>{{lang_shortThursday}}</label></div> - <div class="checkbox checkbox-inline"><input type="checkbox" class="i-Friday"><label>{{lang_shortFriday}}</label></div> - <div class="checkbox checkbox-inline"><input type="checkbox" class="i-Saturday"><label>{{lang_shortSaturday}}</label></div> - <div class="checkbox checkbox-inline"><input type="checkbox" class="i-Sunday"><label>{{lang_shortSunday}}</label></div> - </div> - <div class="col-sm-6"> - <div class="input-group bootstrap-timepicker"> - <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span> - <input type="text" class="form-control timepicker2 i-openingtime" pattern="[0-9]{1,2}:[0-9]{2}"> - </div> - </div> - <div class="col-sm-6"> - <div class="input-group bootstrap-timepicker"> - <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span> - <input type="text" class="form-control timepicker2 i-closingtime" pattern="[0-9]{1,2}:[0-9]{2}"> - </div> - </div> - </div> -</div> - -<script type="text/javascript"><!-- - +<script> document.addEventListener("DOMContentLoaded", function () { /** * Load a opening time modal of a location. @@ -103,9 +75,7 @@ document.addEventListener("DOMContentLoaded", function () { var locationId = $(this).data('locationid'); var locationName = $(this).text(); $('#location-modal-header').text("[" + locationId + "] " + locationName); - $('#location-modal').modal('show').find('.modal-body').load("?do=locationinfo&action=config-location&id=" + locationId); + $('#location-modal').modal('show').find('.modal-body').text('...').load("?do=locationinfo&action=config-location&id=" + locationId); }); - $('#settings-form').submit(submitLocationSettings); }); - -//--></script> +</script> diff --git a/modules-available/locationinfo/templates/page-servers.html b/modules-available/locationinfo/templates/page-servers.html index 2f692078..86adecca 100644 --- a/modules-available/locationinfo/templates/page-servers.html +++ b/modules-available/locationinfo/templates/page-servers.html @@ -66,7 +66,7 @@ <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> - <div class="modal-header" id="myModalHeader"></div> + <div class="modal-header" id="myModalHeader"><h3>{{lang_backendSettings}}</h3></div> <div class="modal-body" id="myModalBody"></div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal">{{lang_close}}</a> @@ -102,10 +102,9 @@ * @param serverid The id of the server. */ function loadServerSettingsModal(serverid) { - $('#myModalHeader').text("{{lang_locationSettings}}").css("font-weight", "Bold"); $('#myModal .modal-dialog').css('width', ''); $('#myModal').modal('show'); - $('#myModalBody').load("?do=locationinfo&action=serverSettings&id=" + serverid); + $('#myModalBody').text('...').load("?do=locationinfo&action=serverSettings&id=" + serverid); } // ########### Server Table ########### diff --git a/modules-available/locationinfo/templates/server-prop-bool.html b/modules-available/locationinfo/templates/server-prop-bool.html index bd9dcc64..ee2b8121 100644 --- a/modules-available/locationinfo/templates/server-prop-bool.html +++ b/modules-available/locationinfo/templates/server-prop-bool.html @@ -1,16 +1,12 @@ <div class="list-group-item"> <div class="row"> - <div class="col-md-3"><label for="prop-{{property}}">{{title}}</label></div> - <div class="col-md-7"> + <div class="col-md-4"><label for="prop-{{property}}">{{title}}</label></div> + <div class="col-md-8"> <input class="settings-bs-switch" id="prop-{{property}}" type="checkbox" name="prop-{{property}}" value="1" {{#currentvalue}}checked{{/currentvalue}}> </div> - <div class="col-md-2"> - {{#helptext}} - <p class="btn btn-static" title="{{helptext}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - {{/helptext}} + <div class="col-sm-12 small text-muted spacebottop"> + {{helptext}} </div> </div> </div> diff --git a/modules-available/locationinfo/templates/server-prop-dropdown.html b/modules-available/locationinfo/templates/server-prop-dropdown.html index d1351551..bcb0cd5a 100644 --- a/modules-available/locationinfo/templates/server-prop-dropdown.html +++ b/modules-available/locationinfo/templates/server-prop-dropdown.html @@ -1,19 +1,15 @@ <div class="list-group-item"> <div class="row"> - <div class="col-md-3"><label for="prop-{{property}}">{{title}}</label></div> - <div class="col-md-7"> + <div class="col-md-4"><label for="prop-{{property}}">{{title}}</label></div> + <div class="col-md-8"> <select class="form-control" id="prop-{{property}}" name="prop-{{property}}"> {{#select_list}} <option {{#active}}selected{{/active}}>{{option}}</option> {{/select_list}} </select> </div> - <div class="col-md-2"> - {{#helptext}} - <p class="btn btn-static" title="{{helptext}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - {{/helptext}} + <div class="col-sm-12 small text-muted spacebottop"> + {{helptext}} </div> </div> </div> diff --git a/modules-available/locationinfo/templates/server-prop-generic.html b/modules-available/locationinfo/templates/server-prop-generic.html index 23ff1e4e..ca8234fe 100644 --- a/modules-available/locationinfo/templates/server-prop-generic.html +++ b/modules-available/locationinfo/templates/server-prop-generic.html @@ -1,16 +1,12 @@ <div class="list-group-item"> <div class="row"> - <div class="col-md-3"><label for="prop-{{property}}">{{title}}</label></div> - <div class="col-md-7"> + <div class="col-md-4"><label for="prop-{{property}}">{{title}}</label></div> + <div class="col-md-8"> <input class="form-control" id="prop-{{property}}" type="{{inputtype}}" name="prop-{{property}}" value="{{currentvalue}}"> </div> - <div class="col-md-2"> - {{#helptext}} - <p class="btn btn-static" title="{{helptext}}"> - <span class="glyphicon glyphicon-question-sign"></span> - </p> - {{/helptext}} + <div class="col-sm-12 small text-muted spacebottop"> + {{helptext}} </div> </div> </div> |