Change-Id: Ia7971b4e1b6183b6aa5b2ad90ce4f1883371763echanges/47/20647/3
Hans-Peter Herzog
8 years ago
parent
f128aece3d
commit
d5e7a0bdea
@ -0,0 +1,69 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import _ from 'lodash';
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { getJsonBody } from './utils'
|
||||||
|
|
||||||
|
export function getAllDevices(options) {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
let rows = _.get(options, 'rows', 25);
|
||||||
|
let page = _.get(options, 'page', 1);
|
||||||
|
Vue.http.get('/api/pbxdevices/', null, {
|
||||||
|
params: {
|
||||||
|
rows: rows,
|
||||||
|
page: page
|
||||||
|
}
|
||||||
|
}).then((result)=>{
|
||||||
|
let body = getJsonBody(result.body);
|
||||||
|
let totalCount = body.totalCount;
|
||||||
|
let lastPage = Math.ceil(totalCount / rows);
|
||||||
|
let items = _.get(body, '_embedded.ngcp:pbxdevices');
|
||||||
|
resolve({
|
||||||
|
lastPage: lastPage,
|
||||||
|
items: items
|
||||||
|
});
|
||||||
|
}).catch((err)=>{
|
||||||
|
reject(err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getAllProfiles() {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
Vue.http.get('/api/pbxdeviceprofiles/').then((result)=>{
|
||||||
|
let body = getJsonBody(result.body);
|
||||||
|
resolve(_.get(body, '_embedded.ngcp:pbxdeviceprofiles'));
|
||||||
|
}).catch((err)=>{
|
||||||
|
reject(err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getAllModels() {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
Vue.http.get('/api/pbxdevicemodels/').then((result)=>{
|
||||||
|
let body = getJsonBody(result.body);
|
||||||
|
resolve(_.get(body, '_embedded.ngcp:pbxdevicemodels'));
|
||||||
|
}).catch((err)=>{
|
||||||
|
reject(err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDeviceList() {
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
Promise.all([
|
||||||
|
getAllDevices(),
|
||||||
|
getAllProfiles(),
|
||||||
|
getAllModels()
|
||||||
|
]).then((results)=>{
|
||||||
|
resolve({
|
||||||
|
devices: results[0],
|
||||||
|
profiles: results[1],
|
||||||
|
models: results[2]
|
||||||
|
});
|
||||||
|
}).catch((err)=>{
|
||||||
|
reject(err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<q-card class="csc-entity csc-pbx-device shadow-1">
|
||||||
|
<q-card-title>
|
||||||
|
<q-icon name="fa-fax" color="secondary" size="24px"/>
|
||||||
|
<span class="csc-entity-title-text">{{ device.station_name }}</span>
|
||||||
|
<q-btn :icon="titleIcon" :small="isMobile" color="primary" slot="right" flat @click="toggleMain()" />
|
||||||
|
</q-card-title>
|
||||||
|
<q-card-main v-if="expanded">
|
||||||
|
<q-field :label="$t('pbxConfig.deviceStationName')">
|
||||||
|
<q-input v-model="device.station_name" readonly />
|
||||||
|
</q-field>
|
||||||
|
<q-field :label="$t('pbxConfig.deviceIdentifier')">
|
||||||
|
<q-input v-model="device.identifier" readonly />
|
||||||
|
</q-field>
|
||||||
|
<q-field :label="$t('pbxConfig.deviceModel')">
|
||||||
|
<q-select v-model="device.model.id" :options="modelOptions" clearable disable />
|
||||||
|
</q-field>
|
||||||
|
</q-card-main>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { QCard, QCardTitle, QCardMain, QCollapsible,
|
||||||
|
QIcon, QField, QInput, QSelect, QBtn } from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-pbx-device',
|
||||||
|
props: {
|
||||||
|
device: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
modelOptions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
QCard, QCardTitle, QCardMain, QCollapsible,
|
||||||
|
QIcon, QField, QInput, QSelect, QBtn
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
expanded: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
titleIcon() {
|
||||||
|
if(!this.expanded) {
|
||||||
|
return 'keyboard arrow down';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'keyboard arrow up';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleMain() {
|
||||||
|
this.expanded = !this.expanded;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../../themes/app.common'
|
||||||
|
</style>
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<csc-page :title="$t('pbxConfig.devicesTitle')">
|
||||||
|
<div v-if="isListLoadingVisible" class="row justify-center">
|
||||||
|
<q-spinner-dots color="primary" :size="40" />
|
||||||
|
</div>
|
||||||
|
<csc-pbx-device v-for="device in devices" :key="device.id"
|
||||||
|
:device="device" :modelOptions="modelOptions" />
|
||||||
|
<div v-if="devices.length === 0 && !isListRequesting" class="row justify-center csc-no-entities">
|
||||||
|
{{ $t('pbxConfig.noDevices') }}
|
||||||
|
</div>
|
||||||
|
</csc-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import CscPage from '../../CscPage'
|
||||||
|
import CscPbxDevice from './CscPbxDevice'
|
||||||
|
import { QSpinnerDots } from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$store.dispatch('pbxConfig/listDevices');
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
CscPage,
|
||||||
|
CscPbxDevice,
|
||||||
|
QSpinnerDots
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters('pbxConfig', [
|
||||||
|
'devices',
|
||||||
|
'modelOptions',
|
||||||
|
'isListRequesting',
|
||||||
|
'isListLoadingVisible'
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
</style>
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<csc-page title="Devices"></csc-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CscPage from '../../CscPage'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
CscPage
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" rel="stylesheet/stylus">
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
|
||||||
|
@import 'quasar.variables'
|
||||||
|
|
||||||
|
|
||||||
|
.csc-no-entities
|
||||||
|
margin 15px
|
||||||
|
color $secondary
|
||||||
|
|
||||||
|
.csc-important
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
.csc-entity
|
||||||
|
position relative
|
||||||
|
|
||||||
|
.q-btn
|
||||||
|
.on-left
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
.csc-entity-title .q-chip-main {
|
||||||
|
color white
|
||||||
|
}
|
||||||
|
|
||||||
|
.csc-entity-title-text
|
||||||
|
padding-left 6px
|
||||||
|
|
||||||
|
.q-card-title
|
||||||
|
color $secondary
|
||||||
|
|
||||||
|
.q-card-title-extra
|
||||||
|
.q-btn
|
||||||
|
padding-left 8px
|
||||||
|
padding-right 8px
|
||||||
Loading…
Reference in new issue