<div>
<h1>{{lang_mainHeader}}</h1>
<h4>{{lang_serverTable}}</h4>
<table class="table table-hover">
<tr>
<th width="1">{{lang_serverType}}</th>
<th>{{lang_locationName}}</th>
<th width="1"></th>
<th width="1"></th>
</tr>
{{#serverlist}}
<form method="post" action="?do=locationinfo">
<input type="hidden" name="token" value="{{token}}">
<input type="hidden" name="serverid" value="{{serverid}}">
<tr>
<td nowrap>{{typename}}</td>
<td nowrap>{{servername}}</td>
<td align="center" nowrap>
<button class="btn btn-sm {{^autherror}}btn-success{{/autherror}}{{#autherror}}btn-danger{{/autherror}}"
data-server-edit="{{serverid}}" {{disabled}} type="button">
<span style="margin-right: 5px;" class="glyphicon glyphicon-cog"></span>
{{lang_locationSettings}}
</button>
<button class="btn btn-sm btn-primary server-check" {{disabled}} name="action" value="checkConnection"
title="{{lang_refresh_title}}" type="submit">
<span style="margin-right: 5px;" class="glyphicon glyphicon-refresh"></span>
{{lang_refresh}}
</button>
</td>
<td align="center" nowrap>
<button class="btn btn-sm btn-danger server-delete" type="submit" name="action" value="deleteServer">
<span style="margin-right: 5px;" class="glyphicon glyphicon-remove"></span>
{{lang_delete}}
</button>
</td>
</tr>
</form>
{{/serverlist}}
</table>
<div>
<button class="btn btn-sm btn-success" id="addServerButton" onclick="addServer()">
<span title="{{lang_addServer_title}}">
<span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span>
{{lang_addServer}}
</span>
</button>
</div>
<h4>{{lang_buildingTable}}</h4>
<table class="table table-condensed table-hover" style="margin-bottom:0">
<tr>
<th>{{lang_locationName}}</th>
<th width="50" title="{{lang_locationIsHidden_title}}">{{lang_locationIsHidden}}</th>
<th width="50">{{lang_openingTime}}</th>
<th width="50">{{lang_locationSettings}}</th>
</tr>
{{#list}}
<tr id="row{{locationid}}">
<td>
<div style="display:inline-block;width:{{depth}}em"></div>
<a href="modules/locationinfo/frontend/doorsign.html?id={{locationid}}">{{locationname}}</a>
</td>
<td align="center">
<div class="checkbox" style="margin:0">
<input class="hidden-toggle" type="checkbox" data-locationid="{{locationid}}" {{hidden_checked}}>
<label></label>
</div>
</td>
<td>
<a class="btn btn-sm btn-default" role="button" style="width: 100%"
onclick="loadTimeModal({{locationid}}, '{{locationname}}');">
<span style="margin-right: 5px;" class="glyphicon glyphicon-time"></span>
</a>
</td>
<td>
<a class="btn btn-sm btn-default" role="button" style="width: 100%;"
onclick="loadLocationConfigModal({{locationid}}, '{{locationname}}');">
<span style="margin-right: 5px;" class="glyphicon glyphicon-cog"></span>
</a>
</td>
</tr>
{{/list}}
</table>
<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-body" id="myModalBody"></div>
<div class="modal-footer">
<button type="submit" id="myModalSubmitButton" class="btn btn-primary" form="">{{lang_save}}</button>
<a class="btn btn-primary" data-dismiss="modal">{{lang_close}}</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"><!--
document.addEventListener("DOMContentLoaded", function () {
/**
* React to click on a "hidden" checkbox.
*/
$('.hidden-toggle').change(function() {
$input = $(this);
$.ajax({
type: 'POST',
url: '?do=locationinfo&action=hide',
data: {locationid: $input.data('locationid'), hidden: $input[0].checked ? 1 : 0, token: TOKEN },
dataType: 'json'
}).done(function(data) {
if (data && $.isArray(data.changed)) {
markBoxes(data.changed);
} else {
$input.replaceWith('ERROR');
}
}).fail(function () {
$input.replaceWith('ERROR');
});
}).parent().click(function() {
$this = $(this);
$box = $this.find('input');
if (!$this.is($box)) {
$box.click();
}
});
/**
* Confirm deleting a server.
*/
$('.server-delete').click(function(ev) {
var del = confirm("{{lang_deleteConfirmation}}");
if (!del) ev.preventDefault();
});
/**
* Animate refresh icon while page is loading
*/
$('.server-check').click(function() {
$(this).find('.glyphicon').addClass('slx-rotation');
});
$('button[data-server-edit]').click(function() {
var id = $(this).data('server-edit');
loadServerSettingsModal(id);
});
});
/**
* Gets a status array delivered by backend's ajaxHideLocation()
* and sets the checkbox states accordingly.
*/
function markBoxes(boxArray) {
for (var i = 0; i < boxArray.length; ++i) {
if (boxArray[i].locationid) {
var lid = parseInt(boxArray[i].locationid);
$('input.hidden-toggle[data-locationid="' + lid + '"]').prop('checked', !!boxArray[i].hidden);
}
}
}
/**
* Loads the settings modal of a server.
*
* @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);
}
/**
* Load a opening time modal of a location.
*
* @param locationId The id of the location.
* @param locationName The name of the location.
*/
function loadTimeModal(locationId, locationName) {
$('#myModalHeader').text("[" + locationId + "] " + locationName).css("font-weight", "Bold");
$('#myModal .modal-dialog').css('width', '');
$('#myModal').modal('show');
$('#myModalBody').load("?do=locationinfo&action=timetable&id=" + locationId);
}
/**
* Loads the config modal of a location.
*
* @param locationId The id of the location
* @param locationName the name of the location
*/
function loadLocationConfigModal(locationId, locationName) {
$('#myModalHeader').text("[" + locationId + "] " + locationName).css("font-weight", "Bold");
$('#myModalSubmitButton').attr("form", "configForm");
$('#myModal .modal-dialog').css('width', '90%');
$('#myModal').modal('show');
$('#myModalBody').load("?do=locationinfo&action=config&id=" + locationId);
}
// ########### Server Table ###########
/**
* Loads a new / empty server settings modal.
*/
function addServer() {
loadServerSettingsModal(0);
}
//--></script>
