#9073 create button for preview tip

pandora_console/include/class/TipsWindow.class.php

@@ -45,6 +45,7 @@ class TipsWindow
     public $AJAXMethods = [
         'getRandomTip',
         'renderView',
+        'renderPreview',
         'setShowTipsAtStartup',
         'getTips',
     ];
@@ -171,6 +172,33 @@ class TipsWindow
     }
 
 
+    public function renderPreview()
+    {
+        $title = get_parameter('title', '');
+        $text = get_parameter('text', '');
+        $url = get_parameter('url', '');
+        $files = get_parameter('files', '');
+        if (empty($files) === false) {
+            $files = explode(',', $files);
+        }
+
+        foreach ($files as $key => $value) {
+            $files[$key] = str_replace(ui_get_full_url('/'), '', $value);
+        }
+
+        View::render(
+            'dashboard/tipsWindow',
+            [
+                'title'   => $title,
+                'text'    => $text,
+                'url'     => $url,
+                'preview' => true,
+                'files'   => $files,
+            ]
+        );
+    }
+
+
     public function getTipById($idTip)
     {
         $tip = db_get_row(
@@ -543,8 +571,10 @@ class TipsWindow
 
     public function viewCreate($errors=null)
     {
-        ui_require_javascript_file('tipsWindow');
         ui_require_css_file('tips_window');
+        ui_require_css_file('jquery.bxslider');
+        ui_require_javascript_file('tipsWindow');
+        ui_require_javascript_file('jquery.bxslider.min');
 
         if ($errors !== null) {
             if (count($errors) > 0) {
@@ -558,6 +588,11 @@ class TipsWindow
 
         $profiles = profile_get_profiles();
 
+        echo '<script>
+                var url = "'.ui_get_full_url('ajax.php').'";
+                var page = "'.$this->ajaxController.'";
+                var totalTips = 1;
+              </script>';
         $table = new stdClass();
         $table->width = '100%';
         $table->class = 'databox filters';
@@ -600,10 +635,19 @@ class TipsWindow
         echo '<form name="grupo" method="post" action="index.php?sec=gsetup&sec2=godmode/setup/setup&section=welcome_tips&view=create&action=create" enctype="multipart/form-data">';
         html_print_table($table);
         echo '<div class="action-buttons" style="width: '.$table->width.'">';
+        html_print_submit_button(
+            __('Preview'),
+            'preview_button',
+            false,
+            [
+                'class' => 'sub preview',
+                'id'    => 'prev_button',
+            ]
+        );
         html_print_submit_button(__('Send'), 'submit_button', false, ['class' => 'sub next']);
-
         echo '</div>';
         echo '</form>';
+        html_print_div(['id' => 'tips_window_modal_preview']);
     }
 
 
@@ -616,8 +660,10 @@ class TipsWindow
 
         $files = $this->getFilesFromTip($idTip);
 
-        ui_require_javascript_file('tipsWindow');
         ui_require_css_file('tips_window');
+        ui_require_css_file('jquery.bxslider');
+        ui_require_javascript_file('tipsWindow');
+        ui_require_javascript_file('jquery.bxslider.min');
 
         if ($errors !== null) {
             if (count($errors) > 0) {
@@ -654,6 +700,11 @@ class TipsWindow
 
         $profiles = profile_get_profiles();
 
+        echo '<script>
+                var url = "'.ui_get_full_url('ajax.php').'";
+                var page = "'.$this->ajaxController.'";
+                var totalTips = 1;
+              </script>';
         $table = new stdClass();
         $table->width = '100%';
         $table->class = 'databox filters';
@@ -698,10 +749,20 @@ class TipsWindow
         echo '<form name="grupo" method="post" action="index.php?sec=gsetup&sec2=godmode/setup/setup&section=welcome_tips&view=edit&action=edit&idTip='.$tip['id'].'" enctype="multipart/form-data">';
         html_print_table($table);
         echo '<div class="action-buttons" style="width: '.$table->width.'">';
+        html_print_submit_button(
+            __('Preview'),
+            'preview_button',
+            false,
+            [
+                'class' => 'sub preview',
+                'id'    => 'prev_button',
+            ]
+        );
         html_print_submit_button(__('Send'), 'submit_button', false, ['class' => 'sub next']);
 
         echo '</div>';
         echo '</form>';
+        html_print_div(['id' => 'tips_window_modal_preview']);
     }
 
 

pandora_console/include/javascript/tipsWindow.js

@@ -18,6 +18,10 @@ $(document).ready(function() {
   $("#image-delete_image_tip1").on("click", function(e) {
     e.preventDefault();
   });
+  $("#submit-preview_button").on("click", function(e) {
+    e.preventDefault();
+    previewTip();
+  });
 });
 
 $("#checkbox_tips_startup").ready(function() {
@@ -116,8 +120,15 @@ function render({ title, text, url, files }) {
 }
 
 function close_dialog() {
-  $("#tips_window_modal").dialog("close");
+  if ($("#tips_window_modal").length > 0) {
-  $("#tips_window_modal").remove();
+    $("#tips_window_modal").dialog("close");
+    $("#tips_window_modal").remove();
+  }
+
+  if ($("#tips_window_modal_preview").length > 0) {
+    $("#tips_window_modal_preview").dialog("close");
+    $("#tips_window_modal_preview").empty();
+  }
 }
 
 function render_counter() {
@@ -160,14 +171,8 @@ function next_tip() {
 function load_tips_modal(settings) {
   var data = new FormData();
   if (settings.extradata) {
-    settings.extradata.forEach(function(item) {
+    Object.keys(settings.extradata).forEach(key => {
-      if (item.value != undefined) {
+      data.append(key, settings.extradata[key]);
-        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);
@@ -288,3 +293,28 @@ function load_tips_modal(settings) {
     }
   });
 }
+
+function previewTip() {
+  var extradata = {
+    title: $("input[name=title]").val(),
+    text: $("textarea[name=text]").val(),
+    url: $("input[name=url]").val()
+  };
+
+  //first images that can delete
+  if ($(".image_tip img").length > 0) {
+    extradata["files"] = [];
+    $(".image_tip img").each(function(index) {
+      extradata["files"].push($(".image_tip img")[index].src);
+    });
+  }
+  load_tips_modal({
+    target: $("#tips_window_modal_preview"),
+    url: url,
+    onshow: {
+      page: page,
+      method: "renderPreview"
+    },
+    extradata //Receive json
+  });
+}

pandora_console/include/styles/pandora.css

@@ -1834,6 +1834,7 @@ button.filter,
 button.cancel,
 button.default,
 button.deploy,
+button.preview,
 input.deploy,
 input.next,
 input.upd,
@@ -1854,10 +1855,14 @@ input.filter,
 input.cancel,
 input.default,
 input.pdf,
-input.spinn {
+input.spinn,
+input.preview {
   padding-right: 30px;
 }
-
+button.preview,
+input.preview {
+  background-image: url(../../images/eye.png);
+}
 button.next,
 input.next {
   background-image: url(../../images/input_go.png);

pandora_console/include/styles/tips_window.css

@@ -7,7 +7,8 @@
   left: 0;
   z-index: 2001;
 }
-#tips_window_modal {
+#tips_window_modal,
+#tips_window_modal_preview {
   padding: 0px;
 }
 .window {
@@ -40,7 +41,7 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: 264px;
+  height: 280px;
   max-width: 464px;
   text-align: center;
   margin: 0 auto;
@@ -84,7 +85,8 @@
   width: 100%;
   justify-content: space-between;
 }
-#tips_window_modal .ui-dialog-buttonset button.submit-cancel-tips {
+#tips_window_modal .ui-dialog-buttonset button.submit-cancel-tips,
+#tips_window_modal_preview .ui-dialog-buttonset button.submit-cancel-tips {
   border-radius: 6px;
   color: #14524f;
   width: fit-content;
@@ -95,7 +97,8 @@
   background-color: #ffffff;
   font-weight: 600;
 }
-#tips_window_modal .ui-dialog-buttonset button.submit-next-tips {
+#tips_window_modal .ui-dialog-buttonset button.submit-next-tips,
+#tips_window_modal_preview .ui-dialog-buttonset button.submit-next-tips {
   border-radius: 6px;
   color: #ffffff;
   width: fit-content;
@@ -115,7 +118,8 @@
   border-top-right-radius: 10px !important;
   border-top-left-radius: 10px !important;
 }
-#tips_window_modal .ui-dialog-buttonset button {
+#tips_window_modal .ui-dialog-buttonset button,
+#tips_window_modal_preview .ui-dialog-buttonset button {
   margin: 0px 20px !important;
   margin-top: 10px !important;
 }
@@ -195,3 +199,7 @@ span.disable {
 #notices_images {
   color: #e63c52;
 }
+.preview {
+  background-position: 92% 10px !important;
+  margin-right: 20px !important;
+}

pandora_console/views/dashboard/tipsWindow.php

@@ -39,15 +39,21 @@ $output .= '<p>'.html_print_checkbox(
     '',
     false,
     '',
-    'checkbox_tips_startup'
+    ($preview === true) ? '' : 'checkbox_tips_startup'
 ).__('Show usage tips at startup').'</p>';
 $output .= '</div>';
 $output .= '<div class="carousel '.(($files === false) ? 'invisible' : '').'">';
 $output .= '<div class="images">';
 
 if ($files !== false) {
-    foreach ($files as $key => $file) {
+    if ($preview === true) {
-        $output .= html_print_image($file['path'].$file['filename'], true);
+        foreach ($files as $key => $file) {
+            $output .= html_print_image($file, true);
+        }
+    } else {
+        foreach ($files as $key => $file) {
+            $output .= html_print_image($file['path'].$file['filename'], true);
+        }
     }
 }
 
@@ -73,7 +79,12 @@ $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()">Ok</button>';
+if ($preview === true) {
+    $output .= '<button type="button" class="submit-next-tips ui-button ui-corner-all ui-widget" onclick="close_dialog()">Ok</button>';
+} else {
+    $output .= '<button type="button" class="submit-next-tips ui-button ui-corner-all ui-widget" onclick="next_tip()">Ok</button>';
+}
+
 $output .= '</div>';
 $output .= '</div>';
 echo $output;