lindeas
/
jilo-web
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

Adds JS messages system in separate files for easy inclusion

main
Yasen Pramatarov 2025-01-26 18:05:29 +02:00
parent e13bb7fc42
commit dfdb24a550
2 changed files with 123 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/templates/page-header.php
View File

@ -24,8 +24,9 @@
} }
})(); })();
</script> </script>
<script src="<?= htmlspecialchars($app_root) ?>static/js/messages.js"></script>
<?php if ($page === 'agents') { ?> <?php if ($page === 'agents') { ?>
<script src="<?= htmlspecialchars($app_root) ?>static/agents.js"></script> <script src="<?= htmlspecialchars($app_root) ?>static/js/agents.js"></script>
<?php } ?> <?php } ?>
<?php if ($page === 'data' && $item === 'graphs') { ?> <?php if ($page === 'data' && $item === 'graphs') { ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@ -38,6 +39,7 @@
</head> </head>
<body> <body>
<div id="messages-container" class="container-fluid mt-2"></div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">

120
public_html/static/js/messages.js 100644
View File

@ -0,0 +1,120 @@
/**
* Messages handling system with auto-dismissing JS messages
* Provides a consistent way to show messages across all pages
* Use the following way in Javascript:
*
* - show a success message that auto-dismisses
* JsMessages.success('All systems operational, captain');
*
* - show a non-dismissible error
* JsMessages.error('Danger, Will Robinson!');
*
* - show a warning with custom options
* JsMessages.warning('Custom text', true, true); // [types: success,warning,info,danger], text, [dismissible], [small]
* JsMessages.show({
* type: 'info',
* message: 'Custom message',
* dismissible: true,
* small: false
* });
*
*/
const JsMessages = {
/**
* Show a message in the messages container
* @param {Object} messageData - Message data object
* @param {string} messageData.type - Message type (success, danger, warning, info)
* @param {string} messageData.message - Message text
* @param {boolean} messageData.dismissible - Whether the message can be dismissed
* @param {boolean} messageData.small - Whether to use small styling
*/
show: function(messageData) {
const dismissClass = messageData.dismissible ? ' alert-dismissible fade' : '';
const dismissButton = messageData.dismissible ?
`<button type="button" class="btn-close${messageData.small ? ' btn-close-sm' : ''}" data-bs-dismiss="alert" aria-label="Close"></button>` : '';
const smallClass = messageData.small ? ' alert-sm' : '';
const $alert = $('<div>')
.addClass(`alert alert-${messageData.type}${dismissClass}${smallClass}`)
.attr('role', 'alert')
.html(`${messageData.message}${dismissButton}`);
// Remove any existing alerts
$('#messages-container').empty().append($alert);
// Trigger reflow to ensure transition works
$alert[0].offsetHeight;
// Show the alert with transition
$alert.addClass('show');
if (messageData.dismissible) {
setTimeout(() => {
$alert.removeClass('show');
setTimeout(() => {
$alert.remove();
}, 200); // Same as transition duration
}, 1500);
}
},
/**
* Show a success message
* @param {string} message - Message text
* @param {boolean} dismissible - Whether the message can be dismissed
* @param {boolean} small - Whether to use small styling
*/
success: function(message, dismissible = true, small = false) {
this.show({
type: 'success',
message: message,
dismissible: dismissible,
small: small
});
},
/**
* Show an error message
* @param {string} message - Message text
* @param {boolean} dismissible - Whether the message can be dismissed
* @param {boolean} small - Whether to use small styling
*/
error: function(message, dismissible = false, small = false) {
this.show({
type: 'danger',
message: message,
dismissible: dismissible,
small: small
});
},
/**
* Show a warning message
* @param {string} message - Message text
* @param {boolean} dismissible - Whether the message can be dismissed
* @param {boolean} small - Whether to use small styling
*/
warning: function(message, dismissible = true, small = false) {
this.show({
type: 'warning',
message: message,
dismissible: dismissible,
small: small
});
},
/**
* Show an info message
* @param {string} message - Message text
* @param {boolean} dismissible - Whether the message can be dismissed
* @param {boolean} small - Whether to use small styling
*/
info: function(message, dismissible = true, small = false) {
this.show({
type: 'info',
message: message,
dismissible: dismissible,
small: small
});
}
};