From 7b1356310b86aa3d859b89ebea5445a3ffbb8f5c Mon Sep 17 00:00:00 2001
From: Nate <github@najo.com>
Date: Wed, 30 Oct 2019 01:05:43 -0600
Subject: [PATCH] Active Calls: Update refresh/pause button.

---
 app/calls_active/calls_active.php     |  8 +++++---
 app/calls_active/calls_active_inc.php |  3 ++-
 resources/classes/button.php          | 28 ++++++++++++++++-----------
 themes/default/css.php                |  9 +++++++++
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/app/calls_active/calls_active.php b/app/calls_active/calls_active.php
index b6476a8b2a..48f222a580 100644
--- a/app/calls_active/calls_active.php
+++ b/app/calls_active/calls_active.php
@@ -62,7 +62,7 @@
 	?>
 	<script type="text/javascript">
 	//define refresh function, initial start
-		var refresh = 1500;
+		var refresh = 1980;
 		var source_url = 'calls_active_inc.php?';
 		var timer_id;
 		<?php
@@ -87,11 +87,13 @@
 	//refresh controls
 		function refresh_stop() {
 			clearTimeout(timer_id);
-			document.getElementById('refresh_state').innerHTML = "<img src='resources/images/refresh_paused.png' style='width: 16px; height: 16px; border: none; margin-top: 1px; margin-right: 20px; cursor: pointer;' onclick='refresh_start();' alt=\"<?php echo $text['label-refresh_enable']?>\" title=\"<?php echo $text['label-refresh_enable']?>\">";
+			//document.getElementById('refresh_state').innerHTML = "<img src='resources/images/refresh_paused.png' style='width: 16px; height: 16px; border: none; margin-top: 1px; margin-right: 20px; cursor: pointer;' onclick='refresh_start();' alt=\"<?php echo $text['label-refresh_enable']?>\" title=\"<?php echo $text['label-refresh_enable']?>\">";
+			document.getElementById('refresh_state').innerHTML = "<?php echo button::create(['type'=>'button','title'=>$text['label-refresh_pause'],'icon'=>'pause','onclick'=>'refresh_start()']); ?>";
 		}
 
 		function refresh_start() {
-			if (document.getElementById('refresh_state')) { document.getElementById('refresh_state').innerHTML = "<img src='resources/images/refresh_active.gif' style='width: 16px; height: 16px; border: none; margin-top: 2px; margin-right: 20px; cursor: pointer;' alt=\"<?php echo $text['label-refresh_pause']?>\" title=\"<?php echo $text['label-refresh_pause']?>\">"; }
+			//if (document.getElementById('refresh_state')) { document.getElementById('refresh_state').innerHTML = "<img src='resources/images/refresh_active.gif' style='width: 16px; height: 16px; border: none; margin-top: 2px; margin-right: 20px; cursor: pointer;' alt=\"<?php echo $text['label-refresh_pause']?>\" title=\"<?php echo $text['label-refresh_pause']?>\">"; }
+			if (document.getElementById('refresh_state')) { document.getElementById('refresh_state').innerHTML = "<?php echo button::create(['type'=>'button','title'=>$text['label-refresh_pause'],'icon'=>'sync-alt fa-spin','onclick'=>'refresh_stop()']); ?>"; }
 			ajax_get();
 		}
 
diff --git a/app/calls_active/calls_active_inc.php b/app/calls_active/calls_active_inc.php
index 1123520562..1ae8bcfc99 100644
--- a/app/calls_active/calls_active_inc.php
+++ b/app/calls_active/calls_active_inc.php
@@ -120,7 +120,8 @@
 			echo "<div class='action_bar' id='action_bar'>\n";
 			echo "	<div class='heading'><b>".$text['title']." (".$num_rows.")</b></div>\n";
 			echo "	<div class='actions'>\n";
-			echo "		<span id='refresh_state'><img src='resources/images/refresh_active.gif' style='width: 16px; height: 16px; border: none; margin-top: 2px; margin-right: 20px; cursor: pointer;' onclick='refresh_stop();' alt=\"".$text['label-refresh_pause']."\" title=\"".$text['label-refresh_pause']."\"></span>";
+// 			echo "		<span id='refresh_state'><img src='resources/images/refresh_active.gif' style='width: 16px; height: 16px; border: none; margin-top: 2px; margin-right: 20px; cursor: pointer;' onclick='refresh_stop();' alt=\"".$text['label-refresh_pause']."\" title=\"".$text['label-refresh_pause']."\"></span>";
+			echo "		<span id='refresh_state'>".button::create(['type'=>'button','title'=>$text['label-refresh_pause'],'icon'=>'sync-alt fa-spin','onclick'=>'refresh_stop()'])."</span>";
 			if (permission_exists('call_active_hangup') && $rows) {
 				echo button::create(['type'=>'button','label'=>$text['label-hangup'],'icon'=>'phone-slash','onclick'=>"if (confirm('".$text['confirm-hangups']."')) { list_action_set('hangup'); list_form_submit('form_list'); } else { this.blur(); return false; }"]);
 			}
diff --git a/resources/classes/button.php b/resources/classes/button.php
index 54fd2b14b6..728b78b176 100644
--- a/resources/classes/button.php
+++ b/resources/classes/button.php
@@ -35,18 +35,20 @@ if (!class_exists('button')) {
 			//button: open
 				$button = "<button ";
 				$button .= "type='".($array['type'] ? $array['type'] : 'button')."' ";
-				$button .= $array['name'] ? "name=\"".$array['name']."\" " : null;
-				$button .= $array['value'] ? "value=\"".$array['value']."\" " : null;
-				$button .= $array['id'] ? "id=\"".$array['id']."\" " : null;
-				$button .= $array['label'] ? "alt=\"".$array['label']."\" " : ($array['title'] ? "alt=\"".$array['title']."\" " : null);
+				$button .= $array['name'] ? "name=".self::quote($array['name'])." " : null;
+				$button .= $array['value'] ? "value=".self::quote($array['value'])." " : null;
+				$button .= $array['id'] ? "id='".$array['id']."' " : null;
+				$button .= $array['label'] ? "alt=".self::quote($array['label'])." " : ($array['title'] ? "alt=".self::quote($array['title'])." " : null);
 				if ($button_icons == 'only' || $button_icons == 'auto' || $array['title']) {
-					$button .= "title=\"".($array['title'] ? $array['title'] : $array['label'])."\" ";
+					if ($array['title'] || $array['label']) {
+						$button .= "title=".($array['title'] ? self::quote($array['title']) : self::quote($array['label']))." ";
+					}
 				}
-				$button .= $array['onclick'] ? "onclick=\"".$array['onclick']."\" " : null;
-				$button .= $array['onmouseover'] ? "onmouseenter=\"".$array['onmouseover']."\" " : null;
- 				$button .= $array['onmouseout'] ? "onmouseleave=\"".$array['onmouseout']."\" " : null;
+				$button .= $array['onclick'] ? "onclick=".self::quote($array['onclick'])." " : null;
+				$button .= $array['onmouseover'] ? "onmouseenter=".self::quote($array['onmouseover'])." " : null;
+ 				$button .= $array['onmouseout'] ? "onmouseleave=".self::quote($array['onmouseout'])." " : null;
 				$button .= "class='btn btn-".($array['class'] ? $array['class'] : 'default')." ".($array['disabled'] ? 'disabled' : null)."' ";
-				$button .= "style='margin-left: 2px; margin-right: 2px; ".($array['style'] ? $array['style'] : null)."' ";
+				$button .= $array['style'] ? "style=".self::quote($array['style'])." " : null;
 				$button .= $array['disabled'] ? "disabled='disabled' " : null;
 				$button .= ">";
 			//icon
@@ -82,8 +84,8 @@ if (!class_exists('button')) {
 				if ($array['link']) {
 					$anchor = "<a ";
 					$anchor .= "href='".$array['link']."' ";
-					$anchor .= "target=\"".($array['target'] ? $array['target'] : '_self')."\" ";
-					$anchor .= ($array['disabled'] ? "class='disabled' onclick='return false;'" : null)." ";
+					$anchor .= "target='".($array['target'] ? $array['target'] : '_self')."' ";
+					$anchor .= $array['disabled'] ? "class='disabled' onclick='return false;' " : null;
 					$anchor .= ">";
 					$button = $anchor.$button."</a>";
 				}
@@ -91,6 +93,10 @@ if (!class_exists('button')) {
 			unset($button);
 		}
 
+		private static function quote($value) {
+			return substr_count($value, "'") ? '"'.$value.'"' : "'".$value."'";
+		}
+
 	}
 }
 
diff --git a/themes/default/css.php b/themes/default/css.php
index 47e78d3f45..3fbbd0a388 100644
--- a/themes/default/css.php
+++ b/themes/default/css.php
@@ -1026,6 +1026,11 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
 		text-decoration: underline;
 		}
 
+	button.btn {
+		margin-left: 2px;
+		margin-right: 2px;
+		}
+
 	button.btn.btn-link {
 		margin: 0;
 		margin-top: -2px;
@@ -1035,6 +1040,10 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
 		font-family: inherit;
 		}
 
+	button.btn > span.fas.fa-spin {
+		display: inline-block;
+		}
+
 	form {
 		margin: 0;
 		}