FIX: template selector

CHG: es6 new module boilerplate

src/OpenMind/Admin/Admin.php

@@ -32,7 +32,6 @@ class Admin extends PluginStrategy
 		$this->AddMenuItem('ESL Ops', ['mainMenu' => 'adminMainMenu', 'mdiClass' => 'label', 'permissionName' => 'admin']);
 		$this->AddMenuItem('Status', ['mainMenu' => 'ESL Ops', 'url' => 'admin/eslstatus', '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']);
 
 		$roles = new UserRoles();
 		$roles->add('admin');

ui/admin/assets/js/ModalEslDetails.js

@@ -97,9 +97,10 @@ export class ModalEslDetails {
 					toastr.error(err.url, `${err.status} (${err.statusText})`);
 				else
 					toastr.error(err);
-			}).finally(function () {
-			$('#spinnerloader').addClass('d-none');
-		});
+			})
+			.finally(function () {
+				$('#spinnerloader').addClass('d-none');
+			});
 
 		this.abort = req.abort;
 	}

ui/admin/assets/js/ModalTemplateSelector.js

@@ -1,56 +1,64 @@
 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})`));
-}
+// PRIVATE METHODS
+const COL_ID_IDX = 1;
+const COL_RESOLUTION_IDX = 7;
+
+// MAIN CLASS
+export class ModalTemplateSelector {
+	constructor(modalClass) {
+		let self = this;
+
+		this.modalClass = modalClass;
+		this.timer = null;
+		this.AbortLoadTemplate = null;
+
+		$(modalClass).on('hide.bs.modal', function () {
+			self.AbortLoadTemplate();
+			self.ClearModal();
+		});
+	}
 
-/**
- * Load html for template selector
- *
- * @param bool clearCache true clear cache
- */
-function TemplateSelector(clearCache) {
+	ClearModal() {
+		$(`${this.modalClass} .modal-body`).html('Loading Templates...');
+	}
 
-	let AbortLoadTemplate;
+	/**
+	 * Change display of ESL labels
+	 *
+	 * @param arrLabels
+	 * @param idTemplate
+	 */
+	setTemplate(arrLabels, idTemplate) {
+		AjaxReq(`${BASEURL}/admin/config`, {
+			method: 'POST',
+			body: JSON.stringify({
+				"method": "SetDisplay",
+				"labels": arrLabels,
+				"id": idTemplate
+			})
+		}).fetchPromise()
+			.then(json => {
+				$(`${this.modalClass}`).modal('hide');
+				toastr.success(json.err);
+			})
+			.catch(err => toastr.error(err.url, `${err.status} (${err.statusText})`));
+	}
 
-	$('.templateselector').on('hide.bs.modal', function () {
-		$('#spinnerloader').addClass('d-none');
-		AbortLoadTemplate();
-		$('.templateselector .modal-body').html('');
-	});
+	Open(clearCache) {
+		let self = this;
 
-	$('.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) {
+		if (selectedRows.length === 0) {
 			toastr.warning('Nessuna label selezionata');
-			e.preventDefault();
-			e.stopImmediatePropagation();
-			return true;
+			return;
 		}
 
+		$(`${this.modalClass}`).modal('show');
+
 		$('#spinnerloader').removeClass('d-none');
 
 		let req = AjaxReq(`${BASEURL}/admin/config`, {
@@ -62,48 +70,31 @@ function TemplateSelector(clearCache) {
 			})
 		});
 
-		AbortLoadTemplate = req.abort;
+		this.AbortLoadTemplate = req.abort;
 
 		req.fetchPromise()
 			.then(json => {
-				if (json.err == 0) {
-					$('.templateselector .modal-body').html(json.value);
+				if (json.err === 0) {
+					$(`${self.modalClass} .modal-body`).html(json.value);
 
 					// Add onlick event to all template thumbs
-					$('.templateselector a').on('click', function () {
-						SetTemplate(selectedLabels, this.id);
+					$(`${self.modalClass} a`).on('click', function () {
+						self.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');
+			.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')
+			});
 	}
 }

ui/admin/assets/js/admin.js

@@ -1,10 +1,6 @@
 import {ModalEslDetails} from "./ModalEslDetails";
-import * as OMGUtils from "./OMGUtils";
 import {ModalTemplateSelector} from "./ModalTemplateSelector";
-
-const COL_DT_IDX = 6;
-const COL_ID_IDX = 1;
-const COL_RESOLUTION_IDX = 7;
+import * as OMGUtils from "./OMGUtils";
 
 let modalEslDetails;
 let modalTemplateSelector;
@@ -17,7 +13,7 @@ function SaveConfig() {
 			"method": "saveconfig",
 			"value": config
 		})
-	})
+	}).fetchPromise()
 		.then(json => toastr.success(json.err))
 		.catch(err => toastr.error(err.url, `${err.status} (${err.statusText})`));
 }
@@ -28,7 +24,7 @@ function LoadConfig() {
 		body: JSON.stringify({
 			"method": "loadconfig"
 		})
-	})
+	}).fetchPromise()
 		.then(json => {
 			$('#config_text').val(json.value);
 			toastr.success(json.err);
@@ -51,7 +47,7 @@ function ESLMultiOperations(method) {
 				"method": method,
 				"labelid": labelID[1]
 			})
-		})
+		}).fetchPromise()
 			.then(json => {
 				if (json.err == 0)
 					toastr.success(json.value);
@@ -63,6 +59,22 @@ function ESLMultiOperations(method) {
 	});
 }
 
+/**
+ * Open the template selector modal window
+ *
+ * @param bool clearCache
+ */
+function TemplateSelector(clearCache) {
+	modalTemplateSelector.Open(clearCache);
+}
+
+function ToggleSelectAll(className, selectAll) {
+	if (selectAll)
+		$(className).DataTable().rows().select();
+	else
+		$(className).DataTable().rows().deselect();
+}
+
 // MAIN JS
 document.addEventListener('DOMContentLoaded', function () {
 
@@ -114,5 +126,6 @@ document.addEventListener('DOMContentLoaded', function () {
 	window.SaveConfig = SaveConfig;
 	window.ESLMultiOperations = ESLMultiOperations;
 	window.TemplateSelector = TemplateSelector;
+	window.ToggleSelectAll = ToggleSelectAll;
 
 });

ui/admin/labelstatus.tpl

@@ -5,6 +5,11 @@
 				<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-->
@@ -12,7 +17,11 @@
 				<!-- 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>