[passthrough] Redesign list; collapse non-VGA classes by default

2 files changed, 76 insertions, 61 deletions

diff --git a/modules-available/passthrough/page.inc.php b/modules-available/passthrough/page.inc.php
index 2db2525e..de63673a 100644
--- a/modules-available/passthrough/page.inc.php
+++ b/modules-available/passthrough/page.inc.php
@@ -128,14 +128,16 @@ class Page_Passthrough extends Page
 			if ($row['class'] !== $lastClass) {
 				// Add class row header
 				$lastClass = $row['class'];
-				$finalRows[] = [
+				$finalRows[$lastClass] = [
+					'collapse' => $row['class'] !== '0300',
 					'class' => $row['class'],
 					'class_name' => PciId::getPciId(PciId::DEVCLASS, $row['class'], true) ?: 'Unknown',
+					'devlist' => [],
 				];
 			}
 			$row['vendor_name'] = PciId::getPciId(PciId::VENDOR, $row['vendor'] ?? '');
 			$row['device_name'] = PciId::getPciId(PciId::DEVICE, $row['vendor'] . ':' . $row['device']);
-			$finalRows[] = $row;
+			$finalRows[$lastClass]['devlist'][] = $row;
 			// Build up query
 			if ($row['vendor_name'] === false) {
 				$missing[$row['vendor']] = true;
@@ -144,7 +146,7 @@ class Page_Passthrough extends Page
 				$missing[$row['vendor'] . ':' . $row['device']] = true;
 			}
 		}
-		Render::addTemplate('hardware-list', ['list' => $finalRows]);
+		Render::addTemplate('hardware-list', ['classlist' => array_values($finalRows)]);
 		if (!empty($missing)) {
 			Render::addTemplate('js-pciquery',
 				['missing_ids' => json_encode(array_keys($missing))], 'statistics');
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');