path: root/modules-available/passthrough/templates/hardware-list.html

<form method="post" action="?do=passthrough">
	<input type="hidden" name="token" value="{{token}}">
	{{#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>
				{{#collapse}}
				</span>
				{{/collapse}}
			</div>
			<div id="div-class-{{class}}" {{#collapse}}class="collapse"{{/collapse}}>
				<table class="table">
					<thead>
					<tr>
						<th class="text-nowrap slx-smallcol">{{lang_deviceIdNumeric}}</th>
						<th>{{lang_deviceName}}</th>
						<th class="text-nowrap slx-smallcol">{{lang_useCount}}</th>
						<th class="text-nowrap">{{lang_passthroughGroup}}</th>
					</tr>
					</thead>
					<tbody>
					{{#devlist}}
						<tr class="c-{{vendor}}-{{device}} tr">
							<td class="text-nowrap">{{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}}">
									<a href="?show=list&amp;do=statistics&amp;filter[pcidev]=1&amp;op[pcidev]=%3D&amp;arg[pcidev]={{vendor}},{{class}}">
									{{vendor_name}}
									</a>
								</div>
							</td>
							<td class="text-right">
								<a href="?show=list&amp;do=statistics&amp;filter[pcidev]=1&amp;op[pcidev]=%3D&amp;arg[pcidev]={{vendor}}:{{device}}">
									{{connected_count}}
								</a>
							</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>
		</div>
	{{/classlist}}
	<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">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<b>{{lang_addPassthroughGroup}}</b>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="group-id">{{lang_groupId}}</label>
					<input type="text" name="group-id" id="group-id" class="form-control">
				</div>
				<div class="form-group">
					<label for="group-title">{{lang_groupTitle}}</label>
					<input type="text" name="group-title" id="group-title" class="form-control">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"
						  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}}
				</button>
			</div>
		</div>
	</div>
</div>

<script>
	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 () {
				$(this).append($('<option>').attr('value', gid).text(gid + ' (' + title + ')'));
			});
		});
		hashChanged();
	});
	window.addEventListener('hashchange', function () {
		hashChanged();
	});

	function hashChanged() {
		var c = window.location.hash;
		$('tr.tr').removeClass('bg-success');
		if (c && c.length > 1) {
			var d = $('.c-' + c.substr(1)).addClass('bg-success');
			d.closest('.collapse').collapse('show');
			if (d.length > 0) d[0].scrollIntoView();
		}
	}
</script>