From 1329a0e723b435a158d9108cea27c00038bd193a Mon Sep 17 00:00:00 2001 From: YuShifan <894402575bt@gmail.com> Date: Fri, 5 Aug 2022 15:03:27 +0800 Subject: [PATCH] feat(subscriptions): support disable and enable multi-topics --- src/background.ts | 1 + src/components/SubscriptionsList.vue | 62 +++++++++++++++++----------- src/lang/settings.ts | 14 +++++++ src/store/modules/app.ts | 11 +++-- src/views/settings/index.vue | 33 +++++++++++++++ 5 files changed, 93 insertions(+), 28 deletions(-) diff --git a/src/background.ts b/src/background.ts index c5b68439d..add6a4bd1 100644 --- a/src/background.ts +++ b/src/background.ts @@ -101,6 +101,7 @@ async function createWindow() { autoScroll: setting.autoScroll, maxReconnectTimes: setting.maxReconnectTimes, syncOsTheme: setting.syncOsTheme, + multiTopics: setting.multiTopics, } } // Create the browser window. diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue index bcb5bd543..2e3c320ab 100644 --- a/src/components/SubscriptionsList.vue +++ b/src/components/SubscriptionsList.vue @@ -94,7 +94,7 @@ void @Getter('currentTheme') private theme!: Theme + @Getter('multiTopics') private multiTopics!: boolean @Getter('activeConnection') private activeConnection!: ActiveConnection private topicColor = '' @@ -378,6 +379,32 @@ export default class SubscriptionsList extends Vue { } } + private saveTopicToSubList(topic: string, qos: QoS, index?: number, aliasArr?: string[]): void { + const existTopicIndex: number = this.subsList.findIndex((item: SubscriptionModel) => item.topic === topic) + if (existTopicIndex !== -1) { + this.subsList[existTopicIndex].qos = qos + } else { + let { topic: unuseTopic, color, alias, id, ...others } = this.subRecord + if (index !== undefined && aliasArr !== undefined) { + alias = aliasArr ? aliasArr[index] : alias + if (index > 0) { + color = getRandomColor() + id = getSubscriptionId() + } + } else { + color = getRandomColor() + id = getSubscriptionId() + } + this.subsList.push({ + topic, + id, + color, + alias, + ...others, + }) + } + } + public async subscribe( { topic, alias, qos, nl, rap, rh, subscriptionIdentifier, disabled }: SubscriptionModel, isAuto?: boolean, @@ -395,8 +422,8 @@ export default class SubscriptionsList extends Vue { } let isFinshed = false if (this.client.subscribe) { - const topicsArr = topic.split(',') - const aliasArr = alias?.split(',') + const topicsArr = this.multiTopics ? topic.split(',') : topic + const aliasArr = this.multiTopics ? alias?.split(',') : alias let properties: { subscriptionIdentifier: number } | undefined = undefined if (this.record.mqttVersion === '5.0' && subscriptionIdentifier) { properties = { @@ -429,26 +456,13 @@ export default class SubscriptionsList extends Vue { this.subsList = this.setSubsDisable(topic, disabled) this.$log.info(`Enabled topic: ${topic}`) } else { - topicsArr.forEach((topic, index) => { - const existTopicIndex: number = this.subsList.findIndex((item: SubscriptionModel) => item.topic === topic) - if (existTopicIndex !== -1) { - this.subsList[existTopicIndex].qos = qos - } else { - let { topic: unuseTopic, color, alias, id, ...others } = this.subRecord - alias = aliasArr ? aliasArr[index] : alias - if (index > 0) { - color = getRandomColor() - id = getSubscriptionId() - } - this.subsList.push({ - topic, - id, - color, - alias, - ...others, - }) - } - }) + if (!Array.isArray(topicsArr)) { + this.saveTopicToSubList(topic, qos) + } else { + topicsArr.forEach((topic, index) => { + this.saveTopicToSubList(topic, qos, index, aliasArr as string[]) + }) + } this.$log.info(`Saved topic: ${topic}`) } this.record.subscriptions = this.subsList diff --git a/src/lang/settings.ts b/src/lang/settings.ts index 555072c15..4690a0940 100644 --- a/src/lang/settings.ts +++ b/src/lang/settings.ts @@ -118,6 +118,13 @@ export default { ja: '自動スクロール', hu: 'Automatikus görgetés', }, + multiTopics: { + zh: '多主题订阅', + en: 'Multi topics subscribe', + tr: 'Çoklu başlık abone ol', + ja: '複数のトピックを購読', + hu: 'Több téma feliratkozás', + }, autoResubDesc: { zh: '重连时，对连接的订阅列表进行恢复订阅，仅在 Clean Session 为 True 时有效', en: 'When reconnecting, the subscription list of the connection will be automatically resubscribed, which is only valid when Clean Session is True', @@ -153,4 +160,11 @@ export default { ja: 'システムが切り替えると、ライトテーマとナイトテーマを自動的に切り替えます。', hu: 'Automatikusan válthat a Világos és az Éjszakai témák között, amikor a rendszer ezt teszi.', }, + multiTopicsDesc: { + zh: '开启后，将支持一次订阅多个主题，使用逗号（,）分隔', + en: 'Enable to subscribe to multiple topics at once, separated by commas', + tr: 'Açık kaldığında, birden fazla konu abone olmak için bir kez abone olunabilir.', + ja: '複数のトピックを一度に購読することができます。コンマで区切ります。', + hu: 'Egy időben több témára feliratkozhat.', + }, } diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index f54f15e3e..b510796a4 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -40,6 +40,7 @@ const app = { autoResub: settingData.autoResub, autoScroll: settingData.autoScroll, syncOsTheme: settingData.syncOsTheme, + multiTopics: settingData.multiTopics, maxReconnectTimes: settingData.maxReconnectTimes || 10, showSubscriptions: getShowSubscriptions(), showClientInfo: {}, @@ -50,7 +51,6 @@ const app = { willMessageVisible: true, allConnections: [], currentScript: null, - multiTopics: true, }, mutations: { [TOGGLE_THEME](state: App, currentTheme: Theme) { @@ -174,6 +174,12 @@ const app = { settingData.syncOsTheme = payload.syncOsTheme await settingService.update(payload) }, + async TOGGLE_MULTI_TOPICS({ commit }: any, payload: App) { + const { settingService } = useServices() + commit(TOGGLE_MULTI_TOPICS, payload.multiTopics) + settingData.multiTopics = payload.multiTopics + await settingService.update(payload) + }, async SET_MAX_RECONNECT_TIMES({ commit }: any, payload: App) { const { settingService } = useServices() commit(SET_MAX_RECONNECT_TIMES, payload.maxReconnectTimes) @@ -213,9 +219,6 @@ const app = { async SET_SCRIPT({ commit }: any, payload: App) { commit(SET_SCRIPT, payload.currentScript) }, - async TOGGLE_MULTI_TOPICS({ commit }: any, payload: App) { - commit(TOGGLE_MULTI_TOPICS, payload.multiTopics) - }, }, } diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue index b327aec05..b776bc636 100644 --- a/src/views/settings/index.vue +++ b/src/views/settings/index.vue @@ -96,6 +96,33 @@ + + + + + + + + + + + + + + + + + @@ -248,6 +275,7 @@ export default class Settings extends Vue { @Action('TOGGLE_AUTO_SCROLL') private actionAutoScroll!: (payload: { autoScroll: boolean }) => void @Action('TOGGLE_SYNC_OS_THEME') private actionSyncOsTheme!: (payload: { syncOsTheme: boolean }) => void @Action('SET_MAX_RECONNECT_TIMES') private actionMaxReconnectTimes!: (payload: { maxReconnectTimes: number }) => void + @Action('TOGGLE_MULTI_TOPICS') private actionToggleMultiTopics!: (payload: { multiTopics: boolean }) => void @Getter('currentTheme') private currentTheme!: Theme @Getter('currentLang') private currentLang!: Language @Getter('autoCheck') private autoCheck!: boolean @@ -255,6 +283,7 @@ export default class Settings extends Vue { @Getter('syncOsTheme') private syncOsTheme!: boolean @Getter('maxReconnectTimes') private maxReconnectTimes!: number @Getter('autoScroll') private autoScroll!: boolean + @Getter('multiTopics') private multiTopics!: boolean private langOptions: Options[] = [ { label: '简体中文', value: 'zh' }, @@ -301,6 +330,10 @@ export default class Settings extends Vue { this.actionAutoScroll({ autoScroll: value }) } + private handleMultiTopicsSwitchChange(value: boolean) { + this.actionToggleMultiTopics({ multiTopics: value }) + } + private handleInputChage(value: number) { this.actionMaxReconnectTimes({ maxReconnectTimes: value }) }