FIX: dataTables selection row and restyle of checkbox

build.js

@@ -36,7 +36,7 @@ compressor.minify({
 );
 
 compressor.minify({
-    compressor: 'uglify-es',
+    compressor: 'uglify-js',
     input: jsList,
     output: 'ui/js/omlink.min.js'
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "OM-Link",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "private": true,
   "description": "OM-Link Engine",
   "scripts": {
@@ -11,9 +11,10 @@
   "author": "Open Mind",
   "dependencies": {
     "bootstrap": "^4.3.1",
-    "jquery": "^3.3.1",
+    "jquery": "^3.4.0",
     "node-minify": "^3.6.0",
     "node-sass": "^4.11.0",
-    "popper.js": "^1.15.0"
+    "popper.js": "^1.15.0",
+    "terser": "^3.17.0"
   }
 }

src/OpenMind/Admin/Admin.php

@@ -19,7 +19,7 @@ class Admin extends PluginStrategy
     $this->AddRoute('GET @admin: /admin/eslissues', __NAMESPACE__ . '\Pages->ESLIssues');
 		$this->AddRoute('GET @admin: /admin/apstatus', __NAMESPACE__ . '\Pages->APStatus');
 		$this->AddRoute('GET @admin: /admin/omlsettings', __NAMESPACE__ . '\Pages->OML_Settings');
-		// Admin Save
+		// Admin Load/Save
 		$this->AddRoute('POST @admin: /admin/config', __NAMESPACE__ . '\Pages->Config');
 
     $this->AddMenuItem('Admin', ['url' => 'admin', 'permissionName' => 'admin']);

src/OpenMind/Admin/Pages.php

@@ -98,6 +98,7 @@ class Pages extends Controller
 				break;
 
 			case 'geteslstatus':
+
 				$labelID = $configOBJ->label_id;
 				$esl = new SmartESL($this->findBoxCore, [$labelID]);
 				$status = $esl->GetStatus(true);

src/OpenMind/Admin/build.css.list

@@ -1,11 +1,10 @@
 ; DataTables
 ui/assets/plugins/datatables/dataTables.bootstrap4.min.css
-ui/assets/plugins/datatables/buttons.bootstrap4.min.css
 
-; Responsive datatable examples
+; Responsive datatable
 ui/assets/plugins/datatables/responsive.bootstrap4.min.css
 
-; Multi Item Selection examples
+; Multi Item Selection
 ui/assets/plugins/datatables/select.bootstrap4.min.css
 
 ; Toastr

src/OpenMind/Admin/build.js

@@ -70,7 +70,7 @@ compressor.minify({
 // Minify+Concatenate JS files it in one file
 console.log('Bundle JS');
 compressor.minify({
-    compressor: 'uglify-es',
+    compressor: 'terser',
     input: libList,
     output: `${BUILD_PATH}/bundle.min.js`
   }

src/OpenMind/Admin/build.js.list

@@ -9,15 +9,6 @@ ui/assets/js/jquery.slimscroll.js
 ui/assets/plugins/datatables/jquery.dataTables.min.js
 ui/assets/plugins/datatables/dataTables.bootstrap4.min.js
 
-;Buttons examples
-ui/assets/plugins/datatables/dataTables.buttons.min.js
-ui/assets/plugins/datatables/buttons.bootstrap4.min.js
-ui/assets/plugins/datatables/jszip.min.js
-ui/assets/plugins/datatables/pdfmake.min.js
-ui/assets/plugins/datatables/vfs_fonts.js
-ui/assets/plugins/datatables/buttons.html5.min.js
-ui/assets/plugins/datatables/buttons.print.min.js
-
 ; Key Tables
 ui/assets/plugins/datatables/dataTables.keyTable.min.js
 
@@ -34,4 +25,5 @@ ui/assets/plugins/toastr/toastr.min.js
 ; App js
 ui/assets/js/jquery.core.js
 ui/assets/js/jquery.app.js
+ui/assets/js/ModalEslDetails.js
 ui/assets/js/admin.js

src/OpenMind/Admin/ui/assets/css/admin.scss

@@ -4,4 +4,25 @@
 
 .debugborder {
 	border: 1px solid red;
-}
+}
+
+table.dataTable tbody tr.selected {
+	color: white;
+	background-color: #68737d;
+}
+
+table.dataTable tbody td.select-checkbox {
+	color: white;
+}
+
+table.dataTable tbody td.select-checkbox::before {
+	width: 20px;
+	height: 20px;
+	border: 2px solid #188ae2;
+}
+
+table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
+	margin-top: -6px;
+	margin-left: -2px;
+	text-shadow: 1px 1px #1997ff, -1px -1px #1997ff, 1px -1px #1997ff, -1px 1px #1997ff;
+}

src/OpenMind/Admin/ui/assets/js/ModalEslDetails.js

@@ -0,0 +1,82 @@
+class ModalEslDetails {
+	constructor() {
+		this._FetchSignal = null;
+
+		let self = this;
+
+		$('.statusmodal').on('shown.bs.modal', function () {
+			let labelID = $('.statusmodal #labelID').html();
+			self.RefreshESLStatus(labelID);
+		});
+
+		$('.statusmodal').on('hide.bs.modal', function () {
+			self._FetchSignal.abort();
+		});
+	}
+
+	_clearStatusModalFields() {
+		$('#esl_rssi_list').html('');
+		$('#svgpath').removeAttr('src');
+
+		$('#cardbox_esl_status span').each((i, o) => {
+			$('#cardbox_esl_status #' + o.id).html('');
+		});
+	};
+
+	OpenESLDetails(labelID) {
+
+		this._FetchSignal = new AbortController();
+
+		this._clearStatusModalFields();
+
+		$('.statusmodal #labelID').html(labelID);
+		$('.statusmodal').modal('show');
+	}
+
+	_fillESLDetails(ESLstatus) {
+		this._clearStatusModalFields();
+
+		$('#cardbox_esl_status span').each((i, o) => {
+			let value = (ESLstatus.value.status[o.id]);
+			$('#cardbox_esl_status #' + o.id).html(value);
+		});
+
+		for (let [ap, rssi] of Object.entries(ESLstatus.value.rssi)) {
+			let ap_rssi = `<tr><td><span class="badge badge-primary">${ap}</span></td><td><span class="badge text-inverse badge-warning">${rssi}</span></td></tr>`;
+			$('#esl_rssi_list').append(ap_rssi);
+		}
+
+		if (ESLstatus.svgPath != null)
+			$('#svgpath').prop('src', BASEURL + '/' + ESLstatus.svgPath);
+	}
+
+	RefreshESLStatus(labelID) {
+		$('#spinnerloader').removeClass('d-none');
+
+		let self = this;
+
+		AjaxReq(`${BASEURL}/admin/config`, {
+			method: 'POST',
+			body: JSON.stringify({"method": "geteslstatus", "label_id": labelID}),
+			signal: self._FetchSignal.signal
+		})
+			.then(json => {
+				self._fillESLDetails(json);
+				toastr.success(json.err);
+				if ($('.statusmodal').is(':visible'))
+					setTimeout(function () {
+						self.RefreshESLStatus(labelID);
+					}, 3000);
+			})
+			.catch(err => {
+				if (err.name == 'AbortError')
+					return;
+				if (err.url !== undefined)
+					toastr.error(err.url, `${err.status} (${err.statusText})`);
+				else
+					toastr.error(err);
+			}).finally(function () {
+			$('#spinnerloader').addClass('d-none');
+		});
+	}
+}

src/OpenMind/Admin/ui/assets/js/admin.js

@@ -1,4 +1,6 @@
-var SignalAbortFetch = null;
+//import {ModalEslDetails} from 'ModalEslDetails';
+
+let modalEslDetails = new ModalEslDetails();
 
 const fetchHeaders = {
 	'Accept': 'text/html',
@@ -9,12 +11,14 @@ const fetchHeaders = {
 	'Expires': '0'
 };
 
-$(function () {
+// MAIN JS
+document.addEventListener('DOMContentLoaded', function () {
+
 	$.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
 		return this.api().column(col, {order: 'index'}).nodes().map(function (td, i) {
-			return $('input', td).prop('checked') ? '1' : '0';
+			return $(td).closest('tr').hasClass('selected') ? '1' : '0';
 		});
-	};
+	}
 
 	// DataTable fix
 	$("#datatable").DataTable({
@@ -30,19 +34,21 @@ $(function () {
 				height: "50vh"
 			})
 		},
-		"columnDefs": [
-			{"orderDataType": "dom-checkbox", "targets": 0},
-			{'orderable': false, "targets": -1}
-		]
-	});
-
-	$('.statusmodal').on('shown.bs.modal', function () {
-		labelID = $('.statusmodal #labelID').html();
-		refreshESLStatus(labelID);
-	});
-
-	$('.statusmodal').on('hide.bs.modal', function () {
-		SignalAbortFetch.abort();
+		columnDefs: [
+			{
+				targets: 0,
+				className: 'select-checkbox',
+				orderDataType: "dom-checkbox"
+			},
+			{
+				targets: -1,
+				orderable: false
+			}
+		],
+		select: {
+			style: 'multi',
+			selector: 'td:first-child',
+		}
 	});
 });
 
@@ -94,60 +100,5 @@ function LoadConfig() {
 }
 
 function OpenESLDetails(labelID) {
-	SignalAbortFetch = new AbortController();
-
-	$('#esl_rssi_list').html('');
-	$('#svgpath').removeAttr('src');
-
-	$('.statusmodal #labelID').html(labelID);
-	$('.statusmodal').modal('show');
-}
-
-function fillESLDetails(ESLstatus) {
-	$('#esl_rssi_list').html('');
-	$('#svgpath').removeAttr('src');
-
-	$('#esl_rssi').html(ESLstatus.value.status.rssi);
-	$('#hello').html(ESLstatus.value.status.hello_period);
-	$('#blink_count').html(ESLstatus.value.status.blink_count);
-	let hardver = `${ESLstatus.value.status.hard_major}.${ESLstatus.value.status.hard_minor}.${ESLstatus.value.status.hard_patch}`;
-	let softver = `${ESLstatus.value.status.soft_major}.${ESLstatus.value.status.soft_minor}.${ESLstatus.value.status.soft_patch}`;
-	$('#hardware_ver').html(hardver);
-	$('#software_ver').html(softver);
-
-	for (let [ap, rssi] of Object.entries(ESLstatus.value.rssi)) {
-		let ap_rssi = `<div><span class="badge badge-primary">${ap}</span><span class="badge text-inverse badge-warning">${rssi}</span></div>`;
-		$('#esl_rssi_list').append(ap_rssi);
-	}
-
-	if (ESLstatus.svgPath != null)
-		$('#svgpath').prop('src', BASEURL + '/' + ESLstatus.svgPath);
-}
-
-function refreshESLStatus(labelID) {
-	$('#spinnerloader').removeClass('d-none');
-
-	AjaxReq(`${BASEURL}/admin/config`, {
-		method: 'POST',
-		body: JSON.stringify({"method": "geteslstatus", "label_id": labelID}),
-		signal: SignalAbortFetch.signal
-	})
-		.then(json => {
-			fillESLDetails(json);
-			toastr.success(json.err);
-			if ($('.statusmodal').is(':visible'))
-				setTimeout(function () {
-					refreshESLStatus(labelID);
-				}, 3000);
-		})
-		.catch(err => {
-			if (err.name == 'AbortError')
-				return;
-			if (err.url !== undefined)
-				toastr.error(err.url, `${err.status} (${err.statusText})`);
-			else
-				toastr.error(err);
-		}).finally(function () {
-		$('#spinnerloader').addClass('d-none');
-	});
+	modalEslDetails.OpenESLDetails(labelID);
 }

src/OpenMind/Admin/ui/labelstatus.tpl

@@ -18,8 +18,8 @@
 
 		<h4 class="header-title mt-0 m-b-30">ESL Status</h4>
 
-		<div class="table-responsive">
-			<table id="datatable" class="table dt-responsive responsive table-bordered mb-0">
+		<div class="table-responsive-sm">
+			<table id="datatable" class="table table-sm dt-responsive responsive table-bordered mb-0">
 				<thead>
 				<tr>
 					<th></th>
@@ -37,15 +37,8 @@
 				<repeat group="{{@ESL_STATUS}}" key="{{@LABEL_ID}}" value="{{@STATUS}}">
 
 					<tr>
-						<td class="text-center">
-
-							<div class="checkbox checkbox-single checkbox-primary">
-								<input id="chk_{{@LABEL_ID}}" type="checkbox" name="sel[]" value="{{@LABEL_ID}}"/>
-								<label></label>
-							</div>
-
-						</td>
-						<td><span class="text-white font-weight-bold">{{@LABEL_ID}}</span></td>
+						<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']]}}">{{@STATUS['data']['esl_state']}}</span></td>
 						<td>[{{@STATUS['data']['template_id']}}] {{@STATUS['data']['template_name']}}</td>
 						<td>{{@STATUS['data']['devicename']}}</td>
@@ -53,7 +46,8 @@
 						<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-primary">Details</button>
+							<button onclick="OpenESLDetails('{{@LABEL_ID}}')" class="btn btn-sm btn-primary">Details</button>
+							<button onclick="log1()" class="btn btn-sm btn-primary">log1</button>
 						</td>
 					</tr>
 
@@ -64,6 +58,14 @@
 	</div>
 </div>
 
+<script>
+	function log1() {
+		let a = $('#datatable').DataTable().rows({selected: true}).data().toArray();
+
+		console.log(a[0][1]);
+	}
+</script>
+
 {* 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">
@@ -79,7 +81,8 @@
 						<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">
-								<div id="esl_rssi_list"></div>
+								<table id="esl_rssi_list" class="table table-borderless table-sm">
+								</table>
 							</div>
 						</div>
 					</div>
@@ -96,14 +99,14 @@
 				</div>
 				<div class="row">
 
-					<div class="col-6">
+					<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 class="table table-borderless table-sm" id="cardbox_esl_status">
 									<tr>
 										<td>Hello period</td>
-										<td><span class="badge badge-success" id="hello"></span></td>
+										<td><span class="badge badge-success" id="hello_period"></span></td>
 									</tr>
 									<tr>
 										<td>Blink count</td>
@@ -111,11 +114,15 @@
 									</tr>
 									<tr>
 										<td>Hardware Version</td>
-										<td><span class="badge badge-success" id="hardware_ver"></span></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><span class="badge badge-success" id="software_ver"></span></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>