diff options
Diffstat (limited to 'apps/weather_status/src/App.vue')
| -rw-r--r-- | apps/weather_status/src/App.vue | 503 |
1 files changed, 503 insertions, 0 deletions
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue new file mode 100644 index 00000000000..59db8600bf2 --- /dev/null +++ b/apps/weather_status/src/App.vue @@ -0,0 +1,503 @@ +<!-- + - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net> + - @author Julien Veyssier <eneiluj@posteo.net> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <li :class="{ inline }"> + <div id="weather-status-menu-item"> + <Actions + class="weather-status-menu-item__subheader" + :default-icon="weatherIcon" + :menu-title="visibleMessage"> + <ActionLink v-if="address && !errorMessage" + icon="icon-address" + target="_blank" + :href="weatherLinkTarget" + :close-after-click="true"> + {{ locationText }} + </ActionLink> + <ActionSeparator v-if="address && !errorMessage" /> + <ActionButton + icon="icon-crosshair" + :close-after-click="true" + @click="onBrowserLocationClick"> + {{ t('weather_status', 'Detect location') }} + </ActionButton> + <ActionInput + ref="addressInput" + :disabled="false" + icon="icon-rename" + type="text" + value="" + @submit="onAddressSubmit"> + {{ t('weather_status', 'Set custom address') }} + </ActionInput> + </Actions> + </div> + </li> +</template> + +<script> +import { showError } from '@nextcloud/dialogs' +import moment from '@nextcloud/moment' +import { getLocale } from '@nextcloud/l10n' +import Actions from '@nextcloud/vue/dist/Components/Actions' +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 * as network from './services/weatherStatusService' + +const MODE_BROWSER_LOCATION = 1 +const MODE_MANUAL_LOCATION = 2 +const weatherOptions = { + clearsky_day: { + icon: 'icon-clearsky-day', + text: t('weather_status', 'Clear sky'), + }, + clearsky_night: { + icon: 'icon-clearsky-night', + text: t('weather_status', 'Clear sky'), + }, + cloudy: { + icon: 'icon-cloudy', + text: t('weather_status', 'Cloudy'), + }, + fair_day: { + icon: 'icon-fair-day', + text: t('weather_status', 'Fair day'), + }, + fair_night: { + icon: 'icon-fair-night', + text: t('weather_status', 'Fair night'), + }, + partlycloudy_day: { + icon: 'icon-partlycloudy-day', + text: t('weather_status', 'Partly cloudy'), + }, + partlycloudy_night: { + icon: 'icon-partlycloudy-night', + text: t('weather_status', 'Partly cloudy'), + }, + fog: { + icon: 'icon-fog', + text: t('weather_status', 'Foggy'), + }, + lightrain: { + icon: 'icon-lightrain', + text: t('weather_status', 'Light rain'), + }, + rain: { + icon: 'icon-rain', + text: t('weather_status', 'Rain'), + }, + heavyrain: { + icon: 'icon-heavyrain', + text: t('weather_status', 'Heavy rain'), + }, + rainshowers_day: { + icon: 'icon-rainshowers-day', + text: t('weather_status', 'Rain showers'), + }, + rainshowers_night: { + icon: 'icon-rainshowers-night', + text: t('weather_status', 'Rain showers'), + }, + lightrainshowers_day: { + icon: 'icon-light-rainshowers-day', + text: t('weather_status', 'Light rain showers'), + }, + lightrainshowers_night: { + icon: 'icon-light-rainshowers-night', + text: t('weather_status', 'Light rain showers'), + }, + heavyrainshowers_day: { + icon: 'icon-heavy-rainshowers-day', + text: t('weather_status', 'Heavy rain showers'), + }, + heavyrainshowers_night: { + icon: 'icon-heavy-rainshowers-night', + text: t('weather_status', 'Heavy rain showers'), + }, +} + +export default { + name: 'App', + components: { + Actions, ActionButton, ActionInput, ActionLink, ActionSeparator, + }, + props: { + inline: { + type: Boolean, + default: false, + }, + }, + data() { + return { + locale: getLocale(), + loading: true, + errorMessage: '', + mode: MODE_BROWSER_LOCATION, + address: null, + lat: null, + lon: null, + forecasts: [], + loop: null, + } + }, + computed: { + useFahrenheitLocale() { + return ['en_US', 'en_MH', 'en_FM', 'en_PW', 'en_KY', 'en_LR'].includes(this.locale) + }, + strUnit() { + return this.useFahrenheitLocale ? '°F' : '°C' + }, + 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 : '' + }, + 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 t('weather_status', 'at {time}', { time: date.format('LT') }) + } + return '' + }, + weatherIcon() { + if (this.loading) { + return 'icon-loading-small' + } else { + return this.sixHoursWeatherForecast && this.sixHoursWeatherForecast in weatherOptions + ? weatherOptions[this.sixHoursWeatherForecast].icon + : 'icon-fair-day' + } + }, + weatherText() { + return this.sixHoursWeatherForecast && this.sixHoursWeatherForecast in weatherOptions + ? weatherOptions[this.sixHoursWeatherForecast].text + ' ' + this.sixHoursFormattedTime + : '???' + }, + /** + * The message displayed in the top right corner + * + * @returns {String} + */ + visibleMessage() { + if (this.loading) { + return t('weather_status', 'Loading weather') + } else if (this.errorMessage) { + return this.errorMessage + } else { + return this.sixHoursWeatherForecast + ? t('weather_status', '{temperature} {unit} {weatherDescription}', { + temperature: this.getLocalizedTemperature(this.sixHoursTempForecast), + unit: this.strUnit, + weatherDescription: this.weatherText, + }) + : t('weather_status', 'Set location for weather') + } + }, + weatherLinkTarget() { + return 'https://www.windy.com/-Rain-thunder-rain?rain,' + this.lat + ',' + this.lon + ',11' + }, + }, + mounted() { + this.initWeatherStatus() + }, + methods: { + async initWeatherStatus() { + try { + const loc = await network.getLocation() + this.lat = loc.lat + this.lon = loc.lon + this.address = loc.address + this.mode = loc.mode + + if (this.mode === MODE_BROWSER_LOCATION) { + this.askBrowserLocation() + } else if (this.mode === MODE_MANUAL_LOCATION) { + this.startLoop() + } + } catch (err) { + showError(t('weather_status', 'There was an error getting the weather status information.')) + console.debug(err) + } + }, + startLoop() { + clearInterval(this.loop) + if (this.lat && this.lon) { + this.loop = setInterval(() => this.getForecast(), 60 * 1000 * 60) + this.getForecast() + } else { + this.loading = false + } + }, + askBrowserLocation() { + this.loading = true + this.errorMessage = '' + if (navigator.geolocation && window.isSecureContext) { + navigator.geolocation.getCurrentPosition((position) => { + console.debug('browser location success') + this.lat = position.coords.latitude + this.lon = position.coords.longitude + this.saveMode(MODE_BROWSER_LOCATION) + this.mode = MODE_BROWSER_LOCATION + this.saveLocation(this.lat, this.lon) + }, + (error) => { + console.debug('location permission refused') + console.debug(error) + this.saveMode(MODE_MANUAL_LOCATION) + this.mode = MODE_MANUAL_LOCATION + // fallback on what we have if possible + if (this.lat && this.lon) { + this.startLoop() + } else { + this.usePersonalAddress() + } + }) + } else { + console.debug('no secure context!') + this.saveMode(MODE_MANUAL_LOCATION) + this.mode = MODE_MANUAL_LOCATION + this.startLoop() + } + }, + async getForecast() { + try { + this.forecasts = await network.fetchForecast() + } catch (err) { + this.errorMessage = t('weather_status', 'No weather information found') + console.debug(err) + } + this.loading = false + }, + async setAddress(address) { + this.loading = true + this.errorMessage = '' + try { + const loc = await network.setAddress(address) + if (loc.success) { + this.lat = loc.lat + this.lon = loc.lon + this.address = loc.address + this.mode = MODE_MANUAL_LOCATION + this.startLoop() + } else { + this.errorMessage = t('weather_status', 'Location not found') + this.loading = false + } + } catch (err) { + showError(t('weather_status', 'There was an error setting the location address.')) + console.debug(err) + this.loading = false + } + }, + async saveLocation(lat, lon) { + try { + const loc = await network.setLocation(lat, lon) + this.address = loc.address + this.startLoop() + } catch (err) { + showError(t('weather_status', 'There was an error setting the location.')) + console.debug(err) + } + }, + async saveMode(mode) { + try { + await network.setMode(mode) + } catch (err) { + showError(t('weather_status', 'There was an error saving the mode.')) + console.debug(err) + } + }, + onBrowserLocationClick() { + this.askBrowserLocation() + }, + async usePersonalAddress() { + this.loading = true + try { + const loc = await network.usePersonalAddress() + this.lat = loc.lat + this.lon = loc.lon + this.address = loc.address + this.mode = MODE_MANUAL_LOCATION + this.startLoop() + } catch (err) { + showError(t('weather_status', 'There was an error using personal address.')) + console.debug(err) + this.loading = false + } + }, + onAddressSubmit() { + const newAddress = this.$refs.addressInput.$el.querySelector('input[type="text"]').value + this.setAddress(newAddress) + }, + getLocalizedTemperature(celcius) { + return this.useFahrenheitLocale + ? ((celcius * (9 / 5)) + 32).toFixed(1) + : celcius + }, + }, +} +</script> + +<style lang="scss"> +.icon-clearsky-day { + background-image: url('./../img/sun.svg'); +} +.icon-clearsky-night { + background-image: url('./../img/moon.svg'); +} +.icon-cloudy { + background-image: url('./../img/cloud-cloud.svg'); +} +.icon-fair-day { + background-image: url('./../img/sun-small-cloud.svg'); +} +.icon-fair-night { + background-image: url('./../img/moon-small-cloud.svg'); +} +.icon-partlycloudy-day { + background-image: url('./../img/sun-cloud.svg'); +} +.icon-partlycloudy-night { + background-image: url('./../img/moon-cloud.svg'); +} +.icon-fog { + background-image: url('./../img/fog.svg'); +} +.icon-lightrain { + background-image: url('./../img/light-rain.svg'); +} +.icon-rain { + background-image: url('./../img/rain.svg'); +} +.icon-heavyrain { + background-image: url('./../img/heavy-rain.svg'); +} +.icon-light-rainshowers-day { + background-image: url('./../img/sun-cloud-light-rain.svg'); +} +.icon-light-rainshowers-night { + background-image: url('./../img/moon-cloud-light-rain.svg'); +} +.icon-rainshowers-day { + background-image: url('./../img/sun-cloud-rain.svg'); +} +.icon-rainshowers-night { + background-image: url('./../img/moon-cloud-rain.svg'); +} +.icon-heavy-rainshowers-day { + background-image: url('./../img/sun-cloud-heavy-rain.svg'); +} +.icon-heavy-rainshowers-night { + background-image: url('./../img/moon-cloud-heavy-rain.svg'); +} +.icon-crosshair { + background-color: var(--color-main-text); + padding: 0 !important; + mask: url(./../img/cross.svg) no-repeat; + mask-size: 18px 18px; + mask-position: center; + -webkit-mask: url(./../img/cross.svg) no-repeat; + -webkit-mask-size: 18px 18px; + -webkit-mask-position: center; + min-width: 44px !important; + min-height: 44px !important; +} + +li:not(.inline) .weather-status-menu-item { + &__header { + display: block; + align-items: center; + color: var(--color-main-text); + padding: 10px 12px 5px 12px; + box-sizing: border-box; + opacity: 1; + white-space: nowrap; + width: 100%; + text-align: center; + max-width: 250px; + text-overflow: ellipsis; + min-width: 175px; + } + + &__subheader { + width: 100%; + + > button { + background-color: var(--color-main-background); + background-size: 16px; + border: 0; + border-radius: 0; + font-weight: normal; + font-size: 0.875em; + padding-left: 40px; + + &:hover, + &:focus { + box-shadow: inset 4px 0 var(--color-primary-element); + } + } + } +} + +body .inline .weather-status-menu-item__subheader > button { + background-color: rgba(255, 255, 255, 0.8); +} + +body.theme--dark .inline .weather-status-menu-item__subheader > button { + background-color: rgba(24, 24, 24, 0.8) !important; +} + +.inline .weather-status-menu-item__subheader { + width: 100%; + + > button { + background-size: 16px; + border: 0; + border-radius: var(--border-radius-pill); + font-weight: normal; + font-size: 0.875em; + padding-left: 40px; + + &:hover, + &:focus { + background-color: var(--color-background-hover); + } + + &.icon-loading-small { + &::after { + left: 21px; + } + } + } +} + + li { + list-style-type: none; + } +</style> |