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:void(0);" class="dropdown-item">Refresh Status</a>
				<!-- item-->
				<a href="javascript:ESLMultiOperations('blinklabels')" class="dropdown-item">Blink</a>
				<!-- item-->
				<a href="javascript:ESLMultiOperations('unbind');" class="dropdown-item">Unbind</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>Status</th>
					<th>Template</th>
					<th>Device Name</th>
					<th>DT type</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 text-center align-middle">{{@LABEL_ID}}</td>
						<td><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']['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 class="card-body">
								<img class="w-100" id="svgpath" src="">
							</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>