phpengine/ui/js/index.js

import $ from 'jquery';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../css/omlink.scss';

/**
 * Main Javascript file
 *
 * @author Open Mind
 * @date 27/06/2018
 * @time 17:42
 */

let CUSTOM_NOTIFY = 0x4000;
let REFRESH_FILTERS = CUSTOM_NOTIFY + 1;

const fetchHeaders = {
	'Accept': 'text/html',
	'Content-Type': 'text/html',
	'X-Requested-With': 'XMLHttpRequest',
	'Cache-Control': 'no-cache',
	'Pragma': 'no-cache',
	'Expires': '0'
};

/* usefull if a blinking text is need, like in MaxMara project, you need to place this code in html:
 *
 * <nav class="navbar navbar-collapse p-0">
 *   <span class="navbar-text blink" style="color: red" id="statusbartext"></span>
 * </nav>
 */
function SetStatusBarText(msg) {
	$('#statusbartext').text(msg);
	setTimeout(() => {
		$('#statusbartext').text('');
	}, 60000);
}

function NotificationBuilder(notifications) {
	let tplNotify = '';
	let htmlNotificationArea = '';
	if (notifications.length === 0) {
		$('#notification_area_button').addClass('disabled');
		$('#sysmsgnum').empty();
	} else {
		let notificationCount = 0;
		notifications.forEach(function (element) {
// If notification codes are >CUSTON_NOTIFY means that are special codes to skip in this logic
			if (element.code > CUSTOM_NOTIFY)
				return;

			tplNotify += `<a class="dropdown-item" href="javascript:NotificationDelete('${element.link}', ${element.code})">[${element.timestamp}] ${element.caption}<span class="ml-1 badge badge-danger">${element.count}</span></a>`;
			notificationCount++;
		});

		htmlNotificationArea = `
${tplNotify}
<a id="notification_area_deleteall" class="dropdown-item text-center" href="javascript:NotificationDelete('#', 0)" >Cancella tutto</a>
`;
		$('#notification_area_button').removeClass('disabled');
		$('#sysmsgnum').html(notificationCount);
	}

	$('#notification_area').html(htmlNotificationArea);
}

function refreshNotificationArea() {
	fetch(`${BASEURL}/api.system.getserverstatus`, {headers: fetchHeaders})
		.then(resp => {
			if (resp.status === 200)
				return resp.json();
			else
				return Promise.reject("getserverstatus: error");
		})
		.then(data => {
			NotificationBuilder(data.notify);
		})
		.catch(err => {
			console.log(err);
		});
}

function NotificationDelete(link, code) {
	fetch(`${BASEURL}/api.system.removenotification/${code}`, {method: "POST"})
		.then(() => {
			if ((link != null) && (link.length != 0) && (link != '#'))
				window.location.href = `${BASEURL}${link}`;
		})
		.catch(() => {
			alert('NotificationDelete error');
		});
}

function SetupConfirmationDialog() {
	$('.requestconfirm').on('click', function (ev) {
		let confirmText = $(this).data('confirmtext');
		if (!confirm(confirmText))
			ev.preventDefault();
	});
}

function ForceFocus() {
	setInterval(function () {
		$("[forcefocus]").focus();
	}, 1000);
}

document.addEventListener('DOMContentLoaded', function () {
	SetupConfirmationDialog();

	refreshNotificationArea();

	ForceFocus(); // INPUT AUTOFOCUS

	$('body').on('submit', 'form', function () {
		$('body').focus();
		$('form input,form select').prop('readonly', true);

		// Manual submit for more control
		this.submit();
		return false;
	});

	setInterval(() => {
		refreshNotificationArea();
	}, 3000);
});