vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-07 01:26:11 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Modals refactor, autofocus support, ESC/ENTER support⌨

Browse Source
This commit is contained in:
jokob-sk
2024-04-25 12:30:05 +10:00
parent 73732a7d0c
commit 8ab3945871
5 changed files with 273 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
front/js/common.js
View File

@@ -278,197 +278,7 @@ function getString (key) {
return result;
}
// -----------------------------------------------------------------------------
// Modal dialog handling
// -----------------------------------------------------------------------------
var modalCallbackFunction = '';
function showModalOK (title, message, callbackFunction) {
showModalOk (title, message, callbackFunction)
}
function showModalOk (title, message, callbackFunction) {
// set captions
$('#modal-ok-title').html (title);
$('#modal-ok-message').html (message);
if(callbackFunction!= null)
{
$("#modal-ok-OK").click(function()
{
callbackFunction()
});
}
// Show modal
$('#modal-ok').modal('show');
}
// -----------------------------------------------------------------------------
function showModalDefault (title, message, btnCancel, btnOK, callbackFunction) {
// set captions
$('#modal-default-title').html (title);
$('#modal-default-message').html (message);
$('#modal-default-cancel').html (btnCancel);
$('#modal-default-OK').html (btnOK);
modalCallbackFunction = callbackFunction;
// Show modal
$('#modal-default').modal('show');
}
// -----------------------------------------------------------------------------
function showModalDefaultStrParam (title, message, btnCancel, btnOK, callbackFunction, param='') {
// set captions
$('#modal-str-title').html (title);
$('#modal-str-message').html (message);
$('#modal-str-cancel').html (btnCancel);
$('#modal-str-OK').html (btnOK);
$("#modal-str-OK").off("click"); //remove existing handlers
$('#modal-str-OK').on('click', function (){
$('#modal-str').modal('hide');
callbackFunction(param)
})
// Show modal
$('#modal-str').modal('show');
}
// -----------------------------------------------------------------------------
function showModalWarning (title, message, btnCancel=getString('Gen_Cancel'), btnOK=getString('Gen_Okay'), callbackFunction=null) {
// set captions
$('#modal-warning-title').html (title);
$('#modal-warning-message').html (message);
$('#modal-warning-cancel').html (btnCancel);
$('#modal-warning-OK').html (btnOK);
if ( callbackFunction != null)
{
modalCallbackFunction = callbackFunction;
}
// Show modal
$('#modal-warning').modal('show');
}
// -----------------------------------------------------------------------------
function showModalInput (title, message, btnCancel=getString('Gen_Cancel'), btnOK=getString('Gen_Okay'), callbackFunction=null) {
// set captions
$('#modal-input-title').html (title);
$('#modal-input-message').html (message);
$('#modal-input-cancel').html (btnCancel);
$('#modal-input-OK').html (btnOK);
if ( callbackFunction != null)
{
modalCallbackFunction = callbackFunction;
}
// Show modal
$('#modal-input').modal('show');
}
// -----------------------------------------------------------------------------
function showModalFieldInput (title, message, btnCancel=getString('Gen_Cancel'), btnOK=getString('Gen_Okay'), curValue="", callbackFunction=null) {
// set captions
prefix = 'modal-field-input'
$(`#${prefix}-title`).html (title);
$(`#${prefix}-message`).html (message);
$(`#${prefix}-cancel`).html (btnCancel);
$(`#${prefix}-OK`).html (btnOK);
if ( callbackFunction != null)
{
modalCallbackFunction = callbackFunction;
}
$(`#${prefix}-field`).val(curValue)
// Show modal
$(`#${prefix}`).modal('show');
}
// -----------------------------------------------------------------------------
function modalDefaultOK () {
// Hide modal
$('#modal-default').modal('hide');
// timer to execute function
window.setTimeout( function() {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function modalDefaultInput () {
// Hide modal
$('#modal-input').modal('hide');
// timer to execute function
window.setTimeout( function() {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function modalDefaultFieldInput () {
// Hide modal
$('#modal-field-input').modal('hide');
// timer to execute function
window.setTimeout( function() {
modalCallbackFunction();
}, 100);
}
// -----------------------------------------------------------------------------
function modalWarningOK () {
// Hide modal
$('#modal-warning').modal('hide');
// timer to execute function
window.setTimeout( function() {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function showMessage (textMessage="") {
if (textMessage.toLowerCase().includes("error") ) {
// show error
alert (textMessage);
} else {
// show temporal notification
$("#alert-message").html (textMessage);
$("#notification").fadeIn(1, function () {
window.setTimeout( function() {
$("#notification").fadeOut(500)
}, 3000);
} );
}
}
// -----------------------------------------------------------------------------
function showTickerAnnouncement(textMessage = "") {
if (textMessage.toLowerCase().includes("error")) {
// show error
alert(textMessage);
} else {
// show permanent notification
$("#ticker-message").html(textMessage);
$("#tickerAnnouncement").removeClass("myhidden");
// Move the tickerAnnouncement element to ticker_announcement_plc
$("#tickerAnnouncement").appendTo("#ticker_announcement_plc");
// var $ticker = $('#tickerAnnouncement');
// var $tickerMessage = $('#ticker-message');
// Clone the ticker message to create continuous scrolling effect
// $tickerMessage.clone().appendTo($ticker);
}
}
// -----------------------------------------------------------------------------

235
front/js/modal.js Executable file
View File

@@ -0,0 +1,235 @@
// -----------------------------------------------------------------------------
// Modal dialog handling
// -----------------------------------------------------------------------------
var modalCallbackFunction = "";
function showModalOK(title, message, callbackFunction) {
showModalOk(title, message, callbackFunction);
}
function showModalOk(title, message, callbackFunction) {
// set captions
$("#modal-ok-title").html(title);
$("#modal-ok-message").html(message);
if (callbackFunction != null) {
$("#modal-ok-OK").click(function () {
callbackFunction();
});
}
// Show modal
$("#modal-ok").modal("show");
}
// -----------------------------------------------------------------------------
function showModalDefault(title, message, btnCancel, btnOK, callbackFunction) {
// set captions
$("#modal-default-title").html(title);
$("#modal-default-message").html(message);
$("#modal-default-cancel").html(btnCancel);
$("#modal-default-OK").html(btnOK);
modalCallbackFunction = callbackFunction;
// Show modal
$("#modal-default").modal("show");
}
// -----------------------------------------------------------------------------
function showModalDefaultStrParam(
title,
message,
btnCancel,
btnOK,
callbackFunction,
param = ""
) {
// set captions
$("#modal-str-title").html(title);
$("#modal-str-message").html(message);
$("#modal-str-cancel").html(btnCancel);
$("#modal-str-OK").html(btnOK);
$("#modal-str-OK").off("click"); //remove existing handlers
$("#modal-str-OK").on("click", function () {
$("#modal-str").modal("hide");
callbackFunction(param);
});
// Show modal
$("#modal-str").modal("show");
}
// -----------------------------------------------------------------------------
function showModalWarning(
title,
message,
btnCancel = getString("Gen_Cancel"),
btnOK = getString("Gen_Okay"),
callbackFunction = null
) {
// set captions
$("#modal-warning-title").html(title);
$("#modal-warning-message").html(message);
$("#modal-warning-cancel").html(btnCancel);
$("#modal-warning-OK").html(btnOK);
if (callbackFunction != null) {
modalCallbackFunction = callbackFunction;
}
// Show modal
$("#modal-warning").modal("show");
}
// -----------------------------------------------------------------------------
function showModalInput(
title,
message,
btnCancel = getString("Gen_Cancel"),
btnOK = getString("Gen_Okay"),
callbackFunction = null
) {
prefix = "modal-input";
// set captions
$(`#${prefix}-title`).html(title);
$(`#${prefix}-message`).html(message);
$(`#${prefix}-cancel`).html(btnCancel);
$(`#${prefix}-OK`).html(btnOK);
if (callbackFunction != null) {
modalCallbackFunction = callbackFunction;
}
// Show modal
$(`#${prefix}`).modal("show");
setTimeout(function () {
$(`#${prefix}-textarea`).focus();
}, 500);
}
// -----------------------------------------------------------------------------
function showModalFieldInput(
title,
message,
btnCancel = getString("Gen_Cancel"),
btnOK = getString("Gen_Okay"),
curValue = "",
callbackFunction = null
) {
// set captions
prefix = "modal-field-input";
$(`#${prefix}-title`).html(title);
$(`#${prefix}-message`).html(message);
$(`#${prefix}-cancel`).html(btnCancel);
$(`#${prefix}-OK`).html(btnOK);
if (callbackFunction != null) {
modalCallbackFunction = callbackFunction;
}
$(`#${prefix}-field`).val(curValue);
setTimeout(function () {
$(`#${prefix}-field`).focus();
}, 500);
// Show modal
$(`#${prefix}`).modal("show");
}
// -----------------------------------------------------------------------------
function modalDefaultOK() {
// Hide modal
$("#modal-default").modal("hide");
// timer to execute function
window.setTimeout(function () {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function modalDefaultInput() {
// Hide modal
$("#modal-input").modal("hide");
// timer to execute function
window.setTimeout(function () {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function modalDefaultFieldInput() {
// Hide modal
$("#modal-field-input").modal("hide");
// timer to execute function
window.setTimeout(function () {
modalCallbackFunction();
}, 100);
}
// -----------------------------------------------------------------------------
function modalWarningOK() {
// Hide modal
$("#modal-warning").modal("hide");
// timer to execute function
window.setTimeout(function () {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function showMessage(textMessage = "") {
if (textMessage.toLowerCase().includes("error")) {
// show error
alert(textMessage);
} else {
// show temporal notification
$("#alert-message").html(textMessage);
$("#notification").fadeIn(1, function () {
window.setTimeout(function () {
$("#notification").fadeOut(500);
}, 3000);
});
}
}
// -----------------------------------------------------------------------------
function showTickerAnnouncement(textMessage = "") {
if (textMessage.toLowerCase().includes("error")) {
// show error
alert(textMessage);
} else {
// show permanent notification
$("#ticker-message").html(textMessage);
$("#tickerAnnouncement").removeClass("myhidden");
// Move the tickerAnnouncement element to ticker_announcement_plc
$("#tickerAnnouncement").appendTo("#ticker_announcement_plc");
}
}
// -----------------------------------------------------------------------------
// Keyboard bindings
// -----------------------------------------------------------------------------
$(document).ready(function () {
$(document).on("keydown", function (event) {
// ESC key is pressed
if (event.keyCode === 27) {
// Trigger modal dismissal
$(".modal").modal("hide");
}
// Enter key is pressed
if (event.keyCode === 13) {
$(".modal:visible").find(".btn-modal-submit").click(); // Trigger the click event of the OK button in visible modals
}
});
});

1
front/php/templates/header.php
View File

@@ -31,6 +31,7 @@ require dirname(__FILE__).'/security.php';
<script src="lib/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="js/modal.js"></script>
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="lib/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">

43
front/php/templates/notification.php
View File

@@ -12,15 +12,15 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 id="modal-ok-title" class="modal-title"> Modal Default Title </h4>
</div>
<div id="modal-ok-message" class="modal-body"> Modal Default message </div>
<div class="modal-footer">
<button id="modal-ok-OK" type="button" class="btn btn-primary" style="min-width: 80px;" data-dismiss="modal"> OK </button>
<div class="modal-footer">
<button id="modal-ok-OK" type="button" class="btn btn-primary btn-modal-submit" style="min-width: 80px;" data-dismiss="modal"> OK </button>
</div>
</div>
<!-- /.modal-content -->
@@ -33,7 +33,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 id="modal-default-title" class="modal-title"> Modal Default Title </h4>
</div>
@@ -41,8 +41,8 @@
<div id="modal-default-message" class="modal-body"> Modal Default message </div>
<div class="modal-footer">
<button id="modal-default-cancel" type="button" class="btn btn-default pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-default-OK" type="button" class="btn btn-primary" style="min-width: 80px;" onclick="modalDefaultOK()"> OK </button>
<button id="modal-default-cancel" type="button" class="btn btn-default pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-default-OK" type="button" class="btn btn-primary btn-modal-submit" style="min-width: 80px;" onclick="modalDefaultOK()"> OK </button>
</div>
</div>
<!-- /.modal-content -->
@@ -55,7 +55,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 id="modal-str-title" class="modal-title"> Modal Default Title </h4>
</div>
@@ -63,15 +63,15 @@
<div id="modal-str-message" class="modal-body"> Modal Default message </div>
<div class="modal-footer">
<button id="modal-str-cancel" type="button" class="btn btn-default pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-str-OK" type="button" class="btn btn-primary" style="min-width: 80px;" > OK </button>
<button id="modal-str-cancel" type="button" class="btn btn-default pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-str-OK" type="button" class="btn btn-primary btn-modal-submit" style="min-width: 80px;"> OK </button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Modal warning -->
<div class="modal modal-warning fade" id="modal-warning" style="display: none;">
@@ -86,8 +86,8 @@
<div id="modal-warning-message" class="modal-body"> Modal message </div>
<div class="modal-footer">
<button id="modal-warning-cancel" type="button" class="btn btn-outline pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-warning-OK" type="button" class="btn btn-outline" style="min-width: 80px;" onclick="modalWarningOK()"> OK </button>
<button id="modal-warning-cancel" type="button" class="btn btn-outline pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-warning-OK" type="button" class="btn btn-outline btn-modal-submit" style="min-width: 80px;" onclick="modalWarningOK()"> OK </button>
</div>
</div>
@@ -106,11 +106,11 @@
<div id="modal-input-message" class="modal-body"> Modal message </div>
<textarea id="modal-input-textarea" class="logs" cols="30" rows="3" wrap='off' ></textarea>
<textarea id="modal-input-textarea" class="logs" cols="30" rows="3" wrap='off' autofocus ></textarea>
<div class="modal-footer">
<button id="modal-input-cancel" type="button" class="btn btn-outline pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-input-OK" type="button" class="btn btn-outline" style="min-width: 80px;" onclick="modalDefaultInput()"> OK </button>
<button id="modal-input-cancel" type="button" class="btn btn-outline pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-input-OK" type="button" class="btn btn-outline btn-modal-submit" style="min-width: 80px;" onclick="modalDefaultInput()"> OK </button>
</div>
</div>
@@ -130,11 +130,15 @@
<div id="modal-field-input-message" class="modal-body"> Modal message </div>
<input id="modal-field-input-field" class="modal-field-input" type="text" ></input>
<input id="modal-field-input-field" class="modal-field-input" type="text" onfocus="this.value = this.value;" autofocus ></input>
<div class="modal-footer">
<button id="modal-field-input-cancel" type="button" class="btn btn-outline pull-left" style="min-width: 80px;" data-dismiss="modal"> Cancel </button>
<button id="modal-field-input-OK" type="button" class="btn btn-outline" style="min-width: 80px;" onclick="modalDefaultFieldInput()"> OK </button>
<button id="modal-field-input-cancel" type="button" class="btn btn-outline pull-left" style="min-width: 80px;" data-dismiss="modal">
Cancel
</button>
<button id="modal-field-input-OK" type="button" class="btn btn-outline btn-modal-submit" style="min-width: 80px;" onclick="modalDefaultFieldInput()">
OK
</button>
</div>
</div>
@@ -152,5 +156,4 @@
<!-- Sticky Announcement -->
<div id="tickerAnnouncement" class="ticker_announcement myhidden">
<div id="ticker-message"> Announcement message </div>
</div>
</div>

20
front/settings.php
View File

@@ -441,7 +441,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
<input class="form-control" id="ipInterface" type="text" placeholder="eth0" />
</div>
<div class="col-xs-3">
<button class="btn btn-primary" onclick="addInterface();initListInteractionOptions('${codeName}')">Add</button>
<button class="btn btn-primary" onclick="addInterface();initListInteractionOptions('${codeName}')">${getString("Gen_Add")}</button>
</div>
</div>
<div class="form-group">
@@ -459,8 +459,12 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
inputHtml += `</select>
</div>
<div class="col-xs-6">
<button class="btn btn-primary" my-input="${codeName}" onclick="removeFromList(this)">Remove last</button>
<button class="btn btn-primary" my-input="${codeName}" onclick="removeAllOptions(this)">Remove all</button>
<button class="btn btn-primary" my-input="${codeName}" onclick="removeFromList(this)">
${getString("Gen_Remove_Last")}
</button>
<button class="btn btn-primary" my-input="${codeName}" onclick="removeAllOptions(this)">
${getString("Gen_Remove_All")}
</button>
</div>`;
} else if (setType === 'list' || setType === 'list.readonly') {
@@ -472,7 +476,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
<input class="form-control" type="text" id="${codeName}_input" placeholder="Enter value"/>
</div>
<div class="col-xs-3">
<button class="btn btn-primary" my-input-from="${codeName}_input" my-input-to="${codeName}" onclick="addList(this);initListInteractionOptions('${codeName}')">Add</button>
<button class="btn btn-primary" my-input-from="${codeName}_input" my-input-to="${codeName}" onclick="addList(this);initListInteractionOptions('${codeName}')">${getString("Gen_Add")}</button>
</div>
</div>
<div class="form-group">
@@ -487,8 +491,12 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
inputHtml += '</select></div>' +
`<div>
<button class="btn btn-primary" my-input="${codeName}" onclick="removeFromList(this)">Remove last</button>
<button class="btn btn-primary" my-input="${codeName}" onclick="removeAllOptions(this)">Remove all</button>
<button class="btn btn-primary" my-input="${codeName}" onclick="removeFromList(this)">
${getString("Gen_Remove_Last")}
</button>
<button class="btn btn-primary" my-input="${codeName}" onclick="removeAllOptions(this)">
${getString("Gen_Remove_All")}
</button>
</div>`;
} else if (setType === 'json') {
inputHtml = `<textarea class="form-control input" my-data-type="${setType}" id="${codeName}" readonly>${JSON.stringify(val, null, 2)}</textarea>`;