kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
Add option to show alerts on map and in summit popups
Manuel Kasper
rodzic
a01ae83e5b
commit
4b827c1d16
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue