#11386 Fix modal event sound
This commit is contained in:
miguel angel rasteu
parent
8fd3ed6650
commit
444dbb4599
|
|
@ -55,7 +55,7 @@ function show_event_dialog(event, dialog_page) {
|
|||
title: event.evento,
|
||||
resizable: true,
|
||||
draggable: true,
|
||||
modal: true,
|
||||
modal: false,
|
||||
minWidth: 875,
|
||||
minHeight: 600,
|
||||
close: function() {
|
||||
|
|
@ -943,6 +943,105 @@ function process_buffers(buffers) {
|
|||
}
|
||||
}
|
||||
|
||||
function openSoundEventsDialog(settings) {
|
||||
settings = JSON.parse(atob(settings));
|
||||
|
||||
// Check modal exists and is open.
|
||||
if (
|
||||
$("#modal-sound").hasClass("ui-dialog-content") &&
|
||||
$("#modal-sound").dialog("isOpen")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
// Initialize modal.
|
||||
$("#modal-sound")
|
||||
.empty()
|
||||
.dialog({
|
||||
title: settings.title,
|
||||
resizable: false,
|
||||
modal: false,
|
||||
width: 600,
|
||||
height: 600,
|
||||
open: function() {
|
||||
$.ajax({
|
||||
method: "post",
|
||||
url: settings.url,
|
||||
data: {
|
||||
page: settings.page,
|
||||
drawConsoleSound: 1
|
||||
},
|
||||
dataType: "html",
|
||||
success: function(data) {
|
||||
$("#modal-sound").append(data);
|
||||
$("#tabs-sound-modal").tabs({
|
||||
disabled: [1]
|
||||
});
|
||||
|
||||
// Test sound.
|
||||
$("#button-melody_sound").click(function() {
|
||||
var sound = false;
|
||||
if ($("#id_sound_event").length == 0) {
|
||||
sound = true;
|
||||
}
|
||||
|
||||
test_sound_button(sound, settings.urlSound);
|
||||
});
|
||||
|
||||
// Play Stop.
|
||||
$("#button-start-search").click(function() {
|
||||
var mode = $("#hidden-mode_alert").val();
|
||||
var action = false;
|
||||
if (mode == 0) {
|
||||
action = true;
|
||||
}
|
||||
|
||||
action_events_sound(action, settings);
|
||||
});
|
||||
|
||||
// Silence Alert.
|
||||
$("#button-no-alerts").click(function() {
|
||||
if ($("#button-no-alerts").hasClass("silence-alerts") === true) {
|
||||
// Remove audio.
|
||||
remove_audio();
|
||||
|
||||
// Clean events.
|
||||
$("#tabs-sound-modal .elements-discovered-alerts ul").empty();
|
||||
$("#tabs-sound-modal .empty-discovered-alerts").removeClass(
|
||||
"invisible_important"
|
||||
);
|
||||
|
||||
// Clean progress.
|
||||
$("#progressbar_time").empty();
|
||||
|
||||
// Change img button.
|
||||
$("#button-no-alerts")
|
||||
.removeClass("silence-alerts")
|
||||
.addClass("alerts");
|
||||
// Change value button.
|
||||
$("#button-no-alerts").val(settings.noAlert);
|
||||
$("#button-no-alerts > span").text(settings.noAlert);
|
||||
|
||||
// Background button.
|
||||
$(".container-button-alert").removeClass("fired");
|
||||
|
||||
// New progress.
|
||||
listen_event_sound(settings);
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function(error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
close: function() {
|
||||
remove_audio();
|
||||
$(this).dialog("destroy");
|
||||
}
|
||||
})
|
||||
.show();
|
||||
}
|
||||
|
||||
function openSoundEventModal(settings) {
|
||||
if ($("#hidden-metaconsole_activated").val() === "1") {
|
||||
var win = open(
|
||||
|
|
@ -1045,10 +1144,12 @@ function add_audio(urlSound) {
|
|||
sound +
|
||||
"' autoplay='true' hidden='true' loop='false'>"
|
||||
);
|
||||
$("#button-sound_events_button").addClass("animation-blink");
|
||||
}
|
||||
|
||||
function remove_audio() {
|
||||
$(".actions-sound-modal audio").remove();
|
||||
$("#button-sound_events_button").removeClass("animation-blink");
|
||||
}
|
||||
|
||||
function listen_event_sound(settings) {
|
||||
|
|
@ -1229,3 +1330,230 @@ function removeElement(name_select, id_modal) {
|
|||
.append(option);
|
||||
});
|
||||
}
|
||||
/*
|
||||
#############################################################################
|
||||
##
|
||||
## + Compacts the Modal Sound Dialog to a tiny toolbar
|
||||
## + Dynamically adds a button which can reduce/reapply the dialog size
|
||||
## + If alarm gets raised & minimized, the dialog window maximizes and the toolbar flashes red for 10 seconds.
|
||||
## - Works fine until a link/action gets clicked. The Toolbar shifts to the bottom of the Modal-Sound Dialog.
|
||||
##
|
||||
#############################################################################
|
||||
*/
|
||||
|
||||
$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
|
||||
const requestBody = ajaxOptions.data;
|
||||
if (requestBody && requestBody.includes("drawConsoleSound=1")) {
|
||||
console.log("AJAX request sent with drawConsoleSound=1:", ajaxOptions.url);
|
||||
|
||||
// Find the dialog element by the aria-describedby attribute
|
||||
var dialog = $('[aria-describedby="modal-sound"]');
|
||||
|
||||
// Select the close button within the dialog
|
||||
var closeButton = dialog.find(".ui-dialog-titlebar-close");
|
||||
|
||||
// Add the minimize button before the close button
|
||||
var minimizeButton = $("<button>", {
|
||||
class:
|
||||
"ui-corner-all ui-widget ui-button-icon-only ui-window-minimize ui-dialog-titlebar-minimize",
|
||||
type: "button",
|
||||
title: "Minimize",
|
||||
style: "float: right;margin-right: 1.5em;"
|
||||
}).insertBefore(closeButton);
|
||||
|
||||
// Add the minimize icon to the minimize button
|
||||
$("<span>", {
|
||||
class: "ui-button-icon ui-icon ui-icon-minusthick",
|
||||
style: "background-color: #fff;"
|
||||
}).appendTo(minimizeButton);
|
||||
|
||||
$("<span>", {
|
||||
class: "ui-button-icon-space"
|
||||
})
|
||||
.html(" ")
|
||||
.appendTo(minimizeButton);
|
||||
|
||||
// Add the disengage button before the minimize button
|
||||
var disengageButton = $("<button>", {
|
||||
class:
|
||||
"ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-disengage",
|
||||
type: "button",
|
||||
title: "Disengage",
|
||||
style: "float: right;margin-right: 3.2em;"
|
||||
}).insertBefore(minimizeButton);
|
||||
|
||||
// Add the disengage icon to the disengage button
|
||||
$("<span>", {
|
||||
class: "ui-button-icon ui-icon ui-icon-circle-triangle-n",
|
||||
style: "background-color: #fff;"
|
||||
}).appendTo(disengageButton);
|
||||
|
||||
$("<span>", {
|
||||
class: "ui-button-icon-space"
|
||||
})
|
||||
.html(" ")
|
||||
.appendTo(disengageButton);
|
||||
|
||||
// Define the minimize button functionality
|
||||
minimizeButton.click(function(e) {
|
||||
if (!dialog.data("isMinimized")) {
|
||||
$(".ui-widget-overlay").hide();
|
||||
console.log("Minimize Window");
|
||||
dialog.data("originalPos", dialog.position());
|
||||
dialog.data("originalSize", {
|
||||
width: dialog.width(),
|
||||
height: dialog.height()
|
||||
});
|
||||
dialog.data("isMinimized", true);
|
||||
|
||||
dialog.animate(
|
||||
{
|
||||
height: "40px",
|
||||
top: 0,
|
||||
top: $(window).height() - 50
|
||||
},
|
||||
200
|
||||
);
|
||||
dialog.css({ height: "" });
|
||||
|
||||
dialog.find(".ui-dialog-content").hide();
|
||||
} else {
|
||||
console.log("Restore Window");
|
||||
$(".ui-widget-overlay").show();
|
||||
dialog.find(".ui-dialog-content").show();
|
||||
dialog.data("isMinimized", false);
|
||||
dialog.animate(
|
||||
{
|
||||
height: dialog.data("originalSize").height + "px",
|
||||
top: dialog.data("originalPos").top + "px"
|
||||
},
|
||||
200
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
disengageButton.click(function() {
|
||||
$(".ui-dialog-titlebar-close").trigger("click");
|
||||
$("#button-sound_events_button_hidden").trigger("click");
|
||||
});
|
||||
|
||||
// Listener to check if the dialog content contains <li> elements
|
||||
var dialogContent = dialog.find(".ui-dialog-content");
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
var addedNodes = mutation.addedNodes;
|
||||
for (var i = 0; i < addedNodes.length; i++) {
|
||||
if (addedNodes[i].nodeName.toLowerCase() === "li") {
|
||||
console.log("The dialog content contains an <li> tag.");
|
||||
if (dialog.data("isMinimized")) {
|
||||
console.log("Restore Window");
|
||||
$(".ui-widget-overlay").show();
|
||||
dialog.data("isMinimized", false);
|
||||
dialog.animate(
|
||||
{
|
||||
height: dialog.data("originalSize").height + "px",
|
||||
top: dialog.data("originalPos").top + "px"
|
||||
},
|
||||
200
|
||||
);
|
||||
}
|
||||
|
||||
var $el = $('[aria-describedby="modal-sound"]').find(
|
||||
".ui-dialog-title"
|
||||
);
|
||||
var flashingDuration = 10000; // 10 seconds
|
||||
|
||||
$("<style>")
|
||||
.text(
|
||||
`
|
||||
@keyframes flashRed {
|
||||
from { background-color: initial; }
|
||||
to { background-color: red; }
|
||||
}
|
||||
.red-flash { animation: flashRed 0.5s alternate infinite; }
|
||||
`
|
||||
)
|
||||
.appendTo("head");
|
||||
|
||||
$el.addClass("red-flash");
|
||||
|
||||
setTimeout(() => {
|
||||
$el.removeClass("red-flash");
|
||||
$("style")
|
||||
.last()
|
||||
.remove();
|
||||
}, flashingDuration);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Configure and start observing the dialog content for changes
|
||||
var config = { childList: true, subtree: true };
|
||||
observer.observe(dialogContent[0], config);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
#############################################################################
|
||||
##
|
||||
## + Compacts the Modal Sound Dialog popup and removes the widget-overlay
|
||||
##
|
||||
##
|
||||
#############################################################################
|
||||
*/
|
||||
$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
|
||||
const requestBody = ajaxOptions.data;
|
||||
if (requestBody && requestBody.includes("drawConsoleSound=1")) {
|
||||
console.log("AJAX request sent with drawConsoleSound=1:", ajaxOptions.url);
|
||||
|
||||
// Find the dialog element by the aria-describedby attribute
|
||||
var dialog = $('[aria-describedby="modal-sound"]');
|
||||
dialog.css({
|
||||
// "backgroundColor":"black",
|
||||
// "color":"white"
|
||||
});
|
||||
|
||||
// Set CSS properties for #modal-sound
|
||||
$("#modal-sound").css({
|
||||
height: "auto",
|
||||
margin: "0px"
|
||||
});
|
||||
|
||||
// Set CSS properties for #tabs-sound-modal
|
||||
$("#tabs-sound-modal").css({
|
||||
"margin-top": "0px",
|
||||
padding: "0px",
|
||||
"font-weight": "bolder"
|
||||
});
|
||||
|
||||
// Set CSS properties for #actions-sound-modal
|
||||
$("#actions-sound-modal").css({
|
||||
"margin-bottom": "0px"
|
||||
});
|
||||
|
||||
// Hide the overlay with specific class and z-index
|
||||
$('.ui-widget-overlay.ui-front[style="z-index: 10000;"]').css(
|
||||
"display",
|
||||
"none"
|
||||
);
|
||||
|
||||
// Handle the 'change' event for #modal-sound, simply to compact the size of the img "No alerts discovered"
|
||||
// An image should always have a size assigned!!!
|
||||
$("#modal-sound").on("change", function() {
|
||||
// Find the image within the specific div
|
||||
var image = $(this).find(
|
||||
'img.invert_filter.forced_title[data-title="No alerts discovered"][alt="No alerts discovered"]'
|
||||
);
|
||||
|
||||
// Set the desired width and height
|
||||
var width = 48;
|
||||
var height = 48;
|
||||
|
||||
// Resize the image
|
||||
image.width(width);
|
||||
image.height(height);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -45,16 +45,42 @@
|
|||
font-size: 11pt;
|
||||
top: 2px;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close {
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar-minimize {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
right: 1.5em;
|
||||
width: 21px;
|
||||
margin: 0px 0 0 0;
|
||||
padding: 1px;
|
||||
height: 20px;
|
||||
bottom: 30%;
|
||||
top: 20%;
|
||||
top: 1.3em;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar-minimize:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar-disengage {
|
||||
position: absolute;
|
||||
right: 1.5em;
|
||||
width: 21px;
|
||||
margin: 0px 0 0 0;
|
||||
padding: 1px;
|
||||
height: 20px;
|
||||
bottom: 30%;
|
||||
top: 0.7em;
|
||||
background-color: #fff !important;
|
||||
-ms-transform: scale(1.2);
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar-disengage:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-content {
|
||||
position: relative;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -2304,7 +2304,7 @@ div#main_pure {
|
|||
position: static;
|
||||
}
|
||||
|
||||
.ui-draggable {
|
||||
.ui-draggable-handle {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1610,7 +1610,7 @@ require 'include/php_to_js_values.php';
|
|||
|
||||
$(".ui-widget-overlay").css("background", "#000");
|
||||
$(".ui-widget-overlay").css("opacity", 0.6);
|
||||
$(".ui-draggable").css("cursor", "inherit");
|
||||
//$(".ui-draggable").css("cursor", "inherit");
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
|
|
|||
|
|
@ -2661,7 +2661,7 @@ if (check_acl(
|
|||
'submit_event_response',
|
||||
false,
|
||||
'execute_event_response(true);',
|
||||
[ 'icon' => 'cog' ],
|
||||
[ 'icon' => 'cog'],
|
||||
true
|
||||
);
|
||||
|
||||
|
|
@ -2677,6 +2677,43 @@ if (check_acl(
|
|||
false
|
||||
);
|
||||
|
||||
// Acoustic console.
|
||||
$data_sound = base64_encode(
|
||||
json_encode(
|
||||
[
|
||||
'title' => __('Acoustic console'),
|
||||
'start' => __('Start'),
|
||||
'stop' => __('Stop'),
|
||||
'noAlert' => __('No alert'),
|
||||
'silenceAlarm' => __('Silence alarm'),
|
||||
'url' => ui_get_full_url('ajax.php'),
|
||||
'page' => 'include/ajax/events',
|
||||
'urlSound' => 'include/sounds/',
|
||||
]
|
||||
)
|
||||
);
|
||||
|
||||
$elements .= html_print_button(
|
||||
__('Sound Events'),
|
||||
'sound_events_button',
|
||||
false,
|
||||
'openSoundEventsDialog("'.$data_sound.'")',
|
||||
[
|
||||
'icon' => 'sound',
|
||||
'style' => 'margin-right: 25% !important',
|
||||
],
|
||||
true
|
||||
);
|
||||
|
||||
$elements .= html_print_button(
|
||||
'hidden',
|
||||
'sound_events_button_hidden',
|
||||
false,
|
||||
'openSoundEventModal("'.$data_sound.'")',
|
||||
['style' => 'display:none'],
|
||||
true
|
||||
);
|
||||
|
||||
html_print_action_buttons(
|
||||
$elements,
|
||||
[ 'type' => 'data_table' ]
|
||||
|
|
|
|||
|
|
@ -405,6 +405,7 @@ function add_audio(urlSound) {
|
|||
|
||||
function remove_audio() {
|
||||
$(".actions-sound-modal audio").remove();
|
||||
buttonBlink();
|
||||
}
|
||||
|
||||
function listen_event_sound() {
|
||||
|
|
@ -435,7 +436,6 @@ function check_event_sound() {
|
|||
$("#tabs-sound-modal .empty-discovered-alerts").addClass(
|
||||
"invisible_important"
|
||||
);
|
||||
|
||||
// Change img button.
|
||||
$("#button-no-alerts")
|
||||
.removeClass("alerts")
|
||||
|
|
@ -446,7 +446,7 @@ function check_event_sound() {
|
|||
|
||||
// Background button.
|
||||
$(".container-button-alert").addClass("fired");
|
||||
|
||||
|
||||
// Remove audio.
|
||||
remove_audio();
|
||||
var urlSound = '../../include/sounds/'+$('#sound_id :selected').val();
|
||||
|
|
|
|||
Loading…
Reference in New Issue