verdnatura
/
vn-softphone
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rediseño de interfaz

This commit is contained in:
Joan Sanchez 2018-01-16 20:31:19 +01:00
parent b802418546
commit 0eb3f30b6f
24 changed files with 917 additions and 812 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
router.js
View File

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

201
static/css/app.css
View File

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

201
static/js/event.js
View File

@ -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();
@ -184,6 +81,6 @@ window.addEventListener('load', function() {
/**
* Prevent page reload without confirmation
*/
window.addEventListener("beforeunload", function (event) {
event.returnValue = "\o/";
});
window.addEventListener("beforeunload", function (event) {
event.returnValue = "\o/";
});

4
static/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

0
static/js/session.js Normal file
View File

57
static/js/softphone.js
View File

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

65
static/js/ua.js
View File

@ -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') {
audio.addTrack('incoming');
audio.play(true);
$('callStatus').innerHTML = 'Llamada entrante...';
Util.load('#content', '/call', function() {
audio.addTrack('incoming');
audio.play(true);
});
} else {
audio.addTrack('outgoing');
audio.play(true);
$('callStatus').innerHTML = 'Llamando...';
Util.load('#content', '/call', function() {
audio.addTrack('outgoing');
audio.play(true);
});
}
});
@ -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);
});

128
static/js/util.js
View File

@ -1,57 +1,105 @@
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;
}
},
/**
* Notify
*/
notify: function(message) {
if (!document.getElementById('notifications')) {
let container = document.createElement('div');
container.setAttribute('id', 'notifications');
document.body.appendChild(container);
}
let dialog = document.createElement('div');
let text = document.createTextNode(message);
dialog.appendChild(text);
dialog.setAttribute('class', 'dialog');
setTimeout(function() {
dialog.remove();
}, 8000);
document.getElementById('notifications').insertBefore(dialog, document.getElementById('notifications').firstChild);
},
/**
* Start call timer
*/
function startTimer() {
timer = setInterval(function() {
let date = new Date(null);
date.setSeconds(timerSeconds);
startTimer: function() {
this.timer = setInterval(() => {
let date = new Date(null);
console.log(this.timerSeconds);
date.setSeconds(this.timerSeconds);
$('timer').innerHTML = date.toISOString().substr(11, 8);
timerSeconds++;
}, 1000)
}
document.getElementById('timer').innerHTML = date.toISOString().substr(11, 8);
this.timerSeconds++;
}, 1000);
},
/**
* Stop call timer
*/
function stopTimer() {
clearInterval(timer);
timer = null;
timerSeconds = 0;
$('timer').innerHTML = '00:00:00';
}
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() {
function notify(message) {
if (!$('notifications')) {
let container = document.createElement('div');
container.setAttribute('id', 'notifications');
document.body.appendChild(container);
}
let dialog = document.createElement('div');
let text = document.createTextNode(message);
dialog.appendChild(text);
dialog.setAttribute('class', 'dialog');
setTimeout(function() {
dialog.remove();
}, 8000);
};
$('notifications').insertBefore(dialog, $('notifications').firstChild);
}
function showStatus(status) {
$('callStatus').innerHTML = 'Desconectado';
}

3
view.js
View File

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

84
views/call/index.html Normal file
View File

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

6
views/call/index.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
init: function(args, cb) {
cb();
}
}

46
views/dialpad/index.html Normal file
View File

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

0
views/dialpad/index.js Normal file
View File

18
views/header/index.html
View File

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

1
views/history/index.html Normal file
View File

@ -0,0 +1 @@
Contactos

6
views/history/index.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
init: function(args, cb) {
cb();
}
}

84
views/home/index.html
View File

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

3
views/home/index.js
View File

@ -6,6 +6,7 @@ module.exports = {
partials: {
header: 'header',
side: 'side'
navigation: 'navigation',
quickbar: 'quickbar'
}
}

17
views/navigation/index.html Normal file
View File

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

5
views/navigation/index.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
init: function(args, cb) {
cb();
}
}

56
views/quickbar/index.html Normal file
View File

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

0
views/side/index.js → views/quickbar/index.js
View File

45
views/side/index.html
View File

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