show provider of exchange rates data and map in about page

This commit is contained in:
MaysWind
2024-06-29 14:09:47 +08:00
parent 02a5dcf9ba
commit 2d51f7b2be
9 changed files with 158 additions and 4 deletions
+7
View File
@@ -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>'
}
}
+4
View File
@@ -11,6 +11,10 @@ const amapHolder = {
AMap: null
};
export function getAmapWebsite() {
return 'https://www.amap.com';
}
export function loadAmapAssets() {
if (amapHolder.AMap) {
return;
+4
View File
@@ -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;
+4
View File
@@ -8,6 +8,10 @@ const googleMapHolder = {
}
};
export function getGoogleMapWebsite() {
return 'https://maps.google.com';
}
export function loadGoogleMapAssets(language) {
if (googleMapHolder.googleMap) {
return;
+17
View File
@@ -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);
+16
View File
@@ -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',
+16
View File
@@ -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': '参数错误',
+59 -2
View File
@@ -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');
},
+31 -2
View File
@@ -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');
},