code refactor

src/components/common/MapView.vue

@@ -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>

src/components/mobile/MapSheet.vue

@@ -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">
+        <f7-page-content class="no-margin-vertical no-padding-vertical">
-            <div ref="map" style="height: 400px; width: 100%"></div>
+            <map-view ref="map" height="400px" :geo-location="geoLocation">
-        </f7-page-content>
+                <template #error-title="{ mapSupported, mapDependencyLoaded }">
-        <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="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"><b>{{ mapErrorTitle }}</b></div>
+                        <div class="ebk-sheet-title" v-else-if="!mapDependencyLoaded"><b>{{ $t('Cannot Initialize Map') }}</b></div>
-            </div>
+                        <div class="ebk-sheet-title" v-else></div>
-            <div class="padding-horizontal padding-bottom">
+                    </div>
-                <p class="no-margin">{{ mapErrorContent }}</p>
+                </template>
-                <div class="margin-top text-align-center">
+                <template #error-content>
-                    <f7-link @click="close" :text="$t('Close')"></f7-link>
+                    <div class="padding-horizontal padding-bottom">
-                </div>
+                        <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>
+                        <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() {
+        geoLocation: {
-            if (!this.mapSupported) {
+            get: function () {
-                return this.$t('Unsupported Map Provider');
+                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;
+            this.$refs.map.init();
-            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);
-            }
         },
         onSheetClosed() {
             this.close();

src/desktop-main.js

@@ -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);

src/mobile-main.js

@@ -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);