From 2f3f7ba4844ca4acff33569f3fa46ccf6301c92f Mon Sep 17 00:00:00 2001
From: Udo Walter
Date: Thu, 4 Oct 2018 03:19:44 +0200
Subject: [serversetup-bwlp] bootmenu-edit UI improvements

- add cancel button
- add checkbox to hide menu entries
- add button to remove menu entries
- hide input fields not relevant for spacers
- add modal to select an entry that shows some information
  about the selected entry
---
 .../serversetup-bwlp/templates/menu-edit.html      | 269 ++++++++++++++-------
 1 file changed, 184 insertions(+), 85 deletions(-)

(limited to 'modules-available/serversetup-bwlp/templates')

diff --git a/modules-available/serversetup-bwlp/templates/menu-edit.html b/modules-available/serversetup-bwlp/templates/menu-edit.html
index c0a353b4..e695ef20 100644
--- a/modules-available/serversetup-bwlp/templates/menu-edit.html
+++ b/modules-available/serversetup-bwlp/templates/menu-edit.html
@@ -7,7 +7,7 @@
 	<div class="panel-heading">
 		{{title}}
 		{{^title}}
-			{{lang_newMenu}}
+		{{lang_newMenu}}
 		{{/title}}
 	</div>
 	<div class="panel-body list-group">
@@ -50,86 +50,151 @@
 				<table class="table">
 					<thead>
 					<tr>
-						<th></th>
-						<th></th>
-						<th>{{lang_entryId}}</th>
+						<th style="width: 10px"></th>
+						<th style="width: 10px"></th>
+						<th style="width: 10px">{{lang_entryId}}</th>
 						<th>{{lang_title}}</th>
-						<th>{{lang_hotkey}}</th>
-						<th>{{lang_password}}</th>
+						<th style="width: 150px">{{lang_hotkey}}</th>
+						<th style="width: 200px">{{lang_password}}</th>
+						<th style="width: 10px"></th>
+						<th style="width: 10px"></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>
+					<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="text-nowrap">
+						<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
+							<div class="radio radio-inline no-spacer" style="margin: 0;{{^entryid}}display: none;{{/entryid}}">
+								<input type="radio" name="defaultentry" value="{{menuentryid}}"
+										 {{#isdefault}}checked{{/isdefault}} {{perms.ipxe.menu.edit.disabled}} {{disabled}}>
+								<label></label>
+							</div>
+						</td>
+
+						<td class="text-nowrap">
+							<input class="entry-id" type="hidden" name="entry[{{menuentryid}}][entryid]" value="{{entryid}}">
+							<button type="button" class="btn btn-default" style="width: 100%; text-align: left" {{disabled}} data-toggle="modal" data-target="#entry-chosser-modal">
 								{{#entryid}}
-									<select class="form-control entry-list" name="entry[{{menuentryid}}][entryid]" {{readonly}} data-default="{{entryid}}">
-									</select>
+									{{entryid}}
 								{{/entryid}}
 								{{^entryid}}
-									<i>{{lang_spacer}}</i>
+									{{lang_spacer}}
 								{{/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>
+							</button>
+						</td>
+						<td>
+							<input class="form-control title" name="entry[{{menuentryid}}][title]" value="{{title}}"
+									 maxlength="100" {{readonly}}>
+						</td>
+
+						<td>
+							<select class="form-control key-list no-spacer" {{^entryid}}style="display: none;"{{/entryid}} name="entry[{{menuentryid}}][hotkey]" {{readonly}} data-default="{{hotkey}}">
+							</select>
+						</td>
+
+						<td>
+							<input class="form-control no-spacer" {{^entryid}}style="display: none;"{{/entryid}} name="entry[{{menuentryid}}][plainpass]" type="{{password_type}}"
+									 value="{{plainpass}}" {{readonly}}>
+						</td>
+						<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
+							<div class="checkbox checkbox-inline no-spacer" style="text-align: left;margin: 0;{{^entryid}}display: none;{{/entryid}}">
+								<input name="entry[{{menuentryid}}][hidden]" value="1" type="checkbox" {{#hidden}}checked{{/hidden}}>
+								<label></label>
+							</div>
+						</td>
+						<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
+							<button type="button" class="btn btn-default remove-button"><span class="glyphicon glyphicon-remove"></span></button>
+						</td>
+					</tr>
 					{{/entries}}
 					</tbody>
 				</table>
 			</div>
-			<div class="text-right">
+			<div class="text-right" style="margin-bottom: 20px">
 				<button id="add-btn" type="button" class="btn btn-success" {{disabled}}>
 					<span class="glyphicon glyphicon-plus-sign"></span>
 					{{lang_add}}
 				</button>
+			</div>
+			<div class="text-right">
+				<a href="?do=serversetup&show=menu" type="button" class="btn btn-default">{{lang_cancel}}</a>
 				<button type="submit" class="btn btn-primary" {{disabled}}>
 					<span class="glyphicon glyphicon-floppy-disk"></span>
 					{{lang_save}}
 				</button>
 			</div>
 		</form>
+
+		<div class="modal fade" id="entry-chosser-modal" tabindex="-1" role="dialog">
+			<div class="modal-dialog" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title">{{lang_entryChooserTitle}}</h5>
+					</div>
+					<div class="modal-body">
+						<div class="form-group">
+							<select id="entry-list" class="form-control">
+								<option value="">{{lang_spacer}}</option>
+								{{#entrylist}}
+								<option value="{{entryid}}">{{entryid}}</option>
+								{{/entrylist}}
+							</select>
+						</div>
+						{{#entrylist}}
+						<div id="entrydata-{{entryid}}" class="entrydata">
+							<div class="form-group">
+								<label for="{{entryid}}-name">{{lang_entryTitle}}</label>
+								<pre id="{{entryid}}-name">{{title}}</pre>
+							</div>
+							{{#data}}
+								{{#script}}
+								<div class="form-group">
+									<label for="{{entryid}}-script">{{lang_scriptContent}}</label>
+									<pre id="{{entryid}}-script">{{.}}</pre>
+								</div>
+								{{/script}}
+								{{#executable}}
+								<div class="form-group">
+									<label for="{{entryid}}-executable">{{lang_imageToLoad}}</label>
+									<pre id="{{entryid}}-executable">{{.}}</pre>
+								</div>
+								{{/executable}}
+								{{#initRd}}
+								<div class="form-group">
+									<label for="{{entryid}}-initRd">{{lang_initRd}}</label>
+									<pre id="{{entryid}}-initRd">{{.}}</pre>
+								</div>
+								{{/initRd}}
+								{{#commandLine}}
+								<div class="form-group">
+									<label for="{{entryid}}-commandLine">{{lang_commandLine}}</label>
+									<pre id="{{entryid}}-commandLine" >{{.}}</pre>
+								</div>
+								{{/commandLine}}
+							{{/data}}
+						</div>
+						{{/entrylist}}
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
+						<button type="button" class="btn btn-primary" id="choose-entry">{{lang_choose}}</button>
+					</div>
+				</div>
+			</div>
+		</div>
 	</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>
+		<option value="{{key}}">{{key}}</option>
 		{{/keys}}
 	</select>
 </div>
@@ -141,38 +206,52 @@
 		</td>
 
 		<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
-			<div class="radio radio-inline" style="margin: 0">
+			<div class="radio radio-inline no-spacer" style="margin: 0; display: none;">
 				<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>
+			<input class="entry-id" type="hidden" name="entry[%new%][entryid]" value="">
+			<button type="button" class="btn btn-default" style="width: 100%; text-align: left" {{disabled}} data-toggle="modal" data-target="#entry-chosser-modal">
+				{{lang_spacer}}
+			</button>
 		</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 class="form-control key-list no-spacer" style="display: none;" name="entry[%new%][hotkey]">
 			</select>
 		</td>
 		<td>
-			<input class="form-control" name="entry[%new%][plainpass]" type="{{password_type}}">
+			<input class="form-control no-spacer" style="display: none;" name="entry[%new%][plainpass]" type="{{password_type}}">
+		</td>
+		<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
+			<div class="checkbox checkbox-inline no-spacer" style="text-align: left;margin: 0;{{^entryid}}display: none;{{/entryid}}">
+				<input name="entry[%new%][hidden]" value="1" type="checkbox">
+				<label></label>
+			</div>
+		</td>
+		<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
+			<button type="button" class="btn btn-default remove-button"><span class="glyphicon glyphicon-remove"></span></button>
 		</td>
 	</tr>
 </table>
 
 <script type="text/javascript">
+	var spacerText = "{{lang_spacer}}";
+
 	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);
+		function reassignSortValues() {
+			var startValue = 1;
+			$('.sort-val').each(function(index, element) {
+				element.value = startValue * 10;
+				startValue++;
+			});
 		}
+
 		$('#table-body').sortable({
 			opacity: 0.8,
 			handle: '.drag-handler',
@@ -181,31 +260,15 @@
 				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);
+			stop: reassignSortValues
 		});
+
 		$('.key-list').each(function() {
-			fillEntryList($(this), $KEY_LIST);
+			$select = $(this);
+			$source  = $('#key-list-template').find('option');
+			var def = $select.data('default');
+			$select.append($source.clone(true));
+			$select.find('option[value="' + def + '"]').attr('selected', true);
 		});
 		var newIndex = 0;
 		$('#add-btn').click(function() {
@@ -223,6 +286,42 @@
 					$this.val(val.replace('%new%', 'new-' + newIndex));
 				}
 			});
+			reassignSortValues();
+		});
+
+		$('.remove-button').click(function() {
+			$(this).parent().parent().remove();
+			reassignSortValues();
+		});
+
+		$('#entry-list').change(function(e) {
+			var modal = $('#entry-chosser-modal');
+			modal.find('.entrydata').hide();
+			modal.find('#entrydata-' + $(this).val()).show();
+		});
+
+		var currentEntryButton = null;
+
+		$('#entry-chosser-modal').on('show.bs.modal', function(e) {
+			currentEntryButton = $(e.relatedTarget);
+			var entryId = currentEntryButton.parent().find('.entry-id').val();
+			$('#entry-list').val(entryId).change();
+		});
+
+		$('#choose-entry').click(function() {
+			$('#entry-chosser-modal').modal('hide');
+			var entryId = $('#entry-list').val();
+			currentEntryButton.parent().find('.entry-id').val(entryId);
+			currentEntryButton.text(entryId || spacerText);
+			var tableRow = currentEntryButton.parent().parent();
+			if (!entryId) {
+				tableRow.find('.no-spacer').hide();
+				tableRow.find('input.no-spacer').val('');
+				tableRow.find('div.no-spacer').find('input').prop('checked', false);
+
+			} else {
+				tableRow.find('.no-spacer').show();
+			}
 		});
 	});
 </script>
\ No newline at end of file
-- 
cgit v1.2.3-55-g7522