[weather widget] refs #23399 #30436 show current weather and forecast

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

1 files changed, 100 insertions, 35 deletions

diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index 6fcc764ac97..cfe7eb3bb27 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -26,6 +26,10 @@
 				class="weather-status-menu-item__subheader"
 				:default-icon="weatherIcon"
 				:menu-title="visibleMessage">
+				<ActionText v-if="gotWeather"
+					:icon="futureWeatherIcon">
+					{{ forecastMessage }}
+				</ActionText>
 				<ActionLink v-if="gotWeather"
 					icon="icon-address"
 					target="_blank"
@@ -80,6 +84,7 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
+import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import * as network from './services/weatherStatusService'
 
 const MODE_BROWSER_LOCATION = 1
@@ -87,78 +92,112 @@ const MODE_MANUAL_LOCATION = 2
 const weatherOptions = {
 	clearsky_day: {
 		icon: 'icon-clearsky-day',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Clear sky at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} clear sky later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} clear sky', { temperature, unit }),
 	},
 	clearsky_night: {
 		icon: 'icon-clearsky-night',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Clear sky at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} clear sky later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} clear sky', { temperature, unit }),
 	},
 	cloudy: {
 		icon: 'icon-cloudy',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Cloudy at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} cloudy later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} cloudy', { temperature, unit }),
 	},
 	fair_day: {
 		icon: 'icon-fair-day',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Fair day at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} fair weather later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} fair weather', { temperature, unit }),
 	},
 	fair_night: {
 		icon: 'icon-fair-night',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Fair night at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} fair weather later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} fair weather', { temperature, unit }),
 	},
 	partlycloudy_day: {
 		icon: 'icon-partlycloudy-day',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Partly cloudy at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} partly cloudy later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} partly cloudy', { temperature, unit }),
 	},
 	partlycloudy_night: {
 		icon: 'icon-partlycloudy-night',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Partly cloudy at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} partly cloudy later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} partly cloudy', { temperature, unit }),
 	},
 	fog: {
 		icon: 'icon-fog',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Foggy at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} foggy later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} foggy', { temperature, unit }),
 	},
 	lightrain: {
 		icon: 'icon-lightrain',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Light rain at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} light rain later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} light rain', { temperature, unit }),
 	},
 	rain: {
 		icon: 'icon-rain',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Rain at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} rain later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} rain', { temperature, unit }),
 	},
 	heavyrain: {
 		icon: 'icon-heavyrain',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Heavy rain at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} heavy rain later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} heavy rain', { temperature, unit }),
 	},
 	rainshowers_day: {
 		icon: 'icon-rainshowers-day',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Rain showers at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} rain showers later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} rain showers', { temperature, unit }),
 	},
 	rainshowers_night: {
 		icon: 'icon-rainshowers-night',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Rain showers at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} rain showers later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} rain showers', { temperature, unit }),
 	},
 	lightrainshowers_day: {
 		icon: 'icon-light-rainshowers-day',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Light rain showers at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} light rain showers later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} light rain showers', { temperature, unit }),
 	},
 	lightrainshowers_night: {
 		icon: 'icon-light-rainshowers-night',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Light rain showers at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} light rain showers later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} light rain showers', { temperature, unit }),
 	},
 	heavyrainshowers_day: {
 		icon: 'icon-heavy-rainshowers-day',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Heavy rain showers at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} heavy rain showers later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} heavy rain showers', { temperature, unit }),
 	},
 	heavyrainshowers_night: {
 		icon: 'icon-heavy-rainshowers-night',
-		text: (temperature, unit, time) => t('weather_status', '{temperature} {unit} Heavy rain showers at {time}', { temperature, unit, time }),
+		text: (temperature, unit, later = false) => later
+			? t('weather_status', '{temperature} {unit} heavy rain showers later today', { temperature, unit })
+			: t('weather_status', '{temperature} {unit} heavy rain showers', { temperature, unit }),
 	},
 }
 
 export default {
 	name: 'App',
 	components: {
-		Actions, ActionButton, ActionInput, ActionLink, ActionSeparator,
+		Actions, ActionButton, ActionInput, ActionLink, ActionSeparator, ActionText,
 	},
 	props: {
 		inline: {
@@ -175,6 +214,8 @@ export default {
 			address: null,
 			lat: null,
 			lon: null,
+			// how many hours ahead do we want to see the forecast?
+			offset: 5,
 			forecasts: [],
 			loop: null,
 			favorites: [],
@@ -191,25 +232,19 @@ export default {
 		locationText() {
 			return t('weather_status', 'More weather for {adr}', { adr: this.address })
 		},
-		sixHoursTempForecast() {
-			return this.forecasts.length > 5 ? this.forecasts[5].data.instant.details.air_temperature : ''
+		temperature() {
+			return this.forecasts.length > 0 ? this.forecasts[0].data.instant.details.air_temperature : ''
 		},
-		sixHoursWeatherForecast() {
-			return this.forecasts.length > 5 ? this.forecasts[5].data.next_1_hours.summary.symbol_code : ''
-		},
-		sixHoursFormattedTime() {
-			if (this.forecasts.length > 5) {
-				const date = moment(this.forecasts[5].time)
-				return date.format('LT')
-			}
-			return ''
+		weatherCode() {
+			console.debug('weatherCode', this.forecasts[0].data.next_1_hours.summary.symbol_code)
+			return this.forecasts.length > 0 ? this.forecasts[0].data.next_1_hours.summary.symbol_code : ''
 		},
 		weatherIcon() {
 			if (this.loading) {
 				return 'icon-loading-small'
 			} else {
-				return this.sixHoursWeatherForecast && this.sixHoursWeatherForecast in weatherOptions
-					? weatherOptions[this.sixHoursWeatherForecast].icon
+				return this.weatherCode && this.weatherCode in weatherOptions
+					? weatherOptions[this.weatherCode].icon
 					: 'icon-fair-day'
 			}
 		},
@@ -224,11 +259,38 @@ export default {
 			} else if (this.errorMessage) {
 				return this.errorMessage
 			} else {
-				return this.sixHoursWeatherForecast && this.sixHoursWeatherForecast in weatherOptions
-					? weatherOptions[this.sixHoursWeatherForecast].text(
-						this.getLocalizedTemperature(this.sixHoursTempForecast),
+				return this.weatherCode && this.weatherCode in weatherOptions
+					? weatherOptions[this.weatherCode].text(
+						this.getLocalizedTemperature(this.temperature),
+						this.temperatureUnit
+					)
+					: t('weather_status', 'Set location for weather')
+			}
+		},
+		futureTemperature() {
+			return this.forecasts.length > (this.offset - 1) ? this.forecasts[this.offset].data.instant.details.air_temperature : ''
+		},
+		futureWeatherCode() {
+			return this.forecasts.length > (this.offset - 1) ? this.forecasts[this.offset].data.next_1_hours.summary.symbol_code : ''
+		},
+		futureWeatherIcon() {
+			if (this.loading) {
+				return 'icon-loading-small'
+			} else {
+				return this.futureWeatherCode && this.futureWeatherCode in weatherOptions
+					? weatherOptions[this.futureWeatherCode].icon
+					: 'icon-fair-day'
+			}
+		},
+		forecastMessage() {
+			if (this.loading) {
+				return t('weather_status', 'Loading weather')
+			} else {
+				return this.futureWeatherCode && this.futureWeatherCode in weatherOptions
+					? weatherOptions[this.futureWeatherCode].text(
+						this.getLocalizedTemperature(this.futureTemperature),
 						this.temperatureUnit,
-						this.sixHoursFormattedTime,
+						true
 					)
 					: t('weather_status', 'Set location for weather')
 			}
@@ -452,6 +514,9 @@ export default {
 				this.setAddress(favAddress)
 			}
 		},
+		formatTime(time) {
+			return moment(time).format('LT')
+		},
 	},
 }
 </script>