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

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
This commit is contained in:
Julien Veyssier 2022-01-05 11:05:46 +01:00
parent 773c407965
commit 3f7ab0ca83
No known key found for this signature in database
GPG key ID: 4141FEE162030638
3 changed files with 204 additions and 97 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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>