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

View File

@@ -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) {

View File

@@ -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";
}
}

View File

Before

Width:  |  Height:  |  Size: 483 B

After

Width:  |  Height:  |  Size: 483 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 448 B

View File

@@ -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>

View File

@@ -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>