support setting exchange rate cache expiration time

2026-05-19 01:04:25 +08:00 · 2026-02-28 21:36:00 +08:00
parent 247181830c
commit 8192a48bc5
27 changed files with 303 additions and 30 deletions
@@ -0,0 +1,112 @@
+import { ref, computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import { type NameNumeralValue } from '@/core/base.ts';
+import { type BrowserCacheStatistics } from '@/core/cache.ts';
+
+import {
+    loadBrowserCacheStatistics,
+    updateMapCacheExpiration,
+    clearMapDataCache,
+    clearAllBrowserCaches
+} from '@/lib/cache.ts';
+
+export function useAppBrowserCacheSettingPageBase() {
+    const { tt, formatNumberToLocalizedNumerals } = useI18n();
+
+    const isSupportedFileCache: boolean = 'serviceWorker' in navigator && !!navigator.serviceWorker.controller;
+
+    const settingsStore = useSettingsStore();
+    const exchangeRatesStore = useExchangeRatesStore();
+
+    const loading = ref<boolean>(true);
+    const fileCacheStatistics = ref<BrowserCacheStatistics | undefined>(undefined);
+    const exchangeRatesCacheSize = ref<number | undefined>(undefined);
+
+    const allMapCacheExpirationOptions = computed<NameNumeralValue[]>(() => {
+        return [
+            { name: tt('Disable Cache'), value: -1 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(1) }), value: 86400 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(7) }), value: 604800 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(30) }), value: 2592000 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(90) }), value: 7776000 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(180) }), value: 15552000 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(365) }), value: 31536000 },
+            { name: tt('No Expiration'), value: 0 }
+        ];
+    });
+
+    const allExchangeRatesDataCacheExpirationOptions = computed<NameNumeralValue[]>(() => {
+        return [
+            { name: tt('Disable Cache'), value: -1 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(1) }), value: 86400 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(7) }), value: 604800 },
+            { name: tt('format.misc.nDays', { n: formatNumberToLocalizedNumerals(30) }), value: 2592000 },
+            { name: tt('No Expiration'), value: 0 }
+        ];
+    });
+
+    const mapCacheExpiration = computed<number>({
+        get: () => isSupportedFileCache ? settingsStore.appSettings.mapCacheExpiration : -1,
+        set: (value) => {
+            settingsStore.setMapCacheExpiration(value);
+
+            if (isSupportedFileCache) {
+                updateMapCacheExpiration(value);
+            }
+        }
+    });
+
+    const exchangeRatesDataCacheExpiration = computed<number>({
+        get: () => settingsStore.appSettings.exchangeRatesDataCacheExpiration,
+        set: (value) => {
+            settingsStore.setExchangeRatesDataCacheExpiration(value);
+            exchangeRatesStore.removeExpiredExchangeRates(true);
+            exchangeRatesCacheSize.value = exchangeRatesStore.getExchangeRatesCacheSize();
+        }
+    });
+
+    function loadCacheStatistics(): Promise<void> {
+        return new Promise((resolve, reject) => {
+            loading.value = true;
+
+            loadBrowserCacheStatistics().then(statistics => {
+                fileCacheStatistics.value = statistics;
+                exchangeRatesCacheSize.value = exchangeRatesStore.getExchangeRatesCacheSize();
+                loading.value = false;
+                resolve();
+            }).catch(error => {
+                loading.value = false;
+                reject(error);
+            });
+        });
+    }
+
+    function clearExchangeRatesDataCache(): void {
+        exchangeRatesStore.resetLatestExchangeRates();
+        exchangeRatesCacheSize.value = exchangeRatesStore.getExchangeRatesCacheSize();
+    }
+
+    return {
+        // constants
+        isSupportedFileCache,
+        // states
+        loading,
+        fileCacheStatistics,
+        exchangeRatesCacheSize,
+        // computed states
+        allMapCacheExpirationOptions,
+        allExchangeRatesDataCacheExpirationOptions,
+        mapCacheExpiration,
+        exchangeRatesDataCacheExpiration,
+        // functions
+        loadCacheStatistics,
+        clearMapDataCache,
+        clearAllBrowserCaches,
+        clearExchangeRatesDataCache
+    };
+}
@@ -92,6 +92,13 @@
                    <span class="text-body-1">{{ tt('Used storage') }}</span>
                    <span class="text-xl ms-1">{{ formatVolumeToLocalizedNumerals(exchangeRatesCacheSize ?? 0, 2) }}</span>
                </v-card-text>
+
+                <v-card-text class="mt-2">
+                    <v-btn color="secondary" variant="tonal"
+                           :disabled="loading || !exchangeRatesCacheSize" @click="clearExchangeRatesCache()">
+                        {{ tt('Clear Exchange Rates Data Cache') }}
+                    </v-btn>
+                </v-card-text>
            </v-card>
        </v-col>

@@ -112,6 +119,18 @@
                                    v-model="mapCacheExpiration"
                                />
                            </v-col>
+                            <v-col cols="12" sm="6">
+                                <v-select
+                                    item-title="name"
+                                    item-value="value"
+                                    persistent-placeholder
+                                    :disabled="loading"
+                                    :label="tt('Cache Expiration for Exchange Rates Data')"
+                                    :placeholder="tt('Cache Expiration for Exchange Rates Data')"
+                                    :items="allExchangeRatesDataCacheExpirationOptions"
+                                    v-model="exchangeRatesDataCacheExpiration"
+                                />
+                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-form>
@@ -155,10 +174,13 @@ const {
    fileCacheStatistics,
    exchangeRatesCacheSize,
    allMapCacheExpirationOptions,
+    allExchangeRatesDataCacheExpirationOptions,
    mapCacheExpiration,
+    exchangeRatesDataCacheExpiration,
    loadCacheStatistics,
    clearMapDataCache,
-    clearAllBrowserCaches
+    clearAllBrowserCaches,
+    clearExchangeRatesDataCache
 } = useAppBrowserCacheSettingPageBase();

 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
@@ -179,5 +201,11 @@ function clearAllFileCache(): void {
    });
 }

+function clearExchangeRatesCache(): void {
+    confirmDialog.value?.open('Are you sure you want to clear exchange rates data cache?').then(() => {
+        clearExchangeRatesDataCache();
+    });
+}
+
 loadCacheStatistics();
 </script>
@@ -4,7 +4,7 @@
            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
            <f7-nav-title :title="tt('Browser Cache Management')"></f7-nav-title>
            <f7-nav-right :class="{ 'disabled': loading }">
-                <f7-link icon-f7="ellipsis" :class="{ 'disabled': loading || !isSupportedFileCache || !fileCacheStatistics }" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link icon-f7="ellipsis" :class="{ 'disabled': loading || ((!isSupportedFileCache || !fileCacheStatistics) && !exchangeRatesCacheSize) }" @click="showMoreActionSheet = true"></f7-link>
            </f7-nav-right>
        </f7-navbar>

@@ -30,7 +30,8 @@
            <f7-list-item group-title :sortable="false">
                <small>{{ tt('Cache Expiration Time') }}</small>
            </f7-list-item>
-            <f7-list-item title="Map Data" after="Disable Map Cache" v-if="getMapProvider()"></f7-list-item>
+            <f7-list-item title="Map Data" after="Disable Cache" v-if="getMapProvider()"></f7-list-item>
+            <f7-list-item title="Exchange Rates Data" after="Disable Cache"></f7-list-item>
        </f7-list>

        <f7-list strong inset dividers class="margin-vertical" v-if="!loading && isSupportedFileCache">
@@ -75,6 +76,25 @@
                                           v-model="mapCacheExpiration">
                </list-item-selection-popup>
            </f7-list-item>
+            <f7-list-item
+                link="#"
+                :class="{ 'disabled': loading }"
+                :title="tt('Exchange Rates Data')"
+                :after="findNameByValue(allExchangeRatesDataCacheExpirationOptions, exchangeRatesDataCacheExpiration)"
+                @click="showExchangeRatesDataCacheExpirationPopup = true"
+            >
+                <list-item-selection-popup value-type="item"
+                                           key-field="value" value-field="value"
+                                           title-field="name"
+                                           :title="tt('Cache Expiration for Exchange Rates Data')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Expiration Time')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allExchangeRatesDataCacheExpirationOptions"
+                                           v-model:show="showExchangeRatesDataCacheExpirationPopup"
+                                           v-model="exchangeRatesDataCacheExpiration">
+                </list-item-selection-popup>
+            </f7-list-item>
        </f7-list>

        <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
@@ -84,6 +104,10 @@
                <f7-actions-button :class="{ 'disabled': loading || !isSupportedFileCache || !fileCacheStatistics }"
                                   @click="clearAllFileCache">{{ tt('Clear All File Cache') }}</f7-actions-button>
            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button :class="{ 'disabled': loading || !exchangeRatesCacheSize }"
+                                   @click="clearExchangeRatesCache">{{ tt('Clear Exchange Rates Data Cache') }}</f7-actions-button>
+            </f7-actions-group>
            <f7-actions-group>
                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
            </f7-actions-group>
@@ -112,13 +136,17 @@ const {
    fileCacheStatistics,
    exchangeRatesCacheSize,
    allMapCacheExpirationOptions,
+    allExchangeRatesDataCacheExpirationOptions,
    mapCacheExpiration,
+    exchangeRatesDataCacheExpiration,
    loadCacheStatistics,
    clearMapDataCache,
-    clearAllBrowserCaches
+    clearAllBrowserCaches,
+    clearExchangeRatesDataCache
 } = useAppBrowserCacheSettingPageBase();

 const showMapDataCacheExpirationPopup = ref<boolean>(false);
+const showExchangeRatesDataCacheExpirationPopup = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);

 function reloadCacheStatistics(done?: () => void): void {
@@ -149,5 +177,11 @@ function clearAllFileCache(): void {
    });
 }

+function clearExchangeRatesCache(): void {
+    showConfirm('Are you sure you want to clear exchange rates data cache?', () => {
+        clearExchangeRatesDataCache();
+    });
+}
+
 loadCacheStatistics();
 </script>