path: root/modules-available/locationinfo/templates/page-config-panel-url.html

<h2>
	{{#new}}{{lang_createPanel}}{{/new}}
	{{^new}}{{lang_editPanel}}{{/new}}
</h2>

<p>{{lang_editUrlPanelHints}}</p>

<form method="post" action="?do=locationinfo" id="config-form">
	<input type="hidden" name="token" value="{{token}}">
	<input type="hidden" name="action" value="writePanelConfig">
	<input type="hidden" name="ptype" value="URL">
	<input type="hidden" name="uuid" value="{{uuid}}">

	<div class="panel panel-default">
		<div class="panel-heading">{{lang_display}}</div>
		<div class="list-group">

			<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-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-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-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="radio">
							<input id="tty2" type="radio" name="allow-tty" {{allow-tty_yes_checked}} value="yes">
							<label for="tty2">{{lang_yes}}</label>
						</div>
						<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-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>
					<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>
					<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">
		<a href="?do=locationinfo&amp;show=panels" class="btn btn-default">{{lang_cancel}}</a>
		<button type="submit" class="btn btn-primary">
			<span class="glyphicon glyphicon-floppy-disk"></span>
			{{lang_save}}
		</button>
	</div>
</form>

<script>

document.addEventListener("DOMContentLoaded", function () {
	// 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();
});

// 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>