improved ui_progress now accepts ajax updates
This commit is contained in:
fbsanchez
parent
23d09a3c46
commit
7226a45df5
|
|
@ -2719,6 +2719,15 @@ function ui_print_module_status(
|
|||
* @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 [ 'page' => 'page', 'data' => 'data' ]. Example:
|
||||
* [
|
||||
* 'page' => 'operation/agentes/ver_agente',
|
||||
* 'interval' => 100 / $agent["intervalo"],
|
||||
* 'data' => [
|
||||
* 'id_agente' => $id_agente,
|
||||
* 'refresh_contact' => 1,
|
||||
* ],
|
||||
* ]
|
||||
*
|
||||
* @return string HTML code.
|
||||
*/
|
||||
|
|
@ -2728,7 +2737,8 @@ function ui_progress(
|
|||
$height='2.5',
|
||||
$color='#82b92e',
|
||||
$return=true,
|
||||
$text=''
|
||||
$text='',
|
||||
$ajax=false
|
||||
) {
|
||||
if (!$progress) {
|
||||
$progress = 0;
|
||||
|
|
@ -2747,10 +2757,56 @@ function ui_progress(
|
|||
}
|
||||
|
||||
ui_require_css_file('progress');
|
||||
$output .= '<div class="progress_main" style="width: '.$width.'; height: '.$height.'em; border: 1px solid '.$color.'">';
|
||||
$output .= '<span class="progress_text" style="font-size:'.($height - 0.5).'em;">'.$text.'</span>';
|
||||
$output .= '<div class="progress" style="width: '.$progress.'%; background: '.$color.'"></div>';
|
||||
$output .= '</div>';
|
||||
$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').'",
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
span.progress_text {
|
||||
position: absolute;
|
||||
font-family: "lato-bolder", "Open Sans", sans-serif;
|
||||
font-size: 2em;
|
||||
margin-left: -0.5em;
|
||||
}
|
||||
|
||||
div.progress_main {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
.progress_main {
|
||||
height: 2.5em;
|
||||
border: 1px solid #82b92e;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.progress_main:before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 0.2em;
|
||||
font-family: "lato-bolder", "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
div.progress {
|
||||
.progress {
|
||||
width: 0%;
|
||||
background: #82b92e;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -314,7 +314,16 @@ $data[1] = ui_progress(
|
|||
1.8,
|
||||
'#BBB',
|
||||
true,
|
||||
floor(($agent['intervalo'] * (100 - $progress) / 100)).' s'
|
||||
floor(($agent['intervalo'] * (100 - $progress) / 100)).' s',
|
||||
[
|
||||
'page' => 'operation/agentes/ver_agente',
|
||||
'interval' => (100 / $agent['intervalo']),
|
||||
'data' => [
|
||||
'id_agente' => $id_agente,
|
||||
'refresh_contact' => 1,
|
||||
],
|
||||
|
||||
]
|
||||
);
|
||||
|
||||
if ($progress > 100) {
|
||||
|
|
@ -739,40 +748,6 @@ if (!empty($network_interfaces)) {
|
|||
?>
|
||||
<script type="text/javascript">
|
||||
$(document).ready (function () {
|
||||
setInterval(() => {
|
||||
last = $('.progress_text').text().split(' ')[0]*1;
|
||||
width = $(".progress").width() / $('.progress').parent().width() * 100;
|
||||
width_interval = <?php echo (100 / $agent['intervalo']); ?>;
|
||||
if (last % 10 == 0) {
|
||||
$.post({
|
||||
url: "ajax.php",
|
||||
data: {
|
||||
page: 'operation/agentes/ver_agente',
|
||||
id_agente: <?php echo $id_agente; ?>,
|
||||
refresh_contact: 1
|
||||
},
|
||||
success: function(data) {
|
||||
try {
|
||||
val = JSON.parse(data);
|
||||
$('.progress_text').text(val['last_contact']+' s');
|
||||
$('.progress').width(val['progress']+"%");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
$('.progress_text').text((last -1) + " s");
|
||||
if (width < 100) {
|
||||
$('.progress').width((width+width_interval) + "%");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$('.progress_text').text((last -1) + " s");
|
||||
if (width < 100) {
|
||||
$('.progress').width((width+width_interval) + "%");
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
|
||||
$("#agent_data_main").find("thead").click (function () {
|
||||
close_table('#agent_data_main');
|
||||
|
|
|
|||
Loading…
Reference in New Issue