qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Render form for configuring tesla adapter settings and mime types

Browse source
This commit is contained in:
Angelina Filippova 2019-11-20 22:50:14 +09:00
parent f4302fbc47
commit c7bfc3d0dd
1 changed files with 18 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/views/settings/components/Other.vue
View file

@ -1,27 +1,11 @@
<template>
<div v-if="!loading">
<el-form ref="formatEncoders" :model="formatEncoders" :label-width="labelWidth">
<el-form-item label="Phoenix Format encoders:"/>
<el-form-item label="JSON">
<el-input :value="formatEncoders.json" @input="updateSetting($event, 'format_encoders', 'json')"/>
</el-form-item>
<el-form ref="teslaAdapter" :model="teslaAdapterData" :label-width="labelWidth">
<setting :setting-group="teslaAdapter" :data="teslaAdapterData"/>
</el-form>
<div class="line"/>
<el-form ref="teslaAdapter" :model="teslaAdapter" :label-width="labelWidth">
<el-form-item label="Tesla adapter">
<el-input :value="teslaAdapter.value" @input="updateSetting($event, 'adapter', 'value')"/>
</el-form-item>
</el-form>
<div class="line"/>
<el-form ref="mimeTypesConfig" :model="mimeTypesConfig" :label-width="labelWidth">
<el-form-item label="Mime types">
<div v-for="([type, value], index) in mimeTypes" :key="index" class="setting-input">
<el-input :value="type" placeholder="type" class="name-input" @input="parseMimeTypes($event, 'type', index)"/> :
<el-select :value="value" multiple filterable allow-create class="value-input" @change="parseMimeTypes($event, 'value', index)"/>
<el-button icon="el-icon-minus" circle @click="deleteMimeTypes(index)"/>
</div>
<el-button icon="el-icon-plus" circle @click="addRowToMimeTypes"/>
</el-form-item>
<el-form ref="mimeTypes" :model="mimeTypesData" :label-width="labelWidth">
<setting :setting-group="mimeTypes" :data="mimeTypesData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>
@ -32,14 +16,14 @@
<script>
import i18n from '@/lang'
import { mapGetters } from 'vuex'
import Setting from './Setting'
export default {
name: 'Other',
components: { Setting },
computed: {
...mapGetters([
'formatEncoders',
'mimeTypesConfig',
'teslaAdapter'
'settings'
]),
isMobile() {
return this.$store.state.app.device === 'mobile'
@ -48,26 +32,22 @@ export default {
return this.isMobile ? '100px' : '240px'
},
loading() {
return this.$store.state.settings.loading
return this.settings.loading
},
mimeTypes() {
return Object.keys(this.mimeTypesConfig.value).map(key => [key, this.mimeTypesConfig.value[key]])
return this.settings.description.find(setting => setting.group === ':mime')
},
mimeTypesData() {
return this.settings.settings.mime[':types']
},
teslaAdapter() {
return this.settings.description.find(setting => setting.group === ':tesla')
},
teslaAdapterData() {
return this.settings.settings.tesla[':adapter']
}
},
methods: {
addRowToMimeTypes() {
const updatedValue = this.mimeTypes.reduce((acc, el, i) => {
return { ...acc, [el[0]]: el[1] }
}, {})
this.updateSetting({ ...updatedValue, '': [] }, 'types', 'value')
},
deleteMimeTypes(index) {
const filteredValues = this.mimeTypes.filter((el, i) => index !== i)
const updatedValue = filteredValues.reduce((acc, el, i) => {
return { ...acc, [el[0]]: el[1] }
}, {})
this.updateSetting(updatedValue, 'types', 'value')
},
async onSubmit() {
try {
await this.$store.dispatch('SubmitChanges')
@ -78,18 +58,6 @@ export default {
type: 'success',
message: i18n.t('settings.success')
})
},
parseMimeTypes(value, inputType, index) {
const updatedValue = this.mimeTypes.reduce((acc, el, i) => {
if (index === i) {
return inputType === 'type' ? { ...acc, [value]: el[1] } : { ...acc, [el[0]]: value }
}
return { ...acc, [el[0]]: el[1] }
}, {})
this.updateSetting(updatedValue, 'types', 'value')
},
updateSetting(value, tab, input) {
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
}
}
}