modal sound events pandora_enterprise#9095
This commit is contained in:
Daniel Barbero Martin
parent
e28bfe9f3f
commit
2dc16a2a19
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
|
|
@ -2227,7 +2227,188 @@ if ($process_buffers === true) {
|
|||
}
|
||||
|
||||
if ($drawConsoleSound === true) {
|
||||
$output = 'WIP';
|
||||
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 .= '<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 .= '</div>';
|
||||
$output .= '</div>';
|
||||
|
||||
$output .= '<div class="actions-sound-modal">';
|
||||
$output .= '<div id="progressbar_time"></div>';
|
||||
$output .= '<div class="buttons-sound-modal">';
|
||||
$output .= html_print_input(
|
||||
[
|
||||
'type' => 'button',
|
||||
'name' => 'start-search',
|
||||
'value' => __('Start'),
|
||||
'attributes' => 'class="sub play"',
|
||||
'return' => true,
|
||||
]
|
||||
);
|
||||
$output .= html_print_input(
|
||||
[
|
||||
'type' => 'button',
|
||||
'name' => 'no-alerts',
|
||||
'value' => __('No alerts'),
|
||||
'attributes' => 'class="sub alerts"',
|
||||
'return' => true,
|
||||
]
|
||||
);
|
||||
$output .= '</div>';
|
||||
$output .= '</div>';
|
||||
|
||||
echo $output;
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1063,7 +1063,8 @@ function openSoundEventModal(settings) {
|
|||
},
|
||||
dataType: "html",
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
$("#modal-sound").append(data);
|
||||
$("#tabs-sound-modal").tabs();
|
||||
},
|
||||
error: function(error) {
|
||||
console.error(error);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
/*
|
||||
* Css Modal Sound events.
|
||||
*/
|
||||
|
||||
#modal-sound {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#tabs-sound-modal {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.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-radius: 5px;
|
||||
width: 107px;
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
background-position: 0;
|
||||
}
|
||||
|
||||
#tabs-sound-modal button.play,
|
||||
input.play {
|
||||
background: url(../../images/sound_wave.png),
|
||||
radial-gradient(118.26% 33.15%, #82b92e 0%, #1d4e4a 100%);
|
||||
}
|
||||
|
||||
#tabs-sound-modal button.alerts,
|
||||
input.alerts {
|
||||
background-image: url(../../images/sound_wave.png);
|
||||
}
|
||||
|
||||
.actions-sound-modal .progressbar {
|
||||
width: 100%;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.actions-sound-modal .progressbar .inner {
|
||||
height: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -442,6 +442,8 @@ if (check_acl($config['id_user'], 0, 'ER')
|
|||
|
||||
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