webconsole-plugins/upnp/src/main/resources/res/upnp.html

<script type="text/javascript" src="${pluginRoot}/res/jquery-treeview-1.4/jquery.treeview.pack.js"></script>
<script type="text/javascript" src="${pluginRoot}/res/upnp.js"></script>
<script type="text/javascript">
// <![CDATA[
// i18n
var i18n = {
	dl_title_ok  : '${dialog.title.ok}',
	args_name    : '${args.name}',
	args_type    : '${args.type}',
	args_value   : '${args.value}',
	no_actions   : '${no.actions}',
	no_params_out: '${no.params.out}'
}
// ]]>
</script>

<p class="statline">${status.ok}</p>

<form method="post" enctype="multipart/form-data" action="" onsubmit="return false">
	<div class="ui-widget-header ui-corner-top buttonGroup">
		<button id="reloadDevices">${btn.search}</button>
		<button id="reloadVars" class="ui-state-disabled">${btn.reloadVars}</button>
	</div>
</form>

<table id="plugin_table" style="width: 100%">
	<tr>
		<td id="treeCont" class="ui-widget-content ui-corner-bottom">
			<div id="searching"> <!-- search for devices -->
				${tree.searching}
				<img src="${pluginRoot}/res/loading.gif" alt="${tree.loading.title}" />
			</div>
			<div id="treeBox"> <!-- here comes the tree -->
				<ul id="browser">
					<li>dummy</li>
				</ul>
			</div>
		</td>
		<td id="detailsBox">
			<!-- opened when device is selected -->
			<div id="deviceData" class="ui-helper-hidden">
				<h3>${device.title}</h3>
				<table id="deviceTable" class="nicetable">
					<thead>
						<tr>
							<th>${prop.name}</th>
							<th>${prop.value}</th>
						</tr>
					</thead>
					<tbody>
						<tr><td colspan="2">&nbsp;</td></tr> <!-- dynamic contents -->
					</tbody>
				</table>
			</div>
			<div id="serviceData" class="ui-helper-hidden">
				<h3>${service.title}</h3>
				<table class="nicetable">
					<thead>
						<tr>
							<th>${prop.name}</th>
							<th>${prop.value}</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="ui-priority-primary">${service.id}</td>
							<td id="serviceDataInfoID">&nbsp;</td><!-- dynamic contents -->
						</tr> 
						<tr>
							<td class="ui-priority-primary">${service.type}</td>
							<td id="serviceDataInfoType">&nbsp;</td><!-- dynamic contents -->
						</tr> 
					</tbody>
				</table>

				<h3>${vars.title}</h3>
				<table id="serviceDataVars" class="tablesorter nicetable">
					<thead>
						<tr>
							<th class="col_Name">${vars.name}</th>
							<th class="col_Value">${vars.value}</th>
							<th class="col_SendEvents">${vars.events}</th>
						</tr>
					</thead>
					<tbody><!-- dynamic contents -->
						<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
					</tbody>
				</table>

				<div id="actionsContainer">
					<h3>${actions.title}</h3>
					<div class="ui-widget-header ui-corner-top buttonGroup">
						${actions.select}
						<select name="c">
							<option value="---">---</option>
						</select>
						<button title="${actions.invoke.title}"><span class="ui-icon ui-icon-play">&nbsp;</span></button>
					</div>
					<table class="nicetable">
						<thead>
							<tr>
								<th>${args.name}</th>
								<th>${args.type}</th>
								<th>${args.value}</th>
							</tr>
						</thead>
						<tbody>
							<tr><!-- template -->
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td><input value="" /></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div> <!-- serviceData -->
			&nbsp;
		</td>
	</tr>
</table>