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
Binary file not shown.
|
After Width: | Height: | Size: 419 B |
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 B |
Binary file not shown.
|
After Width: | Height: | Size: 465 B |
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
Binary file not shown.
|
After Width: | Height: | Size: 284 B |
|
|
@ -55,6 +55,7 @@ if (! check_acl($config['id_user'], 0, 'ER')
|
|||
return;
|
||||
}
|
||||
|
||||
$drawConsoleSound = (bool) get_parameter('drawConsoleSound', false);
|
||||
$process_buffers = (bool) get_parameter('process_buffers', false);
|
||||
$get_extended_event = (bool) get_parameter('get_extended_event');
|
||||
$change_status = (bool) get_parameter('change_status');
|
||||
|
|
@ -2225,6 +2226,228 @@ if ($process_buffers === true) {
|
|||
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) {
|
||||
global $config;
|
||||
$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
|
||||
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"
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
if (!test_sound) {
|
||||
$("#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;
|
||||
} else {
|
||||
$("#button_try").attr('src', '../../images/icono_test.png');
|
||||
|
|
|
|||
|
|
@ -419,12 +419,34 @@ if (check_acl($config['id_user'], 0, 'ER')
|
|||
}
|
||||
|
||||
// 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]['id'] = 'Sound Events';
|
||||
$sub[$javascript]['id'] = 'Sound Events Modal';
|
||||
$sub[$javascript]['type'] = 'direct';
|
||||
|
||||
echo '<div id="modal-sound" style="display:none;"></div>';
|
||||
|
||||
ui_require_javascript_file('pandora_events');
|
||||
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
function openSoundEventWindow() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue