diff --git a/src/components/MapOptionsControl.vue b/src/components/MapOptionsControl.vue index 26b81f9..bfb0c06 100644 --- a/src/components/MapOptionsControl.vue +++ b/src/components/MapOptionsControl.vue @@ -53,7 +53,9 @@ Recent spots - Alerts + Alerts for next + +
day(s)
Inactive summits @@ -112,7 +114,8 @@ export default { alerts () { let now = moment.utc() return this.$store.state.alerts.filter(alert => { - return (now.diff(alert.dateActivated) < MAX_ALERT_AGE) + let alertAge = now.diff(alert.dateActivated) + return (alertAge < MAX_ALERT_AGE && -alertAge <= this.mapOptions.alertDays * 24 * 60 * 60 * 1000) }).map(alert => { return alert.summit.code }) @@ -230,6 +233,22 @@ export default { background-color: #eee; font-size: 0.8rem; } +.map-option .field { + margin: 0.2rem 0.2rem 0.5rem 0.2rem; + line-height: 1; + align-items: center; +} +.map-option div.tlabel { + display: inline-block; + font-size: 0.75rem; +} +.map-option .alertDays { + margin-right: 0.5rem !important; +} +.map-option .alertDays >>> input { + width: 5em; + vertical-align: baseline; +} .maplibre-gl-map-options-container .map-options-container { display: none; padding: 0 0.5em 0.5em 0; diff --git a/src/store.js b/src/store.js index 0ad46f1..a718e5f 100644 --- a/src/store.js +++ b/src/store.js @@ -34,7 +34,8 @@ let mapOptions = { spots: false, inactive: false, webcams: false, - webcamsType: 'daylight' + webcamsType: 'daylight', + alertDays: 7 } let mapOptionsSettings = localStorage.getItem('mapOptions') if (mapOptionsSettings) {