modal sound events pandora_enterprise#9095
This commit is contained in:
Daniel Barbero Martin
parent
15363b1ac5
commit
033027f360
Binary file not shown.
|
After Width: | Height: | Size: 419 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: 284 B |
|
|
@ -2381,30 +2381,65 @@ if ($drawConsoleSound === true) {
|
|||
$output .= '</div>';
|
||||
|
||||
$output .= '<div id="tabs-sound-modal-2">';
|
||||
$output .= '<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>';
|
||||
$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',
|
||||
'value' => __('Start'),
|
||||
'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',
|
||||
'value' => __('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>';
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
@ -1042,6 +1042,7 @@ function openSoundEventModal(settings) {
|
|||
|
||||
// Initialize modal.
|
||||
$("#modal-sound")
|
||||
.empty()
|
||||
.dialog({
|
||||
title: settings.title,
|
||||
resizable: false,
|
||||
|
|
@ -1064,7 +1065,60 @@ function openSoundEventModal(settings) {
|
|||
dataType: "html",
|
||||
success: function(data) {
|
||||
$("#modal-sound").append(data);
|
||||
$("#tabs-sound-modal").tabs();
|
||||
$("#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);
|
||||
|
|
@ -1072,8 +1126,158 @@ function openSoundEventModal(settings) {
|
|||
});
|
||||
},
|
||||
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"
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
/*
|
||||
* Css Modal Sound events.
|
||||
*/
|
||||
|
||||
#modal-sound {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 0px 20px !important;
|
||||
}
|
||||
|
||||
#tabs-sound-modal {
|
||||
background-color: transparent;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.actions-sound-modal {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#tabs-sound-modal h3.console-configuration {
|
||||
|
|
@ -117,6 +121,86 @@ input.upd {
|
|||
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;
|
||||
|
|
@ -125,33 +209,72 @@ input.upd {
|
|||
}
|
||||
|
||||
.actions-sound-modal .buttons-sound-modal input[type="button"] {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
width: 107px;
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
background-position: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#tabs-sound-modal button.play,
|
||||
input.play {
|
||||
background: url(../../images/sound_wave.png),
|
||||
radial-gradient(118.26% 33.15%, #82b92e 0%, #1d4e4a 100%);
|
||||
.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;
|
||||
}
|
||||
|
||||
#tabs-sound-modal button.alerts,
|
||||
input.alerts {
|
||||
background-image: url(../../images/sound_wave.png);
|
||||
.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: 5px 0px;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -419,24 +419,27 @@ if (check_acl($config['id_user'], 0, 'ER')
|
|||
}
|
||||
|
||||
// Sound Events.
|
||||
$javascript = 'javascript: openSoundEventWindow();';
|
||||
$sub[$javascript]['text'] = __('Sound Events');
|
||||
$sub[$javascript]['id'] = 'Sound Events';
|
||||
$sub[$javascript]['type'] = 'direct';
|
||||
|
||||
// $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'),
|
||||
'url' => ui_get_full_url('ajax.php'),
|
||||
'page' => 'include/ajax/events',
|
||||
'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 Modal');
|
||||
$sub[$javascript]['text'] = __('Sound Events');
|
||||
$sub[$javascript]['id'] = 'Sound Events Modal';
|
||||
$sub[$javascript]['type'] = 'direct';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue