From 6dfc6ddb3b404f7c3d48e36c3c1e6fd9a63c22bf Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Mon, 14 Mar 2022 12:17:22 +0100
Subject: [passthrough] Redesign list; collapse non-VGA classes by default

---
 .../passthrough/templates/hardware-list.html       | 129 ++++++++++++---------
 1 file changed, 71 insertions(+), 58 deletions(-)

(limited to 'modules-available/passthrough/templates')

diff --git a/modules-available/passthrough/templates/hardware-list.html b/modules-available/passthrough/templates/hardware-list.html
index 720427fd..b00baea7 100644
--- a/modules-available/passthrough/templates/hardware-list.html
+++ b/modules-available/passthrough/templates/hardware-list.html
@@ -1,63 +1,74 @@
 <form method="post" action="?do=passthrough">
 	<input type="hidden" name="token" value="{{token}}">
-	<table class="table">
-		<thead>
-		<tr>
-			<th class="slx-smallcol">{{lang_deviceIdNumeric}}</th>
-			<th>{{lang_deviceName}}</th>
-			<th class="slx-smallcol">{{lang_useCount}}</th>
-			<th>{{lang_passthroughGroup}}</th>
-		</tr>
-		</thead>
-		<tbody>
-		{{#list}}
-		<tr class="c-{{vendor}}-{{device}} tr">
-			{{#class_name}}
-			<td colspan="4">
+	{{#classlist}}
+		<div class="panel panel-default">
+			<div class="panel-heading">
+				{{#collapse}}
+				<span class="slx-pointer" data-toggle="collapse" data-target="#div-class-{{class}}">
+					<b class="caret"></b>
+				{{/collapse}}
 				<span>{{class}}</span> – <strong>{{class_name}}</strong>
-			</td>
-			{{/class_name}}
-			{{^class_name}}
-			<td>{{vendor}}:{{device}} [{{rev}}]</td>
-			<td>
-				<table class="slx-ellipsis">
+				{{#collapse}}
+				</span>
+				{{/collapse}}
+			</div>
+			<div id="div-class-{{class}}" {{#collapse}}class="collapse"{{/collapse}}>
+				<table class="table">
+					<thead>
 					<tr>
-						<td {{^device_name}}class="query-{{vendor}}-{{device}}"{{/device_name}}>
-						{{device_name}}
-						</td>
+						<th class="slx-smallcol">{{lang_deviceIdNumeric}}</th>
+						<th>{{lang_deviceName}}</th>
+						<th class="slx-smallcol">{{lang_useCount}}</th>
+						<th>{{lang_passthroughGroup}}</th>
 					</tr>
+					</thead>
+					<tbody>
+					{{#devlist}}
+						<tr class="c-{{vendor}}-{{device}} tr">
+							<td>{{vendor}}:{{device}} [{{rev}}]</td>
+							<td>
+								<table class="slx-ellipsis">
+									<tr>
+										<td {{^device_name}}class="query-{{vendor}}-{{device}}" {{/device_name}}>
+											{{device_name}}
+										</td>
+									</tr>
+								</table>
+								<div class="small {{^vendor_name}}query-{{vendor}}{{/vendor_name}}">
+									{{vendor_name}}
+								</div>
+							</td>
+							<td class="text-right">{{connected_count}}</td>
+							<td>
+								<select name="ptgroup[{{hwid}}]"
+										  class="form-control {{#custom_groups}}ptgroup-select{{/custom_groups}}">
+									<option value="">{{lang_noPassthroughGroup}}</option>
+									{{#ptlist}}
+										<option value="{{ptid}}" {{selected}}>{{ptname}}</option>
+									{{/ptlist}}
+								</select>
+							</td>
+						</tr>
+					{{/devlist}}
+					</tbody>
 				</table>
-				<div class="small {{^vendor_name}}query-{{vendor}}{{/vendor_name}}">
-					{{vendor_name}}
-				</div>
-			</td>
-			<td class="text-right">{{connected_count}}</td>
-			<td>
-				<select name="ptgroup[{{hwid}}]" class="form-control {{#custom_groups}}ptgroup-select{{/custom_groups}}">
-					<option value="">{{lang_noPassthroughGroup}}</option>
-					{{#ptlist}}
-					<option value="{{ptid}}" {{selected}}>{{ptname}}</option>
-					{{/ptlist}}
-				</select>
-			</td>
-			{{/class_name}}
-		</tr>
-		{{/list}}
-		</tbody>
-	</table>
-	<div id="new-groups"></div>
-	<div style="position:fixed;bottom:0;right:0;padding:8px;background:#fff;width:100%;border-top:1px solid #ddd">
-		<div class="buttonbar text-right">
-			<button type="button" data-target="#add-group-form" data-toggle="modal" class="btn btn-default">
-				<span class="glyphicon glyphicon-plus"></span>
-				{{lang_add}}
-			</button>
-			<button type="submit" name="action" value="save-hwlist" class="btn btn-success">
-				<span class="glyphicon glyphicon-floppy-disk"></span>
-				{{lang_save}}
-			</button>
+			</div>
 		</div>
+	{{/classlist}}
+</form>
+<div id="new-groups"></div>
+<div style="position:fixed;bottom:0;right:0;padding:8px;background:#fff;width:100%;border-top:1px solid #ddd">
+	<div class="buttonbar text-right">
+		<button type="button" data-target="#add-group-form" data-toggle="modal" class="btn btn-default">
+			<span class="glyphicon glyphicon-plus"></span>
+			{{lang_add}}
+		</button>
+		<button type="submit" name="action" value="save-hwlist" class="btn btn-success">
+			<span class="glyphicon glyphicon-floppy-disk"></span>
+			{{lang_save}}
+		</button>
 	</div>
+</div>
 </form>
 
 <div class="modal fade" id="add-group-form" tabindex="-1" role="dialog">
@@ -79,7 +90,8 @@
 			</div>
 			<div class="modal-footer">
 				<button type="button" class="btn btn-default"
-						  data-dismiss="modal">{{lang_cancel}}</button>
+						  data-dismiss="modal">{{lang_cancel}}
+				</button>
 				<button id="add-group-button" type="button" class="btn btn-success" data-dismiss="modal">
 					<span class="glyphicon glyphicon-plus"></span>
 					{{lang_addGroup}}
@@ -90,24 +102,25 @@
 </div>
 
 <script>
-	document.addEventListener('DOMContentLoaded', function() {
+	document.addEventListener('DOMContentLoaded', function () {
 		$('#add-group-button').click(function () {
 			var gid = $('#group-id').val().replace(/[^a-zA-Z0-9_\-]/g, '').toUpperCase();
 			var title = $('#group-title').val().trim();
 			if (gid.length === 0)
 				return;
 			$('#new-groups').append($('<input type="hidden">')
-				.attr('name', 'newgroup[' + gid + ']')
-				.attr('value', title));
-			$('.ptgroup-select').each(function() {
+					.attr('name', 'newgroup[' + gid + ']')
+					.attr('value', title));
+			$('.ptgroup-select').each(function () {
 				$(this).append($('<option>').attr('value', gid).text(gid + ' (' + title + ')'));
 			});
 		});
 		hashChanged();
 	});
-	window.addEventListener('hashchange', function() {
+	window.addEventListener('hashchange', function () {
 		hashChanged();
 	});
+
 	function hashChanged() {
 		var c = window.location.hash;
 		$('tr.tr').removeClass('bg-success');
-- 
cgit v1.2.3-55-g7522