new.tpl

asterisk elastix的呼叫中心模块

<link rel="stylesheet" type="text/css" media="all" href="libs/js/jscalendar/calendar-win2k-2.css" />
<script type="text/javascript" src="libs/js/jscalendar/calendar.js"></script>
<script type="text/javascript" src="libs/js/jscalendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="libs/js/jscalendar/calendar-setup.js"></script>
<script src="modules/{$MODULE_NAME}/libs/js/base.js"></script>
<link rel="stylesheet" href="modules/{$MODULE_NAME}/themes/styles.css">
{literal}
<style type='text/css'>
.boton_normal{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
/*     background-color:gray; */
}
/* Boton Break */
.boton_unbreak{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:#BD0000;
    color: #FFFFFF;
}
.boton_break{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:#094895;   
    color: #FFFFFF;
}
input.boton_unbreak:focus{
    background-color:#BD0000;
    border-color:#BD0000;
}
input.boton_break:focus{
    background-color:#094895;
    border-color:#094895;
}
/* Fin Boton Break */
/* Boton Hangup */
.boton_activo{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:#06640D;
    color: #FFFFFF;
}
.boton_desactivo{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:#D2C0CF;
    color:#FFFFFF;
}
input.boton_activo:focus{
    background-color:#06640D;
    border-color:#06640D;
}
input.boton_desactivo:focus{
     background-color:#D2C0CF;
    border-color:#D2C0CF;
}
/* Fin Boton Hangup */
/* Boton Tranfer */
.boton_tranfer_activo{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:#094895;
    color: #FFFFFF;
}
input.boton_tranfer_activo:focus{
    background-color:#094895;
    border-color:#094895;
}

.boton_tranfer_inactivo{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:#D2C0CF;
    color:#FFFFFF;
}

input.boton_tranfer_inactivo:focus{
    background-color:#D2C0CF;
    border-color:#094895;
}

/* Fin Boton Tranfer */
#div_list{
    position:absolute;
    top:292px;
    left:105px;
    float:left;
    width:120px;
    height:105px;
    text-align:center;
    background-color:#094895;   
    font-size:16px;
    font-weight:bold;
    color: #FFFFFF;
    border:1px black solid;
}
/*inicio transferencia llamada*/
#div_transfer_list{
    position:absolute;
    top:500px; /*460px;*/
    left:105px;
    float:left;
    width:150px;
    height:105px;
    text-align:center;
    background-color:#094895;   
    font-size:16px;
    font-weight:bold;
    color: #FFFFFF;
    border:1px black solid;
}
/*fin transferencia llamada*/
/* inicio hold llamada */
.boton_hold{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:blue;
}
.boton_unhold{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:red;
}
/* fin hold llamada */
/* inicio Marcar llamada*/

#div_marcar_list {
    position:absolute;
    top:400px; /*460px;*/
    left:105px;
    float:left;
    width:150px;
    height:105px;
    text-align:center;
    background-color:#094895;   
    font-size:16px;
    font-weight:bold;
    color: #FFFFFF;
    border:1px black solid;
}


.boton_marcar_activo{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:#094895;
    color: #FFFFFF;
}

input.boton_marcar_activo:focus{
    background-color:#094895;
    border-color:#094895;
}

.boton_marcar_inactivo{
    width:85px;
    height:65px;
    font-size:16px;
    font-weight:bold;
    background-color:#D2C0CF;
    color:#FFFFFF;
}

input.boton_marcar_inactivo:focus{
    background-color:#D2C0CF;
    border-color:#094895;
}
/* fin Marcar llamada*/


.style_label{
    text-align:center;
    font-size:16px;
    font-weight:bold;
    text-decoration:underline;
}
.classCronometro{
    font-size:24px;
    font-weight:bold;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    color: #FFFFFF;
}
.normal {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 15px;
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}
a.normal:link, a.normal:visited {
    text-decoration: underline;
    color: #444444;
}
</style>
{/literal}
{$SCRIPT_AJAX}
<form method="POST" name="frm_agent_console" id="frm_agent_console">
<table width="99%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr class="moduleTitle">
  <td class="moduleTitle" valign="middle">&nbsp;&nbsp;<img src="images/icono_fono.jpg" border="0" align="absmiddle" >&nbsp;&nbsp;{$title}</td>
</tr>
<tr>
  <td valign="middle" class="mb_message">{$ERROR_DB}<div id="mensajes_informacion"></div></td>
</tr>
<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td width="100%">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td width='85%' class="fondo_estatus_no_llamada" id="celda_estatus_actual"><div id="estatus_actual"></div></td>
                    <td width='15%' align='center' class='classCronometro' id='celda_cronometro'><label name='cronometro' id='cronometro' border='0'>00:00:00</label></td>
                </tr>
            </table>
        </td>
      </tr>
      <tr>
        <td width="100%">&nbsp;</td>
      </tr>
      <tr>
        <td width="100%">
          <table cellSpacing="0" cellPadding="0" width="100%" border="0">
            <tr>
              <td colspan='4'>
<!--            INICIO: ESTA ES LA TABLA QUE CONTIENE EL CONTENIDO PRINCIPAL DE LA PANTALLA      -->
                <TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td width="150" valign="top">
<!--                  INICIO: TABLA QUE CONTIENE LOS BOTONES QUE ESTAN AL LADO IZQUIERDO -->
                      <table cellpadding="2" cellspacing="0" height="100%" border="0">
                        <tr>
                          <td valign="top" height="400">
                            <table>