From 5d079e12080196c3e8b071acb74cc79697c910cc Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 8 Jun 2024 19:35:03 -0500 Subject: [PATCH 01/23] Tell user to refresh the page, if access to location has failed at least in my local firefox on laptop, it would not prompt user again until page was refreshed --- src/views/HomeView.vue | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 33b6d30..55872e0 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -11,6 +11,7 @@ export default { return { coordinates: null, loading: false, + locationAccessBlocked: false, } }, @@ -22,13 +23,19 @@ export default { useCurrentLocation() { - if (location.protocol == 'http:') { - alert("Sorry, this only works for secure sites.") + if (this.locationAccessBlocked) { + alert("You must refresh the page first, then try again.") + return } navigator.geolocation.getCurrentPosition(loc => { this.coordinates = `${loc.coords.latitude},${loc.coords.longitude}` this.loadCoordinates() + }, error => { + if (error.code == 1) { // PERMISSION_DENIED + this.locationAccessBlocked = true + } + alert(`error.code = ${error.code}\n\n${error.message}`) }) }, From b983a34bc99175fc85b255e7097972c5ac930450 Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 8 Jun 2024 19:35:45 -0500 Subject: [PATCH 02/23] Make buttons half-wide on home screen (desktop mode) having a button take up full screen width is a bit much --- src/views/HomeView.vue | 58 +++++++++++++++++++++++------------------- 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 55872e0..5f26d36 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -123,34 +123,40 @@ export default { -
- - {{ location.cityState }} - -
+
+
-
- - Edit List - -
+
+ + {{ location.cityState }} + +
-
-
- - Use My Current Location - +
+ + Edit List + +
+ +
+
+ + Use My Current Location + +
+ +
From fe411cd27c2a66cdbd097e4c402058fdfed41e5a Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 8 Jun 2024 19:37:04 -0500 Subject: [PATCH 03/23] Update changelog --- CHANGELOG.md | 5 +++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d5bbfb..4161ed0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +## 0.1.3 - 2024-06-08 +### Changed +- Tell user to refresh the page, if access to location has failed. +- Make buttons half-wide on home screen (desktop mode). + ## 0.1.2 - 2024-06-08 ### Added - Add "use my current location" button to home page. diff --git a/package-lock.json b/package-lock.json index 0a8f273..a6dee2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "myweather", - "version": "0.1.2", + "version": "0.1.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "myweather", - "version": "0.1.2", + "version": "0.1.3", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.2", diff --git a/package.json b/package.json index 33a440a..50074e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "myweather", - "version": "0.1.2", + "version": "0.1.3", "private": true, "type": "module", "scripts": { From f82540c677e3234821fecffd2a38833dfdb1a215 Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 8 Jun 2024 19:58:21 -0500 Subject: [PATCH 04/23] Fix horizontal scroll for main forecast panel --- src/views/WeatherView.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/WeatherView.vue b/src/views/WeatherView.vue index 3c1a66c..2d46308 100644 --- a/src/views/WeatherView.vue +++ b/src/views/WeatherView.vue @@ -82,7 +82,7 @@ export default {
+ style="display: flex; overflow-x: scroll;">
.weather-period { - width: 100px; + min-width: 100px; display: flex; flex-direction: column; align-items: center; From 757e5ce6c8e0b41cd800fe733aff82860639e82a Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 8 Jun 2024 19:58:59 -0500 Subject: [PATCH 05/23] Update changelog --- CHANGELOG.md | 4 ++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4161ed0..a7907dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +## 0.1.4 - 2024-06-08 +### Changed +- Fix horizontal scroll for main forecast panel. + ## 0.1.3 - 2024-06-08 ### Changed - Tell user to refresh the page, if access to location has failed. diff --git a/package-lock.json b/package-lock.json index a6dee2f..61bad3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "myweather", - "version": "0.1.3", + "version": "0.1.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "myweather", - "version": "0.1.3", + "version": "0.1.4", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.2", diff --git a/package.json b/package.json index 50074e1..ea0e9b9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "myweather", - "version": "0.1.3", + "version": "0.1.4", "private": true, "type": "module", "scripts": { From aa12f028a575615b992b41f35d3b5a3d26c27883 Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 8 Jun 2024 20:32:02 -0500 Subject: [PATCH 06/23] Tighten up the forecast period panels a bit --- src/views/WeatherView.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/views/WeatherView.vue b/src/views/WeatherView.vue index 2d46308..2c144a5 100644 --- a/src/views/WeatherView.vue +++ b/src/views/WeatherView.vue @@ -50,6 +50,10 @@ export default { this.coordinates = this.weatherStore.coordinates }, + getShortForecast(period) { + return period.shortForecast.replace(/Showers And Thunderstorms/g, 'T-storms') + }, + showHourly(period) { this.$router.push('/hourly') }, @@ -96,7 +100,7 @@ export default {
-

{{ period.shortForecast }}

+

{{ getShortForecast(period) }}

Hi @@ -138,7 +142,8 @@ export default { From 7ed314b5bf2e9eca6426427d971823e8f719810c Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 8 Jun 2024 21:31:18 -0500 Subject: [PATCH 09/23] Update changelog --- CHANGELOG.md | 4 ++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b9cce9..bf57eca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +## 0.1.6 - 2024-06-08 +### Changed +- Add proper About page. + ## 0.1.5 - 2024-06-08 ### Changed - Tighten up the forecast period panels a bit. diff --git a/package-lock.json b/package-lock.json index a58ac28..da7cc0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "myweather", - "version": "0.1.5", + "version": "0.1.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "myweather", - "version": "0.1.5", + "version": "0.1.6", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.2", diff --git a/package.json b/package.json index 0f433a3..c12ea00 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "myweather", - "version": "0.1.5", + "version": "0.1.6", "private": true, "type": "module", "scripts": { From 0710f2238cb3f0239c17f2a8466e9b3a20312044 Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 8 Jun 2024 23:16:29 -0500 Subject: [PATCH 10/23] Add basic support for active weather alerts yikes nobody should stake their life on how well this works, but it does seem to basically work.. --- src/router/index.js | 6 ++++ src/stores/weather.js | 67 +++++++++++++++++++++++++++++++++++++-- src/views/AlertsView.vue | 51 +++++++++++++++++++++++++++++ src/views/WeatherView.vue | 12 +++++++ 4 files changed, 134 insertions(+), 2 deletions(-) create mode 100644 src/views/AlertsView.vue diff --git a/src/router/index.js b/src/router/index.js index 464d998..7430367 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,6 +1,7 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' import WeatherView from '../views/WeatherView.vue' +import AlertsView from '../views/AlertsView.vue' import HourlyView from '../views/HourlyView.vue' import EditListView from '../views/EditListView.vue' @@ -17,6 +18,11 @@ const router = createRouter({ name: 'weather', component: WeatherView, }, + { + path: '/alerts', + name: 'alerts', + component: AlertsView, + }, { path: '/hourly', name: 'hourly', diff --git a/src/stores/weather.js b/src/stores/weather.js index c8c91ab..cf79fcf 100644 --- a/src/stores/weather.js +++ b/src/stores/weather.js @@ -10,6 +10,7 @@ const getDefaults = () => { coordinates, cityState, weather: null, + alerts: null, forecast: null, radarLatestURL: null, radarLoopURL: null, @@ -32,14 +33,17 @@ export const useWeatherStore = defineStore('weather', { this.setForecast(null) this.radarLatestURL = null this.radarLoopURL = null + this.alerts = null }, async getWeather() { if (!this.weather) { + let url + let response - const url = `https://api.weather.gov/points/${this.coordinates}` - const response = await fetch(url) + url = `https://api.weather.gov/points/${this.coordinates}` + response = await fetch(url) const weather = await response.json() if (weather.status == 404) { throw new Error(`Data not found for ${this.coordinates}`) @@ -57,6 +61,65 @@ export const useWeatherStore = defineStore('weather', { this.radarLoopURL = `https://radar.weather.gov/ridge/standard/${station}_loop.gif` this.setWeather(weather) + + // fetch zone to get its official id + url = weather.properties.forecastZone + response = await fetch(url) + const zone = await response.json() + + // fetch alerts for zone + url = `https://api.weather.gov/alerts/active/zone/${zone.properties.id}` + response = await fetch(url) + const zoneAlerts = await response.json() + + // fetch county to get its official id + url = weather.properties.county + response = await fetch(url) + const county = await response.json() + + // fetch alerts for county + url = `https://api.weather.gov/alerts/active/zone/${county.properties.id}` + response = await fetch(url) + const countyAlerts = await response.json() + + const newAlerts = {} + + // use latest timestamp from either zone or county + newAlerts.updated = zoneAlerts.updated + if (countyAlerts.updated > zoneAlerts.updated) { + newAlerts.updated = countyAlerts.updated + } + + // collect all alert "features" but de-duplicate them + newAlerts.features = {} + for (let feature of zoneAlerts.features) { + newAlerts.features[feature.properties.id] = feature + } + for (let feature of countyAlerts.features) { + newAlerts.features[feature.properties.id] = feature + } + newAlerts.features = Object.values(newAlerts.features) + + // put "likely" before "possible" alerts + newAlerts.features.sort((a, b) => { + + if (a.properties.certainty == 'Likely' && b.properties.certainty == 'Possible') { + return -1 + } + if (a.properties.certainty == 'Possible' && b.properties.certainty == 'Likely') { + return 1 + } + + // if (a.properties.certainty == b.properties.certainty) { + // return 0 + // } + + // TODO: what else should this do? + return 0 + }) + + // we have our final alerts + this.alerts = newAlerts } return this.weather diff --git a/src/views/AlertsView.vue b/src/views/AlertsView.vue new file mode 100644 index 0000000..a397565 --- /dev/null +++ b/src/views/AlertsView.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/src/views/WeatherView.vue b/src/views/WeatherView.vue index 2c144a5..4d30a98 100644 --- a/src/views/WeatherView.vue +++ b/src/views/WeatherView.vue @@ -10,6 +10,7 @@ export default { data() { return { coordinates: null, + alerts: null, } }, @@ -48,6 +49,7 @@ export default { const forecast = await this.weatherStore.getForecast() this.coordinates = this.weatherStore.coordinates + this.alerts = this.weatherStore.alerts }, getShortForecast(period) { @@ -77,6 +79,16 @@ export default { +

+ +

Watches In Effect

+

Updated {{ new Date(alerts.updated).toLocaleTimeString('en-US', {timeStyle: 'short'}) }}

+ +
+