Rediseño de interfaz

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;

static/css/app.css

@@ -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;
+    padding: 0;
-    margin: 0
+    margin: 0;
+    
 }
 
 html, body {
@@ -18,149 +19,146 @@ html, body {
 }
 
 a {
-    color: #FFF
+    color: #FFF;
+    font-family: inherit;
 }
 
-.container {
+.navigation {
-    min-height: 100%;
-    height: 100%
-}
-
-.quickbar {
     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 {
+#container {
-    background: #2C2C2C;
+    position: fixed;
-    height: 100%;
+    padding-left: 80px;
-    width: 15%;
+    top: 65.5px;
+    bottom: 0;
+    width: 100%;
     float: left
 }
 
-.side .user {
+#container.side-display {
-    padding: 15px;
+    padding-left: 335px
-    color: #FFF
 }
 
-.side .user .extension {
+.quickbar {
-    font-size: 12px
+    background: #232323;
+    position: fixed;
+    width: 80px;
+    top: 65.5px;
+    bottom: 0;
+    left: 0
 }
 
-.side .user:after {
+.quickbar ul {
-    display: block;
+    padding: 0;
-    content: ' ';
+    margin: 0
-    clear: both
 }
 
-.side .user .name {
+.quickbar ul li {
-    font-weight: bold;
+    position: relative;
-    color: #FFF
+    list-style: none
 }
 
-.side .title {
+.quickbar ul li a {
-    background-color: #333333;
+    padding: 20px 0;
-    text-transform: uppercase;
-    padding: 15px 10px;
-    font-weight: bold;
-    color: #111111
-    
-}
-
-.side .navigation a {
-    background-color: #ff9e00;
-    text-decoration: none;
-    transition: 0.2s all;
     text-align: center;
-    font-size: 24px;
+    display: block
-    display: block;
-    padding: 15px;
-    color: #FFF
 }
 
-.side .navigation a.active, .side .navigation a.active:hover {
+.quickbar ul li a i {
-    background-color: #FFF;
+    font-size: 32px
-    color: #FFA410
 }
 
-.side .navigation a:hover {
+.quickbar ul li a:hover {
-    background-color: #ffb030;
+    background-color: #383838
 }
 
-.side .navigation a i {
+.quickbar ul li a.active {
-    margin-right: 10px
+    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
 }
 
-
+#content {
-
+    position:relative;
-.chatbox .search {
+    width: 100%;
-    margin-bottom: 15px
+    height: 100%;
+    float:left
 }
 
-.chatbox .search .control {
+.call {
-    -webkit-border-radius: 15px;
+    background-color: #111;
-    -moz-border-radius: 15px;
+    height: 100%;
-    border-radius: 15px;
+    width: 100%;
-    background: #232323;
+    float: left
-    padding: 10px
 }
 
-.chatbox .search input[type=text] {
+.chatbox {
-    background-color: transparent;
+    position: relative
-    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 {
     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 {
+.dial .search {
-    width: 500px;
+    margin-bottom: 15px
-    margin: 100px auto
+}
+
+.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 {

static/js/event.js

@@ -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) {
+    $(document).on('click', '#call', function() {
-        if (ua.sessionInstance && ua.sessionInstance.direction === 'incoming')
+        let number = $('#callNumber').val();
-            ua.sessionInstance.answer(options);
 
-        let number = $('callNumber').value;
+        if (number)
-        $('callNumber').value = '';
+            Softphone.call(number, options);
 
-        if (number != '') {
+        return false;
-            Softphone.call(number);
-        } else {
-            notify('Introduce un destinatario para realizar la llamada');
-        }
-
-        event.preventDefault();
     });
 
 /**
- * Reset call number field
+ * Insert key on call field
  */
-    $('clear').addEventListener('click', function(event) {
+    $(document).on('click', '#zero, #one, #two, #three, #four, '
-        $('callNumber').value = '';
+        + '#five, #six, #seven, #eight, #nine, #asterisk, #pad', padKey);
 
-        audio.addTrack('reset');
+/**
-        audio.play();
+ * History
-        event.preventDefault();
+ */
+    $(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');
+        return false;
-        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();
     });
 
 /**
@@ -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) {
+window.addEventListener("beforeunload", function (event) {
-        event.returnValue = "\o/";
+    event.returnValue = "\o/";
-    });
+});

static/js/softphone.js

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

static/js/ua.js

@@ -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) {
-
+    $('.profile .status').removeClass('offline').addClass('error');
-    Softphone.notifyStatus(event);
+    eventStatus(event);
-
-    $('callStatus').innerHTML = 'Desconectado';
 });
 
 /**
@@ -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');
+            Util.load('#content', '/call', function() {
-            audio.play(true);
+                audio.addTrack('incoming');
-            $('callStatus').innerHTML = 'Llamada entrante...';
+                audio.play(true);
+            });
         } else {
-            audio.addTrack('outgoing');
+            Util.load('#content', '/call', function() {
-            audio.play(true);
+                audio.addTrack('outgoing');
-            $('callStatus').innerHTML = 'Llamando...';
+                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);
     });

static/js/util.js

@@ -1,57 +1,105 @@
-let timer;
+let Util = {
-let timerSeconds = 1;
+    timerSeconds:  1,
 
 /**
- * Object selector
+ * Get URL query
  */
-function $(object) {
+    query: function(name) {
-    return document.getElementById(object);
+        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() {
+    startTimer: function() {
-    timer = setInterval(function() {
+        this.timer = setInterval(() => {
-        let date = new Date(null);
+            let date = new Date(null);
-        date.setSeconds(timerSeconds);
+            console.log(this.timerSeconds);
+            date.setSeconds(this.timerSeconds);
 
-        $('timer').innerHTML = date.toISOString().substr(11, 8);
+            document.getElementById('timer').innerHTML = date.toISOString().substr(11, 8);
-        timerSeconds++;
+            this.timerSeconds++;
-    }, 1000)
+        }, 1000);
-}
+    },
 
 /**
  * Stop call timer
  */
-function stopTimer() {
+    stopTimer: function() {
-    clearInterval(timer);
+        clearInterval(this.timer);
-    timer = null;
+        this.timer = null;
-    timerSeconds = 0;
+        this.timerSeconds = 0;
-    $('timer').innerHTML = '00:00:00';
+        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';
-}

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

views/call/index.html

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

views/call/index.js

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

views/dialpad/index.html

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

views/header/index.html

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

views/history/index.html

@@ -0,0 +1 @@
+Contactos

views/history/index.js

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

views/home/index.html

@@ -1,83 +1,3 @@
 {{> header}}
-{{> side}}
+{{> navigation}}
-
+{{> quickbar}}
-<!-- 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 -->

views/home/index.js

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

views/navigation/index.html

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

views/navigation/index.js

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

views/quickbar/index.html

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

views/side/index.html

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