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