dbxe
/
fusionpbx
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Operator Panel: Stylized status buttons, moved CSS to templates.

This commit is contained in:
Nate Jones 2014-12-12 22:04:27 +00:00
parent 515ae0f0ae
commit ed511a229f
4 changed files with 361 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
app/operator_panel/index.php
View File

@ -263,41 +263,39 @@ require_once "resources/header.php";
document.getElementById('cmd_reponse').innerHTML=xmlhttp.responseText; document.getElementById('cmd_reponse').innerHTML=xmlhttp.responseText;
} }
<?php
//hide/show destination input field //hide/show destination input field
echo "function toggle_destination(ext) {\n"; function toggle_destination(ext) {
echo " refresh_stop();\n"; refresh_stop();
echo " $('#destination_'+ext).fadeToggle(200, function(){\n"; $('#destination_'+ext).fadeToggle(200, function(){
echo " if ($('#destination_'+ext).is(':visible')) {\n"; if ($('#destination_'+ext).is(':visible')) {
echo " $('#destination_'+ext).focus();\n"; $('#destination_'+ext).focus();
echo " }\n"; }
echo " else {\n"; else {
echo " $('#destination_'+ext).val('');\n"; $('#destination_'+ext).val('');
echo " refresh_start();\n"; refresh_start();
echo " }\n"; }
echo " });\n"; });
echo "}\n"; }
echo "function get_transfer_cmd(uuid, destination) {\n"; function get_transfer_cmd(uuid, destination) {
echo " cmd = \"uuid_transfer \"+uuid+\" \"+destination+\" XML ".trim($_SESSION['user_context'])."\";\n"; cmd = "uuid_transfer " + uuid + " " + destination + " XML <?=trim($_SESSION['user_context'])?>";
echo " return cmd;\n"; return cmd;
echo "}\n"; }
echo "function get_originate_cmd(source, destination) {\n"; function get_originate_cmd(source, destination) {
echo " cmd = \"bgapi originate {sip_auto_answer=true,origination_caller_id_number=\"+destination+\",sip_h_Call-Info=_undef_}user/\"+source+\" \"+destination+\" XML ".trim($_SESSION['user_context'])."\";\n"; cmd = "bgapi originate {sip_auto_answer=true,origination_caller_id_number=" + destination + ",sip_h_Call-Info=_undef_}user/" + source + " " + destination + " XML <?=trim($_SESSION['user_context'])?>";
echo " return cmd;\n"; return cmd;
echo "}\n"; }
echo "function get_eavesdrop_cmd(ext, chan_uuid) {\n"; function get_eavesdrop_cmd(ext, chan_uuid) {
echo " cmd = \"bgapi originate {origination_caller_id_name=".$text['label-eavesdrop'].",origination_caller_id_number=\"+ext+\"}user/".$_SESSION['user']['extensions'][0]."@".$_SESSION['domain_name']." &eavesdrop(\"+chan_uuid+\")\";"; cmd = "bgapi originate {origination_caller_id_name=<?=$text['label-eavesdrop']?>,origination_caller_id_number=" + ext + "}user/<?=$_SESSION['user']['extensions'][0]?>@<?=$_SESSION['domain_name']?> &eavesdrop(" + chan_uuid + ")";
echo " return cmd;\n"; return cmd;
echo "}\n"; }
echo "function get_record_cmd(uuid) {\n"; function get_record_cmd(uuid) {
echo " cmd = \"uuid_record \"+uuid+\" start ".$_SESSION['switch']['recordings']['dir']."/archive/".date("Y")."/".date("M")."/".date("d")."/\"+uuid+\".wav\";\n"; cmd = "uuid_record " + uuid + " start <?=$_SESSION['switch']['recordings']['dir']?>/archive/<?=date('Y')?>/<?=date('M')?>/<?=date('d')?>/" + uuid + ".wav";
echo " return cmd;\n"; return cmd;
echo "}\n"; }
?>
//virtual functions //virtual functions
function virtual_drag(call_id, ext) { function virtual_drag(call_id, ext) {
@ -357,138 +355,25 @@ require_once "resources/header.php";
</script> </script>
<style type="text/css"> <style type="text/css">
DIV.ext {
float: left;
width: 235px;
margin: 0px 8px 8px 0px;
padding: 0px;
border-style: solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 3px #e5e9f0;
-moz-box-shadow: 0 0 3px #e5e9f0;
box-shadow: 0 0 3px #e5e9f0;
border-width: 1px 3px;
border-color: #b9c5d8 #c5d1e5;
background-color: #e5eaf5;
cursor: default;
}
DIV.state_active {
background-color: #baf4bb;
border-width: 1px 3px;
border-color: #77d779;
}
DIV.state_ringing {
background-color: #a8dbf0;
border-width: 1px 3px;
border-color: #41b9eb;
}
TABLE { TABLE {
border-spacing: 0px; border-spacing: 0px;
border-collapse: collapse; border-collapse: collapse;
border: none; border: none;
} }
TABLE.ext {
width: 100%;
height: 60px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #e5eaf5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
TD.ext_icon {
vertical-align: middle;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
IMG.ext_icon {
cursor: move;
width: 39px;
height: 42px;
border: none;
}
TD.ext_info {
text-align: left;
vertical-align: top;
font-family: arial;
font-size: 10px;
overflow: auto;
width: 100%;
padding: 3px 5px 3px 7px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #f0f2f6;
}
TD.state_ringing {
background-color: #d1f1ff;
}
TD.state_active {
background-color: #e1ffe2;
}
TABLE.state_ringing {
background-color: #a8dbf0;
}
TABLE.state_active {
background-color: #baf4bb;
}
.user_info {
font-family: arial;
font-size: 10px;
display: inline-block;
}
.user_info strong {
color: #3164AD;
}
.caller_info {
display: block;
margin-top: 7px;
font-family: arial;
font-size: 10px;
}
.call_info {
display: inline-block;
padding: 0px;
font-family: arial;
font-size: 10px;
}
</style> </style>
<?php <?php
//create simple array of users own extensions //create simple array of users own extensions
unset($_SESSION['user']['extensions']); unset($_SESSION['user']['extensions']);
foreach ($_SESSION['user']['extension'] as $assigned_extensions) { foreach ($_SESSION['user']['extension'] as $assigned_extensions) {
$_SESSION['user']['extensions'][] = $assigned_extensions['user']; $_SESSION['user']['extensions'][] = $assigned_extensions['user'];
} }
?>
echo "<div id='ajax_reponse'>"; <div id='ajax_reponse'></div>
// include("index_inc.php"); <div id='cmd_reponse' style='display: none;'></div>
echo "</div>\n"; <br><br>
echo "<div id='cmd_reponse' style='display: none;'></div>";
echo "<br><br>";
<?php
require_once "resources/footer.php"; require_once "resources/footer.php";
?> ?>

47
app/operator_panel/index_inc.php
View File

@ -59,7 +59,7 @@ foreach ($activity as $extension => $fields) {
$groups = array_unique($groups); $groups = array_unique($groups);
sort($groups); sort($groups);
echo "<table cellpadding='0' cellspacing='0' border='0' width='100%'>"; echo "<table width='100%'>";
echo " <tr>"; echo " <tr>";
echo " <td valign='top' align='left' width='50%' nowrap>"; echo " <td valign='top' align='left' width='50%' nowrap>";
echo " <b>".$text['title-operator_panel']."</b>"; echo " <b>".$text['title-operator_panel']."</b>";
@ -67,15 +67,24 @@ echo " </td>";
echo " <td valign='top' align='center' nowrap>"; echo " <td valign='top' align='center' nowrap>";
if (sizeof($_SESSION['user']['extensions']) > 0) { if (sizeof($_SESSION['user']['extensions']) > 0) {
$status_options = Array( $status_options[1]['status'] = "Available";
"Available" => $text['label-status_available'], $status_options[1]['label'] = $text['label-status_available'];
"Available (On Demand)" => $text['label-status_on_demand'], $status_options[1]['style'] = "op_btn_status_available";
"On Break" => $text['label-status_on_break'], $status_options[2]['status'] = "Available (On Demand)";
"Do Not Disturb" => $text['label-status_do_not_disturb'], $status_options[2]['label'] = $text['label-status_on_demand'];
"Logged Out" => $text['label-status_logged_out'] $status_options[2]['style'] = "op_btn_status_available_on_demand";
); $status_options[3]['status'] = "On Break";
foreach ($status_options as $status_value => $status_label) { $status_options[3]['label'] = $text['label-status_on_break'];
echo " <input type='button' class='btn' value=\"".$status_label."\" onclick=\"send_cmd('index.php?status='+escape('".$status_value."'));\">"; $status_options[3]['style'] = "op_btn_status_on_break";
$status_options[4]['status'] = "Do Not Disturb";
$status_options[4]['label'] = $text['label-status_do_not_disturb'];
$status_options[4]['style'] = "op_btn_status_do_not_disturb";
$status_options[5]['status'] = "Logged Out";
$status_options[5]['label'] = $text['label-status_logged_out'];
$status_options[5]['style'] = "op_btn_status_logged_out";
foreach ($status_options as $status_option) {
echo " <input type='button' id='".$status_option['style']."' class='btn' value=\"".$status_option['label']."\" onclick=\"send_cmd('index.php?status='+escape('".$status_option['status']."'));\">\n";
} }
} }
@ -157,7 +166,7 @@ foreach ($activity as $extension => $ext) {
} }
//determine block style by state (if any) //determine block style by state (if any)
$style = ($ext_state != '') ? "state_".$ext_state : null; $style = ($ext_state != '') ? "op_state_".$ext_state : null;
//determine the call identifier passed on drop //determine the call identifier passed on drop
if ($ext['uuid'] == $ext['call_uuid'] && $ext['variable_bridge_uuid'] == '') { // transfer an outbound internal call if ($ext['uuid'] == $ext['call_uuid'] && $ext['variable_bridge_uuid'] == '') { // transfer an outbound internal call
@ -237,19 +246,19 @@ foreach ($activity as $extension => $ext) {
$status_hover = $text['label-status_logged_out_or_unknown']; $status_hover = $text['label-status_logged_out_or_unknown'];
} }
$block .= "<div id='".$extension."' class='ext ".$style."' ".(($_GET['vd_ext_from'] == $extension || $_GET['vd_ext_to'] == $extension) ? "style='border-style: dotted;'" : null)." ".(($ext_state != 'active' && $ext_state != 'ringing') ? "ondrop='drop(event, this.id);' ondragover='allowDrop(event, this.id);' ondragleave='discardDrop(event, this.id);'" : null).">"; // DRAG TO $block .= "<div id='".$extension."' class='op_ext ".$style."' ".(($_GET['vd_ext_from'] == $extension || $_GET['vd_ext_to'] == $extension) ? "style='border-style: dotted;'" : null)." ".(($ext_state != 'active' && $ext_state != 'ringing') ? "ondrop='drop(event, this.id);' ondragover='allowDrop(event, this.id);' ondragleave='discardDrop(event, this.id);'" : null).">"; // DRAG TO
$block .= "<table class='ext ".$style."'>"; $block .= "<table class='op_ext ".$style."'>";
$block .= " <tr>"; $block .= " <tr>";
$block .= " <td class='ext_icon'>"; $block .= " <td class='op_ext_icon'>";
$block .= " <span name='".$extension."'>"; // DRAG FROM $block .= " <span name='".$extension."'>"; // DRAG FROM
$block .= "<img id='".$call_identifier."' class='ext_icon' src='resources/images/status_".$status_icon.".png' title='".$status_hover."' ".(($draggable) ? "draggable='true' ondragstart=\"drag(event, this.parentNode.getAttribute('name'));\" onclick=\"virtual_drag('".$call_identifier."', '".$extension."');\"" : "onfocus='this.blur();' draggable='false' style='cursor: not-allowed;'").">"; $block .= "<img id='".$call_identifier."' class='op_ext_icon' src='resources/images/status_".$status_icon.".png' title='".$status_hover."' ".(($draggable) ? "draggable='true' ondragstart=\"drag(event, this.parentNode.getAttribute('name'));\" onclick=\"virtual_drag('".$call_identifier."', '".$extension."');\"" : "onfocus='this.blur();' draggable='false' style='cursor: not-allowed;'").">";
$block .= "</span>"; $block .= "</span>";
$block .= " </td>"; $block .= " </td>";
$block .= " <td class='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;' draggable='false'>"; $block .= " <img src='resources/images/".$dir_icon.".png' align='right' style='margin-top: 3px; margin-right: 1px; width: 12px; height: 12px;' draggable='false'>";
} }
$block .= " <span class='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) {
$block .= " <strong class='strong'>".$ext['effective_caller_id_name']."</strong> (".$extension.")"; $block .= " <strong class='strong'>".$ext['effective_caller_id_name']."</strong> (".$extension.")";
} }
@ -258,9 +267,9 @@ foreach ($activity as $extension => $ext) {
} }
$block .= " </span><br>"; $block .= " </span><br>";
if ($ext_state != '') { if ($ext_state != '') {
$block .= " <span class='caller_info'>"; $block .= " <span class='op_caller_info'>";
$block .= " <table align='right'><tr><td style='text-align: right;'>"; $block .= " <table align='right'><tr><td style='text-align: right;'>";
$block .= " <span class='call_info'>".$ext['call_length']."</span><br>"; $block .= " <span class='op_call_info'>".$ext['call_length']."</span><br>";
//record //record
if (permission_exists('operator_panel_record') && $ext_state == 'active') { if (permission_exists('operator_panel_record') && $ext_state == 'active') {
$call_identifier_record = $ext['call_uuid']; $call_identifier_record = $ext['call_uuid'];

150
themes/enhanced/template.php
View File

@ -249,6 +249,7 @@ input.btn, input.button {
background-color: #000; background-color: #000;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
opacity: 0.9; opacity: 0.9;
-moz-opacity: 0.9; -moz-opacity: 0.9;
} }
@ -954,6 +955,155 @@ legend {
padding: 20px; padding: 20px;
} }
/* operator panel styles begin */
DIV.op_ext {
float: left;
width: 235px;
margin: 0px 8px 8px 0px;
padding: 0px;
border-style: solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 3px #e5e9f0;
-moz-box-shadow: 0 0 3px #e5e9f0;
box-shadow: 0 0 3px #e5e9f0;
border-width: 1px 3px;
border-color: #b9c5d8 #c5d1e5;
background-color: #e5eaf5;
cursor: default;
}
DIV.op_state_active {
background-color: #baf4bb;
border-width: 1px 3px;
border-color: #77d779;
}
DIV.op_state_ringing {
background-color: #a8dbf0;
border-width: 1px 3px;
border-color: #41b9eb;
}
TABLE.op_ext {
width: 100%;
height: 60px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #e5eaf5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
TD.op_ext_icon {
vertical-align: middle;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
IMG.op_ext_icon {
cursor: move;
width: 39px;
height: 42px;
border: none;
}
TD.op_ext_info {
text-align: left;
vertical-align: top;
font-family: arial;
font-size: 10px;
overflow: auto;
width: 100%;
padding: 3px 5px 3px 7px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #f0f2f6;
}
TD.op_state_ringing {
background-color: #d1f1ff;
}
TD.op_state_active {
background-color: #e1ffe2;
}
TABLE.op_state_ringing {
background-color: #a8dbf0;
}
TABLE.op_state_active {
background-color: #baf4bb;
}
.op_user_info {
font-family: arial;
font-size: 10px;
display: inline-block;
}
.op_user_info strong {
color: #3164AD;
}
.op_caller_info {
display: block;
margin-top: 7px;
font-family: arial;
font-size: 10px;
}
.op_call_info {
display: inline-block;
padding: 0px;
font-family: arial;
font-size: 10px;
}
#op_btn_status_available {
background-image: -moz-linear-gradient(top, #8ec989 25%, #2d9c38 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #8ec989), color-stop(0.64, #2d9c38));
background-color: #2d9c38;
border: 1px solid #006200;
}
#op_btn_status_available_on_demand {
background-image: -moz-linear-gradient(top, #abd0aa 25%, #629d62 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #abd0aa), color-stop(0.64, #629d62));
background-color: #629d62;
border: 1px solid #619c61;
}
#op_btn_status_on_break {
background-image: -moz-linear-gradient(top, #ddc38b 25%, #be8e2c 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #ddc38b), color-stop(0.64, #be8e2c));
background-color: #be8e2c;
border: 1px solid #7d1b00;
}
#op_btn_status_do_not_disturb {
background-image: -moz-linear-gradient(top, #cc8984 25%, #960d10 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cc8984), color-stop(0.64, #960d10));
background-color: #960d10;
border: 1px solid #5b0000;
}
#op_btn_status_logged_out {
background-image: -moz-linear-gradient(top, #cacac9 25%, #8d8d8b 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cacac9), color-stop(0.64, #8d8d8b));
background-color: #8d8d8b;
border: 1px solid #5d5f5a;
}
/* operator panel styles end */
</style> </style>
<script type="text/javascript"> <script type="text/javascript">

150
themes/minimized/template.php
View File

@ -249,6 +249,7 @@ input.btn, input.button {
background-color: #000; background-color: #000;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
opacity: 0.9; opacity: 0.9;
-moz-opacity: 0.9; -moz-opacity: 0.9;
} }
@ -949,6 +950,155 @@ legend {
padding: 20px; padding: 20px;
} }
/* operator panel styles begin */
DIV.op_ext {
float: left;
width: 235px;
margin: 0px 8px 8px 0px;
padding: 0px;
border-style: solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 3px #e5e9f0;
-moz-box-shadow: 0 0 3px #e5e9f0;
box-shadow: 0 0 3px #e5e9f0;
border-width: 1px 3px;
border-color: #b9c5d8 #c5d1e5;
background-color: #e5eaf5;
cursor: default;
}
DIV.op_state_active {
background-color: #baf4bb;
border-width: 1px 3px;
border-color: #77d779;
}
DIV.op_state_ringing {
background-color: #a8dbf0;
border-width: 1px 3px;
border-color: #41b9eb;
}
TABLE.op_ext {
width: 100%;
height: 60px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #e5eaf5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
TD.op_ext_icon {
vertical-align: middle;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
IMG.op_ext_icon {
cursor: move;
width: 39px;
height: 42px;
border: none;
}
TD.op_ext_info {
text-align: left;
vertical-align: top;
font-family: arial;
font-size: 10px;
overflow: auto;
width: 100%;
padding: 3px 5px 3px 7px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #f0f2f6;
}
TD.op_state_ringing {
background-color: #d1f1ff;
}
TD.op_state_active {
background-color: #e1ffe2;
}
TABLE.op_state_ringing {
background-color: #a8dbf0;
}
TABLE.op_state_active {
background-color: #baf4bb;
}
.op_user_info {
font-family: arial;
font-size: 10px;
display: inline-block;
}
.op_user_info strong {
color: #3164AD;
}
.op_caller_info {
display: block;
margin-top: 7px;
font-family: arial;
font-size: 10px;
}
.op_call_info {
display: inline-block;
padding: 0px;
font-family: arial;
font-size: 10px;
}
#op_btn_status_available {
background-image: -moz-linear-gradient(top, #8ec989 25%, #2d9c38 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #8ec989), color-stop(0.64, #2d9c38));
background-color: #2d9c38;
border: 1px solid #006200;
}
#op_btn_status_available_on_demand {
background-image: -moz-linear-gradient(top, #abd0aa 25%, #629d62 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #abd0aa), color-stop(0.64, #629d62));
background-color: #629d62;
border: 1px solid #619c61;
}
#op_btn_status_on_break {
background-image: -moz-linear-gradient(top, #ddc38b 25%, #be8e2c 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #ddc38b), color-stop(0.64, #be8e2c));
background-color: #be8e2c;
border: 1px solid #7d1b00;
}
#op_btn_status_do_not_disturb {
background-image: -moz-linear-gradient(top, #cc8984 25%, #960d10 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cc8984), color-stop(0.64, #960d10));
background-color: #960d10;
border: 1px solid #5b0000;
}
#op_btn_status_logged_out {
background-image: -moz-linear-gradient(top, #cacac9 25%, #8d8d8b 64%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cacac9), color-stop(0.64, #8d8d8b));
background-color: #8d8d8b;
border: 1px solid #5d5f5a;
}
/* operator panel styles end */
</style> </style>
<script type="text/javascript"> <script type="text/javascript">