Merge pull request #30496 from nextcloud/enh/23399/current-weather

Show current weather and forecast in the weather widget

apps/weather_status/src/App.vue

 			<Actions
 				class="weather-status-menu-item__subheader"
 				:default-icon="weatherIcon"
-				:menu-title="visibleMessage">
+				:menu-title="currentWeatherMessage">
+				<ActionText v-if="gotWeather"
+					:icon="futureWeatherIcon">
+					{{ forecastMessage }}
+				</ActionText>
 				<ActionLink v-if="gotWeather"
 					icon="icon-address"
 					target="_blank"
 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
 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: {
 			address: null,
 			lat: null,
 			lon: null,
+			// how many hours ahead do we want to see the forecast?
+			offset: 5,
 			forecasts: [],
 			loop: null,
 			favorites: [],
 		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.getTemperature(this.forecasts, 0)
 		},
-		sixHoursWeatherForecast() {
-			return this.forecasts.length > 5 ? this.forecasts[5].data.next_1_hours.summary.symbol_code : ''
+		futureTemperature() {
+			return this.getTemperature(this.forecasts, this.offset)
 		},
-		sixHoursFormattedTime() {
-			if (this.forecasts.length > 5) {
-				const date = moment(this.forecasts[5].time)
-				return date.format('LT')
-			}
-			return ''
+		weatherCode() {
+			return this.getWeatherCode(this.forecasts, 0)
+		},
+		futureWeatherCode() {
+			return this.getWeatherCode(this.forecasts, this.offset)
 		},
 		weatherIcon() {
-			if (this.loading) {
-				return 'icon-loading-small'
-			} else {
-				return this.sixHoursWeatherForecast && this.sixHoursWeatherForecast in weatherOptions
-					? weatherOptions[this.sixHoursWeatherForecast].icon
-					: 'icon-fair-day'
-			}
+			return this.getWeatherIcon(this.weatherCode, this.loading)
+		},
+		futureWeatherIcon() {
+			return this.getWeatherIcon(this.futureWeatherCode, this.loading)
 		},
 		/**
 		 * The message displayed in the top right corner
 		 *
 		 * @returns {String}
 		 */
-		visibleMessage() {
+		currentWeatherMessage() {
 			if (this.loading) {
 				return t('weather_status', 'Loading weather')
 			} else if (this.errorMessage) {
 				return this.errorMessage
 			} else {
-				return this.sixHoursWeatherForecast && this.sixHoursWeatherForecast in weatherOptions
-					? weatherOptions[this.sixHoursWeatherForecast].text(
-						this.getLocalizedTemperature(this.sixHoursTempForecast),
-						this.temperatureUnit,
-						this.sixHoursFormattedTime,
-					)
-					: t('weather_status', 'Set location for weather')
+				return this.getWeatherMessage(this.weatherCode, this.temperature)
+			}
+		},
+		forecastMessage() {
+			if (this.loading) {
+				return t('weather_status', 'Loading weather')
+			} else {
+				return this.getWeatherMessage(this.futureWeatherCode, this.futureTemperature, true)
 			}
 		},
 		weatherLinkTarget() {
 				this.setAddress(favAddress)
 			}
 		},
+		formatTime(time) {
+			return moment(time).format('LT')
+		},
+		getTemperature(forecasts, offset = 0) {
+			return forecasts.length > offset ? forecasts[offset].data.instant.details.air_temperature : ''
+		},
+		getWeatherCode(forecasts, offset = 0) {
+			return forecasts.length > offset ? forecasts[offset].data.next_1_hours.summary.symbol_code : ''
+		},
+		getWeatherIcon(weatherCode, loading) {
+			if (loading) {
+				return 'icon-loading-small'
+			} else {
+				return weatherCode && weatherCode in weatherOptions
+					? weatherOptions[weatherCode].icon
+					: 'icon-fair-day'
+			}
+		},
+		getWeatherMessage(weatherCode, temperature, later = false) {
+			return weatherCode && weatherCode in weatherOptions
+				? weatherOptions[weatherCode].text(
+					this.getLocalizedTemperature(temperature),
+					this.temperatureUnit,
+					later
+				)
+				: t('weather_status', 'Set location for weather')
+		},
 	},
 }
 </script>