123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651 |
- <!--
- - @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="currentWeatherMessage">
- <ActionText v-if="gotWeather"
- :icon="futureWeatherIcon">
- {{ forecastMessage }}
- </ActionText>
- <ActionLink v-if="gotWeather"
- icon="icon-address"
- target="_blank"
- :href="weatherLinkTarget"
- :close-after-click="true">
- {{ locationText }}
- </ActionLink>
- <ActionButton v-if="gotWeather"
- :icon="addRemoveFavoriteIcon"
- @click="onAddRemoveFavoriteClick">
- {{ addRemoveFavoriteText }}
- </ActionButton>
- <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>
- <ActionButton
- v-show="favorites.length > 0"
- :icon="toggleFavoritesIcon"
- @click="showFavorites = !showFavorites">
- {{ t('weather_status', 'Favorites') }}
- </ActionButton>
- <ActionButton v-for="f in displayedFavorites"
- :key="f"
- icon="icon-starred"
- @click="onFavoriteClick($event, f)">
- {{ f }}
- </ActionButton>
- </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 ActionText from '@nextcloud/vue/dist/Components/ActionText'
- 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: (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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, ActionText,
- },
- props: {
- inline: {
- type: Boolean,
- default: false,
- },
- },
- data() {
- return {
- locale: getLocale(),
- loading: true,
- errorMessage: '',
- mode: MODE_BROWSER_LOCATION,
- address: null,
- lat: null,
- lon: null,
- // how many hours ahead do we want to see the forecast?
- offset: 5,
- forecasts: [],
- loop: null,
- favorites: [],
- showFavorites: false,
- }
- },
- computed: {
- useFahrenheitLocale() {
- return ['en_US', 'en_MH', 'en_FM', 'en_PW', 'en_KY', 'en_LR'].includes(this.locale)
- },
- temperatureUnit() {
- return this.useFahrenheitLocale ? '°F' : '°C'
- },
- locationText() {
- return t('weather_status', 'More weather for {adr}', { adr: this.address })
- },
- temperature() {
- return this.getTemperature(this.forecasts, 0)
- },
- futureTemperature() {
- return this.getTemperature(this.forecasts, this.offset)
- },
- weatherCode() {
- return this.getWeatherCode(this.forecasts, 0)
- },
- futureWeatherCode() {
- return this.getWeatherCode(this.forecasts, this.offset)
- },
- weatherIcon() {
- 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}
- */
- currentWeatherMessage() {
- if (this.loading) {
- return t('weather_status', 'Loading weather')
- } else if (this.errorMessage) {
- return this.errorMessage
- } else {
- 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() {
- return 'https://www.windy.com/-Rain-thunder-rain?rain,' + this.lat + ',' + this.lon + ',11'
- },
- gotWeather() {
- return this.address && !this.errorMessage
- },
- addRemoveFavoriteIcon() {
- return this.currentAddressIsFavorite
- ? 'icon-starred'
- : 'icon-star'
- },
- addRemoveFavoriteText() {
- return this.currentAddressIsFavorite
- ? t('weather_status', 'Remove from favorites')
- : t('weather_status', 'Add as favorite')
- },
- currentAddressIsFavorite() {
- return this.favorites.find((f) => {
- return f === this.address
- })
- },
- toggleFavoritesIcon() {
- return this.showFavorites
- ? 'icon-triangle-s'
- : 'icon-triangle-e'
- },
- displayedFavorites() {
- return this.showFavorites
- ? this.favorites
- : []
- },
- },
- 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()
- }
- const favs = await network.getFavorites()
- this.favorites = favs
- } catch (err) {
- if (err?.code === 'ECONNABORTED') {
- console.info('The weather status request was cancelled because the user navigates.')
- return
- }
- if (err.response && err.response.status === 401) {
- showError(t('weather_status', 'You are not logged in.'))
- } else {
- showError(t('weather_status', 'There was an error getting the weather status information.'))
- }
- console.error(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) {
- if (err.response && err.response.status === 401) {
- showError(t('weather_status', 'You are not logged in.'))
- } else {
- showError(t('weather_status', 'There was an error setting the location address.'))
- }
- this.loading = false
- }
- },
- async saveLocation(lat, lon) {
- try {
- const loc = await network.setLocation(lat, lon)
- this.address = loc.address
- this.startLoop()
- } catch (err) {
- if (err.response && err.response.status === 401) {
- showError(t('weather_status', 'You are not logged in.'))
- } else {
- showError(t('weather_status', 'There was an error setting the location.'))
- }
- console.debug(err)
- }
- },
- async saveMode(mode) {
- try {
- await network.setMode(mode)
- } catch (err) {
- if (err.response && err.response.status === 401) {
- showError(t('weather_status', 'You are not logged in.'))
- } else {
- 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) {
- if (err.response && err.response.status === 401) {
- showError(t('weather_status', 'You are not logged in.'))
- } else {
- 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
- },
- onAddRemoveFavoriteClick() {
- const currentIsFavorite = this.currentAddressIsFavorite
- if (currentIsFavorite) {
- const i = this.favorites.indexOf(currentIsFavorite)
- if (i !== -1) {
- this.favorites.splice(i, 1)
- }
- } else {
- this.favorites.push(this.address)
- }
- network.saveFavorites(this.favorites)
- },
- onFavoriteClick(e, favAddress) {
- // clicked on the icon
- if (e.target.classList.contains('action-button__icon')) {
- const i = this.favorites.indexOf(favAddress)
- if (i !== -1) {
- this.favorites.splice(i, 1)
- }
- network.saveFavorites(this.favorites)
- } else if (favAddress !== this.address) {
- // clicked on the text
- 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>
-
- <style lang="scss">
- .icon-weather-status {
- background-image: url('./../img/app-dark.svg');
- }
- body.theme--dark .icon-weather-status {
- background-image: url('./../img/app.svg');
- }
- .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%;
-
- .trigger > .icon {
- background-color: var(--color-main-background);
- background-size: 16px;
- border: 0;
- border-radius: 0;
- font-weight: normal;
- padding-left: 40px;
-
- &:hover,
- &:focus {
- box-shadow: inset 4px 0 var(--color-primary-element);
- }
- }
- }
- }
-
- .inline .weather-status-menu-item__subheader {
- width: 100%;
-
- .trigger > .icon {
- background-size: 16px;
- border: 0;
- border-radius: var(--border-radius-pill);
- font-weight: normal;
- padding-left: 40px;
-
- &.icon-loading-small {
- &::after {
- left: 21px;
- }
- }
- }
- }
-
- li {
- list-style-type: none;
- }
- </style>
|