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