From 4b827c1d163ea4743d5fac05da7e4ff0160d0c98 Mon Sep 17 00:00:00 2001
From: Manuel Kasper <mk@neon1.net>
Date: Wed, 25 May 2022 10:31:25 +0200
Subject: [PATCH] Add option to show alerts on map and in summit popups

---
 src/assets/norkart.json              | 17 +++++++++++++---
 src/assets/openmaptiles.json         | 17 +++++++++++++---
 src/assets/swisstopo.json            | 17 +++++++++++++---
 src/assets/swisstopo_aerial.json     | 17 +++++++++++++---
 src/assets/swisstopo_raster.json     | 17 +++++++++++++---
 src/assets/toposvalbard.json         | 17 +++++++++++++---
 src/components/MapOptionsControl.vue | 29 ++++++++++++++++++++++++++++
 src/components/SummitPopup.vue       | 23 +++++++++++++++++++++-
 src/views/Map.vue                    | 24 ++++++++++++++++++++++-
 9 files changed, 158 insertions(+), 20 deletions(-)

diff --git a/src/assets/norkart.json b/src/assets/norkart.json
index 16c262b..73c7586 100644
--- a/src/assets/norkart.json
+++ b/src/assets/norkart.json
@@ -193,9 +193,20 @@
         "circle-color": "rgba(2, 243, 198, 1)",
         "circle-radius": {"stops": [[6, 15], [20, 50]]},
         "circle-opacity": 0.75,
-        "circle-stroke-color": "rgba(210, 255, 0, 0.05)",
-        "circle-stroke-width": 0,
-        "circle-stroke-opacity": 1,
+        "circle-blur": 0.7
+      }
+    },
+    {
+      "id": "summits_highlight_alerts",
+      "type": "circle",
+      "source": "summits",
+      "source-layer": "summits",
+      "filter": ["all", ["in", "code"]],
+      "layout": {"visibility": "visible"},
+      "paint": {
+        "circle-color": "rgba(210, 255, 0, 1)",
+        "circle-radius": {"stops": [[6, 15], [20, 50]]},
+        "circle-opacity": 0.55,
         "circle-blur": 0.7
       }
     },
diff --git a/src/assets/openmaptiles.json b/src/assets/openmaptiles.json
index dec8829..af7b8ac 100644
--- a/src/assets/openmaptiles.json
+++ b/src/assets/openmaptiles.json
@@ -2259,9 +2259,20 @@
         "circle-color": "rgba(2, 243, 198, 1)",
         "circle-radius": {"stops": [[6, 15], [20, 50]]},
         "circle-opacity": 0.75,
-        "circle-stroke-color": "rgba(210, 255, 0, 0.05)",
-        "circle-stroke-width": 0,
-        "circle-stroke-opacity": 1,
+        "circle-blur": 0.7
+      }
+    },
+    {
+      "id": "summits_highlight_alerts",
+      "type": "circle",
+      "source": "summits",
+      "source-layer": "summits",
+      "filter": ["all", ["in", "code"]],
+      "layout": {"visibility": "visible"},
+      "paint": {
+        "circle-color": "rgba(210, 255, 0, 1)",
+        "circle-radius": {"stops": [[6, 15], [20, 50]]},
+        "circle-opacity": 0.55,
         "circle-blur": 0.7
       }
     },
diff --git a/src/assets/swisstopo.json b/src/assets/swisstopo.json
index a05d735..7e290a9 100644
--- a/src/assets/swisstopo.json
+++ b/src/assets/swisstopo.json
@@ -5866,9 +5866,20 @@
         "circle-color": "rgba(2, 243, 198, 1)",
         "circle-radius": {"stops": [[6, 15], [20, 50]]},
         "circle-opacity": 0.75,
-        "circle-stroke-color": "rgba(210, 255, 0, 0.05)",
-        "circle-stroke-width": 0,
-        "circle-stroke-opacity": 1,
+        "circle-blur": 0.7
+      }
+    },
+    {
+      "id": "summits_highlight_alerts",
+      "type": "circle",
+      "source": "summits",
+      "source-layer": "summits",
+      "filter": ["all", ["in", "code"]],
+      "layout": {"visibility": "visible"},
+      "paint": {
+        "circle-color": "rgba(210, 255, 0, 1)",
+        "circle-radius": {"stops": [[6, 15], [20, 50]]},
+        "circle-opacity": 0.55,
         "circle-blur": 0.7
       }
     },
diff --git a/src/assets/swisstopo_aerial.json b/src/assets/swisstopo_aerial.json
index e2436a0..de571b0 100644
--- a/src/assets/swisstopo_aerial.json
+++ b/src/assets/swisstopo_aerial.json
@@ -325,9 +325,20 @@
         "circle-color": "rgba(2, 243, 198, 1)",
         "circle-radius": {"stops": [[6, 15], [20, 50]]},
         "circle-opacity": 0.75,
-        "circle-stroke-color": "rgba(210, 255, 0, 0.05)",
-        "circle-stroke-width": 0,
-        "circle-stroke-opacity": 1,
+        "circle-blur": 0.7
+      }
+    },
+    {
+      "id": "summits_highlight_alerts",
+      "type": "circle",
+      "source": "summits",
+      "source-layer": "summits",
+      "filter": ["all", ["in", "code"]],
+      "layout": {"visibility": "visible"},
+      "paint": {
+        "circle-color": "rgba(210, 255, 0, 1)",
+        "circle-radius": {"stops": [[6, 15], [20, 50]]},
+        "circle-opacity": 0.55,
         "circle-blur": 0.7
       }
     },
diff --git a/src/assets/swisstopo_raster.json b/src/assets/swisstopo_raster.json
index a2761bd..60c93ff 100644
--- a/src/assets/swisstopo_raster.json
+++ b/src/assets/swisstopo_raster.json
@@ -325,9 +325,20 @@
         "circle-color": "rgba(2, 243, 198, 1)",
         "circle-radius": {"stops": [[6, 15], [20, 50]]},
         "circle-opacity": 0.75,
-        "circle-stroke-color": "rgba(210, 255, 0, 0.05)",
-        "circle-stroke-width": 0,
-        "circle-stroke-opacity": 1,
+        "circle-blur": 0.7
+      }
+    },
+    {
+      "id": "summits_highlight_alerts",
+      "type": "circle",
+      "source": "summits",
+      "source-layer": "summits",
+      "filter": ["all", ["in", "code"]],
+      "layout": {"visibility": "visible"},
+      "paint": {
+        "circle-color": "rgba(210, 255, 0, 1)",
+        "circle-radius": {"stops": [[6, 15], [20, 50]]},
+        "circle-opacity": 0.55,
         "circle-blur": 0.7
       }
     },
diff --git a/src/assets/toposvalbard.json b/src/assets/toposvalbard.json
index 2d07bae..e273b6d 100644
--- a/src/assets/toposvalbard.json
+++ b/src/assets/toposvalbard.json
@@ -193,9 +193,20 @@
         "circle-color": "rgba(2, 243, 198, 1)",
         "circle-radius": {"stops": [[6, 15], [20, 50]]},
         "circle-opacity": 0.75,
-        "circle-stroke-color": "rgba(210, 255, 0, 0.05)",
-        "circle-stroke-width": 0,
-        "circle-stroke-opacity": 1,
+        "circle-blur": 0.7
+      }
+    },
+    {
+      "id": "summits_highlight_alerts",
+      "type": "circle",
+      "source": "summits",
+      "source-layer": "summits",
+      "filter": ["all", ["in", "code"]],
+      "layout": {"visibility": "visible"},
+      "paint": {
+        "circle-color": "rgba(210, 255, 0, 1)",
+        "circle-radius": {"stops": [[6, 15], [20, 50]]},
+        "circle-opacity": 0.55,
         "circle-blur": 0.7
       }
     },
diff --git a/src/components/MapOptionsControl.vue b/src/components/MapOptionsControl.vue
index 0cbaca2..949c781 100644
--- a/src/components/MapOptionsControl.vue
+++ b/src/components/MapOptionsControl.vue
@@ -51,6 +51,9 @@
         <b-field grouped>
           <b-checkbox v-model="mapOptions.spots" size="is-small" @input="setMapOption('spots', $event)">Recent spots</b-checkbox>
         </b-field>
+        <b-field grouped>
+          <b-checkbox v-model="mapOptions.alerts" size="is-small" @input="setMapOption('alerts', $event)">Alerts</b-checkbox>
+        </b-field>
         <b-field grouped>
           <b-checkbox v-model="mapOptions.inactive" size="is-small" @input="setMapOption('inactive', $event)">Inactive summits</b-checkbox>
         </b-field>
@@ -74,6 +77,7 @@ import mapstyle from '../mixins/mapstyle.js'
 import prefs from '../mixins/prefs.js'
 
 const RECENT_SPOT_AGE = 30 * 60 * 1000
+const MAX_ALERT_AGE = 3 * 60 * 60 * 1000
 
 export default {
   name: 'MapOptionsControl',
@@ -104,6 +108,14 @@ export default {
         return spot.summit.code
       })
     },
+    alerts () {
+      let now = moment.utc()
+      return this.$store.state.alerts.filter(alert => {
+        return (now.diff(alert.dateActivated) < MAX_ALERT_AGE)
+      }).map(alert => {
+        return alert.summit.code
+      })
+    },
     mapType: {
       get () {
         return this.$store.state.mapType
@@ -123,9 +135,16 @@ export default {
       },
       immediate: true
     },
+    alerts: {
+      handler () {
+        this.updateAlerts()
+      },
+      immediate: true
+    },
     mapOptions: {
       handler () {
         this.updateRecentSpots()
+        this.updateAlerts()
       },
       deep: true
     },
@@ -149,9 +168,19 @@ export default {
         this.map.setFilter('summits_highlight', ['in', 'code'])
       }
     },
+    updateAlerts () {
+      if (this.mapOptions.alerts) {
+        this.map.setFilter('summits_highlight_alerts', ['in', 'code', ...this.alerts])
+      } else {
+        this.map.setFilter('summits_highlight_alerts', ['in', 'code'])
+      }
+    },
     spotsShown () {
       return this.mapOptions.spots
     },
+    alertsShown () {
+      return this.mapOptions.alerts
+    },
     openCloseMapOptions () {
       this.open = !this.open
     },
diff --git a/src/components/SummitPopup.vue b/src/components/SummitPopup.vue
index 6809639..0e6e9a1 100644
--- a/src/components/SummitPopup.vue
+++ b/src/components/SummitPopup.vue
@@ -13,6 +13,7 @@
         <tr><th>Activations</th><td>{{ summit.activationCount }}</td></tr>
         <tr v-if="summit.activationDate"><th>Last activation</th><td>{{ summit.activationDate | formatActivationDate }} (<router-link :to="makeActivatorLink(summit.activationCall)">{{ summit.activationCall }}</router-link>)</td></tr>
         <tr v-if="lastSpot"><th>Last spot</th><td><span v-html="formatTimeDay(lastSpot.timeStamp)" />: <router-link :to="makeActivatorLink(lastSpot.activatorCallsign)">{{ lastSpot.activatorCallsign }}</router-link>, {{ lastSpot.frequency }} <ModeLabel :mode="lastSpot.mode" /></td></tr>
+        <tr v-if="nextAlert" class="nextAlert"><th>Next alert</th><td><span v-html="formatDateTimeRelative(nextAlert.dateActivated)" />: <router-link :to="makeActivatorLink(nextAlert.activatorCallsign)">{{ nextAlert.activatorCallsign }}</router-link><div v-if="nextAlert.frequency" class="alertFrequencies">{{ nextAlert.frequency }}</div><div v-if="nextAlert.comments" class="alertComments">{{ nextAlert.comments }}</div></td></tr>
       </table>
       <div class="buttons">
         <b-button v-if="!minimizePopup" size="is-small" icon-left="window-close" @click="$emit('close')">Close</b-button>
@@ -36,7 +37,8 @@ export default {
   name: 'SummitPopup',
   props: {
     summit: Object,
-    lastSpot: Object
+    lastSpot: Object,
+    nextAlert: Object
   },
   mixins: [utils, coverphoto],
   components: {
@@ -97,6 +99,25 @@ export default {
 .summitPopup.minimize .summitCode {
   display: none;
 }
+.summitPopup .nextAlert >>> .date-small {
+  font-size: 100%;
+  min-width: 0;
+}
+.summitPopup .alertFrequencies {
+  font-size: 0.9em;
+  margin-top: 0.1em;
+  max-width: 25em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.summitPopup .alertComments {
+  font-size: 0.9em;
+  margin-top: 0.1em;
+  max-width: 25em;
+  color: #777;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .photo {
   width: 300px;
   padding-bottom: 0.5em;
diff --git a/src/views/Map.vue b/src/views/Map.vue
index 7ea2415..472cc3a 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -20,7 +20,7 @@
         </div>
       </MglPopup>
 
-      <SummitPopup v-if="summit" :summit="summit" :lastSpot="lastSummitSpot" @close="onPopupClosed" />
+      <SummitPopup v-if="summit" :summit="summit" :lastSpot="lastSummitSpot" :nextAlert="nextSummitAlert" @close="onPopupClosed" />
 
       <MapRoute v-for="route in persistentRoutes" :key="route.id" :route="route" />
 
@@ -194,6 +194,28 @@ export default {
         return null
       }
     },
+    nextSummitAlert () {
+      if (!this.summit) {
+        return null
+      }
+
+      let alerts = this.$store.state.alerts.filter(alert => {
+        return (alert.summit.code === this.summit.code)
+      }).sort((a, b) => {
+        if (a.dateActivated > b.dateActivated) {
+          return 1
+        } else if (a.dateActivated < b.dateActivated) {
+          return -1
+        } else {
+          return 0
+        }
+      })
+      if (alerts.length > 0) {
+        return alerts[0]
+      } else {
+        return null
+      }
+    },
     mapOptions () {
       return this.$store.state.mapOptions
     }