Chage map legend on main page to interactive buttons bar filter. Solv…

…e issue geophystech#270
avpp · Nov 14, 2018 · e57edb8 · e57edb8
1 parent 8f66d4b
commit e57edb8
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 15 deletions.
diff --git a/src/assets/scss/event_map.scss b/src/assets/scss/event_map.scss
@@ -50,11 +50,43 @@
       width: 15px;
     }
 
-    span {
+    @mixin one_item_color($selector, $bg_color, $border_color_tl, $border_color_br) {
+      &.#{$selector} {
+        background-color: $bg_color;
+        border-left: 2px solid $border_color_tl;
+        border-top: 2px solid $border_color_tl;
+        border-right: 2px solid $border_color_br;
+        border-bottom: 2px solid $border_color_br;
+      }
+    }
+    @mixin legend_colors($bg_colors, $border_colors_tl, $border_colors_br) {
+      @include one_item_color('less-1-day', nth($bg_colors, 1), nth($border_colors_tl, 1), nth($border_colors_br, 1))
+      @include one_item_color('less-5-days', nth($bg_colors, 2), nth($border_colors_tl, 2), nth($border_colors_br, 2))
+      @include one_item_color('less-14-days', nth($bg_colors, 3), nth($border_colors_tl, 3), nth($border_colors_br, 3))
+      @include one_item_color('more-14-days', nth($bg_colors, 4), nth($border_colors_tl, 4), nth($border_colors_br, 4))
+    }
+
+    @mixin legend_bg_colors($colors) {
+      &.less-1-day { background-color: nth($colors, 1) !important; }
+      &.less-5-days { background-color: nth($colors, 2) !important; }
+      &.less-14-days { background-color: nth($colors, 3) !important; }
+      &.more-14-days { background-color: nth($colors, 4) !important; }
+    }
+
+    .button {
       display: inline-block;
       padding: 5px;
       text-align: center;
       width: 70px;
+      background-color: white;
+      @include legend_colors((#FF0000, #FFA500, #FFFF00, #808080), (#FF3030, #FFD830, #FFFF30, #A0A0A0), (#AA0000, #AA5000, #AAAA00, #202020))
+      &:hover {
+        cursor: pointer;
+        @include legend_bg_colors((#F02020, #F0A510, #E0E020, #909090))
+      }
+      &.pressed {
+        @include legend_colors((#FF0000, #FFA500, #FFFF00, #808080), (#AA0000, #AA5000, #AAAA00, #202020), (#FF3030, #FFD830, #FFFF30, #A0A0A0))
+      }
     }
 
     .buildings-legend {

diff --git a/src/components/maps/Mainpage.vue b/src/components/maps/Mainpage.vue
@@ -13,12 +13,17 @@
           coordinates: [50.351, 142.395],
           id: 'map-mainpage',
           object: null,
+          eventSteps: [24, 120, 336],
           events: []
         }
       }
     },
     methods: {
       addEvents: function(events) {
+        const markersBasePane = this.map.object.getPane('markerPane')
+        for (let i = 0; i <= this.map.eventSteps.length; i++) {
+          this.map.object.createPane('markers_' + i, markersBasePane).style.zIndex = 600 + (i - 1) % (this.map.eventSteps.length + 1)
+        }
         events.reverse().forEach(event => {
           const datetime = this.$moment(event.locValues.data.event_datetime)
           const datetimeDiff = this.$moment.utc().diff(datetime, 'hours')
@@ -28,7 +33,10 @@
           const longitude = event.locValues.data.lon
           const magnitude = event.locValues.data.mag.toFixed(1)
           const magnitudeType = event.locValues.data.mag_t
+          const etn = this.eventTimeGroup(datetimeDiff) + 1
+          const paneName = 'markers_' + etn
           const options = {
+            pane: paneName,
             color: 'black',
             colorOpacity: 1.0,
             fillColor: this.eventColor(datetimeDiff),
@@ -79,13 +87,29 @@
 
         legend.onAdd = function() {
           let div = window.L.DomUtil.create('div', 'map-legend map-legend-mainpage')
-          div.innerHTML += '<span style="background:#FF0000;">< 24 ч</span>'
-          div.innerHTML += '<span style="background:#FFA500">1-5 дн</span>'
-          div.innerHTML += '<span style="background:#FFFF00">6-14 дн</span>'
-          div.innerHTML += '<span style="background:#808080">> 14 дн</span>'
+          const description = [
+            { text: '< 24 ч', class: 'less-1-day' },
+            { text: '1-5 дн', class: 'less-5-days' },
+            { text: '6-14 дн', class: 'less-14-days' },
+            { text: '> 14 дн', class: 'more-14-days' }
+          ]
+          for (let i = 0; i <= this.map.eventSteps.length; i++) {
+            let item = window.L.DomUtil.create('span', 'button pressed ' + description[i].class, div)
+            item.role = 'button'
+            item.textContent = description[i].text
+            item.dataset.group = (i + 1) % description.length
+            item.onclick = e => {
+              e.preventDefault()
+              let g = +e.currentTarget.dataset.group
+              let p = this.map.object.getPane('markers_' + g)
+              p.classList.toggle('invisible')
+              e.currentTarget.classList.toggle('pressed')
+              return false
+            }
+          }
 
           return div
-        }
+        }.bind(this)
 
         legend.addTo(this.map.object)
 
@@ -102,16 +126,16 @@
       createMap: function() {
         this.map.object = createMap(this.map.id, this.map.coordinates, 5, false)
       },
-      eventColor: function(timeDifference) {
-        if (timeDifference <= 24) {
-          return '#ff0000'
-        } else if (timeDifference > 24 && timeDifference <= 120) {
-          return '#ffa500'
-        } else if (timeDifference > 120 && timeDifference <= 336) {
-          return '#ffff00'
-        } else {
-          return '#808080'
+      eventTimeGroup: function(timeDifference) {
+        for (let i = 0; i < this.map.eventSteps.length; i++) {
+          if (timeDifference <= this.map.eventSteps[i]) {
+            return i
+          }
         }
+        return -1
+      },
+      eventColor: function(timeDifference) {
+        return ['#808080', '#ff0000', '#ffa500', '#ffff00'][this.eventTimeGroup(timeDifference) + 1]
       },
       eventRadius: function(magnitude) {
         if (magnitude < 3.0) {