phpengine/ui/admin/labelstatus.tpl

<div class="col-xl-12">
	<div class="card-box">
		<div class="dropdown pull-right">
			<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
				<i class="mdi mdi-dots-vertical"></i>
			</a>
			<div class="dropdown-menu dropdown-menu-right">
				<!-- item-->
				<a href="javascript:ToggleSelectAll('#datatable', true);" class="dropdown-item">Select All</a>
				<a href="javascript:ToggleSelectAll('#datatable', false);" class="dropdown-item">Deselect All</a>
				<!-- item-->
				<div class="dropdown-divider"></div>
				<!-- item-->
				<a href="javascript:ESLMultiOperations('resetfailcounter');" class="dropdown-item">Reset Fail Counter</a>
				<!-- item-->
				<a href="javascript:ESLMultiOperations('blinklabels')" class="dropdown-item">Blink</a>
				<!-- item-->
				<a href="javascript:ESLMultiOperations('unbind');" class="dropdown-item">Unbind</a>
				<!-- item-->
				<div class="dropdown-divider"></div>
				<!-- item-->

				<a href="javascript:TemplateSelector(false);" class="dropdown-item">Change Template</a>
				<a href="javascript:TemplateSelector(true);" class="dropdown-item">Change Template (reload)</a>
			</div>
		</div>

		<h4 class="header-title mt-0 m-b-30">ESL Status</h4>

		<div class="table-responsive-sm">
			<table id="datatable" class="table table-sm dt-responsive responsive table-bordered mb-0 table-striped">
				<thead>
				<tr>
					<th></th>
					<th>Label ID</th>
					<th>Bat Level</th>
					<th>Status</th>
					<th>Template</th>
					<th>Device Name</th>
					<th>DT type</th>
					<th>Display Resolution</th>
					<th>Leds Count</th>
					<th>rssi</th>
					<th class="text-center">OPS</th>
				</tr>
				</thead>
				<tbody>
				<repeat group="{{@ESL_STATUS}}" key="{{@LABEL_ID}}" value="{{@STATUS}}">

					<tr>
						<td class="text-center"></td>
						<td class="text-white font-weight-bold">{{@LABEL_ID}}</td>
						<td class="text-center"><i class="text-warning fa fa-battery-{{@BATLEV_ICONS[@STATUS['status']['bat_level']]}}"></i></td>
						<td class="text-center"><span class="badge badge-{{@STATUS_BADGE_COLOR[@STATUS['data']['esl_state']]??'primary'}}">{{@STATUS['data']['esl_state']}}</span></td>
						<td>[{{@STATUS['data']['template_id']}}] {{@STATUS['data']['template_name']}}</td>
						<td>{{@STATUS['data']['devicename']}}</td>
						<td>{{@STATUS['data']['devtype_id']}}</td>
						<td>{{@STATUS['data']['resolution']}}</td>
						<td>{{@STATUS['data']['led']}}</td>
						<td><span class="text-danger">{{@STATUS['status']['rssi']}}</span></td>
						<td class="text-center">
							<button onclick="OpenESLDetails('{{@LABEL_ID}}')" class="btn btn-sm btn-primary">Details</button>
						</td>
					</tr>

				</repeat>
				</tbody>
			</table>
		</div>
	</div>
</div>

{* Modal Status *}
<div class="modal fade statusmodal" tabindex="-1" role="dialog" aria-labelledby="statusmodal" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title mt-0" id="statusmodal">Status label <span id="labelID"></span></h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			</div>
			<div class="modal-body">
				<div class="row">

					<div class="col-6">
						<div class="card" id="status_values">
							<h5 class="card-header">RSSI <span class="badge badge-warning text-inverse" id="esl_rssi"></span></h5>
							<div class="card-body">
								<table id="esl_rssi_list" class="table table-borderless table-sm">
								</table>
							</div>
						</div>
					</div>

					<div class="col-6">
						<div class="card">
							<h5 class="card-header">Template</h5>
							<div id="svgtpl" class="card-body"></div>
						</div>
					</div>

				</div>
				<div class="row">

					<div class="col-6 mt-2">
						<div class="card">
							<h5 class="card-header">Label info</h5>
							<div class="card-body">
								<table class="table table-borderless table-sm table" id="cardbox_esl_status">
									<tr>
										<td>Hello period</td>
										<td><span class="badge badge-success" id="hello_period"></span></td>
									</tr>
									<tr>
										<td>Blink count</td>
										<td><span class="badge badge-success" id="blink_count"></span></td>
									</tr>
									<tr>
										<td>Hardware Version</td>
										<td>
											<div class="badge badge-success"><span id="hard_major"></span>.<span id="hard_minor"></span>.<span id="hard_patch"></span></div>
										</td>
									</tr>
									<tr>
										<td>Software Version</td>
										<td>
											<div class="badge badge-success"><span id="soft_major"></span>.<span id="soft_minor"></span>.<span id="soft_patch"></span></div>
										</td>
									</tr>
								</table>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>

{* Modal Template Selector*}
<div class="modal fade templateselector" tabindex="-1" role="dialog" aria-labelledby="templateselector" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-full modal-dialog-centered">
		<div class="modal-content">

			<div class="modal-header">
				<h4 class="modal-title mt-0" id="templateselector">Template Selector</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			</div>

			<div class="modal-body"></div>
		</div>
	</div>
</div>