aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--docs/customservices.md2
-rw-r--r--src/components/services/OpenWeather.vue40
2 files changed, 32 insertions, 10 deletions
diff --git a/docs/customservices.md b/docs/customservices.md
index a0b143e..d7c5212 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -29,6 +29,6 @@ items:
29 location: "Amsterdam" # your location. 29 location: "Amsterdam" # your location.
30 apiKey: "<---insert-api-key-here--->" # insert your own API key here. Request one from https://openweathermap.org/api. 30 apiKey: "<---insert-api-key-here--->" # insert your own API key here. Request one from https://openweathermap.org/api.
31 units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin. 31 units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
32 background: "square" choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none. 32 background: "square" # choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none.
33 type: "OpenWeather" 33 type: "OpenWeather"
34``` 34```
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index c535a89..8029716 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -1,7 +1,7 @@
1<template> 1<template>
2 <div> 2 <div>
3 <div class="card" :class="item.class"> 3 <div class="card" :class="item.class">
4 <a :href="item.url" :target="item.target" rel="noreferrer"> 4 <a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer">
5 <div class="card-content"> 5 <div class="card-content">
6 <div class="media"> 6 <div class="media">
7 <div v-if="image" class="media-left" :class="item.background"> 7 <div v-if="image" class="media-left" :class="item.background">
@@ -25,10 +25,15 @@
25 {{ item.subtitle }} 25 {{ item.subtitle }}
26 </template> 26 </template>
27 <template v-else-if="api"> 27 <template v-else-if="api">
28 {{ temp }} 28 <template v-if="temp !== ''">
29 <span v-if="this.item.units == 'metric'">&deg;C</span> 29 {{ temp }}
30 <span v-else-if="this.item.units == 'imperial'">&deg;F</span> 30 <span v-if="this.item.units === 'metric'">&deg;C</span>
31 <span v-else>K</span> 31 <span v-else-if="this.item.units === 'imperial'">&deg;F</span>
32 <span v-else>K</span>
33 </template>
34 <template v-else>
35 <span class="error">Data could not be retrieved</span>
36 </template>
32 </template> 37 </template>
33 </p> 38 </p>
34 </div> 39 </div>
@@ -49,7 +54,9 @@ export default {
49 item: Object, 54 item: Object,
50 }, 55 },
51 data: () => ({ 56 data: () => ({
57 error: false,
52 api: { 58 api: {
59 id: "",
53 name: "", 60 name: "",
54 weather: [ 61 weather: [
55 { 62 {
@@ -65,8 +72,14 @@ export default {
65 }, 72 },
66 }), 73 }),
67 computed: { 74 computed: {
68 temp: function () { 75 locationId: function () {
69 if (this.api) { 76 if (this.api) {
77 return this.api.id;
78 }
79 return "";
80 },
81 temp: function () {
82 if (this.api && this.api.main.temp !== "") {
70 return parseInt(this.api.main.temp).toFixed(1); 83 return parseInt(this.api.main.temp).toFixed(1);
71 } 84 }
72 return ""; 85 return "";
@@ -92,13 +105,19 @@ export default {
92 const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`; 105 const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
93 this.api = await fetch(url) 106 this.api = await fetch(url)
94 .then((response) => response.json()) 107 .then((response) => response.json())
95 .catch((e) => console.log(e)); 108 .catch((e) => {
109 this.error = true;
110 console.log(e)
111 });
96 }, 112 },
97 }, 113 },
98}; 114};
99</script> 115</script>
100 116
101<style scoped lang="scss"> 117<style scoped lang="scss">
118
119// Add a border around the weather image.
120// Otherwise the image is not always distinguishable.
102.media-left { 121.media-left {
103 &.circle, 122 &.circle,
104 &.square { 123 &.square {
@@ -114,8 +133,11 @@ export default {
114 } 133 }
115} 134}
116 135
117// Add a circular border around the weather image when in dark mode. 136.error {
118// Otherwise the image is not distinguishable. 137 color: #de0000;
138}
139
140// Change background color in dark mode.
119.is-dark { 141.is-dark {
120 .media-left { 142 .media-left {
121 &.circle, 143 &.circle,