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.
This commit is contained in:
Nate Jones
2015-04-08 01:01:46 +00:00
parent 03f5a6854e
commit 0259ef8551
6 changed files with 154 additions and 68 deletions
+60 -62
View File
@@ -76,46 +76,8 @@ require_once "resources/header.php";
<input type='hidden' class='formfld' id='vd_ext_to' value=''> <input type='hidden' class='formfld' id='vd_ext_to' value=''>
<!-- autocomplete for contact lookup --> <!-- 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> <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"> <script type="text/javascript">
//ajax refresh //ajax refresh
var refresh = 1950; var refresh = 1950;
@@ -255,22 +217,27 @@ require_once "resources/header.php";
}, refresh); }, refresh);
} }
//call destination //call or transfer to destination
function call_destination(from_ext, destination) { function go_destination(from_ext, destination, which, call_id = '') {
if (destination != '') { if (destination != '') {
if (!isNaN(parseFloat(destination)) && isFinite(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 != '') { if (cmd != '') {
send_cmd('exec.php?cmd='+escape(cmd)); send_cmd('exec.php?cmd='+escape(cmd));
$('#destination_'+from_ext).autocomplete("destroy"); $('#destination_'+from_ext+'_'+which).autocomplete("destroy");
$('#destination_'+from_ext).removeAttr('onblur'); $('#destination_'+from_ext+'_'+which).removeAttr('onblur');
toggle_destination(from_ext); toggle_destination(from_ext, which);
refresh_start(); refresh_start();
} }
} }
} }
else { else {
toggle_destination(from_ext); toggle_destination(from_ext, which);
} }
} }
@@ -316,27 +283,58 @@ require_once "resources/header.php";
} }
//hide/show destination input field //hide/show destination input field
function toggle_destination(ext) { function toggle_destination(ext, which) {
refresh_stop(); refresh_stop();
$('#destination_control_'+ext).fadeToggle(200); if (which == 'call') {
$('#destination_'+ext).fadeToggle(200, function(){ if ($('#destination_'+ext+'_call').is(':visible')) {
if ($('#destination_'+ext).is(':visible')) { $('#destination_'+ext+'_call').fadeOut(200, function() {
$('#destination_'+ext).focus(); $('#destination_'+ext+'_call').val('');
$('#destination_'+ext).autocomplete({ $('#destination_'+ext+'_call').autocomplete('destroy');
source: "autocomplete.php", $('#destination_control_'+ext+'_call').prop('disabled', false);
minLength: 3, refresh_start();
select: function(event, ui) {
$('#destination_'+ext).val(ui.item.value);
$('#frm_destination_'+ext).submit();
}
}); });
} }
else { else {
$('#destination_'+ext).val(''); $('#destination_control_'+ext+'_call').prop('disabled', true);
$('#destination_'+ext).autocomplete('destroy'); $('#destination_'+ext+'_call').fadeIn(200, function() {
refresh_start(); $('#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) { function get_transfer_cmd(uuid, destination) {
+18 -6
View File
@@ -300,7 +300,7 @@ foreach ($activity as $extension => $ext) {
$block .= " </td>"; $block .= " </td>";
$block .= " <td class='op_ext_info ".$style."'>"; $block .= " <td class='op_ext_info ".$style."'>";
if ($dir_icon != '') { 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'>"; $block .= " <span class='op_user_info'>";
if ($ext['effective_caller_id_name'] != '' && $ext['effective_caller_id_name'] != $extension) { 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.">"; $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 //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') { if ($ext['variable_bridge_uuid'] == '' && $ext_state == 'ringing') {
$call_identifier_kill = $ext['uuid']; $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.">"; $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 .= " </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>"; $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 { else {
//call
if (in_array($extension, $_SESSION['user']['extensions'])) { 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 .= " <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."' onsubmit=\"call_destination('".$extension."', document.getElementById('destination_".$extension."').value); return false;\">"; $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' 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 .= " <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"; $block .= " </form>\n";
} }
} }

Before

Width:  |  Height:  |  Size: 483 B

After

Width:  |  Height:  |  Size: 483 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 448 B

+38
View File
@@ -1128,6 +1128,44 @@ legend {
border: 1px solid #5d5f5a; 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 */ /* operator panel styles end */
</style> </style>
+38
View File
@@ -1122,6 +1122,44 @@ legend {
border: 1px solid #5d5f5a; 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 */ /* operator panel styles end */
</style> </style>