From 04d5095807e6226cbbd63c32fc702650c0301877 Mon Sep 17 00:00:00 2001 From: oceanlvr <657531018@qq.com> Date: Tue, 30 Nov 2021 12:12:52 +0800 Subject: [PATCH] feat(connection): support rest connection props --- src/lang/connections.ts | 18 +++- src/types/global.d.ts | 2 +- src/utils/mqttUtils.ts | 6 +- src/views/connections/ConnectionForm.vue | 130 ++++++++++++++++++++++- 4 files changed, 148 insertions(+), 8 deletions(-) diff --git a/src/lang/connections.ts b/src/lang/connections.ts index eb2acd326..c5d6a8c13 100644 --- a/src/lang/connections.ts +++ b/src/lang/connections.ts @@ -300,20 +300,34 @@ export default { ja: 'Topic Aliasの最大値', hu: 'Macimális téma becenév', }, + maximumPacketSize: { + zh: '最大数据包大小', + en: 'Maximum Packet Size', + tr: 'En Büyük Paket Boyutu', + ja: '最大パケット サイズ', + hu: 'Maximális csomagméret', + }, requestResponseInformation: { zh: '请求响应信息', - en: 'Request Response Information', + en: 'Request Response Info', tr: 'Yanıt Bilgisi İste', ja: 'レスポンス情報をリクエストする', hu: 'Válasz információ kérése', }, requestProblemInformation: { zh: '请求失败信息', - en: 'Request Problem Information', + en: 'Request Problem Info', tr: 'Sorun Bilgisi İste', ja: '失敗情報をリクエストする', hu: 'Probléma információ kérése', }, + userProperties: { + zh: '用户属性', + en: 'User Properties', + tr: 'Kullanıcı Özellikleri', + ja: 'ユーザー プロパティ', + hu: 'Felhasználói tulajdonságok', + }, topicReuired: { zh: '请输入 Topic', en: 'Topic is required', diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 2dfdf5edc..b7a3de3f9 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -1,6 +1,6 @@ import Vue from 'vue' import { TranslateResult } from 'vue-i18n' -import { MqttClient, IClientOptions } from 'mqtt' +import { MqttClient } from 'mqtt' declare global { type $TSFixed = any diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts index fb9fbd5e5..60097932b 100644 --- a/src/utils/mqttUtils.ts +++ b/src/utils/mqttUtils.ts @@ -4,12 +4,12 @@ import time from '@/utils/time' import { getSSLFile } from '@/utils/getFiles' import _ from 'lodash' -const setMQTT5Properties = (option: IClientOptions['properties']): IClientOptions['properties'] | undefined => { +const setMQTT5Properties = (option: ClientPropertiesModel): ClientPropertiesModel | undefined => { if (option === undefined) { return undefined } - const properties: IClientOptions['properties'] = _.cloneDeep(option) - return Object.fromEntries(Object.entries(properties).filter(([_, v]) => v !== null && v !== undefined && v !== '')) + const properties: ClientPropertiesModel = _.cloneDeep(option) + return Object.fromEntries(Object.entries(properties).filter(([_, v]) => v !== null && v !== undefined)) } const setWillMQTT5Properties = (option: WillPropertiesModel): WillPropertiesModel | undefined => { diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue index d295db59f..7f1f107a1 100644 --- a/src/views/connections/ConnectionForm.vue +++ b/src/views/connections/ConnectionForm.vue @@ -302,7 +302,7 @@ @@ -323,12 +323,25 @@ + + + + + + + @@ -336,6 +349,51 @@ + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + +
+
+ + + @@ -485,6 +543,8 @@ import _ from 'lodash' import time from '@/utils/time' import useServices from '@/database/useServices' +type UserPairObect = { key: string; value: string; checked: boolean } + @Component({ components: { Editor, @@ -514,6 +574,25 @@ export default class ConnectionForm extends Vue { private defaultRecord: ConnectionModel = getDefaultRecord() private record: ConnectionModel = _.cloneDeep(this.defaultRecord) + public defaultPropObj = { key: '', value: '', checked: true } + + public listData: UserPairObect[] = [_.cloneDeep(this.defaultPropObj)] + + private checkItem(index: number) { + this.listData[index].checked = !this.listData[index].checked + } + + private deleteItem(index: number) { + if (this.listData.length > 1) { + this.listData.splice(index, 1) + } else if (this.listData.length === 1) { + this.listData = [_.cloneDeep(this.defaultPropObj)] + } + } + + private addItem() { + this.listData.push(_.cloneDeep(this.defaultPropObj)) + } @Watch('oper') private handleCreateNewConnection(val: string) { @@ -561,6 +640,25 @@ export default class ConnectionForm extends Vue { if (!valid) { return false } + + const checkedList = this.listData.filter((pair) => !(pair.key === '' || !pair.checked)) + const userProps: { + [key: string]: string + } = {} + if (checkedList.length > 0) { + checkedList.forEach((pair) => { + if (pair && pair.key) { + userProps[pair.key] = pair.value + } + }) + } + + if (Object.keys(userProps).length > 0) { + this.record.properties = { ...this.record.properties, userProperties: userProps } + } else { + this.record.properties = { ...this.record.properties, userProperties: undefined } + } + const data = { ...this.record } this.trimString(data) let res: ConnectionModel | undefined = undefined @@ -746,6 +844,34 @@ export default class ConnectionForm extends Vue { .el-form { padding-top: 80px; padding-bottom: 40px; + .user-props { + position: relative; + .btn-props-plus { + position: absolute; + left: 0; + top: 2px; + } + .user-props-row { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-left: 20px; + .input-user-prop { + padding: 0px; + margin-right: 10px; + } + .btn-check { + .el-icon-check { + font-size: 14px; + margin-right: 10px; + } + .disable-icon { + color: dimgray; + } + } + } + } // normal icon operation style .icon-oper { color: var(--color-text-default);