mirror of
https://github.com/pandorafms/pandorafms.git
synced 2025-07-29 16:55:05 +02:00
Merge branch 'ent-9095-cambios-visuales-en-la-interfaz-consola-sonora-de-eventos' into 'develop'
modal sound events pandora_enterprise#9095 See merge request artica/pandorafms!4998
This commit is contained in:
Diego Muñoz-Reja
commit
c756f804a7
BIN
pandora_console/images/alarm-off.png
Normal file
BIN
pandora_console/images/alarm-off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 419 B |
BIN
pandora_console/images/gear.png
Normal file
BIN
pandora_console/images/gear.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
BIN
pandora_console/images/no-alerts-discovered.png
Normal file
BIN
pandora_console/images/no-alerts-discovered.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
pandora_console/images/play-white.png
Normal file
BIN
pandora_console/images/play-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 B |
BIN
pandora_console/images/silence-alerts.png
Normal file
BIN
pandora_console/images/silence-alerts.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 465 B |
BIN
pandora_console/images/sound_wave.png
Normal file
BIN
pandora_console/images/sound_wave.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
BIN
pandora_console/images/stop.png
Normal file
BIN
pandora_console/images/stop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 B |
@ -55,6 +55,7 @@ if (! check_acl($config['id_user'], 0, 'ER')
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$drawConsoleSound = (bool) get_parameter('drawConsoleSound', false);
|
||||||
$process_buffers = (bool) get_parameter('process_buffers', false);
|
$process_buffers = (bool) get_parameter('process_buffers', false);
|
||||||
$get_extended_event = (bool) get_parameter('get_extended_event');
|
$get_extended_event = (bool) get_parameter('get_extended_event');
|
||||||
$change_status = (bool) get_parameter('change_status');
|
$change_status = (bool) get_parameter('change_status');
|
||||||
@ -2225,6 +2226,228 @@ if ($process_buffers === true) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if ($drawConsoleSound === true) {
|
||||||
|
echo ui_require_css_file('wizard', 'include/styles/', true);
|
||||||
|
echo ui_require_css_file('discovery', 'include/styles/', true);
|
||||||
|
echo ui_require_css_file('sound_events', 'include/styles/', true);
|
||||||
|
$output = '<div id="tabs-sound-modal">';
|
||||||
|
// Header tabs.
|
||||||
|
$output .= '<ul class="tabs-sound-modal-options">';
|
||||||
|
$output .= '<li>';
|
||||||
|
$output .= '<a href="#tabs-sound-modal-1">';
|
||||||
|
$output .= html_print_image(
|
||||||
|
'images/gear.png',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => __('Options'),
|
||||||
|
'class' => 'invert_filter',
|
||||||
|
]
|
||||||
|
);
|
||||||
|
$output .= '</a>';
|
||||||
|
$output .= '</li>';
|
||||||
|
$output .= '<li>';
|
||||||
|
$output .= '<a href="#tabs-sound-modal-2">';
|
||||||
|
$output .= html_print_image(
|
||||||
|
'images/list.png',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => __('Events list'),
|
||||||
|
'class' => 'invert_filter',
|
||||||
|
]
|
||||||
|
);
|
||||||
|
$output .= '</a>';
|
||||||
|
$output .= '</li>';
|
||||||
|
$output .= '</ul>';
|
||||||
|
|
||||||
|
// Content tabs.
|
||||||
|
$output .= '<div id="tabs-sound-modal-1">';
|
||||||
|
$output .= '<h3 class="console-configuration">';
|
||||||
|
$output .= __('Console configuration');
|
||||||
|
$output .= '</h3>';
|
||||||
|
$inputs = [];
|
||||||
|
|
||||||
|
// Load filter.
|
||||||
|
$fields = \events_get_event_filter_select();
|
||||||
|
$inputs[] = [
|
||||||
|
'label' => \__('Set condition'),
|
||||||
|
'arguments' => [
|
||||||
|
'type' => 'select',
|
||||||
|
'fields' => $fields,
|
||||||
|
'name' => 'filter_id',
|
||||||
|
'selected' => 0,
|
||||||
|
'return' => true,
|
||||||
|
'nothing' => \__('All new events'),
|
||||||
|
'nothing_value' => 0,
|
||||||
|
'class' => 'fullwidth',
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
$times_interval = [
|
||||||
|
10 => '10 '.__('seconds'),
|
||||||
|
15 => '15 '.__('seconds'),
|
||||||
|
30 => '30 '.__('seconds'),
|
||||||
|
60 => '60 '.__('seconds'),
|
||||||
|
];
|
||||||
|
|
||||||
|
$times_sound = [
|
||||||
|
2 => '2 '.__('seconds'),
|
||||||
|
5 => '5 '.__('seconds'),
|
||||||
|
10 => '10 '.__('seconds'),
|
||||||
|
15 => '15 '.__('seconds'),
|
||||||
|
30 => '30 '.__('seconds'),
|
||||||
|
60 => '60 '.__('seconds'),
|
||||||
|
];
|
||||||
|
|
||||||
|
$inputs[] = [
|
||||||
|
'class' => 'interval-sounds',
|
||||||
|
'direct' => 1,
|
||||||
|
'block_content' => [
|
||||||
|
[
|
||||||
|
'label' => __('Interval'),
|
||||||
|
'arguments' => [
|
||||||
|
'type' => 'select',
|
||||||
|
'fields' => $times_interval,
|
||||||
|
'name' => 'interval',
|
||||||
|
'selected' => 10,
|
||||||
|
'return' => true,
|
||||||
|
],
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'label' => __('Time Sound'),
|
||||||
|
'arguments' => [
|
||||||
|
'type' => 'select',
|
||||||
|
'fields' => $times_sound,
|
||||||
|
'name' => 'time_sound',
|
||||||
|
'selected' => 10,
|
||||||
|
'return' => true,
|
||||||
|
],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
$sounds = [
|
||||||
|
'aircraftalarm.wav' => 'Air craft alarm',
|
||||||
|
'air_shock_alarm.wav' => 'Air shock alarm',
|
||||||
|
'alien_alarm.wav' => 'Alien alarm',
|
||||||
|
'alien_beacon.wav' => 'Alien beacon',
|
||||||
|
'bell_school_ringing.wav' => 'Bell school ringing',
|
||||||
|
'Door_Alarm.wav' => 'Door alarm',
|
||||||
|
'EAS_beep.wav' => 'EAS beep',
|
||||||
|
'Firewarner.wav' => 'Fire warner',
|
||||||
|
'HardPCMAlarm.wav' => 'Hard PCM Alarm',
|
||||||
|
'negativebeep.wav' => 'Negative beep',
|
||||||
|
'Star_Trek_emergency_simulation.wav' => 'StarTrek emergency simulation',
|
||||||
|
];
|
||||||
|
|
||||||
|
$inputs[] = [
|
||||||
|
'class' => 'test-sounds',
|
||||||
|
'direct' => 1,
|
||||||
|
'block_content' => [
|
||||||
|
[
|
||||||
|
'label' => \__('Sound melody'),
|
||||||
|
'arguments' => [
|
||||||
|
'type' => 'select',
|
||||||
|
'fields' => $sounds,
|
||||||
|
'name' => 'sound_id',
|
||||||
|
'selected' => 'Star_Trek_emergency_simulation.wav',
|
||||||
|
'return' => true,
|
||||||
|
'class' => 'fullwidth',
|
||||||
|
],
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'arguments' => [
|
||||||
|
'type' => 'button',
|
||||||
|
'name' => 'melody_sound',
|
||||||
|
'label' => __('Test sound'),
|
||||||
|
'attributes' => 'class="sub upd"',
|
||||||
|
'return' => true,
|
||||||
|
],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
// Print form.
|
||||||
|
$output .= HTML::printForm(
|
||||||
|
[
|
||||||
|
'form' => [
|
||||||
|
'action' => '',
|
||||||
|
'method' => 'POST',
|
||||||
|
],
|
||||||
|
'inputs' => $inputs,
|
||||||
|
],
|
||||||
|
true,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
$output .= '</div>';
|
||||||
|
|
||||||
|
$output .= '<div id="tabs-sound-modal-2">';
|
||||||
|
$output .= '<h3 class="title-discovered-alerts">';
|
||||||
|
$output .= __('Discovered alerts');
|
||||||
|
$output .= '</h3>';
|
||||||
|
$output .= '<div class="empty-discovered-alerts">';
|
||||||
|
$output .= html_print_image(
|
||||||
|
'images/no-alerts-discovered.png',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => __('No alerts discovered'),
|
||||||
|
'class' => 'invert_filter',
|
||||||
|
]
|
||||||
|
);
|
||||||
|
$output .= '<span class="text-discovered-alerts">';
|
||||||
|
$output .= __('Congrats! there’s nothing to show');
|
||||||
|
$output .= '</span>';
|
||||||
|
$output .= '</div>';
|
||||||
|
$output .= '<div class="elements-discovered-alerts"><ul></ul></div>';
|
||||||
|
$output .= '</div>';
|
||||||
|
$output .= '</div>';
|
||||||
|
|
||||||
|
$output .= '<div class="actions-sound-modal">';
|
||||||
|
$output .= '<div id="progressbar_time"></div>';
|
||||||
|
$output .= '<div class="buttons-sound-modal">';
|
||||||
|
$output .= '<div class="container-button-play">';
|
||||||
|
$output .= html_print_input(
|
||||||
|
[
|
||||||
|
'label' => __('Start'),
|
||||||
|
'type' => 'button',
|
||||||
|
'name' => 'start-search',
|
||||||
|
'attributes' => 'class="sub play"',
|
||||||
|
'return' => true,
|
||||||
|
],
|
||||||
|
'div',
|
||||||
|
true
|
||||||
|
);
|
||||||
|
$output .= '</div>';
|
||||||
|
$output .= '<div class="container-button-alert">';
|
||||||
|
$output .= html_print_input(
|
||||||
|
[
|
||||||
|
'type' => 'button',
|
||||||
|
'name' => 'no-alerts',
|
||||||
|
'label' => __('No alerts'),
|
||||||
|
'attributes' => 'class="sub alerts"',
|
||||||
|
'return' => true,
|
||||||
|
],
|
||||||
|
'div',
|
||||||
|
true
|
||||||
|
);
|
||||||
|
$output .= '</div>';
|
||||||
|
|
||||||
|
$output .= html_print_input(
|
||||||
|
[
|
||||||
|
'type' => 'hidden',
|
||||||
|
'name' => 'mode_alert',
|
||||||
|
'value' => 0,
|
||||||
|
'return' => true,
|
||||||
|
],
|
||||||
|
'div',
|
||||||
|
true
|
||||||
|
);
|
||||||
|
$output .= '</div>';
|
||||||
|
$output .= '</div>';
|
||||||
|
|
||||||
|
echo $output;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if ($get_events_fired) {
|
if ($get_events_fired) {
|
||||||
global $config;
|
global $config;
|
||||||
$filter_id = (int) get_parameter('filter_id', 0);
|
$filter_id = (int) get_parameter('filter_id', 0);
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/*global jQuery, $, forced_title_callback, confirmDialog*/
|
/*global jQuery, $, forced_title_callback, confirmDialog, progressTimeBar*/
|
||||||
|
|
||||||
// Show the modal window of an event
|
// Show the modal window of an event
|
||||||
function show_event_dialog(event, dialog_page) {
|
function show_event_dialog(event, dialog_page) {
|
||||||
@ -1028,3 +1028,256 @@ function process_buffers(buffers) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openSoundEventModal(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: true,
|
||||||
|
position: { my: "right top", at: "right bottom", of: window },
|
||||||
|
overlay: {
|
||||||
|
opacity: 0.5,
|
||||||
|
background: "black"
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// 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 test_sound_button(test_sound) {
|
||||||
|
if (test_sound === true) {
|
||||||
|
add_audio();
|
||||||
|
} else {
|
||||||
|
remove_audio();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function action_events_sound(mode, settings) {
|
||||||
|
if (mode === true) {
|
||||||
|
// Enable tabs.
|
||||||
|
$("#tabs-sound-modal").tabs("option", "disabled", [0]);
|
||||||
|
// Active tabs.
|
||||||
|
$("#tabs-sound-modal").tabs("option", "active", 1);
|
||||||
|
// Change mode.
|
||||||
|
$("#hidden-mode_alert").val(1);
|
||||||
|
// Change img button.
|
||||||
|
$("#button-start-search")
|
||||||
|
.removeClass("play")
|
||||||
|
.addClass("stop");
|
||||||
|
// Change value button.
|
||||||
|
$("#button-start-search").val(settings.stop);
|
||||||
|
// Add Progress bar.
|
||||||
|
listen_event_sound(settings);
|
||||||
|
} else {
|
||||||
|
// Enable tabs.
|
||||||
|
$("#tabs-sound-modal").tabs("option", "disabled", [1]);
|
||||||
|
// Active tabs.
|
||||||
|
$("#tabs-sound-modal").tabs("option", "active", 0);
|
||||||
|
// Change mode.
|
||||||
|
$("#hidden-mode_alert").val(0);
|
||||||
|
// Change img button.
|
||||||
|
$("#button-start-search")
|
||||||
|
.removeClass("stop")
|
||||||
|
.addClass("play");
|
||||||
|
// Change value button.
|
||||||
|
$("#button-start-search").val(settings.start);
|
||||||
|
// Remove progress bar.
|
||||||
|
$("#progressbar_time").empty();
|
||||||
|
// Remove audio.
|
||||||
|
remove_audio();
|
||||||
|
// Clean events.
|
||||||
|
$("#tabs-sound-modal .elements-discovered-alerts ul").empty();
|
||||||
|
$("#tabs-sound-modal .empty-discovered-alerts").removeClass(
|
||||||
|
"invisible_important"
|
||||||
|
);
|
||||||
|
// Change img button.
|
||||||
|
$("#button-no-alerts")
|
||||||
|
.removeClass("silence-alerts")
|
||||||
|
.addClass("alerts");
|
||||||
|
// Change value button.
|
||||||
|
$("#button-no-alerts").val(settings.noAlert);
|
||||||
|
|
||||||
|
// Background button.
|
||||||
|
$(".container-button-alert").removeClass("fired");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function add_audio() {
|
||||||
|
var sound = "./include/sounds/" + $("#tabs-sound-modal #sound_id").val();
|
||||||
|
$(".actions-sound-modal").append(
|
||||||
|
"<audio id='id_sound_event' src='" +
|
||||||
|
sound +
|
||||||
|
"' autoplay='true' hidden='true' loop='false'>"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove_audio() {
|
||||||
|
$(".actions-sound-modal audio").remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function listen_event_sound(settings) {
|
||||||
|
progressTimeBar(
|
||||||
|
"progressbar_time",
|
||||||
|
$("#interval").val(),
|
||||||
|
"infinite",
|
||||||
|
function() {
|
||||||
|
// Search events.
|
||||||
|
check_event_sound(settings);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function check_event_sound(settings) {
|
||||||
|
jQuery.post(
|
||||||
|
"./ajax.php",
|
||||||
|
{
|
||||||
|
page: "include/ajax/events",
|
||||||
|
get_events_fired: 1,
|
||||||
|
filter_id: $("#tabs-sound-modal #filter_id").val(),
|
||||||
|
interval: $("#tabs-sound-modal #interval").val(),
|
||||||
|
time_sound: $("#tabs-sound-modal #time_sound").val()
|
||||||
|
},
|
||||||
|
function(data) {
|
||||||
|
if (data != false) {
|
||||||
|
// Hide empty.
|
||||||
|
$("#tabs-sound-modal .empty-discovered-alerts").addClass(
|
||||||
|
"invisible_important"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Change img button.
|
||||||
|
$("#button-no-alerts")
|
||||||
|
.removeClass("alerts")
|
||||||
|
.addClass("silence-alerts");
|
||||||
|
// Change value button.
|
||||||
|
$("#button-no-alerts").val(settings.silenceAlarm);
|
||||||
|
|
||||||
|
// Background button.
|
||||||
|
$(".container-button-alert").addClass("fired");
|
||||||
|
|
||||||
|
// Remove audio.
|
||||||
|
remove_audio();
|
||||||
|
|
||||||
|
// Apend audio.
|
||||||
|
add_audio();
|
||||||
|
|
||||||
|
// Add elements.
|
||||||
|
data.forEach(function(element) {
|
||||||
|
var li = document.createElement("li");
|
||||||
|
li.insertAdjacentHTML(
|
||||||
|
"beforeend",
|
||||||
|
'<div class="li-priority">' + element.priority + "</div>"
|
||||||
|
);
|
||||||
|
li.insertAdjacentHTML(
|
||||||
|
"beforeend",
|
||||||
|
'<div class="li-type">' + element.type + "</div>"
|
||||||
|
);
|
||||||
|
li.insertAdjacentHTML(
|
||||||
|
"beforeend",
|
||||||
|
'<div class="li-title">' + element.message + "</div>"
|
||||||
|
);
|
||||||
|
li.insertAdjacentHTML(
|
||||||
|
"beforeend",
|
||||||
|
'<div class="li-time">' + element.timestamp + "</div>"
|
||||||
|
);
|
||||||
|
$("#tabs-sound-modal .elements-discovered-alerts ul").append(li);
|
||||||
|
});
|
||||||
|
|
||||||
|
// -100 delay sound.
|
||||||
|
setTimeout(
|
||||||
|
remove_audio,
|
||||||
|
parseInt($("#tabs-sound-modal #time_sound").val()) * 1000 - 100
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"json"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
300
pandora_console/include/styles/sound_events.css
Normal file
300
pandora_console/include/styles/sound_events.css
Normal file
@ -0,0 +1,300 @@
|
|||||||
|
/*
|
||||||
|
* Css Modal Sound events.
|
||||||
|
*/
|
||||||
|
#modal-sound {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0px 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal h3.console-configuration {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 19px;
|
||||||
|
text-align: left;
|
||||||
|
text-transform: none;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.tabs-sound-modal-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0px;
|
||||||
|
border-bottom: 1px solid #eaeaea;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.tabs-sound-modal-options li {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
border: 0px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.tabs-sound-modal-options li.ui-tabs-active {
|
||||||
|
border-bottom: 2px solid #82b92e;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.wizard li label {
|
||||||
|
color: #95a3bf;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.wizard li.interval-sounds,
|
||||||
|
#tabs-sound-modal ul.wizard li.test-sounds {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.wizard li.interval-sounds label,
|
||||||
|
#tabs-sound-modal ul.wizard li.test-sounds label {
|
||||||
|
flex: 0;
|
||||||
|
width: inherit;
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.wizard li.interval-sounds label:first-of-type,
|
||||||
|
#tabs-sound-modal ul.wizard li.test-sounds label:first-of-type {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.wizard li.interval-sounds .select2 {
|
||||||
|
width: 48% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.wizard li.test-sounds .select2 {
|
||||||
|
width: 70% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.wizard li.test-sounds input[type="button"] {
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 131px;
|
||||||
|
height: 38px;
|
||||||
|
color: #95a3bf;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0px;
|
||||||
|
padding-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal button.upd,
|
||||||
|
input.upd {
|
||||||
|
background-image: url(../../images/sound_wave.png);
|
||||||
|
background-position: 90px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal ul.wizard .select2 {
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal .select2-selection {
|
||||||
|
border: 0px;
|
||||||
|
border-radius: 0px;
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal .select2-container,
|
||||||
|
#tabs-sound-modal .select2-selection__rendered {
|
||||||
|
padding-left: 0px;
|
||||||
|
color: #555555;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div h3.title-discovered-alerts {
|
||||||
|
margin: 0px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 19px;
|
||||||
|
text-align: left;
|
||||||
|
text-transform: none;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div span.text-discovered-alerts {
|
||||||
|
color: #95a3bf;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div .empty-discovered-alerts {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div .elements-discovered-alerts {
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div .elements-discovered-alerts ul {
|
||||||
|
width: 99%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div .elements-discovered-alerts ul li {
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
height: 46px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
color: #555555;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div .elements-discovered-alerts ul li div.li-priority {
|
||||||
|
flex: 0;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal
|
||||||
|
div
|
||||||
|
.elements-discovered-alerts
|
||||||
|
ul
|
||||||
|
li
|
||||||
|
div.li-priority
|
||||||
|
.mini-criticity {
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 6px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div .elements-discovered-alerts ul li div.li-type {
|
||||||
|
flex: 0;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div .elements-discovered-alerts ul li div.li-time {
|
||||||
|
flex: 0 1 100px;
|
||||||
|
text-align: end;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-sound-modal div .elements-discovered-alerts ul li div.li-title {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .buttons-sound-modal {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .buttons-sound-modal input[type="button"] {
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 107px;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .buttons-sound-modal button.play,
|
||||||
|
.actions-sound-modal .buttons-sound-modal input[type="button"].play {
|
||||||
|
background: url(../../images/play-white.png), transparent;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 70px 17px;
|
||||||
|
color: #ffffff;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .buttons-sound-modal button.stop,
|
||||||
|
.actions-sound-modal .buttons-sound-modal input[type="button"].stop {
|
||||||
|
background: url(../../images/stop.png), transparent;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 70px 17px;
|
||||||
|
color: #ffffff;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .buttons-sound-modal button.alerts,
|
||||||
|
.actions-sound-modal .buttons-sound-modal input[type="button"].alerts {
|
||||||
|
width: 154px;
|
||||||
|
color: #95a3bf;
|
||||||
|
background: url(../../images/alarm-off.png), transparent;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 108px 9px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .buttons-sound-modal button.silence-alerts,
|
||||||
|
.actions-sound-modal .buttons-sound-modal input[type="button"].silence-alerts {
|
||||||
|
width: 184px;
|
||||||
|
color: #ffffff;
|
||||||
|
background: url(../../images/silence-alerts.png), transparent;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 138px 9px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .container-button-play {
|
||||||
|
background: radial-gradient(118.26% 33.15%, #82b92e 0%, #1d4e4a 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .container-button-alert.fired {
|
||||||
|
background: #ee2132;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .progressbar {
|
||||||
|
width: 100%;
|
||||||
|
margin: 4px 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-sound-modal .progressbar .inner {
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
animation: progressbar-countdown;
|
||||||
|
/* Placeholder, this will be updated using javascript */
|
||||||
|
animation-duration: 40s;
|
||||||
|
/* We stop in the end */
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
/* Stay on pause when the animation is finished finished */
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
/* We start paused, we start the animation using javascript */
|
||||||
|
animation-play-state: paused;
|
||||||
|
/* We want a linear animation, ease-out is standard */
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes progressbar-countdown {
|
||||||
|
0% {
|
||||||
|
width: 100%;
|
||||||
|
background: #82b92e;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
width: 0%;
|
||||||
|
background: #e63c52;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -342,7 +342,8 @@ var test_sound = false;
|
|||||||
function test_sound_button() {
|
function test_sound_button() {
|
||||||
if (!test_sound) {
|
if (!test_sound) {
|
||||||
$("#button_try").attr('src', '../../images/icono_test.png');
|
$("#button_try").attr('src', '../../images/icono_test.png');
|
||||||
$('body').append("<audio src='../../include/sounds/Star_Trek_emergency_simulation.wav' autoplay='true' hidden='true' loop='false'>");
|
var sound = '../../include/sounds/' + $('#sound_id').val();
|
||||||
|
$('body').append("<audio src='"+sound+"' autoplay='true' hidden='true' loop='false'>");
|
||||||
test_sound = true;
|
test_sound = true;
|
||||||
} else {
|
} else {
|
||||||
$("#button_try").attr('src', '../../images/icono_test.png');
|
$("#button_try").attr('src', '../../images/icono_test.png');
|
||||||
|
|||||||
@ -419,12 +419,34 @@ if (check_acl($config['id_user'], 0, 'ER')
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Sound Events.
|
// Sound Events.
|
||||||
$javascript = "javascript: window.open('operation/events/sound_events.php');";
|
// $javascript = 'javascript: openSoundEventWindow();';
|
||||||
$javascript = 'javascript: openSoundEventWindow();';
|
// $sub[$javascript]['text'] = __('Sound Events');
|
||||||
|
// $sub[$javascript]['id'] = 'Sound Events';
|
||||||
|
// $sub[$javascript]['type'] = 'direct';
|
||||||
|
$data_sound = base64_encode(
|
||||||
|
json_encode(
|
||||||
|
[
|
||||||
|
'title' => __('Sound Console'),
|
||||||
|
'start' => __('Start'),
|
||||||
|
'stop' => __('Stop'),
|
||||||
|
'noAlert' => __('No alert'),
|
||||||
|
'silenceAlarm' => __('Silence alarm'),
|
||||||
|
'url' => ui_get_full_url('ajax.php'),
|
||||||
|
'page' => 'include/ajax/events',
|
||||||
|
]
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
$javascript = 'javascript: openSoundEventModal(\''.$data_sound.'\');';
|
||||||
$sub[$javascript]['text'] = __('Sound Events');
|
$sub[$javascript]['text'] = __('Sound Events');
|
||||||
$sub[$javascript]['id'] = 'Sound Events';
|
$sub[$javascript]['id'] = 'Sound Events Modal';
|
||||||
$sub[$javascript]['type'] = 'direct';
|
$sub[$javascript]['type'] = 'direct';
|
||||||
|
|
||||||
|
echo '<div id="modal-sound" style="display:none;"></div>';
|
||||||
|
|
||||||
|
ui_require_javascript_file('pandora_events');
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
function openSoundEventWindow() {
|
function openSoundEventWindow() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user