mirror of
https://github.com/nextcloud/server.git
synced 2026-06-09 00:32:29 -04:00
Merge pull request #30496 from nextcloud/enh/23399/current-weather
Show current weather and forecast in the weather widget
This commit is contained in:
Julien Veyssier
GitHub
commit
331edaf445
3 changed files with 213 additions and 106 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -25,7 +25,11 @@
|
|||
<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"
|
||||
|
|
@ -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,46 +232,43 @@ 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.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() {
|
||||
|
|
@ -452,6 +490,33 @@ export default {
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue