Rediseño de interfaz
This commit is contained in:
parent
b802418546
commit
0eb3f30b6f
15
router.js
15
router.js
|
|
@ -6,4 +6,19 @@ router.get('/', function(request, response) {
|
|||
view.render('home', {id: request.user.id}, response);
|
||||
});
|
||||
|
||||
router.get('/history', function(request, response) {
|
||||
let number = request.query.number;
|
||||
view.render('history', {id: request.user.id, call: number}, response);
|
||||
});
|
||||
|
||||
router.get('/dialpad', function(request, response) {
|
||||
let number = request.query.number;
|
||||
view.render('dialpad', {id: request.user.id, call: number}, response);
|
||||
});
|
||||
|
||||
router.get('/call', function(request, response) {
|
||||
let number = request.query.number;
|
||||
view.render('call', {id: request.user.id, call: number}, response);
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: Arial, Verdana, Helvetica, sans-serif;
|
||||
background-color: #292929;
|
||||
font-size: 14px;
|
||||
padding: 65.5px 0 0 0;
|
||||
margin: 0
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
|
@ -18,149 +19,146 @@ html, body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #FFF
|
||||
color: #FFF;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.quickbar {
|
||||
.navigation {
|
||||
background-color: #3C393B;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.quickbar a {
|
||||
.navigation a {
|
||||
text-decoration: none;
|
||||
margin-left: 10px;
|
||||
color: #FFF
|
||||
}
|
||||
|
||||
.quickbar a:hover {
|
||||
.navigation a:hover {
|
||||
color: #ff6e40
|
||||
}
|
||||
|
||||
.quickbar .pull-right a i {
|
||||
.navigation .pull-right a i {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.side {
|
||||
background: #2C2C2C;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
#container {
|
||||
position: fixed;
|
||||
padding-left: 80px;
|
||||
top: 65.5px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
float: left
|
||||
}
|
||||
|
||||
.side .user {
|
||||
padding: 15px;
|
||||
color: #FFF
|
||||
#container.side-display {
|
||||
padding-left: 335px
|
||||
}
|
||||
|
||||
.side .user .extension {
|
||||
font-size: 12px
|
||||
.quickbar {
|
||||
background: #232323;
|
||||
position: fixed;
|
||||
width: 80px;
|
||||
top: 65.5px;
|
||||
bottom: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.side .user:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
clear: both
|
||||
.quickbar ul {
|
||||
padding: 0;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.side .user .name {
|
||||
font-weight: bold;
|
||||
color: #FFF
|
||||
.quickbar ul li {
|
||||
position: relative;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
.side .title {
|
||||
background-color: #333333;
|
||||
text-transform: uppercase;
|
||||
padding: 15px 10px;
|
||||
font-weight: bold;
|
||||
color: #111111
|
||||
|
||||
}
|
||||
|
||||
.side .navigation a {
|
||||
background-color: #ff9e00;
|
||||
text-decoration: none;
|
||||
transition: 0.2s all;
|
||||
.quickbar ul li a {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: #FFF
|
||||
display: block
|
||||
}
|
||||
|
||||
.side .navigation a.active, .side .navigation a.active:hover {
|
||||
background-color: #FFF;
|
||||
color: #FFA410
|
||||
.quickbar ul li a i {
|
||||
font-size: 32px
|
||||
}
|
||||
|
||||
.side .navigation a:hover {
|
||||
background-color: #ffb030;
|
||||
.quickbar ul li a:hover {
|
||||
background-color: #383838
|
||||
}
|
||||
|
||||
.side .navigation a i {
|
||||
margin-right: 10px
|
||||
.quickbar ul li a.active {
|
||||
background-color: #2C2C2C
|
||||
}
|
||||
|
||||
.side .audioControls {
|
||||
.quickbar .audioControls {
|
||||
position:absolute;
|
||||
bottom: 0;
|
||||
color: #FFF
|
||||
}
|
||||
|
||||
.profile .status {
|
||||
position:absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.profile .status.offline {
|
||||
background-color: #CCC
|
||||
}
|
||||
|
||||
.profile .status.online {
|
||||
background-color: #95D600
|
||||
}
|
||||
|
||||
.profile .status.error {
|
||||
background-color: #d81212
|
||||
}
|
||||
|
||||
#side {
|
||||
background-color: #2C2C2C;
|
||||
position: fixed;
|
||||
padding: 15px;
|
||||
color: #FFF
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 255px;
|
||||
left: 80px
|
||||
}
|
||||
|
||||
|
||||
|
||||
.chatbox .search {
|
||||
margin-bottom: 15px
|
||||
#content {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float:left
|
||||
}
|
||||
|
||||
.chatbox .search .control {
|
||||
-webkit-border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
background: #232323;
|
||||
padding: 10px
|
||||
.call {
|
||||
background-color: #111;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
float: left
|
||||
}
|
||||
|
||||
.chatbox .search input[type=text] {
|
||||
background-color: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
|
||||
width:100%
|
||||
}
|
||||
|
||||
.chatbox .callTimer {
|
||||
text-align: center;
|
||||
padding: 15px
|
||||
}
|
||||
|
||||
.chatbox .callTimer span {
|
||||
font-size: 18px;
|
||||
color: #FFF
|
||||
.chatbox {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
background-color: #292929;
|
||||
height: 100%;
|
||||
width: 85%;
|
||||
width: 100%;
|
||||
margin-left: 80px;
|
||||
float: left
|
||||
}
|
||||
|
||||
.chatbox .navigation {
|
||||
padding: 15px;
|
||||
color: #FFF
|
||||
}
|
||||
|
||||
#notifications {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
|
@ -182,9 +180,26 @@ a {
|
|||
color: #FFF
|
||||
}
|
||||
|
||||
.dial {
|
||||
width: 500px;
|
||||
margin: 100px auto
|
||||
.dial .search {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
.dial .search .control {
|
||||
-webkit-border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
background: #232323;
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.dial .search input[type=text] {
|
||||
background-color: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
|
||||
width:100%
|
||||
}
|
||||
|
||||
.dial .callStatus {
|
||||
|
|
|
|||
|
|
@ -1,168 +1,65 @@
|
|||
window.addEventListener('load', function() {
|
||||
$(window).on('load', function() {
|
||||
|
||||
/**
|
||||
* Incoming/Outgoint calls
|
||||
*/
|
||||
/* if (!Softphone.isOnCall()) {
|
||||
let number = Util.query('number');
|
||||
Softphone.call(number);
|
||||
} */
|
||||
|
||||
/**
|
||||
* Make new call
|
||||
*/
|
||||
$('call').addEventListener('click', function(event) {
|
||||
if (ua.sessionInstance && ua.sessionInstance.direction === 'incoming')
|
||||
ua.sessionInstance.answer(options);
|
||||
$(document).on('click', '#call', function() {
|
||||
let number = $('#callNumber').val();
|
||||
|
||||
let number = $('callNumber').value;
|
||||
$('callNumber').value = '';
|
||||
if (number)
|
||||
Softphone.call(number, options);
|
||||
|
||||
if (number != '') {
|
||||
Softphone.call(number);
|
||||
} else {
|
||||
notify('Introduce un destinatario para realizar la llamada');
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* Reset call number field
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('clear').addEventListener('click', function(event) {
|
||||
$('callNumber').value = '';
|
||||
$(document).on('click', '#zero, #one, #two, #three, #four, '
|
||||
+ '#five, #six, #seven, #eight, #nine, #asterisk, #pad', padKey);
|
||||
|
||||
audio.addTrack('reset');
|
||||
audio.play();
|
||||
event.preventDefault();
|
||||
/**
|
||||
* History
|
||||
*/
|
||||
$(document).on('click', '#history', function() {
|
||||
Util.navigate('#content', '/history');
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* End a call
|
||||
* Show/Hide dialpad
|
||||
*/
|
||||
$('callHangup').addEventListener('click', function(event) {
|
||||
$(document).on('click', '#dial', function() {
|
||||
Util.navigate('#side', '/dialpad');
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* Accept incoming call
|
||||
*/
|
||||
$(document).on('click', '#accept', function() {
|
||||
Softphone.answer(options);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* Decline incoming call
|
||||
*/
|
||||
$(document).on('click', '#decline', function() {
|
||||
Softphone.hangup();
|
||||
|
||||
audio.addTrack('hangup');
|
||||
audio.play();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
/* *
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('zero').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('one').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('two').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('three').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('four').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('five').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('six').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('seven').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('eight').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('nine').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('asterisk').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Insert key on call field
|
||||
*/
|
||||
$('pad').addEventListener('click', padKey);
|
||||
|
||||
/**
|
||||
* Transfer current call
|
||||
*/
|
||||
$('callTransfer').addEventListener('click', function(event) {
|
||||
let number = document.getElementById('callNumber').value;
|
||||
|
||||
if (number != '') {
|
||||
Softphone.transfer(number);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Hold current call
|
||||
*/
|
||||
$('callPause').addEventListener('click', function(event) {
|
||||
if (Softphone.isOnHold()) {
|
||||
Softphone.unhold();
|
||||
} else {
|
||||
Softphone.hold();
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Do not disturb
|
||||
*/
|
||||
$('doNotDisturb').addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
/**
|
||||
* Call settings
|
||||
*/
|
||||
$('callConfig').addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
/**
|
||||
* Change volume action
|
||||
*/
|
||||
$('volume').addEventListener('change', function(event) {
|
||||
if (!ua.callInstance)
|
||||
return;
|
||||
|
||||
ua.audioInstance.volume = this.value;
|
||||
});
|
||||
|
||||
$('mic').addEventListener('click', function(event) {
|
||||
if(Softphone.isMuted()) {
|
||||
Softphone.unmute();
|
||||
} else {
|
||||
Softphone.mute();
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -173,7 +70,7 @@ window.addEventListener('load', function() {
|
|||
let key = event.target.innerHTML;
|
||||
let keyName = event.target.id;
|
||||
|
||||
$('callNumber').value += key;
|
||||
document.getElementById('callNumber').value += key;
|
||||
|
||||
audio.addTrack(keyName);
|
||||
audio.play();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +1,20 @@
|
|||
let Softphone = {
|
||||
|
||||
/**
|
||||
* Check if has a call session
|
||||
*/
|
||||
isOnCall: function() {
|
||||
if (ua.sessionInstance)
|
||||
return true;
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Make a new call
|
||||
*/
|
||||
call: function(number) {
|
||||
if (ua.sessionInstance)
|
||||
if (this.isOnCall())
|
||||
return;
|
||||
|
||||
ua.sessionInstance = ua.call(`sip:${number}@${uriHost}`, options);
|
||||
|
|
@ -13,17 +24,27 @@ let Softphone = {
|
|||
* Hang up current call
|
||||
*/
|
||||
hangup: function() {
|
||||
if (!ua.sessionInstance)
|
||||
if (!this.isOnCall())
|
||||
return;
|
||||
|
||||
ua.sessionInstance.terminate();
|
||||
},
|
||||
|
||||
/**
|
||||
* Answer incoming call
|
||||
*/
|
||||
answer: function() {
|
||||
if (!this.isOnCall())
|
||||
return;
|
||||
|
||||
ua.sessionInstance.answer(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* Mute current call
|
||||
*/
|
||||
mute: function() {
|
||||
if (!ua.sessionInstance)
|
||||
if (!this.isOnCall())
|
||||
return
|
||||
|
||||
ua.sessionInstance.mute();
|
||||
|
|
@ -33,7 +54,7 @@ let Softphone = {
|
|||
* Unmute current call
|
||||
*/
|
||||
unmute: function() {
|
||||
if (!ua.sessionInstance)
|
||||
if (!this.isOnCall())
|
||||
return
|
||||
|
||||
ua.sessionInstance.unmute();
|
||||
|
|
@ -43,7 +64,7 @@ let Softphone = {
|
|||
* Get if current call is muted
|
||||
*/
|
||||
isMuted: function() {
|
||||
if (!ua.sessionInstance)
|
||||
if (!this.isOnCall())
|
||||
return
|
||||
|
||||
return ua.sessionInstance.isMuted();
|
||||
|
|
@ -53,7 +74,7 @@ let Softphone = {
|
|||
* Hold current call
|
||||
*/
|
||||
hold: function() {
|
||||
if (!ua.sessionInstance)
|
||||
if (!this.isOnCall())
|
||||
return
|
||||
|
||||
ua.sessionInstance.hold();
|
||||
|
|
@ -73,7 +94,7 @@ let Softphone = {
|
|||
* Get if current call is on hold
|
||||
*/
|
||||
isOnHold: function() {
|
||||
if (!ua.sessionInstance)
|
||||
if (!this.isOnCall())
|
||||
return
|
||||
|
||||
return ua.sessionInstance.isOnHold().local;
|
||||
|
|
@ -83,7 +104,7 @@ let Softphone = {
|
|||
* Transfer current call
|
||||
*/
|
||||
transfer: function(number) {
|
||||
if (!ua.sessionInstance)
|
||||
if (!this.isOnCall())
|
||||
return
|
||||
|
||||
ua.sessionInstance.refer(`sip:${number}@${uriHost}`);
|
||||
|
|
@ -107,5 +128,25 @@ let Softphone = {
|
|||
|
||||
setStatus: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a number from incoming calls
|
||||
*/
|
||||
getRemoteIdentity: function() {
|
||||
if (!this.isOnCall())
|
||||
return;
|
||||
|
||||
return ua.sessionInstance._remote_identity._uri._user;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns call direction
|
||||
*/
|
||||
getDirection: function() {
|
||||
if (!this.isOnCall())
|
||||
return;
|
||||
|
||||
return ua.sessionInstance.direction;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,52 +30,51 @@ let ua = new JsSIP.UA(configuration);
|
|||
*/
|
||||
function eventStatus(event) {
|
||||
if (event.cause === JsSIP.C.causes.CONNECTION_ERROR)
|
||||
return notify('Ha ocurrido un error de conexión');
|
||||
return Util.notify('Ha ocurrido un error de conexión');
|
||||
|
||||
if (event.cause === JsSIP.C.causes.INTERNAL_ERROR)
|
||||
return notify('Ha ocurrido un error inesperado');
|
||||
return Util.notify('Ha ocurrido un error inesperado');
|
||||
|
||||
if (event.cause === JsSIP.C.causes.AUTHENTICATION_ERROR)
|
||||
return notify('No se ha podido autenticar la sesión');
|
||||
return Util.notify('No se ha podido autenticar la sesión');
|
||||
|
||||
if (event.cause === JsSIP.C.causes.UNAVAILABLE)
|
||||
return notify('El destinatario no está disponible');
|
||||
return Util.notify('El destinatario no está disponible');
|
||||
|
||||
if (event.cause === JsSIP.C.causes.BUSY)
|
||||
return notify('El destinatario está ocupado');
|
||||
return Util.notify('El destinatario está ocupado');
|
||||
|
||||
if (event.cause === JsSIP.C.causes.REJECTED)
|
||||
return notify('La conexión ha sido rechazada')
|
||||
return Util.notify('La llamada ha sido rechazada')
|
||||
|
||||
if (event.cause === JsSIP.C.causes.NOT_FOUND)
|
||||
return notify('No se ha podido encontrar el destinatario');
|
||||
return Util.notify('No se ha podido encontrar el destinatario');
|
||||
|
||||
if (event.cause === JsSIP.C.causes.REQUEST_TIMEOUT)
|
||||
return notify('El destinatario no ha respondido la llamada');
|
||||
return Util.notify('El destinatario no ha respondido la llamada');
|
||||
|
||||
if (event.cause === JsSIP.USER_DENIED_MEDIA_ACCESS)
|
||||
return notify('Es necesario permitir el acceso al micrófono');
|
||||
return Util.notify('Es necesario permitir el acceso al micrófono');
|
||||
}
|
||||
|
||||
/**
|
||||
* UA register
|
||||
*/
|
||||
ua.on('registered', function(event) {
|
||||
$('callStatus').innerHTML = 'Conectado';
|
||||
$('.profile .status').removeClass('offline').addClass('online');
|
||||
});
|
||||
|
||||
/**
|
||||
* Client disconnection
|
||||
*/
|
||||
ua.on('disconnected', function(event) {
|
||||
$('callStatus').innerHTML = 'Desconectado';
|
||||
$('.profile .status').removeClass('online').addClass('offline');
|
||||
eventStatus(event);
|
||||
});
|
||||
|
||||
ua.on('registrationFailed', function(event) {
|
||||
|
||||
Softphone.notifyStatus(event);
|
||||
|
||||
$('callStatus').innerHTML = 'Desconectado';
|
||||
$('.profile .status').removeClass('offline').addClass('error');
|
||||
eventStatus(event);
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -85,32 +84,32 @@ ua.on('newRTCSession', function(event) {
|
|||
let session = event.session;
|
||||
ua.sessionInstance = session;
|
||||
|
||||
console.log(session);
|
||||
|
||||
session.on('confirmed', function() {
|
||||
console.log('confirmed');
|
||||
})
|
||||
});
|
||||
|
||||
session.on('reinvite', function() {
|
||||
console.log('reinvite');
|
||||
})
|
||||
});
|
||||
|
||||
session.on('update', function() {
|
||||
console.log('update');
|
||||
})
|
||||
});
|
||||
|
||||
/**
|
||||
* Call in progress
|
||||
*/
|
||||
session.on('progress', function(event) {
|
||||
console.log('progress');
|
||||
if (session.direction === 'incoming') {
|
||||
Util.load('#content', '/call', function() {
|
||||
audio.addTrack('incoming');
|
||||
audio.play(true);
|
||||
$('callStatus').innerHTML = 'Llamada entrante...';
|
||||
});
|
||||
} else {
|
||||
Util.load('#content', '/call', function() {
|
||||
audio.addTrack('outgoing');
|
||||
audio.play(true);
|
||||
$('callStatus').innerHTML = 'Llamando...';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -119,14 +118,14 @@ ua.on('newRTCSession', function(event) {
|
|||
*/
|
||||
session.on('accepted', function(event) {
|
||||
console.log('accepted');
|
||||
$('callStatus').innerHTML = 'Llamada conectada';
|
||||
document.getElementById('callStatus').innerHTML = 'Llamada conectada';
|
||||
if (session.connection.getRemoteStreams().length > 0) {
|
||||
let stream = session.connection.getRemoteStreams()[0];
|
||||
|
||||
audio.addStream(stream);
|
||||
audio.play();
|
||||
}
|
||||
startTimer();
|
||||
Util.startTimer();
|
||||
});
|
||||
|
||||
session.on('hold', function(event) {
|
||||
|
|
@ -148,9 +147,12 @@ ua.on('newRTCSession', function(event) {
|
|||
audio.addTrack('hangup');
|
||||
audio.play();
|
||||
|
||||
stopTimer();
|
||||
Util.load('#content', '/', function() {
|
||||
|
||||
});
|
||||
|
||||
Util.stopTimer();
|
||||
|
||||
$('callStatus').innerHTML = 'Conectado';
|
||||
ua.sessionInstance = null;
|
||||
eventStatus(event);
|
||||
});
|
||||
|
|
@ -162,7 +164,6 @@ ua.on('newRTCSession', function(event) {
|
|||
audio.addTrack('hangup');
|
||||
audio.play();
|
||||
|
||||
$('callStatus').innerHTML = 'Conectado';
|
||||
ua.sessionInstance = null;
|
||||
eventStatus(event);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,39 +1,27 @@
|
|||
let timer;
|
||||
let timerSeconds = 1;
|
||||
let Util = {
|
||||
timerSeconds: 1,
|
||||
|
||||
/**
|
||||
* Object selector
|
||||
* Get URL query
|
||||
*/
|
||||
function $(object) {
|
||||
return document.getElementById(object);
|
||||
query: function(name) {
|
||||
let queries = window.location.search.replace('?', '').split('&');
|
||||
|
||||
for(let i = 0; i < queries.length; i++) {
|
||||
let query = queries[i].split('=');
|
||||
let keyName = query[0];
|
||||
let value = query[1];
|
||||
|
||||
if (keyName == name)
|
||||
return value;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Start call timer
|
||||
* Notify
|
||||
*/
|
||||
function startTimer() {
|
||||
timer = setInterval(function() {
|
||||
let date = new Date(null);
|
||||
date.setSeconds(timerSeconds);
|
||||
|
||||
$('timer').innerHTML = date.toISOString().substr(11, 8);
|
||||
timerSeconds++;
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop call timer
|
||||
*/
|
||||
function stopTimer() {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
timerSeconds = 0;
|
||||
$('timer').innerHTML = '00:00:00';
|
||||
}
|
||||
|
||||
|
||||
function notify(message) {
|
||||
if (!$('notifications')) {
|
||||
notify: function(message) {
|
||||
if (!document.getElementById('notifications')) {
|
||||
let container = document.createElement('div');
|
||||
container.setAttribute('id', 'notifications');
|
||||
document.body.appendChild(container);
|
||||
|
|
@ -49,9 +37,69 @@ function notify(message) {
|
|||
}, 8000);
|
||||
|
||||
|
||||
$('notifications').insertBefore(dialog, $('notifications').firstChild);
|
||||
}
|
||||
document.getElementById('notifications').insertBefore(dialog, document.getElementById('notifications').firstChild);
|
||||
},
|
||||
|
||||
function showStatus(status) {
|
||||
$('callStatus').innerHTML = 'Desconectado';
|
||||
/**
|
||||
* Start call timer
|
||||
*/
|
||||
startTimer: function() {
|
||||
this.timer = setInterval(() => {
|
||||
let date = new Date(null);
|
||||
console.log(this.timerSeconds);
|
||||
date.setSeconds(this.timerSeconds);
|
||||
|
||||
document.getElementById('timer').innerHTML = date.toISOString().substr(11, 8);
|
||||
this.timerSeconds++;
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop call timer
|
||||
*/
|
||||
stopTimer: function() {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
this.timerSeconds = 0;
|
||||
document.getElementById('timer').innerHTML = '00:00:00';
|
||||
},
|
||||
|
||||
/**
|
||||
* Page navigation
|
||||
*/
|
||||
navigate: function(container, path) {
|
||||
this.load(container, path, function() {
|
||||
if ($('#side').css('display') == 'block') {
|
||||
$('#side').css('display', 'none');
|
||||
$('#container').removeClass('side-display');
|
||||
} else {
|
||||
$('#side').css('display', 'block');
|
||||
$('#container').addClass('side-display');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Load view
|
||||
* @param {String} container Container element
|
||||
* @param {String} path Path to view
|
||||
*/
|
||||
load: function(container, path, cb) {
|
||||
$(container).load(path + '/?token=' + this.query('token'), function(response, status) {
|
||||
if (status == 'error')
|
||||
alert(response);
|
||||
|
||||
cb();
|
||||
});
|
||||
},
|
||||
|
||||
showSpinner: function() {
|
||||
|
||||
},
|
||||
|
||||
hideSpinner: function() {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
3
view.js
3
view.js
|
|
@ -8,6 +8,9 @@ module.exports = {
|
|||
render: function(view, args, response) {
|
||||
let instance = require(`./views/${view}/index.js`);
|
||||
|
||||
if (!instance.partials)
|
||||
return response.render(`${view}/index`, instance);
|
||||
|
||||
instance.init(args, () => {
|
||||
this.getPartials(instance, args, (instance) => {
|
||||
response.render(`${view}/index`, instance);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<div class="call">
|
||||
<div style="width:300px;margin: 50px auto 0 auto">
|
||||
<div class="photo" style="background-color:#333;width:200px;height:200px;text-align:center;padding: 25px 0;margin:0 auto">
|
||||
<i class="material-icons" style="font-size: 120px">person</i>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div>Nombre:</div>
|
||||
<div>dd:</div>
|
||||
</div>
|
||||
<div class="dial">
|
||||
<div class="callStatus" id="callStatus"></div>
|
||||
<div class="callTimer">
|
||||
<span id="timer">00:00:00</span>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="columns">
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon green" id="accept" title="Aceptar llamada">
|
||||
<i class="material-icons">call</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon red" id="decline" title="Colgar">
|
||||
<i class="material-icons">call_end</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon white" id="transfer" title="Transferir llamada">
|
||||
<i class="material-icons">phone_forwarded</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon white" id="hold" title="Pausar llamada">
|
||||
<i class="material-icons">phone_paused</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div style="width:300px;margin: 50px auto 0 auto">
|
||||
<div class="photo" style="background-color:#333;width:200px;height:200px;text-align:center;padding: 25px 0;margin:0 auto">
|
||||
<i class="material-icons" style="font-size: 120px">person</i>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div>Nombre:</div>
|
||||
<div>dd:</div>
|
||||
</div>
|
||||
<div class="dial">
|
||||
<div class="callStatus" id="callStatus"></div>
|
||||
<div class="callTimer">
|
||||
<span id="timer">00:00:00</span>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="columns">
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon green" id="accept" title="Aceptar llamada">
|
||||
<i class="material-icons">call</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon red" id="hangup" title="Colgar">
|
||||
<i class="material-icons">call_end</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon white" id="transfer" title="Transferir llamada">
|
||||
<i class="material-icons">phone_forwarded</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon white" id="pause" title="Pausar llamada">
|
||||
<i class="material-icons">phone_paused</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
|
||||
init: function(args, cb) {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<div class="dial">
|
||||
<div class="search">
|
||||
<div class="control">
|
||||
<input type="text" placeholder="Introduce un número..." id="callNumber"/> <i class="material-icons" id="clear">close</i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Controls block start -->
|
||||
<div class="controls">
|
||||
<div class="columns">
|
||||
<div class="column x50">
|
||||
<a href="" class="btn normal icon green" id="call" title="LLamar">
|
||||
<i class="material-icons">call</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x50">
|
||||
<a href="" class="btn normal icon white" id="clear" title="Vaciar campo de llamada">
|
||||
<i class="material-icons">DND</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column x33">
|
||||
<a href="" class="btn normal white pad" id="one">1</a>
|
||||
<a href="" class="btn normal white pad" id="four">4</a>
|
||||
<a href="" class="btn normal white" id="seven">7</a>
|
||||
<a href="" class="btn normal white" id="asterisk">*</a>
|
||||
</div>
|
||||
|
||||
<div class="column x33">
|
||||
<a href="" class="btn normal white pad" id="two">2</a>
|
||||
<a href="" class="btn normal white pad" id="five">5</a>
|
||||
<a href="" class="btn normal white pad" id="eight">8</a>
|
||||
<a href="" class="btn normal white pad" id="zero">0</a>
|
||||
</div>
|
||||
|
||||
<div class="column x33">
|
||||
<a href="" class="btn normal white pad" id="three">3</a>
|
||||
<a href="" class="btn normal white pad" id="six">6</a>
|
||||
<a href="" class="btn normal white pad" id="nine">9</a>
|
||||
<a href="" class="btn normal white pad" id="pad">#</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Controls block end -->
|
||||
|
||||
</div>
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="/static/css/app.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/components.css"/>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="/static/js/jssip.js?v=1"></script>
|
||||
<script type="text/javascript" src="/static/js/ua.js?v=1"></script>
|
||||
<script type="text/javascript" src="/static/js/audio.js?v=1"></script>
|
||||
|
|
@ -14,20 +15,3 @@
|
|||
<script type="text/javascript" src="/static/js/event.js?v=1"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Quickbar block start -->
|
||||
<div class="quickbar">
|
||||
<img src="http://salix.verdnatura.es/static/34777fb85a1496d64469bd8092a53ef6.svg"/>
|
||||
|
||||
<div class="pull-right">
|
||||
<a href="">
|
||||
<i class="material-icons">settings</i>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="material-icons">language</i>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="material-icons">exit_to_app</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quickbar block end -->
|
||||
|
|
@ -0,0 +1 @@
|
|||
Contactos
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
|
||||
init: function(args, cb) {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +1,3 @@
|
|||
{{> header}}
|
||||
{{> side}}
|
||||
|
||||
<!-- Chatbox block start -->
|
||||
<div class="chatbox">
|
||||
<div class="dial">
|
||||
<div class="search">
|
||||
<div class="control">
|
||||
<input type="text" placeholder="Introduce un número..." id="callNumber"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="callStatus" id="callStatus"></div>
|
||||
<div class="callTimer">
|
||||
<span id="timer">00:00:00</span>
|
||||
</div>
|
||||
|
||||
<!-- Controls block start -->
|
||||
<div class="controls">
|
||||
<div class="columns">
|
||||
<div class="column x33">
|
||||
<a href="" class="btn big icon green" id="call" title="LLamar">
|
||||
<i class="material-icons">call</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x33">
|
||||
<a href="" class="btn big icon white" id="clear" title="Vaciar campo de llamada">
|
||||
<i class="material-icons">clear_all</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column x33">
|
||||
<a href="" class="btn big icon red" id="callHangup" title="Colgar">
|
||||
<i class="material-icons">call_end</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big white pad" id="one">1</a>
|
||||
<a href="" class="btn big white pad" id="four">4</a>
|
||||
<a href="" class="btn big white" id="seven">7</a>
|
||||
<a href="" class="btn big white" id="asterisk">*</a>
|
||||
</div>
|
||||
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big white pad" id="two">2</a>
|
||||
<a href="" class="btn big white pad" id="five">5</a>
|
||||
<a href="" class="btn big white pad" id="eight">8</a>
|
||||
<a href="" class="btn big white pad" id="zero">0</a>
|
||||
</div>
|
||||
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big white pad" id="three">3</a>
|
||||
<a href="" class="btn big white pad" id="six">6</a>
|
||||
<a href="" class="btn big white pad" id="nine">9</a>
|
||||
<a href="" class="btn big white pad" id="pad">#</a>
|
||||
</div>
|
||||
|
||||
<div class="column x25">
|
||||
<a href="" class="btn big icon white" id="callTransfer" title="Transferir llamada">
|
||||
<i class="material-icons">phone_forwarded</i>
|
||||
</a>
|
||||
<a href="" class="btn big icon white" id="callPause" title="Pausar llamada">
|
||||
<i class="material-icons">phone_paused</i>
|
||||
</a>
|
||||
<a href="" class="btn big icon white" id="doNotDisturb" title="No molestar">
|
||||
<i class="material-icons">phone_locked</i>
|
||||
</a>
|
||||
<a href="" class="btn big icon white" id="callConfig" title="Configuración">
|
||||
<i class="material-icons">settings_phone</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="" class="btn normal yellow">
|
||||
<i class="material-icons">add</i> Nuevo contacto</a>
|
||||
<a href="" class="btn normal yellow">
|
||||
<i class="material-icons">search</i>Buscar contacto</a>
|
||||
<a href="" class="btn normal yellow">Ver historial</a>
|
||||
</div>
|
||||
<!-- Controls block end -->
|
||||
</div>
|
||||
<!-- Chatbox block end -->
|
||||
{{> navigation}}
|
||||
{{> quickbar}}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ module.exports = {
|
|||
|
||||
partials: {
|
||||
header: 'header',
|
||||
side: 'side'
|
||||
navigation: 'navigation',
|
||||
quickbar: 'quickbar'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!-- Navigation block start -->
|
||||
<div class="navigation">
|
||||
<img src="http://salix.verdnatura.es/static/34777fb85a1496d64469bd8092a53ef6.svg"/>
|
||||
|
||||
<div class="pull-right">
|
||||
<a href="">
|
||||
<i class="material-icons">settings</i>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="material-icons">language</i>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="material-icons">exit_to_app</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation block end -->
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
init: function(args, cb) {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!-- Container block start -->
|
||||
<div id="container">
|
||||
<!-- Quickbar block start -->
|
||||
<div class="quickbar">
|
||||
<!-- Profile block start -->
|
||||
<div class="profile">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="" title="{{name}} - SIP {{extension}}">
|
||||
<span class="status offline" title="Estado"></span>
|
||||
<i class="material-icons">account_circle</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Profile block end -->
|
||||
|
||||
<!-- Navigation block start -->
|
||||
<ul>
|
||||
<li>
|
||||
<a href="" id="history">
|
||||
<i class="material-icons">phone</i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" id="dial" class="active" title="Mostrar teclado">
|
||||
<i class="material-icons">dialpad</i>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<a href="" title="Añadir llamada"><i class="material-icons">phone_in_talk</i></a>
|
||||
</li>-->
|
||||
</ul>
|
||||
<!-- Navigation block end -->
|
||||
|
||||
<div class="audioControls">
|
||||
<div>
|
||||
<a href="" id="muteVolume" title="Silenciar volumen">
|
||||
<i class="material-icons">volume_down</i>
|
||||
</a>
|
||||
<!--<input type="range" id="volume" min="0" max="1" step="0.1" value="0.5"/>-->
|
||||
</div>
|
||||
<div>
|
||||
<a href="" id="muteMic" title="Silenciar micrófono"><i class="material-icons">mic</i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quickbar block end -->
|
||||
|
||||
<!-- Side block start -->
|
||||
<div id="side"></div>
|
||||
<!-- Side block end -->
|
||||
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<!-- Container block end -->
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!-- Side block start -->
|
||||
<div class="side">
|
||||
<!-- User block start -->
|
||||
<div class="user">
|
||||
<div class="pull-left">
|
||||
<div class="name">{{name}}</div>
|
||||
<spa class="extension">SIP {{extension}}</span>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a href="">
|
||||
<i class="material-icons">menu</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- User block end -->
|
||||
|
||||
<!-- Navigation block start -->
|
||||
<div class="navigation">
|
||||
<a href="" class="active"><i class="material-icons">home</i></a>
|
||||
<a href=""><i class="material-icons">contacts</i></a>
|
||||
</div>
|
||||
<!-- Navigation block end -->
|
||||
|
||||
<div class="title">
|
||||
Historial de llamadas
|
||||
</div>
|
||||
<div class="callHistory">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="audioControls">
|
||||
<div>
|
||||
<i class="material-icons">volume_down</i>
|
||||
<input type="range" id="volume" min="0" max="1" step="0.1" value="0.5"/>
|
||||
</div>
|
||||
<div>
|
||||
<a href="" id="mic"><i class="material-icons">mic</i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contacts">
|
||||
<i class="material-icons">load</i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Side block end -->
|
||||
Reference in New Issue