add method ui_progress_extend(work in progress)

pandora_console/include/functions_ui.php

@@ -2911,6 +2911,113 @@ function ui_progress(
 }
 
 
+/**
+ * Generates a progress bar CSS based.
+ * Requires css progress.css
+ *
+ * @param integer $progress Progress.
+ * @param string  $width    Width.
+ * @param integer $height   Height in 'em'.
+ * @param string  $color    Color.
+ * @param boolean $return   Return or paint (if false).
+ * @param boolean $text     Text to be displayed,by default progress %.
+ * @param array   $ajax     Ajax: [ 'page' => 'page', 'data' => 'data' ] Sample:
+ *   [
+ *       'page'     => 'operation/agentes/ver_agente', Target page.
+ *       'interval' => 100 / $agent["intervalo"], Ask every interval seconds.
+ *       'data'     => [ Data to be sent to target page.
+ *           'id_agente'       => $id_agente,
+ *           'refresh_contact' => 1,
+ *       ],
+ *   ].
+ *
+ * @return string HTML code.
+ */
+function ui_progress_extend(
+    $progress,
+    $width='100%',
+    $height='2.5',
+    $color='#82b92e',
+    $return=true,
+    $text='',
+    $ajax=false
+) {
+    if (!$progress) {
+        $progress = 0;
+    }
+
+    if ($progress > 100) {
+        $progress = 100;
+    }
+
+    if ($progress < 0) {
+        $progress = 0;
+    }
+
+    if (empty($text)) {
+        $text = $progress.'%';
+    }
+
+    ui_require_css_file('progress');
+    $output .= '<span class="progress_main" data-label="'.$text;
+    $output .= '" style="width: '.$width.'; height: '.$height.'em; border: 1px solid '.$color.'">';
+    $output .= '<span class="progress" style="width: '.$progress.'%; background: '.$color.'"></span>';
+    $output .= '</span>';
+
+    if ($ajax !== false && is_array($ajax)) {
+        $output .= '<script type="text/javascript">
+    $(document).ready(function() {
+        setInterval(() => {
+                last = $(".progress_main").attr("data-label").split(" ")[0]*1;
+                width = $(".progress").width() / $(".progress").parent().width() * 100;
+                width_interval = '.$ajax['interval'].';
+                if (last % 10 == 0) {
+                    $.post({
+                        url: "'.ui_get_full_url('ajax.php', false, false, false).'",
+                        data: {';
+        if (is_array($ajax['data'])) {
+            foreach ($ajax['data'] as $token => $value) {
+                $output .= '
+                            '.$token.':"'.$value.'",';
+            }
+        }
+
+        $output .= '
+                            page: "'.$ajax['page'].'"
+                        },
+                        success: function(data) {
+                            try {
+                                val = JSON.parse(data);
+                                $(".progress_main").attr("data-label", val["last_contact"]+" s");
+                                $(".progress").width(val["progress"]+"%");
+                            } catch (e) {
+                                console.error(e);
+                                $(".progress_text").attr("data-label", (last -1) + " s");
+                                if (width < 100) {
+                                    $(".progress").width((width+width_interval) + "%");
+                                }
+                            }
+                        }
+                    });
+                } else {
+                    $(".progress_main").attr("data-label", (last -1) + " s");
+                    if (width < 100) {
+                        $(".progress").width((width+width_interval) + "%");
+                    }
+                }
+            }, 1000);
+    });
+    </script>';
+    }
+
+    if (!$return) {
+        echo $output;
+    }
+
+    return $output;
+}
+
+
 /**
  * Generate needed code to print a datatables jquery plugin.
  *

pandora_console/include/styles/omnishell.css

@@ -4,8 +4,28 @@
   border: none;
 }
 
+.remove_agent {
+  background-image: url("../../images/darrowleft.png");
+  background-repeat: no-repeat;
+  border: none;
+}
+
 .edit_yaml {
   margin-left: 39px;
   margin-top: 10px;
   margin-bottom: 10px;
 }
+
+li > input[type="text"] {
+  border: 1px solid lightgrey;
+  border-radius: 0;
+  font-family: "lato-bolder", "Open Sans", sans-serif;
+  font-weight: lighter;
+  padding: 0px 0px 2px 0px;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+}
+
+.margin_button {
+  margin-right: 5px;
+}