forked from extern/homer
Merge pull request #181 from dickwolff/main
Added OpenWeatherMap service
This commit is contained in:
commit
fd18715085
@ -136,6 +136,9 @@ services:
|
|||||||
# background: red # optional color for card to set color directly without custom stylesheet
|
# background: red # optional color for card to set color directly without custom stylesheet
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
View [Custom Services](customservices.md) for details about all available custom services (like PiHole) and how to configure them.
|
||||||
|
|
||||||
If you choose to fetch message information from an endpoint, the output format should be as follows (or you can [custom map fields as shown in tips-and-tricks](./tips-and-tricks.md#mapping-fields)):
|
If you choose to fetch message information from an endpoint, the output format should be as follows (or you can [custom map fields as shown in tips-and-tricks](./tips-and-tricks.md#mapping-fields)):
|
||||||
|
|
||||||
```json
|
```json
|
||||||
|
@ -19,6 +19,28 @@ The following configuration is available for the PiHole service.
|
|||||||
type: "PiHole"
|
type: "PiHole"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## OpenWeatherMap
|
||||||
|
|
||||||
|
Using the OpenWeatherMap service you can display weather information about a given location.
|
||||||
|
|
||||||
|
The following configuration is available for the OpenWeatherMap service
|
||||||
|
|
||||||
|
```
|
||||||
|
items:
|
||||||
|
- name: "Weather"
|
||||||
|
location: "Amsterdam" # your location.
|
||||||
|
locationId: "2759794" # OpenWeatherMap city ID.
|
||||||
|
apiKey: "<---insert-api-key-here--->" # insert your own API key here. Request one from https://openweathermap.org/api.
|
||||||
|
units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
|
||||||
|
background: "square" # choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none.
|
||||||
|
type: "OpenWeather"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Remarks:**
|
||||||
|
If for some reason your city can't be found by entering the name in the `location` property, you could also try to configure the OWM city ID in the `locationId` property. To retrieve your specific City ID, go to the [OWM website](https://openweathermap.org), search for your city and retrieve the ID from the URL (for example, the City ID of Amsterdam is 2759794).
|
||||||
|
|
||||||
|
|
||||||
## Medusa
|
## Medusa
|
||||||
|
|
||||||
This service displays News (grey), Warning (orange) or Error (red) notifications bubbles from the Medusa application.
|
This service displays News (grey), Warning (orange) or Error (red) notifications bubbles from the Medusa application.
|
||||||
|
12622
package-lock.json
generated
Normal file
12622
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
164
src/components/services/OpenWeather.vue
Normal file
164
src/components/services/OpenWeather.vue
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="card" :class="item.class">
|
||||||
|
<a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer">
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="media">
|
||||||
|
<div v-if="image" class="media-left" :class="item.background">
|
||||||
|
<figure class="image is-48x48">
|
||||||
|
<img
|
||||||
|
:src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
|
||||||
|
:alt="conditions"
|
||||||
|
:title="conditions"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.icon" class="media-left">
|
||||||
|
<figure class="image is-48x48">
|
||||||
|
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-4">{{ locationName }}</p>
|
||||||
|
<p class="subtitle is-6">
|
||||||
|
<template v-if="item.subtitle">
|
||||||
|
{{ item.subtitle }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="api">
|
||||||
|
<template v-if="temp !== ''">
|
||||||
|
{{ temp }}
|
||||||
|
<span v-if="this.item.units === 'metric'">°C</span>
|
||||||
|
<span v-else-if="this.item.units === 'imperial'">°F</span>
|
||||||
|
<span v-else>K</span>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<span class="error">Data could not be retrieved</span>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tag" :class="item.tagstyle" v-if="item.tag">
|
||||||
|
<strong class="tag-text">#{{ item.tag }}</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "OpenWeather",
|
||||||
|
props: {
|
||||||
|
item: Object,
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
error: false,
|
||||||
|
api: {
|
||||||
|
id: "",
|
||||||
|
name: "",
|
||||||
|
weather: [
|
||||||
|
{
|
||||||
|
main: "",
|
||||||
|
description: "",
|
||||||
|
icon: "",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
main: {
|
||||||
|
temp: "",
|
||||||
|
humidity: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
computed: {
|
||||||
|
locationId: function () {
|
||||||
|
if (this.api) {
|
||||||
|
return this.api.id;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
locationName: function () {
|
||||||
|
if (this.api) {
|
||||||
|
return this.api.name;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
temp: function () {
|
||||||
|
if (this.api && this.api.main.temp !== "") {
|
||||||
|
return parseInt(this.api.main.temp).toFixed(1);
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
image: function () {
|
||||||
|
if (this.api) {
|
||||||
|
return this.api.weather[0].icon;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
conditions: function () {
|
||||||
|
if (this.api) {
|
||||||
|
return this.api.weather[0].description;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchStatus();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchStatus: async function () {
|
||||||
|
let locationQuery;
|
||||||
|
|
||||||
|
// If a specific location ID was specified, use it. Otherwise retrieve value from location (name).
|
||||||
|
if (this.item.locationId) {
|
||||||
|
locationQuery = `id=${this.item.locationId}`;
|
||||||
|
} else {
|
||||||
|
locationQuery = `q=${this.item.location}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`;
|
||||||
|
this.api = await fetch(url)
|
||||||
|
.then((response) => response.json())
|
||||||
|
.catch((e) => {
|
||||||
|
this.error = true;
|
||||||
|
console.log(e)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
// Add a border around the weather image.
|
||||||
|
// Otherwise the image is not always distinguishable.
|
||||||
|
.media-left {
|
||||||
|
&.circle,
|
||||||
|
&.square {
|
||||||
|
background-color: #e4e4e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.circle {
|
||||||
|
border-radius: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #de0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change background color in dark mode.
|
||||||
|
.is-dark {
|
||||||
|
.media-left {
|
||||||
|
&.circle,
|
||||||
|
&.square {
|
||||||
|
background-color: #909090;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user