From 0259ef855121c8867f774d0f8caaad9c2b33b5c0 Mon Sep 17 00:00:00 2001
From: Nate Jones <git@reliberate.com>
Date: Wed, 8 Apr 2015 01:01:46 +0000
Subject: [PATCH] Operator Panel: - Add transfer active calls to ANY
 destination using keypad. - Move inline CSS styles to theme templates. - Use
 local jQuery UI CSS file instead of remote.

---
 app/operator_panel/index.php                  | 122 +++++++++---------
 app/operator_panel/index_inc.php              |  24 +++-
 .../images/{keypad.png => keypad_call.png}    | Bin
 .../resources/images/keypad_transfer.png      | Bin 0 -> 448 bytes
 themes/enhanced/template.php                  |  38 ++++++
 themes/minimized/template.php                 |  38 ++++++
 6 files changed, 154 insertions(+), 68 deletions(-)
 rename app/operator_panel/resources/images/{keypad.png => keypad_call.png} (100%)
 create mode 100644 app/operator_panel/resources/images/keypad_transfer.png

diff --git a/app/operator_panel/index.php b/app/operator_panel/index.php
index aaee3786a7..d951976207 100644
--- a/app/operator_panel/index.php
+++ b/app/operator_panel/index.php
@@ -76,46 +76,8 @@ require_once "resources/header.php";
 <input type='hidden' class='formfld' id='vd_ext_to' value=''>
 
 <!-- autocomplete for contact lookup -->
-<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
+<link rel="stylesheet" type="text/css" href="<?php echo PROJECT_PATH; ?>/resources/jquery/jquery-ui.css">
 <script language="JavaScript" type="text/javascript" src="<?php echo PROJECT_PATH; ?>/resources/jquery/jquery-ui-1.9.2.min.js"></script>
-<style>
-	.ui-widget {
-		font-family: arial;
-		font-size: 12px;
-		margin: 0px;
-		padding: 0px;
-		}
-
-	.ui-autocomplete {
-		cursor: default;
-		position: absolute;
-		max-height: 200px;
-		overflow-y: auto;
-		overflow-x: hidden;
-		white-space: nowrap;
-		width: auto;
-		border: 1px solid #c0c0c0;
-		}
-
-	.ui-menu .ui-menu-item a {
-		padding-right: 25px;
-		text-decoration: none;
-		cursor: pointer;
-		border-color: #fff;
-		background-image: none;
-		background-color: #fff;
-		color: #444;
-		}
-
-	.ui-menu .ui-menu-item a:hover {
-		padding-right: 25px;
-		color: #5082ca;
-		border: 1px solid white;
-		background-image: none;
-		background-color: #fff;
-		}
-</style>
-
 <script type="text/javascript">
 //ajax refresh
 	var refresh = 1950;
@@ -255,22 +217,27 @@ require_once "resources/header.php";
 		}, refresh);
 	}
 
-//call destination
-	function call_destination(from_ext, destination) {
+//call or transfer to destination
+	function go_destination(from_ext, destination, which, call_id = '') {
 		if (destination != '') {
 			if (!isNaN(parseFloat(destination)) && isFinite(destination)) {
-				cmd = get_originate_cmd(from_ext+'@<?php echo $_SESSION["domain_name"]?>', destination); //make a call
+				if (call_id == '') {
+					cmd = get_originate_cmd(from_ext+'@<?php echo $_SESSION["domain_name"]?>', destination); //make a call
+				}
+				else {
+					cmd = get_transfer_cmd(call_id, destination);
+				}
 				if (cmd != '') {
 					send_cmd('exec.php?cmd='+escape(cmd));
-					$('#destination_'+from_ext).autocomplete("destroy");
-					$('#destination_'+from_ext).removeAttr('onblur');
-					toggle_destination(from_ext);
+					$('#destination_'+from_ext+'_'+which).autocomplete("destroy");
+					$('#destination_'+from_ext+'_'+which).removeAttr('onblur');
+					toggle_destination(from_ext, which);
 					refresh_start();
 				}
 			}
 		}
 		else {
-			toggle_destination(from_ext);
+			toggle_destination(from_ext, which);
 		}
 	}
 
@@ -316,27 +283,58 @@ require_once "resources/header.php";
 	}
 
 //hide/show destination input field
-	function toggle_destination(ext) {
+	function toggle_destination(ext, which) {
 		refresh_stop();
-		$('#destination_control_'+ext).fadeToggle(200);
-		$('#destination_'+ext).fadeToggle(200, function(){
-			if ($('#destination_'+ext).is(':visible')) {
-				$('#destination_'+ext).focus();
-				$('#destination_'+ext).autocomplete({
-					source: "autocomplete.php",
-					minLength: 3,
-					select: function(event, ui) {
-						$('#destination_'+ext).val(ui.item.value);
-						$('#frm_destination_'+ext).submit();
-					}
+		if (which == 'call') {
+			if ($('#destination_'+ext+'_call').is(':visible')) {
+				$('#destination_'+ext+'_call').fadeOut(200, function() {
+					$('#destination_'+ext+'_call').val('');
+					$('#destination_'+ext+'_call').autocomplete('destroy');
+					$('#destination_control_'+ext+'_call').prop('disabled', false);
+					refresh_start();
 				});
 			}
 			else {
-				$('#destination_'+ext).val('');
-				$('#destination_'+ext).autocomplete('destroy');
-				refresh_start();
+				$('#destination_control_'+ext+'_call').prop('disabled', true);
+				$('#destination_'+ext+'_call').fadeIn(200, function() {
+					$('#destination_'+ext+'_call').focus();
+					$('#destination_'+ext+'_call').autocomplete({
+						source: "autocomplete.php",
+						minLength: 3,
+						select: function(event, ui) {
+							$('#destination_'+ext+'_call').val(ui.item.value);
+							$('#frm_destination_'+ext+'_call').submit();
+						}
+					});
+				});
 			}
-		});
+		}
+		else if (which == 'transfer') {
+			if ($('#destination_'+ext+'_transfer').is(':visible')) {
+				$('#destination_'+ext+'_transfer').fadeOut(200, function() {
+					$('#op_caller_details_'+ext).show();
+					$('#destination_'+ext+'_transfer').val('');
+					$('#destination_'+ext+'_transfer').autocomplete('destroy');
+					$('#destination_control_'+ext+'_transfer').prop('disabled', false);
+					refresh_start();
+				});
+			}
+			else {
+				$('#op_caller_details_'+ext).hide();
+				$('#destination_'+ext+'_transfer').fadeIn(200, function() {
+					$('#destination_control_'+ext+'_transfer').prop('disabled', true);
+					$('#destination_'+ext+'_transfer').focus();
+					$('#destination_'+ext+'_transfer').autocomplete({
+						source: "autocomplete.php",
+						minLength: 3,
+						select: function(event, ui) {
+							$('#destination_'+ext+'_transfer').val(ui.item.value);
+							$('#frm_destination_'+ext+'_transfer').submit();
+						}
+					});
+				});
+			}
+		}
 	}
 
 	function get_transfer_cmd(uuid, destination) {
diff --git a/app/operator_panel/index_inc.php b/app/operator_panel/index_inc.php
index 7358e00771..433c391991 100644
--- a/app/operator_panel/index_inc.php
+++ b/app/operator_panel/index_inc.php
@@ -300,7 +300,7 @@ foreach ($activity as $extension => $ext) {
 	$block .= "		</td>";
 	$block .= "		<td class='op_ext_info ".$style."'>";
 	if ($dir_icon != '') {
-		$block .= "			<img src='resources/images/".$dir_icon.".png' align='right' style='margin-top: 3px; margin-right: 1px; width: 12px; height: 12px; cursor: help;' draggable='false' alt=\"".$text['label-call_direction']."\" title=\"".$text['label-call_direction']."\" ".$onhover_pause_refresh.">";
+		$block .= "			<img src='resources/images/".$dir_icon.".png' align='right' style='margin-top: 3px; margin-right: 1px; width: 12px; height: 12px; cursor: help;' draggable='false' alt=\"".$text['label-call_direction']."\" title=\"".$text['label-call_direction']."\">";
 	}
 	$block .= "			<span class='op_user_info'>";
 	if ($ext['effective_caller_id_name'] != '' && $ext['effective_caller_id_name'] != $extension) {
@@ -330,7 +330,7 @@ foreach ($activity as $extension => $ext) {
 			$block .= 			"<img src='resources/images/eavesdrop.png' style='width: 12px; height: 12px; border: none; margin: 4px 0px 0px 5px; cursor: pointer;' title='".$text['label-eavesdrop']."' onclick=\"eavesdrop_call('".$extension."','".$call_identifier."');\" ".$onhover_pause_refresh.">";
 		}
 		//kill
-		if (in_array($extension, $_SESSION['user']['extensions']) || permission_exists('operator_panel_kill')) {
+		if (permission_exists('operator_panel_kill') || in_array($extension, $_SESSION['user']['extensions'])) {
 			if ($ext['variable_bridge_uuid'] == '' && $ext_state == 'ringing') {
 				$call_identifier_kill = $ext['uuid'];
 			}
@@ -342,15 +342,27 @@ foreach ($activity as $extension => $ext) {
 			}
 			$block .= 			"<img src='resources/images/kill.png' style='width: 12px; height: 12px; border: none; margin: 4px 0px 0px 5px; cursor: pointer;' title='".$text['label-kill']."' onclick=\"kill_call('".$call_identifier_kill."');\" ".$onhover_pause_refresh.">";
 		}
+		//transfer
+		if (in_array($extension, $_SESSION['user']['extensions']) && $ext_state == 'active') {
+			$block .= 			"<img id='destination_control_".$extension."_transfer' src='resources/images/keypad_transfer.png' style='width: 12px; height: 12px; border: none; margin: 4px 0px 0px 5px; cursor: pointer;' onclick=\"toggle_destination('".$extension."', 'transfer');\">";
+		}
 		$block .= "			</td></tr></table>";
-		$block .= "			<strong>".$call_name."</strong><br>".$call_number;
+		$block .= "			<span id='op_caller_details_".$extension."'><strong>".$call_name."</strong><br>".$call_number."</span>";
 		$block .= "		</span>";
+		//transfer
+		if (in_array($extension, $_SESSION['user']['extensions']) && $ext_state == 'active') {
+			$call_identifier_transfer = $ext['variable_bridge_uuid'];
+			$block .= "		<form id='frm_destination_".$extension."_transfer' onsubmit=\"go_destination('".$extension."', document.getElementById('destination_".$extension."_transfer').value, 'transfer', '".$call_identifier_transfer."'); return false;\">";
+			$block .= "			<input type='text' class='formfld' id='destination_".$extension."_transfer' style='width: 100px; min-width: 100px; max-width: 100px; margin-top: 3px; text-align: center; display: none;' onblur=\"toggle_destination('".$extension."', 'transfer');\">";
+			$block .= "		</form>\n";
+		}
 	}
 	else {
+		//call
 		if (in_array($extension, $_SESSION['user']['extensions'])) {
-			$block .= "		<img id='destination_control_".$extension."' src='resources/images/keypad.png' style='width: 12px; height: 12px; border: none; margin-top: 26px; cursor: pointer;' align='right' onclick=\"toggle_destination('".$extension."');\">";
-			$block .= "		<form id='frm_destination_".$extension."' onsubmit=\"call_destination('".$extension."', document.getElementById('destination_".$extension."').value); return false;\">";
-			$block .= "			<input type='text' class='formfld' name='destination' id='destination_".$extension."' style='width: 110px; min-width: 110px; max-width: 110px; margin-top: 10px; text-align: center; display: none;' onblur=\"toggle_destination('".$extension."');\">";
+			$block .= "		<img id='destination_control_".$extension."_call' src='resources/images/keypad_call.png' style='width: 12px; height: 12px; border: none; margin-top: 26px; margin-right: 1px; cursor: pointer;' align='right' onclick=\"toggle_destination('".$extension."', 'call');\">";
+			$block .= "		<form id='frm_destination_".$extension."_call' onsubmit=\"go_destination('".$extension."', document.getElementById('destination_".$extension."_call').value, 'call'); return false;\">";
+			$block .= "			<input type='text' class='formfld' id='destination_".$extension."_call' style='width: 100px; min-width: 100px; max-width: 100px; margin-top: 10px; text-align: center; display: none;' onblur=\"toggle_destination('".$extension."', 'call');\">";
 			$block .= "		</form>\n";
 		}
 	}
diff --git a/app/operator_panel/resources/images/keypad.png b/app/operator_panel/resources/images/keypad_call.png
similarity index 100%
rename from app/operator_panel/resources/images/keypad.png
rename to app/operator_panel/resources/images/keypad_call.png
diff --git a/app/operator_panel/resources/images/keypad_transfer.png b/app/operator_panel/resources/images/keypad_transfer.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e0f450634c8d1c773a28359b950fb013fcec334
GIT binary patch
literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzVo5|nRCwBylg}$eVHAcx<07oAgsd55
zgMUDgjfRDyG_0hCg-~}$goT8%QOH=>*;>igN>NJkqgW6NMPY35oN*?naqq&Z=ibwM
z&VBFwzVF;T|7<$uoLhi<=z}Ns6AiGT`2d`1UI9B$1%8A}3hJN@#@%nMK$Eg$^dz)E
z6t>0S!xYmd57TY_?s4gYDY%1WQ%va6Bz&WbRtA+YF9yfZ>HdZo_6F!_HP1vu@5PWG
z&|C;b0lM^-WDUmPP2U(bO&#z8&(Lo4dU$|W7!`wA@N`WH(>MX8O48`VP_EC+iNUog
zUYXqLmmxhDo_^k-4pJ)T6wcuj){MTY8!2DBE(VV<6SCWj0lFA&=AJ^Mj%IGuLQQ~P
zt)reX*wR_Jg=W(<B5Tz34;j4`Zs0`z6)}jLGw(Ky@sPX+3N-H*g9B6iZ@!=X7h*a{
qN2WLlhwvqhM&H$5*|WWG0R{j$_e~pk|HgFy0000<MNUMnLSTa0OvtPN

literal 0
HcmV?d00001

diff --git a/themes/enhanced/template.php b/themes/enhanced/template.php
index e38b726d55..485f6d630b 100644
--- a/themes/enhanced/template.php
+++ b/themes/enhanced/template.php
@@ -1128,6 +1128,44 @@ legend {
 		border: 1px solid #5d5f5a;
 		}
 
+	/* jquery ui autocomplete styles */
+
+	.ui-widget {
+		font-family: arial;
+		font-size: 12px;
+		margin: 0px;
+		padding: 0px;
+		}
+
+	.ui-autocomplete {
+		cursor: default;
+		position: absolute;
+		max-height: 200px;
+		overflow-y: auto;
+		overflow-x: hidden;
+		white-space: nowrap;
+		width: auto;
+		border: 1px solid #c0c0c0;
+		}
+
+	.ui-menu .ui-menu-item a {
+		padding-right: 25px;
+		text-decoration: none;
+		cursor: pointer;
+		border-color: #fff;
+		background-image: none;
+		background-color: #fff;
+		color: #444;
+		}
+
+	.ui-menu .ui-menu-item a:hover {
+		padding-right: 25px;
+		color: #5082ca;
+		border: 1px solid white;
+		background-image: none;
+		background-color: #fff;
+		}
+
 /* operator panel styles end */
 
 </style>
diff --git a/themes/minimized/template.php b/themes/minimized/template.php
index a57cbf5af3..47f69f0ed3 100644
--- a/themes/minimized/template.php
+++ b/themes/minimized/template.php
@@ -1122,6 +1122,44 @@ legend {
 		border: 1px solid #5d5f5a;
 		}
 
+	/* jquery ui autocomplete styles */
+
+	.ui-widget {
+		font-family: arial;
+		font-size: 12px;
+		margin: 0px;
+		padding: 0px;
+		}
+
+	.ui-autocomplete {
+		cursor: default;
+		position: absolute;
+		max-height: 200px;
+		overflow-y: auto;
+		overflow-x: hidden;
+		white-space: nowrap;
+		width: auto;
+		border: 1px solid #c0c0c0;
+		}
+
+	.ui-menu .ui-menu-item a {
+		padding-right: 25px;
+		text-decoration: none;
+		cursor: pointer;
+		border-color: #fff;
+		background-image: none;
+		background-color: #fff;
+		color: #444;
+		}
+
+	.ui-menu .ui-menu-item a:hover {
+		padding-right: 25px;
+		color: #5082ca;
+		border: 1px solid white;
+		background-image: none;
+		background-color: #fff;
+		}
+
 /* operator panel styles end */
 
 </style>