geophystech#137 Modal Map

Author: Arman Badalyan

package-lock.json

@@ -28,8 +28,8 @@
     "leaflet-zoomhome": "github:armd-pro/leaflet.zoomhome",
     "leaflet.gridlayer.googlemutant": "^0.7.1",
     "leaflet.markercluster": "^1.4.1",
-    "vue": "^2.5.21",
-    "vue-analytics": "^5.16.1",
+    "vue": "^2.5.22",
+    "vue-analytics": "^5.16.2",
     "vue-axios": "^2.1.4",
     "vue-chartjs": "^2.8.7",
     "vue-flatpickr-component": "^7.0.6",
@@ -40,7 +40,7 @@
     "vue-simple-spinner": "^1.2.8",
     "vue-toasted": "^1.1.26",
     "vue-yandex-metrika": "^1.7.2",
-    "vuex": "^3.0.1",
+    "vuex": "^3.1.0",
     "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
@@ -56,10 +56,10 @@
     "babel-register": "^6.22.0",
     "bootstrap-vue": "^2.0.0-rc.11",
     "chai": "^3.5.0",
-    "chalk": "^2.4.1",
+    "chalk": "^2.4.2",
     "chromedriver": "^2.45.0",
     "compression-webpack-plugin": "^1.1.12",
-    "connect-history-api-fallback": "^1.3.0",
+    "connect-history-api-fallback": "^1.6.0",
     "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^5.2.0",
     "cross-spawn": "^5.0.1",
@@ -107,14 +107,14 @@
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.18.2",
     "url-loader": "^1.1.2",
-    "vue-loader": "^14.2.3",
+    "vue-loader": "^14.2.4",
     "vue-style-loader": "^3.1.2",
     "vue-template-compiler": "^2.5.21",
-    "webpack": "^4.28.3",
+    "webpack": "^4.29.0",
     "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-dev-middleware": "^3.4.0",
+    "webpack-dev-middleware": "^3.5.1",
     "webpack-hot-middleware": "^2.24.3",
-    "webpack-merge": "^4.1.5"
+    "webpack-merge": "^4.2.1"
   },
   "engines": {
     "node": ">= 4.0.0",

package.json

@@ -33,7 +33,8 @@
 </template>
 
 <script>
-  import { round } from '@/helpers/math.js'
+  import apiSettings from '@/settings/app'
+  import { round } from '@/helpers/math'
 
   export default {
     props: ['event'],
@@ -44,7 +45,7 @@
     },
     methods: {
       fetchEvents: function() {
-        this.$http.get(this.$root.$options.settings.api.endpointEvents, {
+        this.$http.get(apiSettings.endpointEvents, {
           params: {
             datetime_min: this.$moment.utc().subtract(6, 'months').format('YYYY-MM-DD 00:00:00'),
             include: 'nearestCity',
@@ -64,7 +65,9 @@
               this.events.push(event)
             })
           })
-          .catch(error => { console.log(error) })
+          .catch(error => {
+            console.log(error.response)
+          })
       },
       highlightEvent: function(id) {
         if (this.event) return id === this.event.id
@@ -79,12 +82,9 @@
 </script>
 
 <style lang="scss" scoped>
-  $color-blue: #337ab7;
-  $color-gray-dark: #444;
-  $color-gray-light: #dfdfdf;
-  $color-gray-light-2: #999;
-  $color-orange: #ff7300;
-  $color-white-2: #faf9f9;
+
+  @import '~scss/_variables';
+
   $border: 1px $color-gray-light solid;
 
   .last-events {

src/components/event/LastEvents.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="modal-map">
-    <b-btn size="sm" v-b-modal.map-dialog>Показать на карте</b-btn>
+    <b-btn size="sm" id="map-dialog-btn" v-b-modal.map-dialog>Показать на карте</b-btn>
     <b-modal
       id="map-dialog"
       size="lg"
@@ -17,6 +17,7 @@
 
 <script>
   import {createMap, createMapEventMarker} from '@/map_functions'
+  import apiSettings from '@/settings/app'
 
   export default {
     name: 'ModalMap',
@@ -115,7 +116,7 @@
 
         }.bind(this)
 
-        _getEvents(this.$root.$options.settings.api.endpointEventsLight)
+        _getEvents(apiSettings.endpointEventsLight)
       }
     }
   }
@@ -128,7 +129,7 @@
 <style lang="scss" scoped>
 
   @import '~scss/_variables';
-  @import '~scss/mixins/_calc';
+  @import '~scss/_mixins';
 
   .modal-map
   {

src/components/maps/ModalMap.vue

@@ -4,6 +4,7 @@
 
 <script>
   import { addEpicenter, createMap, id, convertMsk64, msk64Color, removeEpicenter, setView } from '@/map_functions.js'
+  import apiSettings from '@/settings/app'
 
   export default {
     props: ['event', 'tab'],
@@ -54,7 +55,7 @@
         this.map.object = createMap(this.map.id, this.coordinates)
       },
       fetchData: function() {
-        this.$http.get(this.$root.$options.settings.api.endpointEventMsk64(this.event.id))
+        this.$http.get(apiSettings.endpointEventMsk64(this.event.id))
           .then(response => { this.addData(response.data.data) })
           .catch(error => { console.log(error) })
       },