#9073 added design v1

pandora_console/include/class/TipsWindow.class.php

@@ -127,31 +127,36 @@ class TipsWindow
     public function run()
     {
         ui_require_css_file('tips_window');
+        ui_require_css_file('jquery.bxslider');
         ui_require_javascript_file('tipsWindow');
-        echo '<div id="tips_window_modal" class="invisible"></div>';
+        ui_require_javascript_file('jquery.bxslider.min');
+        echo '<div id="tips_window_modal"></div>';
         ?>
 
-
-            <script>
-                load_modal({
-                target: $('#tips_window_modal'),
-                url: '<?php echo ui_get_full_url('ajax.php'); ?>',
-                modal: {
-                    title: '<?php echo __('Hola! estos son los tips del día'); ?>',
-                    ok: '<?php echo __('De acuerdo'); ?>'
-                },
-                onshow: {
-                    page: '<?php echo $this->ajaxController; ?>',
-                    method: 'renderView',
-                }
-            });
-            </script>
             <script>
                 var totalTips = <?php echo $this->getTotalTips(); ?>;
                 var idTips = [<?php echo $initialTip['id']; ?>];
                 var url = '<?php echo ui_get_full_url('ajax.php'); ?>';
                 var page = '<?php echo $this->ajaxController; ?>';
             </script>
+            <script>
+            if(totalTips > 0){
+                load_tips_modal({
+                    target: $('#tips_window_modal'),
+                    url: '<?php echo ui_get_full_url('ajax.php'); ?>',
+                    modal: {
+                        title: '<?php echo __('Hola! estos son los tips del día'); ?>',
+                        next: '<?php echo __('De acuerdo'); ?>',
+                        close: '<?php echo __('Quizás luego'); ?>'
+                    },
+                    onshow: {
+                        page: '<?php echo $this->ajaxController; ?>',
+                        method: 'renderView',
+                    }
+                });
+            }
+            </script>
+
         <?php
     }
 

pandora_console/include/javascript/tipsWindow.js

@@ -1,5 +1,9 @@
 /* globals $, idTips, totalTips, idTips, url, page */
-$(".carousel").ready(function() {
+$(".carousel .images").ready(function() {
+  if ($(".carousel .images img").length > 1) {
+    $(".carousel .images").bxSlider({ controls: true });
+  }
+});
 function render({ title, text, url, files }) {
   $("#title_tip").html(title);
   $("#text_tip").html(text);
@@ -16,7 +20,7 @@ $(".carousel").ready(function() {
   }
 }
 
-  $("#next_tip").on("click", function() {
+function next_tip() {
   if (idTips.length >= totalTips) {
     idTips = [];
   }
@@ -38,5 +42,142 @@ $(".carousel").ready(function() {
       }
     }
   });
+}
+
+function load_tips_modal(settings) {
+  var data = new FormData();
+  if (settings.extradata) {
+    settings.extradata.forEach(function(item) {
+      if (item.value != undefined) {
+        if (item.value instanceof Object || item.value instanceof Array) {
+          data.append(item.name, JSON.stringify(item.value));
+        } else {
+          data.append(item.name, item.value);
+        }
+      }
     });
+  }
+  data.append("page", settings.onshow.page);
+  data.append("method", settings.onshow.method);
+  if (settings.onshow.extradata != undefined) {
+    data.append("extradata", JSON.stringify(settings.onshow.extradata));
+  }
+
+  if (settings.target == undefined) {
+    var uniq = uniqId();
+    var div = document.createElement("div");
+    div.id = "div-modal-" + uniq;
+    div.style.display = "none";
+
+    if (document.getElementById("main") == null) {
+      // MC env.
+      document.getElementById("page").append(div);
+    } else {
+      document.getElementById("main").append(div);
+    }
+
+    var id_modal_target = "#div-modal-" + uniq;
+
+    settings.target = $(id_modal_target);
+  }
+
+  var width = 630;
+  if (settings.onshow.width) {
+    width = settings.onshow.width;
+  }
+
+  if (settings.modal.overlay == undefined) {
+    settings.modal.overlay = {
+      opacity: 0.5,
+      background: "black"
+    };
+  }
+
+  if (settings.beforeClose == undefined) {
+    settings.beforeClose = function() {};
+  }
+
+  settings.target.html("Loading modal...");
+  settings.target
+    .dialog({
+      title: "Loading",
+      close: false,
+      width: 200,
+      buttons: []
+    })
+    .show();
+
+  $.ajax({
+    method: "post",
+    url: settings.url,
+    processData: false,
+    contentType: false,
+    data: data,
+    success: function(data) {
+      if (settings.onshow.parser) {
+        data = settings.onshow.parser(data);
+      } else {
+        data = (function(d) {
+          try {
+            d = JSON.parse(d);
+          } catch (e) {
+            // Not JSON
+            return d;
+          }
+          if (d.error) return d.error;
+
+          if (d.result) return d.result;
+        })(data);
+      }
+      settings.target.html(data);
+      if (settings.onload != undefined) {
+        settings.onload(data);
+      }
+      settings.target.dialog({
+        resizable: true,
+        draggable: true,
+        modal: true,
+        header: false,
+        dialogClass: "dialog_tips",
+        title: settings.modal.title,
+        width: width,
+        minHeight:
+          settings.onshow.minHeight != undefined
+            ? settings.onshow.minHeight
+            : "auto",
+        maxHeight:
+          settings.onshow.maxHeight != undefined
+            ? settings.onshow.maxHeight
+            : "auto",
+        overlay: settings.modal.overlay,
+        position: {
+          my: "top+20%",
+          at: "top",
+          of: window,
+          collision: "fit"
+        },
+        closeOnEscape: true,
+        close: function() {
+          $(this).dialog("destroy");
+
+          if (id_modal_target != undefined) {
+            $(id_modal_target).remove();
+          }
+
+          if (settings.cleanup != undefined) {
+            settings.cleanup();
+          }
+        },
+        beforeClose: settings.beforeClose()
       });
+      $(".dialog_tips .ui-dialog-titlebar").empty();
+      $(".dialog_tips .ui-dialog-titlebar").append($(".tips_header").html());
+      $(".tips_header").remove();
+      $(".dialog_tips .ui-dialog-titlebar").addClass("tips_header");
+      $(".dialog_tips .ui-dialog-titlebar").removeClass("ui-helper-clearfix");
+    },
+    error: function(data) {
+      console.error(data);
+    }
+  });
+}

pandora_console/include/styles/jquery.bxslider.css

@@ -0,0 +1,172 @@
+/** VARIABLES
+===================================*/
+/** RESET AND LAYOUT
+===================================*/
+.bx-wrapper {
+  position: relative;
+  margin-bottom: 60px;
+  padding: 0;
+  *zoom: 1;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+}
+.bx-wrapper img {
+  max-width: 100%;
+  display: block;
+}
+.bxslider {
+  margin: 0;
+  padding: 0;
+}
+ul.bxslider {
+  list-style: none;
+}
+.bx-viewport {
+  /*fix other elements on the page moving (on Chrome)*/
+  -webkit-transform: translatez(0);
+}
+/** THEME
+  ===================================*/
+.bx-wrapper {
+  -moz-box-shadow: 0 0 5px transparent;
+  -webkit-box-shadow: 0 0 5px transparent;
+  box-shadow: 0 0 5px transparent;
+  border: 5px solid transparent;
+  background: transparent;
+}
+.bx-wrapper .bx-pager,
+.bx-wrapper .bx-controls-auto {
+  position: absolute;
+  bottom: -30px;
+  width: 100%;
+}
+/* LOADER */
+.bx-wrapper .bx-loading {
+  min-height: 50px;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+}
+/* PAGER */
+.bx-wrapper .bx-pager {
+  text-align: center;
+  font-size: 0.85em;
+  font-family: Arial;
+  font-weight: bold;
+  color: #666;
+  padding-top: 20px;
+}
+.bx-wrapper .bx-pager.bx-default-pager a {
+  background: #666;
+  text-indent: -9999px;
+  display: block;
+  width: 10px;
+  height: 10px;
+  margin: 0 5px;
+  outline: 0;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+.bx-wrapper .bx-pager.bx-default-pager a:hover,
+.bx-wrapper .bx-pager.bx-default-pager a.active,
+.bx-wrapper .bx-pager.bx-default-pager a:focus {
+  background: #000;
+}
+.bx-wrapper .bx-pager-item,
+.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
+  display: inline-block;
+  vertical-align: bottom;
+  *zoom: 1;
+  *display: inline;
+}
+.bx-wrapper .bx-pager-item {
+  font-size: 0;
+  line-height: 0;
+}
+/* DIRECTION CONTROLS (NEXT / PREV) */
+.bx-wrapper .bx-prev {
+  left: 10px;
+}
+.bx-wrapper .bx-prev:hover,
+.bx-wrapper .bx-prev:focus {
+  background-position: 0 0;
+}
+.bx-wrapper .bx-next {
+  right: 10px;
+}
+.bx-wrapper .bx-next:hover,
+.bx-wrapper .bx-next:focus {
+  background-position: -43px 0;
+}
+.bx-wrapper .bx-controls-direction a {
+  position: absolute;
+  top: 50%;
+  margin-top: -16px;
+  outline: 0;
+  width: 32px;
+  height: 32px;
+  text-indent: -9999px;
+  z-index: 9999;
+}
+.bx-wrapper .bx-controls-direction a.disabled {
+  display: none;
+}
+/* AUTO CONTROLS (START / STOP) */
+.bx-wrapper .bx-controls-auto {
+  text-align: center;
+}
+.bx-wrapper .bx-controls-auto .bx-start {
+  display: block;
+  text-indent: -9999px;
+  width: 10px;
+  height: 11px;
+  outline: 0;
+  margin: 0 3px;
+}
+.bx-wrapper .bx-controls-auto .bx-start:hover,
+.bx-wrapper .bx-controls-auto .bx-start.active,
+.bx-wrapper .bx-controls-auto .bx-start:focus {
+  background-position: -86px 0;
+}
+.bx-wrapper .bx-controls-auto .bx-stop {
+  display: block;
+  text-indent: -9999px;
+  width: 9px;
+  height: 11px;
+  outline: 0;
+  margin: 0 3px;
+}
+.bx-wrapper .bx-controls-auto .bx-stop:hover,
+.bx-wrapper .bx-controls-auto .bx-stop.active,
+.bx-wrapper .bx-controls-auto .bx-stop:focus {
+  background-position: -86px -33px;
+}
+/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
+.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
+  text-align: left;
+  width: 80%;
+}
+.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
+  right: 0;
+  width: 35px;
+}
+/* IMAGE CAPTIONS */
+.bx-wrapper .bx-caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: #666;
+  background: rgba(80, 80, 80, 0.75);
+  width: 100%;
+}
+.bx-wrapper .bx-caption span {
+  color: #fff;
+  font-family: Arial;
+  display: block;
+  font-size: 0.85em;
+  padding: 10px;
+}

pandora_console/include/styles/tips_window.css

@@ -7,15 +7,25 @@
   left: 0;
   z-index: 2001;
 }
+#tips_window_modal {
+  padding: 0px;
+}
 .window {
-  background-color: white;
+  background-image: linear-gradient(180deg, #fffce8 0%, #ffffff 100%);
+  width: 640px;
   width: 100%;
   border-radius: 5px;
 }
-.tips_header {
+.ui-dialog .tips_header.ui-dialog-titlebar {
   display: flex;
   padding: 0px 20px;
   justify-content: space-between;
+  height: fit-content;
+  background-color: white;
+  color: #161628;
+}
+.tips_header .title {
+  font-size: 15px;
 }
 .description {
   padding: 20px;
@@ -30,8 +40,11 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  max-width: 900px;
+  max-width: 464px;
-  height: 400px;
+  max-height: 290px;
+  text-align: center;
+  margin: 0 auto;
+  padding-top: 20px;
 }
 .carousel .prev_step {
   position: absolute;
@@ -65,7 +78,63 @@
 .carousel .images img {
   width: 100%;
 }
-.title {
+.dialog_tips .ui-dialog-buttonset {
-  margin: 0;
+  display: flex;
-  padding: 0;
+  width: 100%;
+  justify-content: space-between;
+}
+#tips_window_modal .ui-dialog-buttonset button.submit-cancel-tips {
+  border-radius: 6px;
+  color: #14524f;
+  width: fit-content;
+  font-size: 15px;
+  border: 1px solid #14524f;
+  height: 35px;
+  margin: 0px;
+  background-color: #ffffff;
+  font-weight: 600;
+}
+#tips_window_modal .ui-dialog-buttonset button.submit-next-tips {
+  border-radius: 6px;
+  color: #ffffff;
+  width: fit-content;
+  font-size: 15px;
+  border: 1px solid #14524f;
+  background-color: #14524f;
+  height: 35px;
+  font-weight: 600;
+}
+.dialog_tips {
+  border-radius: 10px !important;
+}
+.dialog_tips .ui-widget-header {
+  margin: 0px !important;
+}
+.dialog_tips .tips_header {
+  border-top-right-radius: 10px !important;
+  border-top-left-radius: 10px !important;
+}
+#tips_window_modal .ui-dialog-buttonset button {
+  margin: 0px 20px !important;
+  margin-top: 10px !important;
+}
+.dialog_tips .ui-dialog-buttonset {
+  border-bottom-right-radius: 10px !important;
+  border-bottom-left-radius: 10px !important;
+  border-top: 1px solid #c1ccdc;
+}
+#title_tip {
+  font-size: 15px;
+  color: #161628;
+}
+#text_tip {
+  color: #161628;
+}
+#url_tip {
+  font-size: 13px;
+  color: #14524f;
+  font-weight: 600;
+}
+#url_tip .arrow_tips {
+  font-size: 20px;
 }

pandora_console/views/dashboard/tipsWindow.php

@@ -1,9 +1,37 @@
+<?php
+/**
+ * Dashboards Modal for tips
+ *
+ * @category   Console Class
+ * @package    Pandora FMS
+ * @subpackage Dashboards
+ * @version    1.0.0
+ * @license    See below
+ *
+ *    ______                 ___                    _______ _______ ________
+ *   |   __ \.-----.--.--.--|  |.-----.----.-----. |    ___|   |   |     __|
+ *  |    __/|  _  |     |  _  ||  _  |   _|  _  | |    ___|       |__     |
+ * |___|   |___._|__|__|_____||_____|__| |___._| |___|   |__|_|__|_______|
+ *
+ * ============================================================================
+ * Copyright (c) 2005-2021 Artica Soluciones Tecnologicas
+ * Please see http://pandorafms.org for full contribution list
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation for version 2.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * ============================================================================
+ */
+?>
 <div class="window">
 <div class="tips_header">
-    <p><input type="checkbox" name="tips_in_start"/>Ver típs al iniciar</p>
+    <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' : ''; ?>">
-    <button class="next_step">></button>
     <div class="images">
     <?php if ($files !== false) : ?>
         <?php foreach ($files as $key => $file) : ?>
@@ -11,7 +39,6 @@
         <?php endforeach; ?>
     <?php endif; ?>
     </div>
-    <button class="prev_step"><</button>
 </div>
 
 <div class="description">
@@ -19,9 +46,13 @@
     <p id="text_tip">
         <?php echo $text; ?>
     </p>
-    <a href="<?php echo $url; ?>" id="url_tip"><?php echo __('Más información'); ?></a>
+    <?php if (empty($url) === false) : ?>
+        <a href="<?php echo $url; ?>" id="url_tip"><?php echo __('Ver más info'); ?> <span class="arrow_tips">→</span></a>
+    <?php endif; ?>
 </div>
-<div class="actions">
+
-    <button id="next_tip"><?php echo __('Siguiente'); ?></button>
+<div class="ui-dialog-buttonset">
+    <button type="button" class="submit-cancel-tips ui-button ui-corner-all ui-widget">Quizás luego</button>
+    <button type="button" class="submit-next-tips ui-button ui-corner-all ui-widget">De acuerdo</button>
 </div>
 </div>