show provider of exchange rates data and map in about page

src/consts/map.js

@@ -5,6 +5,7 @@ const leafletTileSources = {
         minZoom: 1,
         maxZoom: 19,
         defaultZoomLevel: 14,
+        website: 'https://www.openstreetmap.org',
         attribution : '&copy; <a href="https://www.openstreetmap.org/copyright" class="external" target="_blank">OpenStreetMap</a> contributors'
     },
     'openstreetmap-humanitarian': {
@@ -13,6 +14,7 @@ const leafletTileSources = {
         minZoom: 1,
         maxZoom: 19,
         defaultZoomLevel: 14,
+        website: 'https://www.hotosm.org',
         attribution : '&copy; <a href="https://www.openstreetmap.org/copyright" class="external" target="_blank">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" class="external" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" class="external" target="_blank">OpenStreetMap France</a>'
     },
     'opentopomap': {
@@ -21,6 +23,7 @@ const leafletTileSources = {
         minZoom: 1,
         maxZoom: 17,
         defaultZoomLevel: 14,
+        website: 'https://opentopomap.org',
         attribution : 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright" class="external" target="_blank">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org" class="external" target="_blank">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org" class="external" target="_blank">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/" class="external" target="_blank">CC-BY-SA</a>)'
     },
     'opnvkarte': {
@@ -29,6 +32,7 @@ const leafletTileSources = {
         minZoom: 1,
         maxZoom: 17,
         defaultZoomLevel: 14,
+        website: 'https://memomaps.de',
         attribution : 'Map <a href="https://memomaps.de/" class="external" target="_blank">memomaps.de</a> <a href="http://creativecommons.org/licenses/by-sa/2.0/" class="external" target="_blank">CC-BY-SA</a>, map data &copy; <a href="https://www.openstreetmap.org/copyright" class="external" target="_blank">OpenStreetMap</a> contributors'
     },
     'cyclosm': {
@@ -37,6 +41,7 @@ const leafletTileSources = {
         minZoom: 1,
         maxZoom: 19,
         defaultZoomLevel: 14,
+        website: 'https://github.com/cyclosm/cyclosm-cartocss-style',
         attribution : '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render" class="external" target="_blank">CyclOSM</a> | Map data: &copy; <a href="https://www.openstreetmap.org/copyright" class="external" target="_blank">OpenStreetMap</a> contributors'
     },
     'cartodb': {
@@ -45,6 +50,7 @@ const leafletTileSources = {
         minZoom: 1,
         maxZoom: 20,
         defaultZoomLevel: 14,
+        website: 'https://carto.com',
         attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" class="external" target="_blank">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions" class="external" target="_blank">CARTO</a>'
     },
     'tomtom': {
@@ -63,6 +69,7 @@ const leafletTileSources = {
         minZoom: 1,
         maxZoom: 19,
         defaultZoomLevel: 14,
+        website: 'https://tomtom.com',
         attribution : '<a href="https://tomtom.com" class="external" target="_blank">&copy;  1992 - 2023 TomTom.</a>'
     }
 }

src/lib/map/amap.js

@@ -11,6 +11,10 @@ const amapHolder = {
     AMap: null
 };
 
+export function getAmapWebsite() {
+    return 'https://www.amap.com';
+}
+
 export function loadAmapAssets() {
     if (amapHolder.AMap) {
         return;

src/lib/map/baidumap.js

@@ -10,6 +10,10 @@ const baiduMapHolder = {
     COORDINATES_BD09: window.COORDINATES_BD09 || 5
 };
 
+export function getBaiduMapWebsite() {
+    return 'https://map.baidu.com';
+}
+
 export function loadBaiduMapAssets() {
     if (baiduMapHolder.BMap) {
         return;

src/lib/map/googlemap.js

@@ -8,6 +8,10 @@ const googleMapHolder = {
     }
 };
 
+export function getGoogleMapWebsite() {
+    return 'https://maps.google.com';
+}
+
 export function loadGoogleMapAssets(language) {
     if (googleMapHolder.googleMap) {
         return;

src/lib/map/index.js

@@ -13,6 +13,7 @@ import {
 } from './leaflet.js';
 
 import {
+    getGoogleMapWebsite,
     loadGoogleMapAssets,
     createGoogleMapHolder,
     createGoogleMapInstance,
@@ -22,6 +23,7 @@ import {
 } from './googlemap.js';
 
 import {
+    getBaiduMapWebsite,
     loadBaiduMapAssets,
     createBaiduMapHolder,
     createBaiduMapInstance,
@@ -31,6 +33,7 @@ import {
 } from './baidumap.js';
 
 import {
+    getAmapWebsite,
     loadAmapAssets,
     createAmapHolder,
     createAmapInstance,
@@ -39,6 +42,20 @@ import {
     removeAmapCenterMaker
 } from './amap.js';
 
+export function getMapWebsite() {
+    if (getMapProvider() === 'custom') {
+        return '';
+    } else if (mapConstants.leafletTileSources[getMapProvider()]) {
+        return mapConstants.leafletTileSources[getMapProvider()].website;
+    } else if (getMapProvider() === 'googlemap') {
+        return getGoogleMapWebsite();
+    } else if (getMapProvider() === 'baidumap') {
+        return getBaiduMapWebsite();
+    } else if (getMapProvider() === 'amap') {
+        return getAmapWebsite();
+    }
+}
+
 export function loadMapAssets(language) {
     if (mapConstants.leafletTileSources[getMapProvider()] || getMapProvider() === 'custom') {
         return loadLeafletMapAssets(language);

src/locales/en.js

@@ -555,6 +555,19 @@ export default {
         'Reimbursement': 'Reimbursement',
         'Other Transfer': 'Other Transfer',
     },
+    'mapprovider': {
+        'openstreetmap': 'OpenStreetMap',
+        'openstreetmap-humanitarian': 'Humanitarian OpenStreetMap Team',
+        'opentopomap': 'OpenTopoMap',
+        'opnvkarte': 'MeMoMaps',
+        'cyclosm': 'CyclOSM',
+        'cartodb': 'CARTO',
+        'tomtom': 'TomTom',
+        'googlemap': 'Google Map',
+        'baidumap': 'Baidu Map',
+        'amap': 'Amap',
+        'custom': 'User Custom',
+    },
     'error': {
         'system error': 'System Error',
         'api not found': 'Failed to request api',
@@ -781,6 +794,8 @@ export default {
     'Area Chart': 'Area Chart',
     'Column Chart': 'Column Chart',
     'Sort by': 'Sort by',
+    'Map': 'Map',
+    'Provider': 'Provider',
     'User': 'User',
     'Application': 'Application',
     'Danger Zone': 'Danger Zone',
@@ -1250,6 +1265,7 @@ export default {
     'About': 'About',
     'Build Time': 'Build Time',
     'Official Website': 'Official Website',
+    'Report Issue': 'Report Issue',
     'License': 'License',
     'An error occurred': 'An error occurred',
     'Parameter Invalid': 'Parameter Invalid',

src/locales/zh_Hans.js

@@ -555,6 +555,19 @@ export default {
         'Reimbursement': '报销',
         'Other Transfer': '其他转账',
     },
+    'mapprovider': {
+        'openstreetmap': 'OpenStreetMap',
+        'openstreetmap-humanitarian': 'Humanitarian OpenStreetMap Team',
+        'opentopomap': 'OpenTopoMap',
+        'opnvkarte': 'MeMoMaps',
+        'cyclosm': 'CyclOSM',
+        'cartodb': 'CARTO',
+        'tomtom': 'TomTom',
+        'googlemap': 'Google 地图',
+        'baidumap': '百度地图',
+        'amap': '高德地图',
+        'custom': '用户自定义',
+    },
     'error': {
         'system error': '系统错误',
         'api not found': '接口调用失败',
@@ -781,6 +794,8 @@ export default {
     'Area Chart': '面积图',
     'Column Chart': '柱状图',
     'Sort by': '排序方式',
+    'Map': '地图',
+    'Provider': '提供者',
     'User': '用户',
     'Application': '应用',
     'Danger Zone': '危险区域',
@@ -1250,6 +1265,7 @@ export default {
     'About': '关于',
     'Build Time': '编译时间',
     'Official Website': '官方网站',
+    'Report Issue': '报告问题',
     'License': '许可协议',
     'An error occurred': '发生错误',
     'Parameter Invalid': '参数错误',

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');
         },