From 3a96c60bac9ac053abf1d31276f3f377931cd4e6 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.leon@pandorafms.com>
Date: Tue, 11 Apr 2023 13:50:11 +0200
Subject: [PATCH] #10191 new event sound modal

---
 pandora_console/include/ajax/events.php       |   2 +-
 .../include/javascript/pandora_events.js      |  15 +-
 .../include/styles/sound_events.css           |   4 -
 pandora_console/operation/events/events.php   | 106 +++
 .../operation/events/sound_events.php         | 712 +++++++++++-------
 5 files changed, 558 insertions(+), 281 deletions(-)

diff --git a/pandora_console/include/ajax/events.php b/pandora_console/include/ajax/events.php
index 8b3c15751b..f03c8af06b 100644
--- a/pandora_console/include/ajax/events.php
+++ b/pandora_console/include/ajax/events.php
@@ -2406,7 +2406,7 @@ if ($drawConsoleSound === true) {
                 'Star_Trek_emergency_simulation.wav' => 'StarTrek emergency simulation',
             ];
 
-            $eventsounds = mysql_db_get_all_rows_sql('SELECT * FROM tevent_sound WHERE active = 1');
+            $eventsounds = db_get_all_rows_sql('SELECT * FROM tevent_sound WHERE active = 1');
             foreach ($eventsounds as $key => $row) {
                 $sounds[$row['sound']] = $row['name'];
             }
diff --git a/pandora_console/include/javascript/pandora_events.js b/pandora_console/include/javascript/pandora_events.js
index 2f657779a6..74049462a1 100644
--- a/pandora_console/include/javascript/pandora_events.js
+++ b/pandora_console/include/javascript/pandora_events.js
@@ -947,8 +947,21 @@ function process_buffers(buffers) {
 }
 
 function openSoundEventModal(settings) {
-  settings = JSON.parse(atob(settings));
+  var win = open(
+    "http://172.16.0.2/pandora_console/operation/events/sound_events.php",
+    "day_123",
+    "width=600,height=500"
+  );
+  if (win) {
+    //Browser has allowed it to be opened
+    win.focus();
+  } else {
+    //Browser has blocked it
+    alert("Please allow popups for this website");
+  }
 
+  settings = JSON.parse(atob(settings));
+  console.log(settings);
   // Check modal exists and is open.
   if (
     $("#modal-sound").hasClass("ui-dialog-content") &&
diff --git a/pandora_console/include/styles/sound_events.css b/pandora_console/include/styles/sound_events.css
index 121b606d7e..5bab51a89d 100644
--- a/pandora_console/include/styles/sound_events.css
+++ b/pandora_console/include/styles/sound_events.css
@@ -231,10 +231,6 @@ div.container-button-play > button#button-start-search {
   border: 0;
 }
 
-button#button-start-search:hover {
-  background-position: 82px 14px !important;
-}
-
 .actions-sound-modal .buttons-sound-modal button.alerts,
 .actions-sound-modal .buttons-sound-modal input[type="button"].alerts {
   width: 154px;
diff --git a/pandora_console/operation/events/events.php b/pandora_console/operation/events/events.php
index 62a8850b80..2ed9d27e94 100644
--- a/pandora_console/operation/events/events.php
+++ b/pandora_console/operation/events/events.php
@@ -3006,6 +3006,11 @@ $(document).ready( function() {
 
     });
 
+    var show_event_dialog = "<?php echo get_parameter('show_event_dialog', ''); ?>";
+    if (show_event_dialog !== ''){
+        show_event_dialo(show_event_dialog);
+    }
+
     /* Multi select handler */
     $('#checkbox-all_validate_box').on('change', function() {
         if($('#checkbox-all_validate_box').is(":checked")) {
@@ -3250,4 +3255,105 @@ $(document).ready(function () {
 
     $('.white_table_graph_header').first().append($('.filter_summary'));
 });
+
+// Show the modal window of an event
+function show_event_dialo(event, dialog_page) {
+    var ajax_file = getUrlAjax();
+
+    var view = ``;
+
+    if ($("#event_details_window").length) {
+        view = "#event_details_window";
+    } else if ($("#sound_event_details_window").length) {
+        view = "#sound_event_details_window";
+    }
+
+    if (dialog_page == undefined) {
+        dialog_page = "general";
+    }
+
+    try {
+        event = event.replaceAll("&#x20;", "+");
+        event = JSON.parse(atob(event), true);
+    } catch (e) {
+        console.error(e);
+        return;
+    }
+
+    var inputs = $("#events_form :input");
+    var values = {};
+    inputs.each(function() {
+        values[this.name] = $(this).val();
+    });
+
+    // Metaconsole mode flag
+    var meta = $("#hidden-meta").val();
+
+    // History mode flag
+    var history = $("#hidden-history").val();
+
+    jQuery.post(
+        ajax_file,
+        {
+        page: "include/ajax/events",
+        get_extended_event: 1,
+        dialog_page: dialog_page,
+        event: event,
+        meta: meta,
+        history: history,
+        filter: values
+        },
+        function(data) {
+        $(view)
+            .hide()
+            .empty()
+            .append(data)
+            .dialog({
+            title: event.evento,
+            resizable: true,
+            draggable: true,
+            modal: true,
+            minWidth: 875,
+            minHeight: 600,
+            close: function() {
+                $("#refrcounter").countdown("resume");
+                $("div.vc-countdown").countdown("resume");
+            },
+            overlay: {
+                opacity: 0.5,
+                background: "black"
+            },
+            width: 710,
+            height: 650,
+            autoOpen: true,
+            open: function() {
+                if (
+                $.ui &&
+                $.ui.dialog &&
+                $.ui.dialog.prototype._allowInteraction
+                ) {
+                var ui_dialog_interaction =
+                    $.ui.dialog.prototype._allowInteraction;
+                $.ui.dialog.prototype._allowInteraction = function(e) {
+                    if ($(e.target).closest(".select2-dropdown").length)
+                    return true;
+                    return ui_dialog_interaction.apply(this, arguments);
+                };
+                }
+            },
+            _allowInteraction: function(event) {
+                return !!$(event.target).is(".select2-input") || this._super(event);
+            }
+            })
+            .show();
+
+        $("#refrcounter").countdown("pause");
+        $("div.vc-countdown").countdown("pause");
+
+        forced_title_callback();
+        },
+        "html"
+    );
+    return false;
+}
 </script>
diff --git a/pandora_console/operation/events/sound_events.php b/pandora_console/operation/events/sound_events.php
index f2a8c62432..efcbef4ab9 100644
--- a/pandora_console/operation/events/sound_events.php
+++ b/pandora_console/operation/events/sound_events.php
@@ -160,315 +160,477 @@ if ($config['style'] === 'pandora_black' && !is_metaconsole()) {
 }
 
 echo '</head>';
-echo "<body class='sound_events'>";
-echo "<h1 class='modalheaderh1'>".__('Accoustic console').'</h1>';
+echo '<body style="overflow: hidden;">';
+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>';
 
-// Connection lost alert.
-ui_require_css_file('register', 'include/styles/', true);
-$conn_title = __('Connection with server has been lost');
-$conn_text = __('Connection to the server has been lost. Please check your internet connection or contact with administrator.');
-ui_require_javascript_file('connection_check');
-set_js_value('absolute_homeurl', ui_get_full_url(false, false, false, false));
-ui_print_message_dialog(
-    $conn_title,
-    $conn_text,
-    'connection',
-    '/images/fail@svg.svg'
-);
+        // Content tabs.
+        $output .= '<div id="tabs-sound-modal-1">';
+        $output .= '<h3 class="console-configuration">';
+        $output .= __('Console configuration');
+        $output .= '</h3>';
+        $inputs = [];
 
-$inputs = [];
-
-// Load filter.
-$fields = \events_get_event_filter_select();
-$inputs[] = [
-    'label'     => \__('Load filter'),
-    'class'     => 'flex-row',
-    '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'         => 'flex-row flex-row-center',
-    'direct'        => 1,
-    'block_content' => [
-        [
-            'label'     => __('Interval'),
+        // Load filter.
+        $fields = \events_get_event_filter_select();
+        $inputs[] = [
+            'label'     => \__('Set condition'),
             'arguments' => [
-                'type'     => 'select',
-                'fields'   => $times_interval,
-                'name'     => 'interval',
-                'selected' => 10,
-                'return'   => true,
+                'type'          => 'select',
+                'fields'        => $fields,
+                'name'          => 'filter_id',
+                'selected'      => 0,
+                'return'        => true,
+                'nothing'       => \__('All new events'),
+                'nothing_value' => 0,
+                'class'         => 'fullwidth',
             ],
-        ],
-        [
-            'label'     => __('Time Sound'),
-            'arguments' => [
-                'type'     => 'select',
-                'fields'   => $times_sound,
-                'name'     => 'time_sound',
-                'selected' => 10,
-                'return'   => true,
+        ];
+
+        $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'     => __('Sound duration'),
+                    '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',
-];
+        $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',
+        ];
 
-$eventsounds = mysql_db_get_row_sql('SELECT * FROM tevent_sound WHERE active = 1');
-foreach ($eventsounds as $key => $row) {
-    $sounds[$row['sound']] = $row['name'];
-}
+        $eventsounds = db_get_all_rows_sql('SELECT * FROM tevent_sound WHERE active = 1');
+        foreach ($eventsounds as $key => $row) {
+            $sounds[$row['sound']] = $row['name'];
+        }
 
-$inputs[] = [
-    'label'     => \__('Sounds'),
-    'class'     => 'flex-row',
-    'arguments' => [
-        'type'     => 'select',
-        'fields'   => $sounds,
-        'name'     => 'sound_id',
-        'selected' => 'Star_Trek_emergency_simulation.wav',
-        'return'   => true,
-        'class'    => 'fullwidth',
-    ],
-];
+        $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' => ['icon' => 'sound'],
+                        'return'     => true,
+                    ],
+                ],
+            ],
+        ];
 
-// Print form.
-HTML::printForm(
-    [
-        'form'   => [
-            'action' => '',
-            'method' => 'POST',
-        ],
-        'inputs' => $inputs,
-    ],
-    false,
-    true
-);
+        // Print form.
+        $output .= HTML::printForm(
+            [
+                'form'   => [
+                    'action' => '',
+                    'method' => 'POST',
+                ],
+                'inputs' => $inputs,
+            ],
+            true,
+            false
+        );
+        $output .= '</div>';
 
-$result = '<div><ul class="events_fired">';
-$result .= '<li class="events_fired_li_empty">';
-$result .= ui_print_info_message(__('Events not found'), '', true);
-$result .= '</li>';
-$result .= '</ul></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 .= html_print_input_hidden(
+            'ajax_file_sound_console',
+            ui_get_full_url('ajax.php', false, false, false),
+            true
+        );
+        $output .= html_print_input_hidden(
+            'meta',
+            is_metaconsole(),
+            true
+        );
+        $output .= '<div id="sound_event_details_window"></div>';
+        $output .= '<div id="sound_event_response_window"></div>';
+        $output .= '</div>';
+        $output .= '</div>';
 
-$result .= '<div id="progressbar_time"></div>';
+        $output .= '<div class="actions-sound-modal">';
+        $output .= '<div id="progressbar_time"></div>';
+        $output .= '<div class="buttons-sound-modal mrgn_top_10px">';
+        $output .= html_print_button(
+            __('Start'),
+            'start-search',
+            false,
+            '',
+            [
+                'icon'  => 'cog',
+                'class' => 'mrgn_lft_20px',
+            ],
+            true
+        );
+        // $output .= html_print_submit_button(
+        // [
+        // 'label'      => __('Start'),
+        // 'type'       => 'button',
+        // 'name'       => 'start-search',
+        // 'attributes' => [ 'class' => 'play' ],
+        // 'return'     => true,
+        // ],
+        // 'div',
+        // true
+        // );
+        $output .= '<div class="container-button-alert mrgn_right_20px">';
+        $output .= html_print_input(
+            [
+                'type'       => 'button',
+                'name'       => 'no-alerts',
+                'label'      => __('No alerts'),
+                'attributes' => ['class' => 'secondary alerts'],
+                'return'     => true,
+            ],
+            'div',
+            true
+        );
+        $output .= '</div>';
 
-echo $result;
-
-$table = new StdClass;
-$table->width = '100%';
-$table->class = 'sound_div_background text_center';
-
-$table->data[0][0] = '<a href="javascript: toggleButton();">';
-$table->data[0][0] .= html_print_image(
-    'images/play.button.png',
-    true,
-    ['id' => 'button']
-);
-$table->data[0][0] .= '</a>';
-
-$table->data[0][1] = '<a href="javascript: ok();">';
-$table->data[0][1] .= html_print_image(
-    'images/ok.button.png',
-    true,
-    ['style' => 'margin-left: 15px;']
-);
-$table->data[0][1] .= '</a>';
-
-$table->data[0][2] = '<a href="javascript: test_sound_button();">';
-$table->data[0][2] .= html_print_image(
-    'images/icono_test.png',
-    true,
-    [
-        'id'    => 'button_try',
-        'style' => 'margin-left: 15px;',
-    ]
-);
-$table->data[0][2] .= '</a>';
-
-$table->data[0][3] = html_print_image(
-    'images/tick_sound_events.png',
-    true,
-    [
-        'id'    => 'button_status',
-        'style' => 'margin-left: 15px;',
-    ]
-);
-
-html_print_table($table);
-?>
+        $output .= html_print_input(
+            [
+                'type'   => 'hidden',
+                'name'   => 'mode_alert',
+                'value'  => 0,
+                'return' => true,
+            ],
+            'div',
+            true
+        );
+        $output .= '</div>';
+        $output .= '</div>';
+        echo $output;
+        ?>
 
 <script type="text/javascript">
-var control = false;
 
-var running = false;
-var id_row = 0;
-var button_play_status = "play";
-var test_sound = false;
-
-function test_sound_button() {
-    if (!test_sound) {
-        $("#button_try").attr('src', '../../images/icono_test.png');
-        var sound = '../../include/sounds/' + $('#sound_id').val();
-        $('body').append("<audio src='"+sound+"' autoplay='true' hidden='true' loop='false'>");
-        test_sound = true;
+function test_sound_button(test_sound, urlSound) {
+    if (test_sound === true) {
+        $("#button-melody_sound").addClass("blink-image");
+        add_audio(urlSound);
     } else {
-        $("#button_try").attr('src', '../../images/icono_test.png');
-        $('body audio').remove();
-        test_sound = false;
+        $("#button-melody_sound").removeClass("blink-image");
+        remove_audio();
     }
 }
 
-function toggleButton() {
-    if (button_play_status == 'pause') {
-        $("#button").attr('src', '../../images/play.button.png');
-        stopSound();
-        control.paused();
+function action_events_sound(mode) {
+    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("Stop");
+        $("#button-start-search > span").text("Stop");
+        // Add Progress bar.
+        listen_event_sound();
+    } 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("Start");
+        $("#button-start-search > span").text("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("No alert");
+        $("#button-no-alerts > span").text("No alert");
 
-        button_play_status = 'play';
-    }
-    else {
-        $("#button").attr('src', '../../images/pause.button.png');
-        forgetPreviousEvents();
-        startSound();
-
-        button_play_status = 'pause';
+        // Background button.
+        $(".container-button-alert").removeClass("fired");
     }
 }
 
-function ok() {
-    $('#button_status').attr('src','../../images/tick_sound_events.png');
-    $('audio').remove();
-    $('.events_fired').empty();
+function add_audio(urlSound) {
+    var sound = urlSound;
+    $(".actions-sound-modal").append(
+        "<audio id='id_sound_event' src='" +
+        sound +
+        "' autoplay='true' hidden='true' loop='false'>"
+    );
 }
 
-function stopSound() {
-    $('audio').remove();
-    $('body').css('background', '#494949');
-    running = false;
+function remove_audio() {
+    $(".actions-sound-modal audio").remove();
 }
 
-function startSound() {
-    running = true;
+function listen_event_sound() {
+    progressTimeBar(
+        "progressbar_time",
+        $("#interval").val(),
+        "infinite",
+        function() {
+        // Search events.
+        check_event_sound();
+        }
+    );
 }
 
-function forgetPreviousEvents() {
-    if(control === false) {
-        running = true;
-        control = progressTimeBar(
-            "progressbar_time",
-            $("#interval").val(),
-            'infinite',
-            function() {
-                check_event();
+function check_event_sound() {
+    jQuery.post(
+        $('#hidden-ajax_file_sound_console').val(),
+        {
+        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("Silence alarm");
+                $("#button-no-alerts > span").text("Silence alarm");
+
+                // Background button.
+                $(".container-button-alert").addClass("fired");
+
+                // Remove audio.
+                remove_audio();
+                var urlSound = '../../include/sounds/'+$('#sound_id :selected').val();
+                // Apend audio.
+                add_audio(urlSound);
+
+                // Add elements.
+                data.forEach(function(element) {
+                var li = document.createElement("li");
+                var b64 = btoa(JSON.stringify(element));
+                console.log(b64);
+                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"><a href="javascript:" onclick="open_window_dialog(`+b64+`)">${element.message}</a></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
+                );
             }
-        );
-    } else {
-        control.start();
-    }
+        },
+        "json"
+    );
 }
 
-function check_event() {
-    if (running) {
-        var sound = '../../include/sounds/' + $('#sound_id').val();
-        jQuery.post ("../../ajax.php",
-            {
-                "page" : "include/ajax/events",
-                "get_events_fired": 1,
-                "filter_id": $('#filter_id').val(),
-                "interval": $('#interval').val(),
-                "time_sound": $('#time_sound').val(),
-            },
-            function (data) {
-                if(data != false) {
-                    $('.events_fired_li_empty').remove();
-
-                    $('#button_status')
-                        .attr(
-                            'src','../../images/sound_events_console_alert.gif'
-                        );
-                    $('audio').remove();
-
-                    $('body')
-                        .append(
-                            "<audio id='audio-boom' src='" + sound + "' autoplay='true' hidden='true' loop='true' >"
-                        );
-
-                    data.forEach(function (element) {
-                        var li = document.createElement('li');
-                        li.insertAdjacentHTML(
-                            'beforeend',
-                            '<div class="flex0">'+element.priority+'</div>'
-                        );
-                        li.insertAdjacentHTML(
-                            'beforeend',
-                            '<div class="flex0">'+element.type+'</div>'
-                        );
-                        li.insertAdjacentHTML(
-                            'beforeend',
-                            '<div class="mess">'+element.message+'</div>'
-                        );
-                        li.insertAdjacentHTML(
-                            'beforeend',
-                            '<div class="flex-time">'+element.timestamp+'</div>'
-                        );
-                        $('.events_fired').append(li);
-                    });
-
-                    function removeAudio() {
-                        $('audio').remove();
-                    }
-
-                    // -100 delay sound.
-                    setTimeout(
-                        removeAudio,
-                        (parseInt($('#time_sound').val())  * 1000) - 100
-                    );
-                }
-            },
-            "json"
-        );
-    }
+function open_window_dialog(data) {
+    console.log(data);
+    window.open('http://172.16.0.2/pandora_console/index.php?sec=eventos&sec2=operation/events/events&show_event_dialog='+data);
+    //show_event_dialog(data);
 }
 
+$(document).ready(function(){
+
+    $("#tabs-sound-modal").tabs({
+        disabled: [1]
+    });
+
+    // Test sound.
+    $("#button-melody_sound").click(function() {
+        var sound = false;
+        if ($("#id_sound_event").length == 0) {
+            sound = true;
+        }
+        var urlSound = '../../include/sounds/'+$('#sound_id :selected').val();
+        console.log(urlSound);
+        test_sound_button(sound, 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);
+    });
+
+    // 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("No alert");
+        $("#button-no-alerts > span").text("No alert");
+
+        // Background button.
+        $(".container-button-alert").removeClass("fired");
+
+        // New progress.
+        listen_event_sound();
+        }
+    });
+});
+
 </script>
 
 <?php