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

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
pull/30496/head
Julien Veyssier 2 years ago
parent 773c407965
commit 3f7ab0ca83
No known key found for this signature in database
GPG Key ID: 4141FEE162030638

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

Loading…
Cancel
Save