From 62c6ac97526b6a9a3ccd3b081fba53db9561d0e9 Mon Sep 17 00:00:00 2001
From: Red-Asuka <liyd0623@gmail.com>
Date: Tue, 13 Sep 2022 10:09:50 +0800
Subject: [PATCH] feat(web): add reconnectPeriod option

---
 web/src/lang/connections.ts                  |  5 +++++
 web/src/types/global.d.ts                    |  1 +
 web/src/utils/mqttUtils.ts                   |  5 +++--
 web/src/views/connections/ConnectionForm.vue | 17 +++++++++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/web/src/lang/connections.ts b/web/src/lang/connections.ts
index 7e9ca93d7..59e460258 100644
--- a/web/src/lang/connections.ts
+++ b/web/src/lang/connections.ts
@@ -204,6 +204,11 @@ export default {
     en: 'Auto Reconnect',
     ja: '自動再接続',
   },
+  reconnectPeriod: {
+    zh: '重连周期',
+    en: 'Reconnect Period',
+    ja: '再接続期間',
+  },
   mqttVersion: {
     zh: 'MQTT 版本',
     en: 'MQTT Version',
diff --git a/web/src/types/global.d.ts b/web/src/types/global.d.ts
index c2381c865..3b5054677 100644
--- a/web/src/types/global.d.ts
+++ b/web/src/types/global.d.ts
@@ -274,6 +274,7 @@ declare global {
     keepalive: number
     connectTimeout: number
     reconnect: boolean
+    reconnectPeriod: number
     username: string
     password: string
     path: string
diff --git a/web/src/utils/mqttUtils.ts b/web/src/utils/mqttUtils.ts
index 9d2ed1ec9..2619a33c3 100644
--- a/web/src/utils/mqttUtils.ts
+++ b/web/src/utils/mqttUtils.ts
@@ -37,7 +37,7 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
     certType,
     mqttVersion,
     reconnect,
-    // reconnectPeriod, // reconnectPeriod = 0 disabled automatic reconnection in the client
+    reconnectPeriod, // reconnectPeriod = 0 disabled automatic reconnection in the client
     will,
     rejectUnauthorized,
     // clientIdWithTime,
@@ -47,7 +47,7 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
     clientId,
     keepalive,
     clean,
-    // reconnectPeriod: reconnect ? reconnectPeriod : 0,
+    reconnectPeriod: reconnect ? reconnectPeriod : 0,
     protocolVersion,
   }
   options.connectTimeout = time.convertSecondsToMs(connectTimeout)
@@ -148,6 +148,7 @@ export const getDefaultRecord = (): ConnectionModel => {
     keepalive: 60,
     connectTimeout: 10,
     reconnect: false,
+    reconnectPeriod: 4000,
     username: '',
     password: '',
     path: '/mqtt',
diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue
index b8168f4a4..862a82b7f 100644
--- a/web/src/views/connections/ConnectionForm.vue
+++ b/web/src/views/connections/ConnectionForm.vue
@@ -244,6 +244,23 @@
                 </el-form-item>
               </el-col>
               <el-col :span="2"></el-col>
+              <template v-if="record.reconnect">
+                <el-col :span="22">
+                  <el-form-item :label="$t('connections.reconnectPeriod')" prop="reconnectPeriod">
+                    <el-input-number
+                      size="mini"
+                      type="number"
+                      :min="1"
+                      v-model="record.reconnectPeriod"
+                      controls-position="right"
+                    >
+                    </el-input-number>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="2">
+                  <div class="unit">({{ $t('common.unitMS') }})</div>
+                </el-col>
+              </template>
               <el-col :span="22">
                 <el-form-item :label="$t('connections.mqttVersion')" prop="mqttVersion">
                   <el-select size="mini" v-model="record.mqttVersion">