extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2024-12-26 00:29:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Error handling and fixed link to city.

Browse Source
This commit is contained in:
Dick Wolff 2021-01-13 22:19:17 +01:00
parent 9e0ef05efe
commit fb158d4767
2 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/customservices.md
View File

@ -29,6 +29,6 @@ items:
location: "Amsterdam" # your location. location: "Amsterdam" # your location.
apiKey: "<---insert-api-key-here--->" # insert your own API key here. Request one from https://openweathermap.org/api. 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. 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. background: "square" # choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none.
type: "OpenWeather" type: "OpenWeather"
``` ```

40
src/components/services/OpenWeather.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="card" :class="item.class"> <div class="card" :class="item.class">
<a :href="item.url" :target="item.target" rel="noreferrer"> <a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div v-if="image" class="media-left" :class="item.background"> <div v-if="image" class="media-left" :class="item.background">
@ -25,10 +25,15 @@
{{ item.subtitle }} {{ item.subtitle }}
</template> </template>
<template v-else-if="api"> <template v-else-if="api">
{{ temp }} <template v-if="temp !== ''">
<span v-if="this.item.units == 'metric'">&deg;C</span> {{ temp }}
<span v-else-if="this.item.units == 'imperial'">&deg;F</span> <span v-if="this.item.units === 'metric'">&deg;C</span>
<span v-else>K</span> <span v-else-if="this.item.units === 'imperial'">&deg;F</span>
<span v-else>K</span>
</template>
<template v-else>
<span class="error">Data could not be retrieved</span>
</template>
</template> </template>
</p> </p>
</div> </div>
@ -49,7 +54,9 @@ export default {
item: Object, item: Object,
}, },
data: () => ({ data: () => ({
error: false,
api: { api: {
id: "",
name: "", name: "",
weather: [ weather: [
{ {
@ -65,8 +72,14 @@ export default {
}, },
}), }),
computed: { computed: {
temp: function () { locationId: function () {
if (this.api) { if (this.api) {
return this.api.id;
}
return "";
},
temp: function () {
if (this.api && this.api.main.temp !== "") {
return parseInt(this.api.main.temp).toFixed(1); return parseInt(this.api.main.temp).toFixed(1);
} }
return ""; return "";
@ -92,13 +105,19 @@ export default {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`; const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
this.api = await fetch(url) this.api = await fetch(url)
.then((response) => response.json()) .then((response) => response.json())
.catch((e) => console.log(e)); .catch((e) => {
this.error = true;
console.log(e)
});
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// Add a border around the weather image.
// Otherwise the image is not always distinguishable.
.media-left { .media-left {
&.circle, &.circle,
&.square { &.square {
@ -114,8 +133,11 @@ export default {
} }
} }
// Add a circular border around the weather image when in dark mode. .error {
// Otherwise the image is not distinguishable. color: #de0000;
}
// Change background color in dark mode.
.is-dark { .is-dark {
.media-left { .media-left {
&.circle, &.circle,