From 26a3520e7e1ba6c69e8b7d09f3d2af4d7b08cfd5 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Mon, 17 Feb 2020 17:29:13 +0800 Subject: [PATCH 01/17] chore(config): mark mqtt package as an external --- vue.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/vue.config.js b/vue.config.js index 477095c8c..fb57d03f9 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,6 +1,9 @@ module.exports = { pluginOptions: { electronBuilder: { + // Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime. + // In order to connect to websocket. + externals: ['mqtt'], builderOptions: { win: { icon: './public/app.ico' From a3dec53dd07730b8a688ea8637194cab68dc86d0 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Fri, 21 Feb 2020 17:41:09 +0800 Subject: [PATCH 02/17] feat(connection): support websocket (#104) --- src/types/global.d.ts | 2 + src/utils/mqttUtils.ts | 9 ++++ src/views/connections/ConnectionForm.vue | 56 ++++++++++++++++++-- src/views/connections/ConnectionsContent.vue | 37 ++++++++----- src/views/connections/types.ts | 1 + 5 files changed, 89 insertions(+), 16 deletions(-) diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 2ed674e54..697de5de3 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -8,6 +8,8 @@ declare global { type Language = 'en' | 'zh' + type Protocol = 'ws' | 'wss' | 'mqtt' | 'mqtts' + type VueForm = Vue & { validate: (validate: (valid: boolean) => void) => void, clearValidate: () => void, diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts index 893dd6714..884e63075 100644 --- a/src/utils/mqttUtils.ts +++ b/src/utils/mqttUtils.ts @@ -91,4 +91,13 @@ export const getClientOptions = ( return options } +// Prevent old data from missing protocol field +export const getMQTTProtocol = (data: ConnectionModel): Protocol => { + const { protocol, ssl } = data + if (!protocol) { + return ssl ? 'mqtts' : 'mqtt' + } + return protocol +} + export default {} diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue index 38e22af5c..057d414cc 100644 --- a/src/views/connections/ConnectionForm.vue +++ b/src/views/connections/ConnectionForm.vue @@ -47,8 +47,19 @@ - - + + + + + + + + + + + + + @@ -57,6 +68,16 @@ + + + @@ -79,6 +100,7 @@ + + @@ -288,6 +311,7 @@ import { loadConnection, updateConnection } from '@/utils/api/connection' import getClientId from '@/utils/getClientId' import { createConnection } from '@/utils/api/connection' import { ConnectionModel } from './types' +import { getMQTTProtocol } from '@/utils/mqttUtils' @Component export default class ConnectionCreate extends Vue { @@ -304,6 +328,7 @@ export default class ConnectionCreate extends Vue { clientId: getClientId(), name: '', clean: true, + protocol: 'mqtt', host: 'broker.emqx.io', keepalive: 60, connectTimeout: 10, @@ -336,6 +361,7 @@ export default class ConnectionCreate extends Vue { return { name: [{ required: true, message: this.$t('common.inputRequired') }], clientId: [{ required: true, message: this.$t('common.inputRequired') }], + path: [{ required: true, message: this.$t('common.inputRequired') }], host: [{ required: true, message: this.$t('common.inputRequired') }], port: [{ required: true, message: this.$t('common.inputRequired') }], certType: [{ required: true, message: this.$t('common.selectRequired') }], @@ -351,10 +377,11 @@ export default class ConnectionCreate extends Vue { const res: ConnectionModel | null = await loadConnection(id) if (res) { Object.assign(this.record, res) + this.record.protocol = getMQTTProtocol(res) } } - private save(): void { + private save() { this.vueForm.validate(async (valid: boolean) => { if (!valid) { return false @@ -403,11 +430,26 @@ export default class ConnectionCreate extends Vue { } private handleSSL(val: boolean) { + const { protocol } = this.record + this.changeProtocol(protocol, val) if (!val) { this.record.certType = '' } } + private changeProtocol( + protocol: Protocol | undefined, isSSL: boolean, + ): void | boolean { + if (!protocol) { + return false + } + if (/ws/gi.test(protocol)) { + this.record.protocol = isSSL ? 'wss' : 'ws' + } else if (/mqtt/gi.test(protocol)) { + this.record.protocol = isSSL ? 'mqtts' : 'mqtt' + } + } + private handleBack(id: string) { if (this.oper === 'create' && id === '0') { this.$router.push('/recent_connections') @@ -448,6 +490,14 @@ export default class ConnectionCreate extends Vue { .el-form-item__error { top: 80%; } + .host-item { + .el-col-6 { + padding-left: 0px !important; + } + .el-col-18 { + padding-right: 0px !important; + } + } } .info-header { a.collapse-btn { diff --git a/src/views/connections/ConnectionsContent.vue b/src/views/connections/ConnectionsContent.vue index 5d9139f17..0ad216233 100644 --- a/src/views/connections/ConnectionsContent.vue +++ b/src/views/connections/ConnectionsContent.vue @@ -132,11 +132,11 @@ @@ -175,5 +199,16 @@ export default class Settings extends Vue { color: var(--color-text-default); } } + + .el-input-number__increase, + .el-input-number__decrease { + background: var(--color-bg-input_btn); + } + .el-input-number__decrease { + border-right: 1px solid var(--color-border-default); + } + .el-input-number__increase { + border-left: 1px solid var(--color-border-default); + } } From f9e9fb91e83c794252ed6d81a7c6f1b930fac968 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Tue, 25 Feb 2020 16:56:09 +0800 Subject: [PATCH 04/17] feat(dialog): dialog add keyup enter method --- src/components/MyDialog.vue | 15 ++++++++++----- src/components/SubscriptionsList.vue | 3 ++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue index 20f821591..aeaa6f478 100644 --- a/src/components/MyDialog.vue +++ b/src/components/MyDialog.vue @@ -3,7 +3,8 @@ class="my-dialog" v-bind="$props" @open="open" - @close="close"> + @close="close" + @keyup.enter.native="handleEnterEvent"> @@ -47,23 +48,27 @@ export default class MyDialog extends Vue { this.showDialog = val } - private confirmClick(): void { + private confirmClick() { // Confirm event this.$emit('confirm') } - private open(): void { + private open() { // Open the dialog event this.$emit('open') } - private close(): void { + private close() { this.$emit('update:visible', false) // Close the dialog event this.$emit('close') } - private hideDialog(): void { + private hideDialog() { // Hide the Dialog event this.$emit('update:visible', false) } + private handleEnterEvent() { + // Trigger enter event + this.$emit('keyupEnter') + } } diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue index 7d344cf6a..f708de471 100644 --- a/src/components/SubscriptionsList.vue +++ b/src/components/SubscriptionsList.vue @@ -49,7 +49,8 @@ width="500px" class="topic-dialog" @confirm="saveSubs" - @close="resetSubs"> + @close="resetSubs" + @keyupEnter="saveSubs"> Date: Tue, 25 Feb 2020 17:04:21 +0800 Subject: [PATCH 05/17] feat(subscriptions): add unconnected alert --- src/components/SubscriptionsList.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue index f708de471..a6565ba19 100644 --- a/src/components/SubscriptionsList.vue +++ b/src/components/SubscriptionsList.vue @@ -191,9 +191,11 @@ export default class SubscriptionsList extends Vue { this.getCurrentConnection(this.connectionId) if (!this.currentConnection.client) { + this.$message.warning(this.$t('connections.notConnect') as string) return false } if (!this.currentConnection.client.connected) { + this.$message.warning(this.$t('connections.notConnect') as string) return false } this.vueForm.validate((valid: boolean) => { From 38ff6af8a1056281b94dfbfeba02f61848856874 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Wed, 26 Feb 2020 14:37:33 +0800 Subject: [PATCH 06/17] feat(connection): expanded panel when disconnected --- src/views/connections/ConnectionsContent.vue | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/views/connections/ConnectionsContent.vue b/src/views/connections/ConnectionsContent.vue index 088db6eb9..680f6e563 100644 --- a/src/views/connections/ConnectionsContent.vue +++ b/src/views/connections/ConnectionsContent.vue @@ -414,6 +414,9 @@ export default class ConnectionsContent extends Vue { duration: 3000, offset: 20, }) + if (!this.showClientInfo) { + this.setShowClientInfo(true) + } this.$emit('reload') } private onConnect() { @@ -430,13 +433,7 @@ export default class ConnectionsContent extends Vue { duration: 3000, offset: 20, }) - setTimeout(() => { - this.showClientInfo = false - this.changeShowClientInfo({ - id: this.record.id as string, - showClientInfo: this.showClientInfo, - }) - }, 500) + this.setShowClientInfo(false) this.$emit('reload') } private onError(error: string) { @@ -570,6 +567,15 @@ export default class ConnectionsContent extends Vue { }, ) } + private setShowClientInfo(show: boolean) { + setTimeout(() => { + this.showClientInfo = show + this.changeShowClientInfo({ + id: this.record.id as string, + showClientInfo: this.showClientInfo, + }) + }, 500) + } private created(): void { const { id } = this.$route.params From 24ba51375ecdf167e5565e3d596d6da697d6379f Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Wed, 26 Feb 2020 16:37:59 +0800 Subject: [PATCH 07/17] feat(publish): adjustable height of publish input (#148) --- src/assets/scss/base.scss | 6 ++ src/components/MsgPublish.vue | 8 +-- src/components/ResizeHeight.vue | 58 ++++++++++++++++++++ src/views/connections/ConnectionsContent.vue | 17 +++++- 4 files changed, 83 insertions(+), 6 deletions(-) create mode 100644 src/components/ResizeHeight.vue diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss index 72d57c372..365fc65f4 100644 --- a/src/assets/scss/base.scss +++ b/src/assets/scss/base.scss @@ -21,6 +21,12 @@ body { color: var(--color-text-default); } +body.select-none { + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; +} + * { box-sizing: border-box; } diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue index ab22beab6..5cc0a6a5b 100644 --- a/src/components/MsgPublish.vue +++ b/src/components/MsgPublish.vue @@ -35,13 +35,15 @@ + + + diff --git a/src/views/connections/ConnectionsContent.vue b/src/views/connections/ConnectionsContent.vue index 680f6e563..f7421d18f 100644 --- a/src/views/connections/ConnectionsContent.vue +++ b/src/views/connections/ConnectionsContent.vue @@ -84,6 +84,7 @@ class="connections-content-main right-content" :style="{ paddingTop: showClientInfo ? msgTop.open: msgTop.close, + paddingBottom: `${msgBottom}px`, marginLeft: showSubs ? '570px' : '341px', }">
@@ -122,7 +123,10 @@
+
@@ -141,6 +145,7 @@ import MsgRightItem from '@/components/MsgRightItem.vue' import MsgLeftItem from '@/components/MsgLeftItem.vue' import MsgPublish from '@/components/MsgPublish.vue' import SubscriptionsList from '@/components/SubscriptionsList.vue' +import ResizeHeight from '@/components/ResizeHeight.vue' import ConnectionInfo from './ConnectionInfo.vue' import { ConnectionModel, MessageModel, SSLPath, SSLContent } from './types' import { ipcRenderer } from 'electron' @@ -160,6 +165,7 @@ interface Top { ConnectionInfo, MsgPublish, SubscriptionsList, + ResizeHeight, }, }) export default class ConnectionsContent extends Vue { @@ -192,6 +198,8 @@ export default class ConnectionsContent extends Vue { private searchLoading = false private titleName: string = this.record.name private retryTimes = 0 + private inputHeight = 125 + private msgBottom = 120 private mqttVersionDict = { '3.1.1': 4, '5.0': 5, @@ -247,6 +255,14 @@ export default class ConnectionsContent extends Vue { this.getMessages(id) } + @Watch('inputHeight') + private handleInputHeight(val: number) { + const oldInputHeight = 125 + const oldMsgBottom = 120 + const offset = val - oldInputHeight + this.msgBottom = oldMsgBottom + offset + } + private getConnectionValue(id: string) { const $activeConnection: { id?: string, @@ -678,7 +694,6 @@ export default class ConnectionsContent extends Vue { .connections-content-main { height: 100%; - padding: 88px 0 120px 0; transition: all .5s; .connections-body { padding: 16px; From 3655e4fee6f06734be21fbbe8989911d8cc4b327 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Wed, 26 Feb 2020 17:24:35 +0800 Subject: [PATCH 08/17] refactor(componets): remove useless component --- src/components/LeftList.vue | 35 --------------------------------- src/views/connections/index.vue | 24 ++++++++++++++++++---- 2 files changed, 20 insertions(+), 39 deletions(-) delete mode 100644 src/components/LeftList.vue diff --git a/src/components/LeftList.vue b/src/components/LeftList.vue deleted file mode 100644 index 6b3546a0f..000000000 --- a/src/components/LeftList.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - diff --git a/src/views/connections/index.vue b/src/views/connections/index.vue index 8c78ba3f7..ef2eb8d7a 100644 --- a/src/views/connections/index.vue +++ b/src/views/connections/index.vue @@ -1,9 +1,9 @@