mirror of
https://github.com/Lissy93/dashy.git
synced 2024-12-25 09:56:15 +03:00
✨ Adds a weather forecast widget
This commit is contained in:
Alicia Sykes
parent
3f8b180553
commit
c38a094a63
@ -53,12 +53,39 @@ A simple, live-updating local weather component, showing temperature, conditions
|
||||
icon: fas fa-clouds
|
||||
type: weather
|
||||
options:
|
||||
apiKey: 6e29c7d514cf890f846d58178b6d418f
|
||||
apiKey: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
city: London
|
||||
units: metric
|
||||
hideDetails: false
|
||||
```
|
||||
|
||||
### Weather Forecast
|
||||
|
||||
Displays the weather (temperature and conditions) for the next few days for a given location. Note that this requires either the free [OpenWeatherMap Student Plan](https://home.openweathermap.org/students), or the Premium Plan.
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`apiKey`** | `string` | Required | Your OpenWeatherMap API key. You can get one for free at [openweathermap.org](https://openweathermap.org/)
|
||||
**`city`** | `string` | Required | A city name to use for fetching weather. This can also be a state code or country code, following the ISO-3166 format
|
||||
**`numDays`** | `number` | _Optional_ | The number of days to display of forecast info to display. Defaults to `4`, max `16` days
|
||||
**`units`** | `string` | _Optional_ | The units to use for displaying data, can be either `metric` or `imperial`. Defaults to `metric`
|
||||
**`hideDetails`** | `boolean` | _Optional_ | If set to `true`, the additional details (wind, humidity, pressure, etc) will not be shown. Defaults to `false`
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- name: Weather Forecast
|
||||
icon: ':sunny:'
|
||||
type: weather-forecast
|
||||
options:
|
||||
city: California
|
||||
numDays: 6
|
||||
apiKey: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
units: imperial
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dynamic Widgets
|
||||
|
||||
276
src/components/Widgets/WeatherForecast.vue
Normal file
276
src/components/Widgets/WeatherForecast.vue
Normal file
@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div class="weather-forecast">
|
||||
<template v-if="weatherData.length > 0">
|
||||
<!-- For each day, show the weather -->
|
||||
<div
|
||||
class="weather-day"
|
||||
v-for="weather in weatherData"
|
||||
:key="weather.index"
|
||||
v-tooltip="tooltip(weather.description)"
|
||||
@click="showMoreInfo(weather.info)"
|
||||
>
|
||||
<p class="date">{{ weather.date }}</p>
|
||||
<p class="description">{{ weather.main }}</p>
|
||||
<p class="temp">{{ weather.temp }}</p>
|
||||
<i :class="`owi owi-${weather.icon}`"></i>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Show more details for a Clicked day -->
|
||||
<div class="details" v-if="showDetails">
|
||||
<div class="info-wrap" v-for="(section, indx) in moreInfo" :key="indx">
|
||||
<p class="info-line" v-for="weather in section" :key="weather.label">
|
||||
<span class="lbl">{{weather.label}}</span>
|
||||
<span class="val">{{ weather.value }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="more-details-btn" @click="toggleDetails" v-if="showDetails">
|
||||
Show Less
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import ErrorHandler from '@/utils/ErrorHandler';
|
||||
import { widgetApiEndpoints } from '@/utils/defaults';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
error: false,
|
||||
showDetails: false,
|
||||
weatherData: [],
|
||||
moreInfo: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
units() {
|
||||
return this.options.units || 'metric';
|
||||
},
|
||||
numDays() {
|
||||
return this.options.numDays || 6;
|
||||
},
|
||||
endpoint() {
|
||||
const { apiKey, city } = this.options;
|
||||
const params = `?q=${city}&cnt=${this.numDays}&units=${this.units}&appid=${apiKey}`;
|
||||
return `${widgetApiEndpoints.weatherForecast}${params}`;
|
||||
},
|
||||
tempDisplayUnits() {
|
||||
switch (this.units) {
|
||||
case ('metric'): return '°C';
|
||||
case ('imperial'): return '°F';
|
||||
default: return '';
|
||||
}
|
||||
},
|
||||
speedDisplayUnits() {
|
||||
switch (this.units) {
|
||||
case ('metric'): return 'm/s';
|
||||
case ('imperial'): return 'mph';
|
||||
default: return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/* Adds units symbol to temperature, depending on metric or imperial */
|
||||
processTemp(temp) {
|
||||
return `${Math.round(temp)}${this.tempDisplayUnits}`;
|
||||
},
|
||||
/* Convert timestamp to textual date, in users local format */
|
||||
dateFromStamp(timestamp) {
|
||||
const localFormat = navigator.language;
|
||||
const dateFormat = { weekday: 'short', day: 'numeric', month: 'short' };
|
||||
return new Date(timestamp * 1000).toLocaleDateString(localFormat, dateFormat);
|
||||
},
|
||||
/* Fetches the weather from OpenWeatherMap, and processes results */
|
||||
fetchWeather() {
|
||||
axios.get(this.endpoint)
|
||||
.then((response) => {
|
||||
if (response.data.list) {
|
||||
this.processApiResults(response.data);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.throwError('Failed to fetch weather');
|
||||
});
|
||||
},
|
||||
/* Process the results from the Axios request */
|
||||
processApiResults(dataList) {
|
||||
const uiWeatherData = [];
|
||||
dataList.list.forEach((day, index) => {
|
||||
uiWeatherData.push({
|
||||
index,
|
||||
date: this.dateFromStamp(day.dt),
|
||||
icon: day.weather[0].icon,
|
||||
main: day.weather[0].main,
|
||||
description: day.weather[0].description,
|
||||
temp: this.processTemp(day.temp.day),
|
||||
info: this.makeWeatherData(day),
|
||||
});
|
||||
});
|
||||
this.weatherData = uiWeatherData;
|
||||
},
|
||||
/* Process additional data, needed when user clicks a given day */
|
||||
makeWeatherData(data) {
|
||||
return [
|
||||
[
|
||||
{ label: 'Min Temp', value: this.processTemp(data.temp.min) },
|
||||
{ label: 'Max Temp', value: this.processTemp(data.temp.max) },
|
||||
{ label: 'Feels Like', value: this.processTemp(data.feels_like.day) },
|
||||
],
|
||||
[
|
||||
{ label: 'Pressure', value: `${data.pressure}hPa` },
|
||||
{ label: 'Humidity', value: `${data.humidity}%` },
|
||||
{ label: 'wind', value: `${data.speed}${this.speedDisplayUnits}` },
|
||||
{ label: 'clouds', value: `${data.clouds}%` },
|
||||
],
|
||||
];
|
||||
},
|
||||
/* When a day is clicked, then show weather info on the UI */
|
||||
showMoreInfo(moreInfo) {
|
||||
this.moreInfo = moreInfo;
|
||||
this.showDetails = true;
|
||||
},
|
||||
/* Show/ hide additional weather info */
|
||||
toggleDetails() {
|
||||
this.showDetails = !this.showDetails;
|
||||
},
|
||||
/* Display weather description and Click for more note on hover */
|
||||
tooltip(text) {
|
||||
const content = `${text.split(' ').map(
|
||||
(word) => word[0].toUpperCase() + word.substring(1),
|
||||
).join(' ')}\nClick for more Info`;
|
||||
return { content, trigger: 'hover focus', delay: 250 };
|
||||
},
|
||||
/* Validate input props, and print warning if incorrect */
|
||||
checkProps() {
|
||||
const ops = this.options;
|
||||
let valid = true;
|
||||
if (!ops.apiKey) {
|
||||
this.throwError('Missing API key for OpenWeatherMap');
|
||||
valid = false;
|
||||
}
|
||||
if (!ops.city) {
|
||||
this.throwError('A city name is required to fetch weather');
|
||||
valid = false;
|
||||
}
|
||||
if (ops.units && ops.units !== 'metric' && ops.units !== 'imperial') {
|
||||
this.throwError('Invalid units specified, must be either \'metric\' or \'imperial\'');
|
||||
valid = false;
|
||||
}
|
||||
return valid;
|
||||
},
|
||||
/* Just outputs an error message */
|
||||
throwError(error) {
|
||||
ErrorHandler(error);
|
||||
this.error = true;
|
||||
},
|
||||
},
|
||||
/* When the widget loads, the props are checked, and weather fetched */
|
||||
created() {
|
||||
if (this.checkProps()) {
|
||||
this.fetchWeather();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/weather-icons.scss';
|
||||
|
||||
p {
|
||||
color: var(--widget-text-color);
|
||||
}
|
||||
|
||||
.weather-forecast {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.weather-day {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
width: 30%;
|
||||
min-width: 6rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--curve-factor);
|
||||
&:hover {
|
||||
border: 1px dashed var(--widget-text-color);
|
||||
}
|
||||
.date {
|
||||
grid-column-start: span 2;
|
||||
opacity: var(--dimming-factor);
|
||||
margin: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.description {
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
.owi {
|
||||
font-size: 1.4rem;
|
||||
color: var(--widget-text-color);
|
||||
margin: 0;
|
||||
}
|
||||
.temp {
|
||||
font-size: 1.8rem;
|
||||
grid-row-start: span 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Show more details button
|
||||
.more-details-btn {
|
||||
grid-column-start: span 2;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
margin: 0.25rem auto;
|
||||
padding: 0.1rem 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
opacity: var(--dimming-factor);
|
||||
border-radius: var(--curve-factor);
|
||||
&:hover {
|
||||
border: 1px solid var(--widget-text-color);
|
||||
}
|
||||
&:focus, &:active {
|
||||
background: var(--widget-text-color);
|
||||
color: var(--widget-background-color);
|
||||
}
|
||||
}
|
||||
// More weather details table
|
||||
.details {
|
||||
width: 100%;
|
||||
grid-column-start: span 2;
|
||||
display: flex;
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
opacity: var(--dimming-factor);
|
||||
p.info-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0.1rem 0.5rem;
|
||||
padding: 0.1rem 0;
|
||||
color: var(--widget-text-color);
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--widget-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -12,6 +12,7 @@
|
||||
>
|
||||
<Clock v-if="widgetType === 'clock'" :options="widgetOptions" />
|
||||
<Weather v-else-if="widgetType === 'weather'" :options="widgetOptions" />
|
||||
<WeatherForecast v-else-if="widgetType === 'weather-forecast'" :options="widgetOptions" />
|
||||
</Collapsable>
|
||||
</div>
|
||||
</template>
|
||||
@ -19,14 +20,16 @@
|
||||
<script>
|
||||
import Clock from '@/components/Widgets/Clock.vue';
|
||||
import Weather from '@/components/Widgets/Weather.vue';
|
||||
import WeatherForecast from '@/components/Widgets/WeatherForecast.vue';
|
||||
import Collapsable from '@/components/LinkItems/Collapsable.vue';
|
||||
|
||||
export default {
|
||||
name: 'Widget',
|
||||
components: {
|
||||
Collapsable,
|
||||
Weather,
|
||||
Clock,
|
||||
Weather,
|
||||
WeatherForecast,
|
||||
},
|
||||
props: {
|
||||
widget: Object,
|
||||
|
||||
@ -206,6 +206,7 @@ module.exports = {
|
||||
/* API endpoints for widgets that need to fetch external data */
|
||||
widgetApiEndpoints: {
|
||||
weather: 'https://api.openweathermap.org/data/2.5/weather',
|
||||
weatherForecast: 'https://api.openweathermap.org/data/2.5/forecast/daily',
|
||||
},
|
||||
/* URLs for web search engines */
|
||||
searchEngineUrls: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user