From 3327d79ed62b38bc6f63611c57fe4c9f60c49c54 Mon Sep 17 00:00:00 2001
From: miguel angel rasteu <miguelangel.rasteu@pandorafms.com>
Date: Wed, 6 Sep 2023 09:35:12 +0200
Subject: [PATCH] #11442 Change Welcome tips arrows and buttons

---
 .../include/class/TipsWindow.class.php        |  21 +++-
 .../include/javascript/tipsWindow.js          | 101 ++++++++++++++----
 pandora_console/include/styles/pandora.css    |  22 ++++
 .../include/styles/tips_window.css            |   3 +-
 .../views/dashboard/tipsWindow.php            |  39 ++++---
 5 files changed, 144 insertions(+), 42 deletions(-)

diff --git a/pandora_console/include/class/TipsWindow.class.php b/pandora_console/include/class/TipsWindow.class.php
index ae4271fba9..6406c69194 100644
--- a/pandora_console/include/class/TipsWindow.class.php
+++ b/pandora_console/include/class/TipsWindow.class.php
@@ -47,6 +47,7 @@ class TipsWindow
         'renderPreview',
         'setShowTipsAtStartup',
         'getTips',
+        'getTipById',
     ];
 
     /**
@@ -221,8 +222,13 @@ class TipsWindow
      *
      * @return array   $tip
      */
-    public function getTipById($idTip)
+    public function getTipById($idTip=false, $return=false)
     {
+        if ($idTip === false) {
+            $idTip = get_parameter('idTip');
+        }
+
+        $return = get_parameter('return', false);
         $tip = db_get_row(
             'twelcome_tip',
             'id',
@@ -232,9 +238,20 @@ class TipsWindow
             $tip['title'] = io_safe_output($tip['title']);
             $tip['text'] = io_safe_output($tip['text']);
             $tip['url'] = io_safe_output($tip['url']);
+            $tip['files'] = $this->getFilesFromTip($tip['id']);
         }
 
-        return $tip;
+        if ($return !== false) {
+            if (empty($tip) === false) {
+                echo json_encode(['success' => true, 'data' => $tip]);
+                return;
+            } else {
+                echo json_encode(['success' => false]);
+                return;
+            }
+        } else {
+            return $tip;
+        }
     }
 
 
diff --git a/pandora_console/include/javascript/tipsWindow.js b/pandora_console/include/javascript/tipsWindow.js
index 94d28c9339..cb804ecebb 100644
--- a/pandora_console/include/javascript/tipsWindow.js
+++ b/pandora_console/include/javascript/tipsWindow.js
@@ -81,14 +81,17 @@ function removeInputImage(e) {
     $("#notices_images").addClass("invisible");
   }
 }
-function render({ title, text, url, files }) {
+function render({ title, text, url, files, method }) {
   $("#title_tip").html(title);
   $("#text_tip").html(text);
   if (url) {
-    $("#url_tip").removeClass("invisible");
+    $("#button-learn_more").removeAttr("disabled");
+    $("#button-learn_more").removeClass("disabled_button");
     $("#url_tip").attr("href", url);
   } else {
-    $("#url_tip").addClass("invisible");
+    $("#button-learn_more").attr("disabled", "disabled");
+    $("#button-learn_more").addClass("disabled_button");
+    $("#url_tip").attr("href", "");
   }
 
   $(".carousel").empty();
@@ -110,7 +113,11 @@ function render({ title, text, url, files }) {
       if (index >= limitRound - 1) {
         $($(".count-round-tip")[0]).addClass("active");
       } else {
-        $($(".count-round-tip")[index + 1]).addClass("active");
+        if (method == "next") {
+          $($(".count-round-tip")[index + 1]).addClass("active");
+        } else {
+          $($(".count-round-tip")[index - 1]).addClass("active");
+        }
       }
       return false;
     }
@@ -146,23 +153,79 @@ function render_counter() {
 function next_tip() {
   if (idTips.length >= totalTips) {
     idTips = [];
+    $("#hidden-tip_position").val(-1);
   }
-  $.ajax({
-    method: "POST",
-    url: url,
-    dataType: "json",
-    data: {
-      page: page,
-      method: "getRandomTip",
-      exclude: JSON.stringify(idTips)
-    },
-    success: function({ success, data }) {
-      if (success) {
-        idTips.push(parseInt(data.id));
-        render(data);
+  let tip_position = parseInt($("#hidden-tip_position").val()) + 1;
+  let idTip = idTips[tip_position];
+  if (idTip === undefined) {
+    $.ajax({
+      method: "POST",
+      url: url,
+      dataType: "json",
+      data: {
+        page: page,
+        method: "getRandomTip",
+        exclude: JSON.stringify(idTips)
+      },
+      success: function({ success, data }) {
+        if (success) {
+          let tip_position = parseInt($("#hidden-tip_position").val()) + 1;
+          $("#hidden-tip_position").val(tip_position);
+          idTips.push(parseInt(data.id));
+          data.method = "next";
+          render(data);
+        }
       }
-    }
-  });
+    });
+  } else {
+    $.ajax({
+      method: "POST",
+      url: url,
+      dataType: "json",
+      data: {
+        page: page,
+        method: "getTipById",
+        idTip: idTip,
+        return: true
+      },
+      success: function({ success, data }) {
+        if (success) {
+          let tip_position = parseInt($("#hidden-tip_position").val()) + 1;
+          $("#hidden-tip_position").val(tip_position);
+          data.method = "next";
+          render(data);
+        }
+      }
+    });
+  }
+}
+
+function previous_tip() {
+  let actual_tip_position = parseInt($("#hidden-tip_position").val());
+
+  if (actual_tip_position != 0) {
+    let tip_position = parseInt($("#hidden-tip_position").val()) - 1;
+    let idTip = idTips[tip_position];
+    $.ajax({
+      method: "POST",
+      url: url,
+      dataType: "json",
+      data: {
+        page: page,
+        method: "getTipById",
+        idTip: idTip,
+        return: true
+      },
+      success: function({ success, data }) {
+        if (success) {
+          let tip_position = parseInt($("#hidden-tip_position").val()) - 1;
+          $("#hidden-tip_position").val(tip_position);
+          data.method = "prev";
+          render(data);
+        }
+      }
+    });
+  }
 }
 
 function load_tips_modal(settings) {
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index d87d959ac5..3bbf8cb16d 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -12566,3 +12566,25 @@ tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"] input {
 .ui-date-range-in > a {
   background-color: #81b92e3b !important;
 }
+
+.ui-dialog .tips_header.ui-dialog-titlebar {
+  height: fit-content !important;
+}
+
+.arrow_counter:hover {
+  cursor: pointer;
+}
+
+.disabled_button {
+  background-color: #ccc !important;
+  border: 2px solid #444 !important;
+  color: #444 !important;
+}
+
+.disabled_button:hover {
+  cursor: not-allowed;
+}
+
+.counter-tips {
+  margin-right: 20px;
+}
diff --git a/pandora_console/include/styles/tips_window.css b/pandora_console/include/styles/tips_window.css
index 505799949b..53906401a8 100644
--- a/pandora_console/include/styles/tips_window.css
+++ b/pandora_console/include/styles/tips_window.css
@@ -21,7 +21,7 @@
   display: flex !important;
   padding: 0px 20px;
   justify-content: space-between;
-  height: fit-content;
+  height: fit-content !important;
   background-color: white;
   color: #161628;
   border-top-left-radius: 25px !important;
@@ -161,6 +161,7 @@ span.count-round-tip.active {
   margin-top: 10px;
 }
 .arrow_counter {
+  cursor: pointer;
   width: 7px;
   margin: 0px 5px;
 }
diff --git a/pandora_console/views/dashboard/tipsWindow.php b/pandora_console/views/dashboard/tipsWindow.php
index b9ff3f2420..573a11abcc 100644
--- a/pandora_console/views/dashboard/tipsWindow.php
+++ b/pandora_console/views/dashboard/tipsWindow.php
@@ -72,37 +72,36 @@ $output .= '<h2 id="title_tip">'.$title.'</h2>';
 $output .= '<p id="text_tip">';
 $output .= $text;
 $output .= '</p>';
-
-$link_class = 'invisible';
+$disabled_class = 'disabled_button';
+$disabled = true;
 if (empty($url) === false && $url !== '') {
-    $link_class = '';
+    $disabled_class = '';
+    $disabled = false;
 }
 
-$output .= '<a href="'.$url.'" class="'.$link_class.'" target="_blank" id="url_tip">'.__('See more info').'</a>';
-
 $output .= '</div>';
 
 $output .= '<div class="ui-dialog-buttonset">';
-
+$output .= '<a href="'.$url.'" class="" target="_blank" id="url_tip">';
 $output .= html_print_button(
-    __('Maybe later'),
+    __('Learn more'),
+    'learn_more',
+    $disabled,
     '',
-    false,
-    '',
-    [
-        'onclick' => 'close_dialog()',
-        'class'   => 'secondary mini',
-    ],
+    ['class' => 'secondary mini '.$disabled_class],
     true
 );
+$output .= '</a>';
 $output .= '<div class="counter-tips">';
-$output .= html_print_image('images/arrow-left-grey.png', true, ['class' => 'arrow_counter']);
-$output .= html_print_image('images/arrow-right-grey.png', true, ['class' => 'arrow_counter']);
+
+$output .= html_print_image('images/arrow-left-grey.png', true, ['class' => 'arrow_counter', 'onclick' => 'previous_tip()']);
+$output .= html_print_image('images/arrow-right-grey.png', true, ['class' => 'arrow_counter', 'onclick' => 'next_tip()']);
+$output .= html_print_input_hidden('tip_position', 0, true);
 $output .= '</div>';
 if ($preview === true) {
     $output .= html_print_button(
-        __('Ok'),
-        'next_tip',
+        __('Close'),
+        'close_dialog',
         false,
         '',
         [
@@ -113,12 +112,12 @@ if ($preview === true) {
     );
 } else {
     $output .= html_print_button(
-        __('Ok'),
-        'next_tip',
+        __('Close'),
+        'close_dialog',
         false,
         '',
         [
-            'onclick' => 'next_tip()',
+            'onclick' => 'close_dialog()',
             'class'   => ($totalTips === '1') ? 'mini hide-button' : 'mini',
         ],
         true