feat: implement geofiles update in panel (#2971)

solves #2672

Co-authored-by: Sanaei <ho3ein.sanaei@gmail.com>

1 files changed, 40 insertions, 11 deletions

diff --git a/web/html/index.html b/web/html/index.html
index 574fc539..d17cd1e0 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -22,11 +22,14 @@
   .ant-backup-list-item {
     gap: 10px;
   }
-  .ant-xray-version-list-item {
+  .ant-version-list-item {
     --padding: 12px;
     padding: var(--padding) !important;
     gap: var(--padding);
   }
+  .dark .ant-version-list-item svg{
+    color: var(--dark-color-text-primary);
+  }
   .dark .ant-backup-list-item svg,
   .dark .ant-badge-status-text,
   .dark .ant-card-extra {
@@ -43,7 +46,7 @@
     border-color: var(--color-primary-100);
   }
   .dark .ant-backup-list, 
-  .dark .ant-xray-version-list,
+  .dark .ant-version-list,
   .dark .ant-card-actions,
   .dark .ant-card-actions>li:not(:last-child) {
     border-color: var(--dark-color-stroke);
@@ -353,14 +356,25 @@
     </a-layout>
     <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
         @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
-      <a-alert type="warning" :style="{ marginBottom: '12px', width: '100%' }"
-        message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
-      <a-list class="ant-xray-version-list" bordered :style="{ width: '100%' }">
-        <a-list-item class="ant-xray-version-list-item" v-for="version, index in versionModal.versions">
-          <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
-          <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
-        </a-list-item>
-      </a-list>
+      <a-collapse default-active-key="1">
+        <a-collapse-panel key="1" header='Xray'>
+          <a-alert type="warning" :style="{ marginBottom: '12px', width: '100%' }" message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
+          <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
+            <a-list-item class="ant-version-list-item" v-for="version, index in versionModal.versions">
+              <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
+              <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
+            </a-list-item>
+          </a-list>
+        </a-collapse-panel>
+        <a-collapse-panel key="2" header='Geofiles'>
+          <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
+            <a-list-item class="ant-version-list-item" v-for="file, index in ['geosite.dat', 'geoip.dat', 'geosite_IR.dat', 'geoip_IR.dat', 'geosite_RU.dat', 'geoip_RU.dat']">
+              <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ file ]]</a-tag>
+              <a-icon type="reload" @click="updateGeofile(file)" :style="{ marginRight: '8px' }"/>
+            </a-list-item>
+          </a-list>
+        </a-collapse-panel>
+      </a-collapse>
     </a-modal>
     <a-modal id="log-modal" v-model="logModal.visible"
         :closable="true" @cancel="() => logModal.visible = false"
@@ -645,7 +659,7 @@
             switchV2rayVersion(version) {
                 this.$confirm({
                     title: '{{ i18n "pages.index.xraySwitchVersionDialog"}}',
-                    content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}' + ` ${version}?`,
+                    content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}'.replace('#version#', version),
                     okText: '{{ i18n "confirm"}}',
                     class: themeSwitcher.currentTheme,
                     cancelText: '{{ i18n "cancel"}}',
@@ -657,6 +671,21 @@
                     },
                 });
             },
+            updateGeofile(fileName) {
+                this.$confirm({
+                    title: '{{ i18n "pages.index.geofileUpdateDialog" }}',
+                    content: '{{ i18n "pages.index.geofileUpdateDialogDesc" }}'.replace("#filename#", fileName),
+                    okText: '{{ i18n "confirm"}}',
+                    class: themeSwitcher.currentTheme,
+                    cancelText: '{{ i18n "cancel"}}',
+                    onOk: async () => {
+                        versionModal.hide();
+                        this.loading(true, '{{ i18n "pages.index.dontRefresh"}}');
+                        await HttpUtil.post(`/server/updateGeofile/${fileName}`);
+                        this.loading(false);
+                    },
+                });
+            },
             async stopXrayService() {
                 this.loading(true);
                 const msg = await HttpUtil.post('server/stopXrayService');