sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#27768 Implement fax infos and collapsible

Browse Source 
What has been done:
- TT#27769, Conversations: Create custom card component
- TT#28200, Conversations: Show page count

Change-Id: Ia3765a11d415d62f280cbf95a666bfdc9230b0d4
changes/97/17797/4
raxelsen 8 years ago
parent 54c98fc188
commit 3eb81fa09f
5 changed files with 218 additions and 147 deletions
Show Stats Download Patch File Download Diff File

51
README.md
Unescape View File

@ -11,11 +11,11 @@ First make sure you have Node.js and npm installed, and then install and build t
1. Clone the ngcp-csc-ui repo locally
1. Run npm install
```npm install```
`npm install`
1. Build the app for dev
```npm run dev-build```
`npm run dev-build`
### Vagrant
@ -23,37 +23,37 @@ To run this app you also need to have a [vagrant-ngcp](https://www.sipwise.org/d
1. Go to your local vagrant-ngcp folder, for example
```cd ~/Sipwise/mr/vagrant-ngcp```
`cd ~/Sipwise/mr/vagrant-ngcp`
1. Spin up a new vagrant box
```./v n pro1```
`./v n pro1`
1. SSH into vagrant box and become root
```
`
./v s pro1
sudo -s
```
`
1. Edit config.yml
```vim /etc/ngcp-config/config.yml```
`vim /etc/ngcp-config/config.yml`
1. Enable csc by finding the the "http_csc:" section of the file, and setting "csc_js_enable:" to yes
```csc_js_enable: yes```
`csc_js_enable: yes`
1. Run ngcpcfg apply
```ngcpcfg apply 'Enable http_csc'```
`ngcpcfg apply 'Enable http_csc'`
1. Navigate into the vagrant shared local folder (configured via custom_config file in local vagrant-ngcp/users.d/ folder) and execute dev.sh script to set up symlink between local built files and vagrant files served via nginx
```
`
cd /usr/local/devel/ngcp-csc-ui/
./dev.sh
```
`
You can now access ngcp-csc-ui in browser by using the url provided by the vagrant script.
@ -63,22 +63,22 @@ You need a pbx subscriber to be able to access the pbx config specific modules i
1. SSH into the vagrant box and become root
```
`
./v s pro1
sudo -s
```
`
1. Edit config.yml
```vim /etc/ngcp-config/config.yml```
`vim /etc/ngcp-config/config.yml`
1. Enable csc by finding the "pbx:" section of the file, and setting "enable:" to yes
```enable: yes```
`enable: yes`
1. Run ngcpcfg apply
```ngcpcfg apply 'Enable pbx'```
`ngcpcfg apply 'Enable pbx'`
1. Log in to ngcp-panel with administrator credentials
1. Go to Settings > Customers
@ -92,40 +92,39 @@ You need a pbx subscriber to be able to access the pbx config specific modules i
Now you can log in to csc with one of the normal subscriber you just created. URL for login is the same as for accessing ngcp-panel admin, except with csc suffix and no port specified:
```https://<your-ip-address>/csc```
`https://<your-ip-address>/csc`
### How to add new npm package
1. Remove the package if you've already installed it
`npm remove <package> <--save-dev || --save>`
`npm remove <package> <--save-dev || --save>`
1. Ensure that you have a clean node_modules folder
```
`
rm -R node_modules/
npm install
```
`
1. Remove obsolete shrinkwrap file
```rm npm-shrinkwrap.json```
`rm npm-shrinkwrap.json`
1. Install new package(s)
```npm install packageA packageB --save-dev```
`npm install packageA packageB --save-dev`
1. Generate new shrinkwrap file including all dependencies
```npm shrinkwrap --dev```
`npm shrinkwrap --dev`
You should see the following result in console:
```wrote npm-shrinkwrap.json```
`wrote npm-shrinkwrap.json`
1. Add new shrinkwrap file to git
```git add .```
`git add .`
## Contributing

28
TESTDATA.md
Unescape View File

@ -1,3 +1,4 @@
# CONVERSATIONS MODULE
IMPORTANT: This document is meant for internal use at Sipwise, as it requires a vagrant-ngcp environment to be able to generate the test data.
@ -24,9 +25,18 @@ cd /usr/local/devel
mysql < ./conversations_dump.sql
`
## PBX
1. Before doing the individual test data creation steps below, make sure pbx is enabled
1. First SSH in to the vagrant box, become root and edit /etc/ngcp-config/config.yml
`vim /etc/ngcp-config/config.yml`
1. Search for the "pbx:" section, and set "enable:" to yes
1. Then do `ngcpcfg apply 'commit msg'`
## VOICEMAIL
1. Go to Settings > Subscribers > Details > Preferences, and under Call Forwards create a call forward destination under "Call Forward Unconditional" to voicemail
1. Go to Settings > Subscribers > Details > Master Data, and set "Primary Number"/E164 to the desired number (for example 43993007)
1. Go to Settings > Subscribers > Details > Preferences, and under "Call Forwards" create a call forward destination under "Call Forward Unconditional" to voicemail
1. Initiate a call from another subscriber to the subscriber you just set call forward for, and leave a voicemail
See [calls section](#calls) for information on how to initiate calls.
@ -45,15 +55,21 @@ See [calls section](#calls) for information on how to initiate calls.
For outgoing you need to use the api (also with E 164 number set to sms number from wiki). According to gjungwirth pretty simple with POST request containing the destination number and the content. 
## FAX
1. Install exim package, so we can send the fax via mail. SSH in to vagrant box, become root, and then execute:
`dpkg-reconfigure exim4-config`
1. Follow the install prompt by first choosing 'mail sent by smarthost; no local mail'
1. Then press enter for default sp1 selection, until you get asked for "IP address or host name of the outgoing smarthost:". There you enter mail.sipwise.com and press enter
1. For the rest of the prompts, press enter to choose the defaults
1. Go to Settings > Subscribers, find subscriber you want to use as caller, and click "Details"
1. Under "Master Data" click edit, and enter subscribers number also in the E164 field
1. Then go to "Preferences", and set "Fax2Mail and Sendfax" to active
1. Repeat the two steps above, this time for the callee
1. SSH in to the vagrant box, become root, and create a text file to use for sending fax:
`echo 'test test' > filetosend.txt`
1. Use the ngcp-fax tool to send a fax:
`ngcp-fax --caller 43993003 --callee 43993002 --file filetosend.txt`
1. To troubleshoot you can check log:
1. For the callee, you also need to add your internal sipwise email address as "Destination" under "Fax2Mail and Sendfax", and also under "Call Forwards" configure a "Call Forward Unconditional" to "Fax2Mail"
1. SSH in to the vagrant box, become root, and execute the following command to send a fax from one subscriber to another
`echo "Test Fax!" | ngcp-fax --caller 43993006 --callee 43993007`
1. To troubleshoot you can check logs:
`tail -f /var/log/ngcp/faxserver.log`
`tail -f /var/log/ngcp/kamailio-proxy.log`
## CALLS

128
src/components/CscConversation.vue
Unescape View File

@ -1,22 +1,40 @@
<template>
<q-card class="conversation-card" :id="conversation._id">
<csc-collapsible :icon="getCollapsibleIcons()"
:label="getCollapsibleLabel()"
:sublabel="conversation.start_time | readableDate">
<div v-if="isType('call') || isType('voicemail')">
<ul>
<li>
<strong>
{{ $t('pages.conversations.card.duration') }}:
</strong> {{ conversation.duration }}</li>
<li v-if="isType('voicemail')">
<strong>
{{ $t('pages.conversations.card.folder') }}:
</strong> {{ conversation.folder }}</li>
</ul>
</div>
</csc-collapsible>
<div v-if="!isType('fax')">
<csc-card-collapsible :list-item="conversation" :collapsible="hasCollapsibleData"
:firstIcon="getFirstIcon()" :secondIcon="getSecondIcon()"
:sublabel="conversation.start_time | readableDate" :id="conversation._id">
<span slot="title">
{{ getTitle() }}
<span v-if="isType('fax')" style="padding-left:12px;">
<q-chip pointing="left" color="primary" class="csc-number-chip">
<strong>Pages:</strong>
{{ conversation.pages }}
</q-chip>
</span>
</span>
<div v-if="isType('call')" slot="main">
<ul>
<li>
<strong>
{{ $t('pages.conversations.card.duration') }}:
</strong> {{ conversation.duration }}
</li>
</ul>
</div>
<div v-else-if="isType('voicemail')" slot="main">
<ul>
<li>
<strong>
{{ $t('pages.conversations.card.duration') }}:
</strong> {{ conversation.duration }}
</li>
<li>
<strong>
{{ $t('pages.conversations.card.folder') }}:
</strong> {{ conversation.folder }}
</li>
</ul>
</div>
<div v-if="!isType('fax')" slot="footer">
<q-card-separator />
<q-card-actions align="center">
<q-btn flat round small color="primary" icon="call">
@ -34,24 +52,20 @@
</q-list>
</q-popover>
</q-btn>
<div v-if="isType('voicemail')">
<q-btn flat round small color="primary" icon="play_arrow"
@click="downloadVoiceMail(conversation.id)">
{{ $t('pages.conversations.buttons.play') }}
</q-btn>
</div>
<q-btn v-if="isType('voicemail')" flat round small color="primary"
icon="play_arrow" @click="downloadVoiceMail(conversation.id)">
{{ $t('pages.conversations.buttons.play') }}
</q-btn>
</q-card-actions>
</div>
</q-card>
</csc-collapsible-card>
</template>
<script>
import Vue from 'vue'
import crypto from 'crypto-browserify'
import CscCollapsible from './card/CscCollapsible'
import { mapGetters } from 'vuex'
import { QBtn, QCardActions, QCard, QCardSeparator,
QPopover, QItem, QList } from 'quasar-framework'
import CscCardCollapsible from './card/CscCardCollapsible'
import { QBtn, QPopover, QItem, QList, QCardActions,
QChip, QCardSeparator } from 'quasar-framework'
import numberFormat from '../filters/number-format'
export default {
name: 'csc-conversation',
@ -60,18 +74,18 @@
],
components: {
QBtn,
QCard,
QCardActions,
QCardSeparator,
QPopover,
QItem,
QList,
CscCollapsible
QChip,
QCardSeparator,
QCardActions,
CscCardCollapsible
},
computed: {
...mapGetters('conversations', [
'getCardId'
])
hasCollapsibleData() {
return (['call', 'voicemail'].indexOf(this.conversation.type) > -1);
}
},
methods: {
downloadVoiceMail(id) {
@ -84,28 +98,32 @@
this.$store.dispatch('call/start',
{ number: number, localMedia: localMedia });
},
getCollapsibleIcons() {
getFirstIcon() {
let conversation = this.conversation;
let directionIcon = conversation.direction == 'out' ? 'call_made' :
'call_received';
switch (conversation.type) {
case 'call':
return 'phone ' + directionIcon;
return 'phone';
break;
case 'callforward':
return 'call_merge ' + directionIcon;
return 'call_merge';
break;
case 'voicemail':
return 'voicemail ' + directionIcon;
return 'voicemail';
break;
case 'fax':
return 'insert_drive_file ' + directionIcon;
return 'insert_drive_file';
break; case 'sms':
return 'txtsms ' + directionIcon;
return 'txtsms';
break;
};
},
getCollapsibleLabel() {
getSecondIcon() {
let conversation = this.conversation;
let directionIcon = conversation.direction == 'out' ?
'call_made' : 'call_received';
return directionIcon;
},
getTitle() {
let conversation = this.conversation;
let prefix;
if (!conversation.status || ['ok', 'SUCCESS'].indexOf(conversation.status) > -1) {
@ -124,28 +142,10 @@
},
isType(type) {
return this.conversation.type == type;
},
getVoicemailUrl() {
return window.location.origin + this.conversation.voicemail;
}
}
}
</script>
<style lang="stylus">
@import '~variables'
.conversation-card
padding 15px
.q-btn
margin-bottom -10px
.voicemail-controls
height 46px
padding 0 7px
.voicemail-outer
width 110px
height 50px
margin-left 10px
.voicemail-inner
position absolute
width 110px
</style>

100
src/components/card/CscCardCollapsible.vue
Unescape View File

@ -0,0 +1,100 @@
<template>
<div class="csc-card-collapsible" :id="getId">
<q-card>
<q-item :link="collapsible" @click="toggleCollapse()" class="csc-card-title">
<q-item-side class="csc-card-left-icons">
<q-item-tile color="secondary" :icon="firstIcon" />
<q-item-tile color="secondary" :icon="secondIcon" />
</q-item-side>
<q-item-main>
<q-item-tile label>
<slot name="title">
</q-item-tile>
<q-item-tile sublabel>
{{ sublabel }}
</q-item-tile>
</q-item-main>
<q-item-side v-if="collapsible" right>
<q-item-tile color="secondary" icon="keyboard_arrow_down" />
</q-item-side>
</q-item>
<q-card-main v-show="isExpanded">
<slot name="main"></slot>
</q-card-main>
<slot name="footer"></slot>
</q-card>
</div>
</template>
<script>
import { QCard, QCardTitle, QCardMain, QIcon, QItem,
QItemSide, QItemMain, QItemTile } from 'quasar-framework'
export default {
name: 'csc-card-collapsible',
props: [
'listItem',
'collapsible',
'firstIcon',
'secondIcon',
'sublabel',
'id'
],
data() {
return {
expanded: false
}
},
components: {
QCard,
QCardTitle,
QCardMain,
QIcon,
QItem,
QItemSide,
QItemMain,
QItemTile
},
computed: {
isExpanded() {
return this.expanded;
},
getId() {
return this.id;
}
},
methods: {
toggleCollapse() {
if (this.collapsible) {
this.expanded = !this.expanded;
}
}
}
}
</script>
<style lang="stylus">
@import '~variables'
.csc-card-collapsible
.q-btn
margin-bottom 5px
ul
list-style none
font-size 1rem
line-height 2rem
strong
font-weight 500
.q-item-icon
font-size 22px
padding-right 12px
line-height 2rem
div.q-item-label > span
font-size 18px
color #0c0c0c
font-weight 400
div.q-item-sublabel
margin-top 5px
.csc-card-left-icons
margin-left 15px
.csc-card-title
padding 16px
</style>

44
src/components/card/CscCollapsible.vue
Unescape View File

@ -1,44 +0,0 @@
<template>
<div class="csc-collapsible">
<q-collapsible :icon="icon"
:label="label"
:sublabel="sublabel">
<slot></slot>
</q-collapsible>
</div>
</template>
<script>
import { QCollapsible } from 'quasar-framework'
export default {
name: 'csc-collapsible',
props: [
'icon',
'label',
'sublabel'
],
components: {
QCollapsible
}
}
</script>
<style lang="stylus">
@import '~variables'
.csc-collapsible
.q-collapsible
.q-item-icon
font-size 22px
padding-right 12px
color $secondary
.q-item-label
color black
font-size 18px
font-weight 400
ul
list-style none
font-size 1rem
line-height 2rem
strong
font-weight 500
</style>
Write Preview
Loading…
Cancel
Save