path: root/modules-available/serversetup-bwlp/templates/menu-edit.html

<h2>{{lang_editMenuHead}}</h2>

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="position:absolute;top:-2000px" tabindex="-1">
<input type="password" name="password_fake" id="password_fake" value=""  style="position:absolute;top:-2000px" tabindex="-1">

<div class="panel panel-default">
	<div class="panel-heading">
		{{title}}
		{{^title}}
			{{lang_newMenu}}
		{{/title}}
	</div>
	<div class="panel-body list-group">
		<form method="post" action="?do=serversetup">
			<input type="hidden" name="token" value="{{token}}">
			<input type="hidden" name="action" value="savemenu">
			<input type="hidden" name="menuid" value="{{menuid}}">

			<div class="row list-group-item">
				<div class="col-sm-3">
					<label for="panel-title">{{lang_menuTitle}}</label>
				</div>
				<div class="col-sm-9">
					<input class="form-control" name="title" id="panel-title" type="text" value="{{title}}" {{readonly}}>
				</div>
			</div>
			<div class="row list-group-item">
				<div class="col-sm-3">
					<label for="panel-timeout">{{lang_menuTimeout}}</label>
				</div>
				<div class="col-sm-9">
					<div class="input-group">
						<input class="form-control" name="timeout" id="panel-timeout" type="number" min="0" max="9999"
								 value="{{timeout}}" {{readonly}}>
						<span class="input-group-addon">{{lang_seconds}}</span>
					</div>
				</div>
			</div>
			<div class="row list-group-item">
				<div class="col-sm-3">
				</div>
				<div class="col-sm-9">
					<div class="checkbox">
						<input name="defmenu" id="panel-defmenu" type="checkbox" {{#isdefault}}checked{{/isdefault}} {{disabled}}>
						<label for="panel-defmenu">{{lang_defaultMenu}}</label>
					</div>
				</div>
			</div>
			<div>
				<table class="table">
					<thead>
					<tr>
						<th></th>
						<th></th>
						<th>{{lang_entryId}}</th>
						<th>{{lang_title}}</th>
						<th>{{lang_hotkey}}</th>
						<th>{{lang_password}}</th>
					</tr>
					</thead>
					<tbody id="table-body" style="overflow: auto;">
					{{#entries}}
						<tr>
							<input type="hidden" class="sort-val" name="entry[{{menuentryid}}][sortval]" value="{{sortval}}">
							<input type="hidden" name="entry[{{menuentryid}}][hidden]" value="0">
							<td class="drag-handler" style="cursor: pointer;text-align: center; vertical-align: middle;">
								<span class="glyphicon glyphicon-th-list"></span>
							</td>

							<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
								<div class="radio radio-inline" style="margin: 0">
									<input type="radio" name="defaultentry" value="{{menuentryid}}"
											 {{#isdefault}}checked{{/isdefault}} {{perms.ipxe.menu.edit.disabled}} {{disabled}}>
									<label></label>
								</div>
							</td>

							<td class="text-nowrap">
								{{#entryid}}
									<select class="form-control entry-list" name="entry[{{menuentryid}}][entryid]" {{readonly}} data-default="{{entryid}}">
									</select>
								{{/entryid}}
								{{^entryid}}
									<i>{{lang_spacer}}</i>
								{{/entryid}}
							</td>
							<td {{^entryid}}colspan="2"{{/entryid}}>
								<input class="form-control title" name="entry[{{menuentryid}}][title]" value="{{title}}"
										 maxlength="100" {{readonly}}>
							</td>
							{{#entryid}}
								<td>
									<select class="form-control key-list" name="entry[{{menuentryid}}][hotkey]" {{readonly}} data-default="{{hotkey}}">
									</select>
								</td>
							{{/entryid}}

							<td>
								<input class="form-control" name="entry[{{menuentryid}}][plainpass]" type="{{password_type}}"
										 value="{{plainpass}}" {{readonly}}>
							</td>
						</tr>
					{{/entries}}
					</tbody>
				</table>
			</div>
			<div class="text-right">
				<button id="add-btn" type="button" class="btn btn-success" {{disabled}}>
					<span class="glyphicon glyphicon-plus-sign"></span>
					{{lang_add}}
				</button>
				<button type="submit" class="btn btn-primary" {{disabled}}>
					<span class="glyphicon glyphicon-floppy-disk"></span>
					{{lang_save}}
				</button>
			</div>
		</form>
	</div>
</div>
<div class="hidden">
	<select id="entry-list-template">
		<option value="">{{lang_spacer}}</option>
		{{#entrylist}}
			<option value="{{entryid}}">{{title}}</option>
		{{/entrylist}}
	</select>
</div>
<div class="hidden">
	<select id="key-list-template">
		<option value="">{{lang_none}}</option>
		{{#keys}}
			<option value="{{key}}">{{key}}</option>
		{{/keys}}
	</select>
</div>
<table class="hidden" id="row-template">
	<tr>
		<input type="hidden" class="sort-val" name="entry[%new%][sortval]" value="99999">
		<td class="drag-handler" style="cursor: pointer;text-align: center; vertical-align: middle;">
			<span class="glyphicon glyphicon-th-list"></span>
		</td>

		<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
			<div class="radio radio-inline" style="margin: 0">
				<input type="radio" name="defaultentry" value="%new%">
				<label></label>
			</div>
		</td>

		<td class="text-nowrap">
			<select class="form-control entry-list" name="entry[%new%][entryid]">
			</select>
		</td>
		<td>
			<input class="form-control title" data-old="#new#" name="entry[%new%][title]" maxlength="100">
		</td>
		<td>
			<select class="form-control key-list" name="entry[%new%][hotkey]">
			</select>
		</td>
		<td>
			<input class="form-control" name="entry[%new%][plainpass]" type="{{password_type}}">
		</td>
	</tr>
</table>

<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function() {
		var $ENTRY_LIST = $('#entry-list-template').find('option');
		var $KEY_LIST = $('#key-list-template').find('option');
		function fillEntryList($select, $source) {
			var def = $select.data('default');
			$select.append($source.clone(true));
			$select.find('option[value="' + def + '"]').attr('selected', true);
		}
		$('#table-body').sortable({
			opacity: 0.8,
			handle: '.drag-handler',
			start: function(evt, ui) {
				ui.placeholder.css("visibility", "visible");
				ui.placeholder.css("opacity", "0.152");
				ui.placeholder.css("background-color", "#ddd");
			},
			stop: function() {
				var startValue = 1;
				$('.sort-val').each(function(index, element) {
					element.value = startValue * 10;
					startValue++;
				});
			}
		});
		$('.entry-list').each(function() {
			fillEntryList($(this), $ENTRY_LIST);
		}).change(function() {
			var $this = $(this);
			var $title = $this.closest('tr').find('.title');
			var oldval = $title.data('old');
			if (oldval === '#stop#')
				return;
			if (oldval !== '#new#' && oldval !== $title.val()) {
				$title.data('old', '#stop#');
				return;
			}
			var text = $this.find('option:selected').text();
			$title.val(text).data('old', text);
		});
		$('.key-list').each(function() {
			fillEntryList($(this), $KEY_LIST);
		});
		var newIndex = 0;
		$('#add-btn').click(function() {
			var $new = $('#row-template').find('tr').clone(true);
			newIndex++;
			$('#table-body').append($new);
			$new.find('[name]').each(function() {
				var $this = $(this);
				var val = $this.val();
				var name = $this.attr('name');
				if (name) {
					$this.attr('name', name.replace('%new%', 'new-' + newIndex));
				}
				if (val) {
					$this.val(val.replace('%new%', 'new-' + newIndex));
				}
			});
		});
	});
</script>