101 lines
3.3 KiB
Vue
101 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<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>
|
|
<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-item>
|
|
<el-button type="primary" @click="onSubmit">Submit</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import i18n from '@/lang'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Other',
|
|
computed: {
|
|
...mapGetters([
|
|
'formatEncodersConfig',
|
|
'mimeTypesConfig',
|
|
'teslaAdapterConfig'
|
|
]),
|
|
formatEncoders() {
|
|
return this.formatEncodersConfig
|
|
},
|
|
isMobile() {
|
|
return this.$store.state.app.device === 'mobile'
|
|
},
|
|
labelWidth() {
|
|
return this.isMobile ? '100px' : '210px'
|
|
},
|
|
mimeTypes() {
|
|
return Object.keys(this.mimeTypesConfig.value).map(key => [key, this.mimeTypesConfig.value[key]])
|
|
},
|
|
teslaAdapter() {
|
|
return this.teslaAdapterConfig
|
|
}
|
|
},
|
|
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')
|
|
},
|
|
onSubmit() {
|
|
this.$store.dispatch('SubmitChanges')
|
|
this.$message({
|
|
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 }})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel='stylesheet/scss' lang='scss'>
|
|
@import '../styles/main';
|
|
@include settings
|
|
</style>
|