#9073 added counter round un footer

pandora_console/include/class/TipsWindow.class.php

@@ -131,10 +131,12 @@ class TipsWindow
         ui_require_javascript_file('tipsWindow');
         ui_require_javascript_file('jquery.bxslider.min');
         echo '<div id="tips_window_modal"></div>';
+        $this->totalTips = $this->getTotalTips();
+        if ($this->totalTips > 0) {
             ?>
 
                 <script>
-                var totalTips = <?php echo $this->getTotalTips(); ?>;
+                    var totalTips = <?php echo $this->totalTips; ?>;
                     var idTips = [<?php echo $initialTip['id']; ?>];
                     var url = '<?php echo ui_get_full_url('ajax.php'); ?>';
                     var page = '<?php echo $this->ajaxController; ?>';
@@ -159,6 +161,7 @@ class TipsWindow
 
             <?php
         }
+    }
 
 
     public function renderView()

pandora_console/include/javascript/tipsWindow.js

@@ -7,17 +7,55 @@ $(".carousel .images").ready(function() {
 function render({ title, text, url, files }) {
   $("#title_tip").html(title);
   $("#text_tip").html(text);
+  if (url) {
+    $("#url_tip").removeClass("invisible");
     $("#url_tip").attr("href", url);
+  } else {
+    $("#url_tip").addClass("invisible");
+  }
+
   $(".carousel .images").empty();
 
   if (files) {
     files.forEach(file => {
-      $(".carousel .images").append(`<img src="${file.filename}" />`);
+      $(".carousel .images").append(
+        `<img src="${file.path + file.filename}" />`
+      );
     });
     $(".carousel").removeClass("invisible");
   } else {
     $(".carousel").addClass("invisible");
   }
+  var limitRound = totalTips > 28 ? 28 : totalTips;
+  $(".count-round-tip").each(function(index) {
+    if ($(this).hasClass("active")) {
+      $(this).removeClass("active");
+      if (index >= limitRound - 1) {
+        $($(".count-round-tip")[0]).addClass("active");
+      } else {
+        $($(".count-round-tip")[index + 1]).addClass("active");
+      }
+      return false;
+    }
+  });
+}
+
+function close_dialog() {
+  $("#tips_window_modal").dialog("close");
+  $("#tips_window_modal").remove();
+}
+
+function render_counter() {
+  $(".counter-tips img:eq(0)").after(
+    "<span class='count-round-tip active'></span>"
+  );
+  if (totalTips > 1) {
+    for (let i = 1; i <= totalTips - 1; i++) {
+      $(".count-round-tip:eq(0)").after(
+        "<span class='count-round-tip'></span>"
+      );
+    }
+  }
 }
 
 function next_tip() {
@@ -134,7 +172,7 @@ function load_tips_modal(settings) {
         settings.onload(data);
       }
       settings.target.dialog({
-        resizable: true,
+        resizable: false,
         draggable: true,
         modal: true,
         header: false,
@@ -175,6 +213,7 @@ function load_tips_modal(settings) {
       $(".tips_header").remove();
       $(".dialog_tips .ui-dialog-titlebar").addClass("tips_header");
       $(".dialog_tips .ui-dialog-titlebar").removeClass("ui-helper-clearfix");
+      render_counter();
     },
     error: function(data) {
       console.error(data);

pandora_console/include/styles/tips_window.css

@@ -138,3 +138,22 @@
 #url_tip .arrow_tips {
   font-size: 20px;
 }
+span.count-round-tip {
+  width: 6px !important;
+  height: 6px !important;
+  background: #dbdfe6;
+  border-radius: 10px;
+  margin: 0px 2px;
+}
+span.count-round-tip.active {
+  background-color: #1d7874;
+}
+.counter-tips {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+.arrow-counter {
+  width: 7px;
+  margin: 0px 5px;
+}

pandora_console/views/dashboard/tipsWindow.php

@@ -3,14 +3,14 @@
  * Dashboards Modal for tips
  *
  * @category   Console Class
- * @package    Pandora FMS
+ $output .= '* @packagePandora FMS';
  * @subpackage Dashboards
- * @version    1.0.0
+ $output .= '* @version1.0.0';
- * @license    See below
+ $output .= '* @licenseSee below';
  *
- *    ______                 ___                    _______ _______ ________
+ $output .= '*______ __________ _______ ________';
- *   |   __ \.-----.--.--.--|  |.-----.----.-----. |    ___|   |   |     __|
+ $output .= '*   |   __ \.-----.--.--.--|  |.-----.----.-----. |___|   |   | __|';
- *  |    __/|  _  |     |  _  ||  _  |   _|  _  | |    ___|       |__     |
+ $output .= '*  |__/|  _  | |  _  ||  _  |   _|  _  | |___|   |__ |';
  * |___|   |___._|__|__|_____||_____|__| |___._| |___|   |__|_|__|_______|
  *
  * ============================================================================
@@ -25,34 +25,45 @@
  * GNU General Public License for more details.
  * ============================================================================
  */
-?>
+$output = '';
-<div class="window">
-<div class="tips_header">
-    <p class="title"><?php echo __('¡Hola! estos son los tips del día.'); ?></p>
-    <p><?php echo html_print_checkbox('tips_in_start', true, true, true); ?>Ver típs al iniciar</p>
-</div>
-<div class="carousel <?php echo ($files === false) ? 'invisible' : ''; ?>">
-    <div class="images">
-    <?php if ($files !== false) : ?>
-        <?php foreach ($files as $key => $file) : ?>
-            <img src="<?php echo $file['filename']; ?>" />
-        <?php endforeach; ?>
-    <?php endif; ?>
-    </div>
-</div>
 
-<div class="description">
+$output .= '<div class="window">';
-    <h2 id="title_tip"><?php echo $title; ?></h2>
+$output .= '<div class="tips_header">';
-    <p id="text_tip">
+$output .= '<p class="title">'.__('¡Hola! estos son los tips del día.').'</p>';
-        <?php echo $text; ?>
+$output .= '<p>'.html_print_checkbox('tips_in_start', true, true, true).__('Ver típs al iniciar').'</p>';
-    </p>
+$output .= '</div>';
-    <?php if (empty($url) === false) : ?>
+$output .= '<div class="carousel'.(($files === false) ? 'invisible' : '').'">';
-        <a href="<?php echo $url; ?>" id="url_tip"><?php echo __('Ver más info'); ?> <span class="arrow_tips">→</span></a>
+$output .= '<div class="images">';
-    <?php endif; ?>
-</div>
 
-<div class="ui-dialog-buttonset">
+if ($files !== false) {
-    <button type="button" class="submit-cancel-tips ui-button ui-corner-all ui-widget">Quizás luego</button>
+    foreach ($files as $key => $file) {
-    <button type="button" class="submit-next-tips ui-button ui-corner-all ui-widget">De acuerdo</button>
+        $output .= html_print_image($file['path'].$file['filename'], true);
-</div>
+    }
-</div>
+}
+
+$output .= '</div>';
+$output .= '</div>';
+
+$output .= '<div class="description">';
+$output .= '<h2 id="title_tip">'.$title.'</h2>';
+$output .= '<p id="text_tip">';
+$output .= $text;
+$output .= '</p>';
+
+if (empty($url) === false && $url !== '') {
+    $output .= '<a href="'.$url.'" id="url_tip">'.__('Ver más info').'<span class="arrow_tips">→</span></a>';
+}
+
+$output .= '</div>';
+
+$output .= '<div class="ui-dialog-buttonset">';
+// TODO Delete this buttons and use html_print_button when merge new design
+$output .= '<button type="button" class="submit-cancel-tips ui-button ui-corner-all ui-widget" onclick="close_dialog()">Quizás luego</button>';
+$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 .= '</div>';
+$output .= '<button type="button" class="submit-next-tips ui-button ui-corner-all ui-widget" onclick="next_tip()">De acuerdo</button>';
+$output .= '</div>';
+$output .= '</div>';
+echo $output;