.

package.json

@@ -6,6 +6,7 @@
 	"author": "Open Mind",
 	"scripts": {
 		"clean": "shx --silent rm -rf deploy.tar.gz tmp node_modules ui/admin/node_modules src_minified assets/frontend assets/admin Site.log cfg/*.old ui/*/masterpage.tpl fbtpl *.tgz",
+		"preinstall": "node scripts/preinstall.js",
 		"postinstall": "node scripts/postinstall.js",
 		"buildDev": "webpack --mode=none --display-error-details",
 		"buildProd": "webpack --mode=production --display-error-details",
@@ -26,7 +27,8 @@
 		"terser-webpack-plugin",
 		"url-loader",
 		"webpack",
-		"webpack-cli"
+		"webpack-cli",
+		"shx"
 	],
 	"dependencies": {
 		"bootstrap": "^4.3.1",

scripts/postinstall.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 const fs = require('fs');
 const {execSync} = require('child_process');

scripts/preinstall.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const fs = require('fs');
+const {execSync} = require('child_process');
+
+let packageJson = JSON.parse(fs.readFileSync('package.json'));
+
+let globalDependencies = packageJson.globalDependencies.join(' ');
+
+execSync(`npm i -g ${globalDependencies}`);

src/OpenMind/Admin/Admin.php

@@ -18,7 +18,6 @@ class Admin extends PluginStrategy
 		$this->AddRoute('GET @admin: /admin/eslstatus', __NAMESPACE__ . '\Pages->ESLStatus');
 		$this->AddRoute('GET @admin: /admin/apstatus', __NAMESPACE__ . '\Pages->APStatus');
 		$this->AddRoute('GET @admin: /admin/omlsettings', __NAMESPACE__ . '\Pages->OML_Settings');
-		$this->AddRoute('POST @admin: /admin/commands', __NAMESPACE__ . '\Pages->Commands');
 
 		// Admin Load/Save
 		$this->AddRoute('POST @admin: /admin/config', __NAMESPACE__ . '\Pages->Config');
@@ -32,7 +31,6 @@ class Admin extends PluginStrategy
 		// Menu: ESL Ops
 		$this->AddMenuItem('ESL Ops', ['mainMenu' => 'adminMainMenu', 'mdiClass' => 'label', 'permissionName' => 'admin']);
 		$this->AddMenuItem('Status', ['mainMenu' => 'ESL Ops', 'url' => 'admin/eslstatus', 'permissionName' => 'admin']);
-		$this->AddMenuItem('Templates', ['mainMenu' => 'ESL Ops', 'url' => 'admin/templates', 'permissionName' => 'admin']);
 		$this->AddMenuItem('AP Status', ['mainMenu' => 'ESL Ops', 'url' => 'admin/apstatus', 'permissionName' => 'admin']);
 		$this->AddMenuItem('FB Core Settings', ['mainMenu' => 'ESL Ops', 'url' => 'admin/fbcoresettings', 'permissionName' => 'admin']);
 

src/OpenMind/Admin/Pages.php

@@ -37,13 +37,18 @@ class Pages extends Controller
 		$eslStatus = $this->findBoxCore->GetAllESLStatus();
 
 		$f3->set('STATUS_BADGE_COLOR', [
-			'BLOCKED,FC' => 'info',
 			'OFFLINE' => 'warning',
 			'BLOCKED,FC' => 'danger',
 			'NO_STATUS' => 'light',
 			'OK' => 'success'
 		]);
 
+		$f3->set('BATLEV_ICONS', [
+			'GOOD' => 'full', // 100% - 60%
+			'LOW' => 'half',  //  60% - 30%
+			'BAD' => 'empty', //  30% - 0%
+		]);
+
 		$f3->set('ESL_STATUS', $eslStatus);
 		$f3->set('PAGENAME', 'Dashboard');
 		$f3->set('CONTENT', 'labelstatus.tpl');
@@ -155,32 +160,23 @@ class Pages extends Controller
 				]);
 
 				break;
-		}
-
-		return;
-	}
-
-	/**
-	 * General Commands controller
-	 *
-	 * @param $f3
-	 */
-	public function Commands($f3)
-	{
-		$bodyPostData = $f3->get('BODY');
-		if (strlen($bodyPostData) == 0) {
-			echo json_encode([
-				"err" => "Empty body command"
-			]);
-			return;
-		}
 
-		$Command = json_decode($bodyPostData);
-		switch ($Command->method) {
 			case 'TemplateSelector':
-				$this->TemplateSelector($f3, $Command);
+				$this->TemplateSelector($f3, $configOBJ);
+				break;
+
+			case 'SetDisplay':
+				foreach($configOBJ->labels as $labelID) {
+					$esl = new SmartESL($this->findBoxCore, [$labelID]);
+					$esl->Display($configOBJ->id, $labelID);
+				}
+				echo json_encode([
+					"err" => "Display command successfull"
+				]);
 				break;
+
 		}
+		return;
 	}
 
 	private function TemplateSelector($f3, $Command)
@@ -197,14 +193,19 @@ class Pages extends Controller
 		if ($templates != null) {
 			foreach($templates as $item) {
 
-				$DTs = explode(',', $item['labeltypes']);
-				if (($Command->dt != 0) && !in_array($Command->dt, $DTs))
+				if (!in_array($item['resolution'], $Command->resolution))
 					continue;
 
 				if (!file_exists("fbtpl/{$item['template_id']}.svg"))
 					$this->findBoxCore->GetTemplateImage($item['template_id']);
 
-				$tplFileNames["[{$item['template_id']}] {$item['name']}"] = file_get_contents("fbtpl/{$item['template_id']}.svg");
+				$tplFileNames[] = [
+					"id" => $item['template_id'],
+					"name" => $item['name'],
+					"resolution" => $item['resolution'],
+					"title" => $item['name'],
+					"svg" => file_get_contents("fbtpl/{$item['template_id']}.svg")
+				];
 			}
 		}
 

src/OpenMind/FindBox/FindBoxCoreSystem.php

@@ -336,8 +336,9 @@ class FindBoxCoreSystem
 
 		$svgNode = $svgTemplate->getElementsByTagName('svg');
 		if ($svgNode->length > 0) {
-			$svgNode[0]->setAttribute('width', 300);
-			$svgNode[0]->setAttribute('height', 180);
+			$svgNode[0]->setAttribute('class', 'w-100'); // Just fit everywhere
+//			$svgNode[0]->setAttribute('width', 300);
+//			$svgNode[0]->setAttribute('height', 180);
 			$svgNode[0]->removeAttribute('transform');
 		}
 

ui/admin/assets/js/ModalEslDetails.js

@@ -1,11 +1,55 @@
 import {AjaxReq} from "./OMGUtils";
 
+// Private Methods
+function clearStatusModalFields() {
+	$('#esl_rssi_list').html('');
+	$('#svgtpl').html('');
+
+	$('#cardbox_esl_status span').each((i, o) => {
+		$('#cardbox_esl_status #' + o.id).html('');
+	});
+}
+
+function fillESLDetails(ESLstatus) {
+	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)) {
+		// language=HTML
+		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) {
+		// Retrieve SVG from server
+		$.get(BASEURL + '/' + ESLstatus.svgPath, data => {
+			$('#svgtpl').html(data);
+		}, "text");
+	}
+}
+
+// MAIN CLASS
 export class ModalEslDetails {
 	constructor(modalClass) {
-		this._FetchSignal = null;
+		let self = this;
+
+		this.abort = null;
 		this.modalClass = modalClass;
+		this.timer = null;
 
-		let self = this;
 
 		$(modalClass).on('show.bs.modal', function () {
 			let labelID = $(`${modalClass} #labelID`).html();
@@ -13,66 +57,41 @@ export class ModalEslDetails {
 		});
 
 		$(modalClass).on('hide.bs.modal', function () {
-			self._FetchSignal.abort();
+			self.abort();
+			clearTimeout(self.timer);
 		});
 	}
 
-	_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();
+		clearStatusModalFields();
 
 		$(`${this.modalClass} #labelID`).html(labelID);
 		$(`${this.modalClass}`).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) {
+		let self = this;
+
 		$('#spinnerloader').removeClass('d-none');
 
-		let self = this;
 
-		AjaxReq(`${BASEURL}/admin/config`, {
+		let req = AjaxReq(`${BASEURL}/admin/config`, {
 			method: 'POST',
-			body: JSON.stringify({"method": "geteslstatus", "label_id": labelID}),
-			signal: self._FetchSignal.signal
-		})
+			body: JSON.stringify({"method": "geteslstatus", "label_id": labelID})
+		});
+
+		req.fetchPromise()
 			.then(json => {
-				self._fillESLDetails(json);
+				fillESLDetails(json);
 				toastr.success(json.err);
 				if ($(this.modalClass).is(':visible'))
-					setTimeout(function () {
+					self.timer = setTimeout(function () {
 						self.RefreshESLStatus(labelID);
 					}, 3000);
 			})
 			.catch(err => {
-				if (err.name == 'AbortError')
+				if (err.name === 'AbortError')
 					return;
 				if (err.url !== undefined)
 					toastr.error(err.url, `${err.status} (${err.statusText})`);
@@ -81,5 +100,7 @@ export class ModalEslDetails {
 			}).finally(function () {
 			$('#spinnerloader').addClass('d-none');
 		});
+
+		this.abort = req.abort;
 	}
 }

ui/admin/assets/js/ModalTemplateSelector.js

@@ -0,0 +1,109 @@
+import {AjaxReq} from "./OMGUtils";
+
+// Private Methods
+
+/**
+ * Change display of ESL labels
+ *
+ * @param arrLabels
+ * @param idTemplate
+ */
+function SetTemplate(arrLabels, idTemplate) {
+	AjaxReq(`${BASEURL}/admin/config`, {
+		method: 'POST',
+		body: JSON.stringify({
+			"method": "SetDisplay",
+			"labels": arrLabels,
+			"id": idTemplate
+		})
+	}).fetchPromise()
+		.then(json => {
+			$('.templateselector').modal('hide');
+			toastr.success(json.err);
+		})
+		.catch(err => toastr.error(err.url, `${err.status} (${err.statusText})`));
+}
+
+/**
+ * Load html for template selector
+ *
+ * @param bool clearCache true clear cache
+ */
+function TemplateSelector(clearCache) {
+
+	let AbortLoadTemplate;
+
+	$('.templateselector').on('hide.bs.modal', function () {
+		$('#spinnerloader').addClass('d-none');
+		AbortLoadTemplate();
+		$('.templateselector .modal-body').html('');
+	});
+
+	$('.templateselector').on('show.bs.modal', function (e) {
+		let selectedRows = $('#datatable').DataTable().rows({selected: true}).data().toArray();
+		let selectedLabels = selectedRows.map(v => v[COL_ID_IDX]);
+		let resolutions = selectedRows.map(v => v[COL_RESOLUTION_IDX]);
+
+		if (selectedRows.length == 0) {
+			toastr.warning('Nessuna label selezionata');
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			return true;
+		}
+
+		$('#spinnerloader').removeClass('d-none');
+
+		let req = AjaxReq(`${BASEURL}/admin/config`, {
+			method: 'POST',
+			body: JSON.stringify({
+				"method": 'TemplateSelector',
+				"clearCache": clearCache,
+				"resolution": resolutions
+			})
+		});
+
+		AbortLoadTemplate = req.abort;
+
+		req.fetchPromise()
+			.then(json => {
+				if (json.err == 0) {
+					$('.templateselector .modal-body').html(json.value);
+
+					// Add onlick event to all template thumbs
+					$('.templateselector a').on('click', function () {
+						SetTemplate(selectedLabels, this.id);
+					});
+
+				} else
+					toastr.error(json.value);
+			})
+			.catch(err => toastr.error(err.url, `${err.status} (${err.statusText})`))
+			.finally(() => $('#spinnerloader').addClass('d-none'));
+	});
+
+	$('.templateselector').modal('show');
+}
+
+// MAIN CLASS
+export class ModalTemplateSelector {
+	constructor(modalClass) {
+		let self = this;
+
+		this.abort = null;
+		this.modalClass = modalClass;
+		this.timer = null;
+
+
+		$(modalClass).on('show.bs.modal', function () {
+		});
+
+		$(modalClass).on('hide.bs.modal', function () {
+			self.abort();
+			clearTimeout(self.timer);
+		});
+	}
+
+	OpenESLDetails(labelID) {
+		$(`${this.modalClass}`).modal('show');
+	}
+}

ui/admin/assets/js/OMGUtils.js

@@ -16,18 +16,33 @@ const fetchHeaders = {
  *
  * @param url URL of RESTful api to call
  * @param options the fetch() options
- * @returns {Promise<Response | never>}
+ * @returns Object {Promise, signal: AbortController}
  */
 export function AjaxReq(url, options) {
-	let defaults = {headers: fetchHeaders};
+	let fetchSignal = new AbortController();
+	let defaults = {
+		headers: fetchHeaders,
+		signal: fetchSignal.signal
+	};
 	// Extend default options
 	Object.assign(defaults, options);
 
-	return fetch(url, defaults)
+	let fetchPromise = fetch(url, defaults)
 		.then(resp => {
 			if (resp.status === 200)
 				return resp.json();
 			else
 				return Promise.reject(resp);
 		});
+
+	// Add some properties to return value
+	let ret = {};
+	Object.assign(ret, {
+		fetchPromise: () => fetchPromise,
+		abort: function () {
+			fetchSignal.abort()
+		}
+	});
+
+	return ret;
 }

ui/admin/assets/js/admin.js

@@ -1,15 +1,22 @@
 import {ModalEslDetails} from "./ModalEslDetails";
 import * as OMGUtils from "./OMGUtils";
+import {ModalTemplateSelector} from "./ModalTemplateSelector";
 
-const DT_COLUMN = 5;
+const COL_DT_IDX = 6;
+const COL_ID_IDX = 1;
+const COL_RESOLUTION_IDX = 7;
 
-let modalEslDetails = null;
+let modalEslDetails;
+let modalTemplateSelector;
 
 function SaveConfig() {
 	let config = $('#config_text').val();
 	OMGUtils.AjaxReq(`${BASEURL}/admin/config`, {
 		method: 'POST',
-		body: JSON.stringify({"method": "saveconfig", "value": config})
+		body: JSON.stringify({
+			"method": "saveconfig",
+			"value": config
+		})
 	})
 		.then(json => toastr.success(json.err))
 		.catch(err => toastr.error(err.url, `${err.status} (${err.statusText})`));
@@ -18,7 +25,9 @@ function SaveConfig() {
 function LoadConfig() {
 	OMGUtils.AjaxReq(`${BASEURL}/admin/config`, {
 		method: 'POST',
-		body: JSON.stringify({"method": "loadconfig"})
+		body: JSON.stringify({
+			"method": "loadconfig"
+		})
 	})
 		.then(json => {
 			$('#config_text').val(json.value);
@@ -38,7 +47,10 @@ function ESLMultiOperations(method) {
 
 		OMGUtils.AjaxReq(`${BASEURL}/admin/config`, {
 			method: 'POST',
-			body: JSON.stringify({"method": method, "labelid": labelID[1]})
+			body: JSON.stringify({
+				"method": method,
+				"labelid": labelID[1]
+			})
 		})
 			.then(json => {
 				if (json.err == 0)
@@ -51,52 +63,11 @@ function ESLMultiOperations(method) {
 	});
 }
 
-/**
- * Load html for template selector
- *
- * @param bool clearCache true clear cache
- */
-function TemplateSelector(clearCache) {
-
-	$('.templateselector').on('hide.bs.modal', function () {
-		$('.templateselector .modal-body').html('');
-	});
-
-	$('.templateselector').on('show.bs.modal', function (e) {
-		let selectedRows = $('#datatable').DataTable().rows({selected: true}).data().toArray();
-		let dt_columns = selectedRows.map(v => v[DT_COLUMN]);
-		let jsonData = JSON.stringify(dt_columns);
-
-		if (selectedRows.length == 0) {
-			toastr.warning('Nessuna label selezionata');
-			e.preventDefault();
-			e.stopImmediatePropagation();
-			return true;
-		}
-
-		$('#spinnerloader').removeClass('d-none');
-
-		OMGUtils.AjaxReq(`${BASEURL}/admin/commands`, {
-			method: 'POST',
-			body: JSON.stringify({"method": 'TemplateSelector', "clearCache": clearCache, "dt": jsonData})
-		})
-			.then(json => {
-				if (json.err == 0)
-					$('.templateselector .modal-body').html(json.value);
-				else
-					toastr.error(json.value);
-			})
-			.catch(err => toastr.error(err.url, `${err.status} (${err.statusText})`))
-			.finally(() => $('#spinnerloader').addClass('d-none'));
-	});
-
-	$('.templateselector').modal('show');
-}
-
 // MAIN JS
 document.addEventListener('DOMContentLoaded', function () {
 
 	modalEslDetails = new ModalEslDetails('.statusmodal');
+	modalTemplateSelector = new ModalTemplateSelector('.templateselector');
 
 	Waves.attach('.btn', ['waves-effect', 'waves-light']);
 	Waves.init();

ui/admin/labelstatus.tpl

@@ -24,10 +24,12 @@
 				<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>
@@ -38,11 +40,13 @@
 
 					<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 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">
@@ -81,9 +85,7 @@
 					<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 id="svgtpl" class="card-body"></div>
 						</div>
 					</div>
 
@@ -120,7 +122,6 @@
 						</div>
 					</div>
 
-
 				</div>
 			</div>
 		</div>
@@ -131,6 +132,7 @@
 <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>

ui/admin/package.json

@@ -6,6 +6,7 @@
 	"description": "OM-Link Admin Module",
 	"author": "Open Mind",
 	"scripts": {
+		"postinstall": "node ../../scripts/postinstall.js",
 		"buildDev": "webpack --mode=none --display-error-details",
 		"buildProd": "webpack --mode=production --display-error-details",
 		"watch": "webpack --mode=none --display-error-details --watch"

ui/admin/templates.tpl

@@ -1,11 +1,11 @@
-<div class="d-flex flex-wrap">
+<div class="d-flex flex-wrap justify-content-center">
 
-	<repeat group="{{@TPLOBJ}}" key="{{@TPL_NAME}}" value="{{@TPL}}">
+	<repeat group="{{@TPLOBJ}}" value="{{@TPL}}">
 
 		<div class="card-box text-white bg-secondary m-1">
 
-			<h4 class="header-title mt-0 m-b-30">{{@TPL_NAME}}</h4>
-			<a href="javascript:toastr.success('sdfsadf')">{{@TPL|raw}}</a>
+			<h4 class="header-title mt-0 m-b-30">[{{@TPL["id"]}}] "{{@TPL["title"]}}" ({{@TPL["resolution"]}})</h4>
+			<a id="{{@TPL['name']}}" href="#">{{@TPL["svg"]|raw}}</a>
 		</div>
 
 	</repeat>