show provider of exchange rates data and map in about page

src/views/desktop/AboutPage.vue

@@ -1,7 +1,7 @@
 <template>
     <v-row class="match-height">
         <v-col cols="12">
-            <v-card :title="$t('About')">
+            <v-card :title="$t('global.app.title')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
@@ -29,6 +29,50 @@
                             </a>
                         </v-col>
                     </v-row>
+                    <v-row no-gutters>
+                        <v-col cols="12" md="2">
+                            <span class="text-body-1">{{ $t('Report Issue') }}</span>
+                        </v-col>
+                        <v-col cols="12" md="10">
+                            <a class="text-body-1" href="https://github.com/mayswind/ezbookkeeping/issues" target="_blank">
+                                https://github.com/mayswind/ezbookkeeping/issues
+                            </a>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12" v-if="exchangeRatesData">
+            <v-card :title="$t('Exchange Rates Data')">
+                <v-card-text>
+                    <v-row no-gutters>
+                        <v-col cols="12" md="2">
+                            <span class="text-body-1">{{ $t('Provider') }}</span>
+                        </v-col>
+                        <v-col cols="12" md="10">
+                            <a class="text-body-1" :href="exchangeRatesData.referenceUrl" target="_blank"
+                               v-if="exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a>
+                            <span class="text-body-1" v-if="!exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12" v-if="mapProviderName">
+            <v-card :title="$t('Map')">
+                <v-card-text>
+                    <v-row no-gutters>
+                        <v-col cols="12" md="2">
+                            <span class="text-body-1">{{ $t('Provider') }}</span>
+                        </v-col>
+                        <v-col cols="12" md="10">
+                            <a class="text-body-1" :href="mapProviderWebsite" target="_blank"
+                               v-if="mapProviderWebsite">{{ mapProviderName }}</a>
+                            <span class="text-body-1" v-if="!mapProviderWebsite">{{ mapProviderName }}</span>
+                        </v-col>
+                    </v-row>
                 </v-card-text>
             </v-card>
         </v-col>
@@ -68,12 +112,15 @@
 <script>
 import { mapStores } from 'pinia';
 import { useUserStore } from '@/stores/user.js';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import { getMapProvider } from '@/lib/server_settings.js';
+import { getMapWebsite } from '@/lib/map/index.js';
 import licenses from '@/lib/licenses.js';
 
 export default {
     computed: {
-        ...mapStores(useUserStore),
+        ...mapStores(useUserStore, useExchangeRatesStore),
         version() {
             return 'v' + this.$version;
         },
@@ -84,6 +131,16 @@ export default {
 
             return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.$buildTime);
         },
+        exchangeRatesData() {
+            return this.exchangeRatesStore.latestExchangeRates.data;
+        },
+        mapProviderName() {
+            const provider = getMapProvider();
+            return provider ? this.$t(`mapprovider.${provider}`) : '';
+        },
+        mapProviderWebsite() {
+            return getMapWebsite();
+        },
         licenseLines() {
             return licenses.getLicense().replaceAll(/\r/g, '').split('\n');
         },

src/views/mobile/AboutPage.vue

@@ -2,13 +2,29 @@
     <f7-page>
         <f7-navbar :title="$t('About')" :back-link="$t('Back')"></f7-navbar>
 
-        <f7-list strong inset dividers class="margin-top">
+        <f7-block-title class="margin-top">{{ $t('global.app.title') }}</f7-block-title>
+        <f7-list strong inset dividers>
             <f7-list-item :title="$t('Version')" :after="version"></f7-list-item>
             <f7-list-item :title="$t('Build Time')" :after="buildTime" v-if="buildTime"></f7-list-item>
             <f7-list-item external :title="$t('Official Website')" link="https://github.com/mayswind/ezbookkeeping" target="_blank"></f7-list-item>
+            <f7-list-item external :title="$t('Report Issue')" link="https://github.com/mayswind/ezbookkeeping/issues" target="_blank"></f7-list-item>
             <f7-list-item :title="$t('License')" link="#" popup-open=".license-popup"></f7-list-item>
         </f7-list>
 
+        <f7-block-title class="margin-top" v-if="exchangeRatesData">{{ $t('Exchange Rates Data') }}</f7-block-title>
+        <f7-list strong inset dividers v-if="exchangeRatesData">
+            <f7-list-item external :title="$t('Provider')" :after="exchangeRatesData.dataSource"
+                          :link="exchangeRatesData.referenceUrl" target="_blank" v-if="exchangeRatesData.referenceUrl"></f7-list-item>
+            <f7-list-item :title="$t('Provider')" :after="exchangeRatesData.dataSource" v-if="!exchangeRatesData.referenceUrl"></f7-list-item>
+        </f7-list>
+
+        <f7-block-title class="margin-top" v-if="mapProviderName">{{ $t('Map') }}</f7-block-title>
+        <f7-list strong inset dividers v-if="mapProviderName">
+            <f7-list-item external :title="$t('Provider')" :after="mapProviderName"
+                          :link="mapProviderWebsite" target="_blank" v-if="mapProviderWebsite"></f7-list-item>
+            <f7-list-item :title="$t('Provider')" :after="mapProviderName" v-if="!mapProviderWebsite"></f7-list-item>
+        </f7-list>
+
         <f7-popup push with-subnavbar swipe-to-close swipe-handler=".swipe-handler" class="license-popup">
             <f7-page>
                 <f7-navbar>
@@ -43,12 +59,15 @@
 <script>
 import { mapStores } from 'pinia';
 import { useUserStore } from '@/stores/user.js';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import { getMapProvider } from '@/lib/server_settings.js';
+import { getMapWebsite } from '@/lib/map/index.js';
 import licenses from '@/lib/licenses.js';
 
 export default {
     computed: {
-        ...mapStores(useUserStore),
+        ...mapStores(useUserStore, useExchangeRatesStore),
         version() {
             return 'v' + this.$version;
         },
@@ -59,6 +78,16 @@ export default {
 
             return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.$buildTime);
         },
+        exchangeRatesData() {
+            return this.exchangeRatesStore.latestExchangeRates.data;
+        },
+        mapProviderName() {
+            const provider = getMapProvider();
+            return provider ? this.$t(`mapprovider.${provider}`) : '';
+        },
+        mapProviderWebsite() {
+            return getMapWebsite();
+        },
         licenseLines() {
             return licenses.getLicense().replaceAll(/\r/g, '').split('\n');
         },