feat: add support for rename config (#1132)

* feat: add support for rename config * fix(web): remove unnecessary margin for delete button
jeessy2 · May 29, 2024 · ca3027b · ca3027b
1 parent d420991
commit ca3027b
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 21 deletions.
diff --git a/config/config.go b/config/config.go
@@ -25,6 +25,7 @@ var Ipv6Reg = regexp.MustCompile(`((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|
 
 // DnsConfig 配置
 type DnsConfig struct {
+	Name string
 	Ipv4 struct {
 		Enable bool
 		// 获取IP类型 url/netInterface

diff --git a/static/constant.js b/static/constant.js
@@ -173,6 +173,8 @@ const I18N_MAP = {
     'Save': 'Save',
     'Config:': 'Config:',
     'Add': 'Add',
+    'Rename': 'Rename',
+    'RenameHelp': 'Enter a new name:',
     'Delete': 'Delete',
     'DNS Provider': 'DNS Provider',
     'Create AccessKey': 'Create AccessKey',
@@ -234,6 +236,8 @@ const I18N_MAP = {
     'Save': '保存',
     'Config:': '配置切换:',
     'Add': '添加',
+    'Rename': '重命名',
+    'RenameHelp': '输入新名称：',
     'Delete': '删除',
     'DNS Provider': 'DNS服务商',
     'Create AccessKey': '创建 AccessKey',

diff --git a/web/save.go b/web/save.go
@@ -92,7 +92,7 @@ func checkAndSave(request *http.Request) string {
 		if v == empty {
 			continue
 		}
-		dnsConf := config.DnsConfig{TTL: v.TTL}
+		dnsConf := config.DnsConfig{Name: v.Name, TTL: v.TTL}
 		// 覆盖以前的配置
 		dnsConf.DNS.Name = v.DnsName
 		dnsConf.DNS.ID = strings.TrimSpace(v.DnsID)

diff --git a/web/writing.go b/web/writing.go
@@ -19,6 +19,7 @@ const VersionEnv = "DDNS_GO_VERSION"
 
 // js中的dns配置
 type dnsConf4JS struct {
+	Name             string
 	DnsName          string
 	DnsID            string
 	DnsSecret        string
@@ -84,6 +85,7 @@ func getDnsConfStr(dnsConf []config.DnsConfig) string {
 		// 已存在配置文件，隐藏真实的ID、Secret
 		idHide, secretHide := getHideIDSecret(&conf)
 		dnsConfArray = append(dnsConfArray, dnsConf4JS{
+			Name:             conf.Name,
 			DnsName:          conf.DNS.Name,
 			DnsID:            idHide,
 			DnsSecret:        secretHide,

diff --git a/web/writing.html b/web/writing.html
@@ -77,15 +77,21 @@
                 <button
                   data-i18n="Add"
                   class="btn btn-primary btn-sm"
-                  style="margin: 0 5px"
                   id="addBtn"
                 >
                   Add
                 </button>
+                <button
+                  data-i18n="Rename"
+                  class="btn btn-primary btn-sm"
+                  style="margin: 0 5px"
+                  id="renameBtn"
+                >
+                  Rename
+                </button>
                 <button
                   data-i18n="Delete"
                   class="btn btn-primary btn-sm"
-                  style="margin: 0 0 0 5px"
                   id="delBtn"
                 >
                   Delete
@@ -718,6 +724,7 @@ <h5 class="portlet__head">Webhook</h5>
       WebhookHeaders: document.getElementById("WebhookHeaders").value,
     };
     const defaultDnsConf = {
+      Name: "",
       DnsID: "",
       DnsName: "alidns",
       DnsSecret: "",
@@ -779,7 +786,8 @@ <h5 class="portlet__head">Webhook</h5>
         document.getElementById("dnsIdLabel").innerHTML = dnsInfo.idLabel;
         document.getElementById("dnsSecretLabel").innerHTML = dnsInfo.secretLabel;
         document.getElementById("dnsHelp").innerHTML = i18n(dnsInfo.helpHtml);
-        document.getElementById("index_" + configIndex).innerHTML = `${configIndex + 1} - ${e.target.value}`;
+        document.getElementById(`index_${configIndex}`).textContent = getConfName(configIndex, e.target.value);
+
         dnsConf[configIndex].DnsName = e.target.value;
       });
     });
@@ -843,10 +851,17 @@ <h5 class="portlet__head">Webhook</h5>
 
   <!-- 配置项 -->
   <script>
+    // 不需要填充到表单中的字段
+    const SKIPPED_NAMES = ["Name"];
+
     // 把dnsConf中的值填充到表单中
     function showConf(idx) {
       const conf = dnsConf[idx] ?? {};
       for (const name in conf) {
+        if (SKIPPED_NAMES.includes(name)) {
+          continue;
+        }
+
         const $e = document.querySelector(`[name=${name}]`);
         // 判断对应input的类型
         switch ($e.getAttribute("type")) {
@@ -882,43 +897,63 @@ <h5 class="portlet__head">Webhook</h5>
         alert("error: " + e.toString());
         return;
       }
-      const $select = document.getElementById("index");
-      $select.innerHTML = "";
+
+      // Reload all configs in dnsConf into index
+      const $index = document.getElementById("index");
+      $index.innerHTML = "";
       for (let i = 0; i < dnsConf.length; i++) {
-        const $option = html2Element(`
-          <option id="index_${i}" value="${i}">
-            ${i + 1} - ${dnsConf[i].DnsName}
-          </option>
-        `);
-        $select.appendChild($option);
+        appendConfigToIndex(i);
       }
       // 负数表示倒数第几个
       if (configIndex < 0) {
         configIndex += dnsConf.length;
       } else {
         configIndex = Math.min(configIndex, dnsConf.length - 1);
       }
-      $select.value = configIndex;
+      $index.value = configIndex;
       showConf(configIndex);
     }
 
+    // 拼接新的配置项到下拉菜单
+    function appendConfigToIndex(idx) {
+      const $index = document.getElementById('index');
+
+      const $option = html2Element(`
+        <option id="index_${idx}" value="${idx}">
+          ${getConfName(idx)}
+        </option>`);
+      $index.append($option);
+    }
+
+    // 获取配置名称或生成默认名称
+    function getConfName(idx, _default = dnsConf[idx].DnsName) {
+      return dnsConf[idx].Name || `${idx + 1} - ${_default}`;
+    }
+
     // 新增配置按钮被点击
     document.getElementById("addBtn").addEventListener('click', e => {
       e.preventDefault();
       configIndex = dnsConf.length;
       dnsConf[configIndex] = {...defaultDnsConf};
+
       // 创建新的option
-      const $index = document.getElementById("index");
-      const $option = html2Element(`
-        <option id="index_${configIndex}" value="${configIndex}">
-          ${configIndex + 1} - ${dnsConf[configIndex].DnsName}
-        </option>
-      `);
-      $index.appendChild($option);
-      $index.value = configIndex;
+      appendConfigToIndex(configIndex);
+
+      document.getElementById("index").value = configIndex;
       showConf(configIndex);
     });
 
+    // 重命名配置按钮被点击
+    document.getElementById("renameBtn").addEventListener('click', e => {
+      e.preventDefault();
+
+      const newName = prompt(i18n("RenameHelp"));
+      if (newName) {
+        dnsConf[configIndex].Name = newName;
+        document.getElementById(`index_${configIndex}`).textContent = newName;
+      }
+    });
+
     // 删除配置按钮被点击
     document.getElementById("delBtn").addEventListener('click', e => {
       e.preventDefault();