code refactor
This commit is contained in:
MaysWind
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div ref="mapContainer" style="width: 100%" :style="{ 'height': mapHeight }"></div>
|
||||
<slot name="error-title"
|
||||
:mapSupported="mapSupported" :mapDependencyLoaded="mapDependencyLoaded"
|
||||
v-if="!mapSupported || !mapDependencyLoaded"></slot>
|
||||
<slot name="error-content"
|
||||
:mapSupported="mapSupported" :mapDependencyLoaded="mapDependencyLoaded"
|
||||
v-if="!mapSupported || !mapDependencyLoaded"></slot>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
createMapHolder,
|
||||
initMapInstance,
|
||||
setMapCenterTo,
|
||||
setMapCenterMarker,
|
||||
removeMapCenterMarker
|
||||
} from '@/lib/map/index.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'height',
|
||||
'geoLocation'
|
||||
],
|
||||
expose: [
|
||||
'init'
|
||||
],
|
||||
data() {
|
||||
this.mapHolder = createMapHolder();
|
||||
|
||||
return {
|
||||
mapSupported: !!this.mapHolder,
|
||||
mapDependencyLoaded: this.mapHolder && this.mapHolder.dependencyLoaded,
|
||||
mapInited: false,
|
||||
initCenter: {
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
},
|
||||
zoomLevel: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mapHeight() {
|
||||
if (this.mapSupported && this.mapDependencyLoaded) {
|
||||
return this.height;
|
||||
}
|
||||
|
||||
return '0';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let isFirstInit = false;
|
||||
let centerChanged = false;
|
||||
|
||||
if (!this.mapSupported || !this.mapDependencyLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.geoLocation && (this.geoLocation.longitude || this.geoLocation.latitude)) {
|
||||
if (this.initCenter.latitude !== this.geoLocation.latitude || this.initCenter.longitude !== this.geoLocation.longitude) {
|
||||
this.initCenter.latitude = this.geoLocation.latitude;
|
||||
this.initCenter.longitude = this.geoLocation.longitude;
|
||||
this.zoomLevel = this.mapHolder.defaultZoomLevel;
|
||||
|
||||
centerChanged = true;
|
||||
}
|
||||
} else if (!this.geoLocation || (!this.geoLocation.longitude && !this.geoLocation.latitude)) {
|
||||
if (this.initCenter.latitude || this.initCenter.longitude) {
|
||||
this.initCenter.latitude = 0;
|
||||
this.initCenter.longitude = 0;
|
||||
this.zoomLevel = this.mapHolder.minZoomLevel;
|
||||
|
||||
centerChanged = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.mapHolder.inited) {
|
||||
const languageInfo = this.$locale.getCurrentLanguageInfo();
|
||||
|
||||
initMapInstance(this.mapHolder, this.$refs.mapContainer, {
|
||||
language: languageInfo ? languageInfo.code : null,
|
||||
initCenter: this.initCenter,
|
||||
zoomLevel: this.zoomLevel,
|
||||
text: {
|
||||
zoomIn: this.$t('Zoom in'),
|
||||
zoomOut: this.$t('Zoom out'),
|
||||
}
|
||||
});
|
||||
|
||||
if (this.mapHolder.inited) {
|
||||
isFirstInit = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isFirstInit || centerChanged) {
|
||||
setMapCenterTo(this.mapHolder, this.initCenter, this.zoomLevel);
|
||||
}
|
||||
|
||||
if (centerChanged && this.zoomLevel > this.mapHolder.minZoomLevel) {
|
||||
setMapCenterMarker(this.mapHolder, this.initCenter);
|
||||
} else if (centerChanged && this.zoomLevel <= this.mapHolder.minZoomLevel) {
|
||||
removeMapCenterMarker(this.mapHolder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -8,32 +8,29 @@
|
||||
<f7-link :text="$t('Done')" @click="save"></f7-link>
|
||||
</div>
|
||||
</f7-toolbar>
|
||||
<f7-page-content class="no-margin-vertical no-padding-vertical" v-if="mapSupported && mapDependencyLoaded">
|
||||
<div ref="map" style="height: 400px; width: 100%"></div>
|
||||
</f7-page-content>
|
||||
<f7-page-content class="no-margin-top no-padding-top" v-else-if="!mapSupported || !mapDependencyLoaded">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div class="ebk-sheet-title"><b>{{ mapErrorTitle }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin">{{ mapErrorContent }}</p>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="close" :text="$t('Close')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
<f7-page-content class="no-margin-vertical no-padding-vertical">
|
||||
<map-view ref="map" height="400px" :geo-location="geoLocation">
|
||||
<template #error-title="{ mapSupported, mapDependencyLoaded }">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div class="ebk-sheet-title" v-if="!mapSupported"><b>{{ $t('Unsupported Map Provider') }}</b></div>
|
||||
<div class="ebk-sheet-title" v-else-if="!mapDependencyLoaded"><b>{{ $t('Cannot Initialize Map') }}</b></div>
|
||||
<div class="ebk-sheet-title" v-else></div>
|
||||
</div>
|
||||
</template>
|
||||
<template #error-content>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin">{{ $t('Please refresh the page and try again. If the error is still displayed, make sure that server map settings are set correctly.') }}</p>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="close" :text="$t('Close')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</map-view>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
createMapHolder,
|
||||
initMapInstance,
|
||||
setMapCenterTo,
|
||||
setMapCenterMarker,
|
||||
removeMapCenterMarker
|
||||
} from '@/lib/map/index.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'modelValue',
|
||||
@@ -43,34 +40,14 @@ export default {
|
||||
'update:modelValue',
|
||||
'update:show'
|
||||
],
|
||||
data() {
|
||||
this.mapHolder = createMapHolder();
|
||||
|
||||
return {
|
||||
mapSupported: !!this.mapHolder,
|
||||
mapDependencyLoaded: this.mapHolder && this.mapHolder.dependencyLoaded,
|
||||
mapInited: false,
|
||||
initCenter: {
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
},
|
||||
zoomLevel: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mapErrorTitle() {
|
||||
if (!this.mapSupported) {
|
||||
return this.$t('Unsupported Map Provider');
|
||||
geoLocation: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (value) {
|
||||
this.$emit('update:modelValue', value);
|
||||
}
|
||||
|
||||
if (!this.mapDependencyLoaded) {
|
||||
return this.$t('Cannot Initialize Map');
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
mapErrorContent() {
|
||||
return this.$t('Please refresh the page and try again. If the error is still displayed, make sure that server map settings are set correctly.');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -78,58 +55,7 @@ export default {
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
onSheetOpen() {
|
||||
let isFirstInit = false;
|
||||
let centerChanged = false;
|
||||
|
||||
if (!this.mapSupported || !this.mapDependencyLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.modelValue && (this.modelValue.longitude || this.modelValue.latitude)) {
|
||||
if (this.initCenter.latitude !== this.modelValue.latitude || this.initCenter.longitude !== this.modelValue.longitude) {
|
||||
this.initCenter.latitude = this.modelValue.latitude;
|
||||
this.initCenter.longitude = this.modelValue.longitude;
|
||||
this.zoomLevel = this.mapHolder.defaultZoomLevel;
|
||||
|
||||
centerChanged = true;
|
||||
}
|
||||
} else if (!this.modelValue || (!this.modelValue.longitude && !this.modelValue.latitude)) {
|
||||
if (this.initCenter.latitude || this.initCenter.longitude) {
|
||||
this.initCenter.latitude = 0;
|
||||
this.initCenter.longitude = 0;
|
||||
this.zoomLevel = this.mapHolder.minZoomLevel;
|
||||
|
||||
centerChanged = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.mapHolder.inited) {
|
||||
const languageInfo = this.$locale.getCurrentLanguageInfo();
|
||||
|
||||
initMapInstance(this.mapHolder, this.$refs.map, {
|
||||
language: languageInfo ? languageInfo.code : null,
|
||||
initCenter: this.initCenter,
|
||||
zoomLevel: this.zoomLevel,
|
||||
text: {
|
||||
zoomIn: this.$t('Zoom in'),
|
||||
zoomOut: this.$t('Zoom out'),
|
||||
}
|
||||
});
|
||||
|
||||
if (this.mapHolder.inited) {
|
||||
isFirstInit = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isFirstInit || centerChanged) {
|
||||
setMapCenterTo(this.mapHolder, this.initCenter, this.zoomLevel);
|
||||
}
|
||||
|
||||
if (centerChanged && this.zoomLevel > this.mapHolder.minZoomLevel) {
|
||||
setMapCenterMarker(this.mapHolder, this.initCenter);
|
||||
} else if (centerChanged && this.zoomLevel <= this.mapHolder.minZoomLevel) {
|
||||
removeMapCenterMarker(this.mapHolder);
|
||||
}
|
||||
this.$refs.map.init();
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.close();
|
||||
|
||||
@@ -79,6 +79,7 @@ import {
|
||||
} from '@/lib/i18n.js';
|
||||
|
||||
import PinCodeInput from '@/components/common/PinCodeInput.vue';
|
||||
import MapView from '@/components/common/MapView.vue';
|
||||
|
||||
import ItemIcon from '@/components/desktop/ItemIcon.vue';
|
||||
import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
|
||||
@@ -392,6 +393,7 @@ app.component('VueDatePicker', VueDatePicker);
|
||||
app.component('DraggableList', draggable);
|
||||
|
||||
app.component('PinCodeInput', PinCodeInput);
|
||||
app.component('MapView', MapView);
|
||||
|
||||
app.component('ItemIcon', ItemIcon);
|
||||
app.component('BtnVerticalGroup', BtnVerticalGroup);
|
||||
|
||||
@@ -90,6 +90,7 @@ import {
|
||||
} from '@/lib/ui.mobile.js';
|
||||
|
||||
import PinCodeInput from '@/components/common/PinCodeInput.vue';
|
||||
import MapView from '@/components/common/MapView.vue';
|
||||
|
||||
import ItemIcon from '@/components/mobile/ItemIcon.vue';
|
||||
import PieChart from '@/components/mobile/PieChart.vue';
|
||||
@@ -165,6 +166,7 @@ app.use(i18n);
|
||||
app.component('VueDatePicker', VueDatePicker);
|
||||
|
||||
app.component('PinCodeInput', PinCodeInput);
|
||||
app.component('MapView', MapView);
|
||||
|
||||
app.component('ItemIcon', ItemIcon);
|
||||
app.component('PieChart', PieChart);
|
||||
|
||||
Reference in New Issue
Block a user