aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services/OpenWeather.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/services/OpenWeather.vue')
-rw-r--r--src/components/services/OpenWeather.vue133
1 files changed, 52 insertions, 81 deletions
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index 0fc1fe5..09ff76a 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -1,41 +1,30 @@
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="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer"> 4 <a
5 :href="`https://openweathermap.org/city/${id}`"
6 :target="item.target"
7 rel="noreferrer"
8 >
5 <div class="card-content"> 9 <div class="card-content">
6 <div class="media"> 10 <div class="media">
7 <div v-if="image" class="media-left" :class="item.background"> 11 <div v-if="icon" class="media-left" :class="item.background">
8 <figure class="image is-48x48"> 12 <figure class="image is-48x48">
9 <img 13 <img
10 :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" 14 :src="`https://openweathermap.org/img/wn/${icon}@2x.png`"
11 :alt="conditions" 15 :alt="conditions"
12 :title="conditions" 16 :title="conditions"
13 /> 17 />
14 </figure> 18 </figure>
15 </div> 19 </div>
16 <div v-if="item.icon" class="media-left">
17 <figure class="image is-48x48">
18 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
19 </figure>
20 </div>
21 <div class="media-content"> 20 <div class="media-content">
22 <p class="title is-4">{{ locationName }}</p> 21 <p v-if="error" class="error">Data could not be retrieved</p>
23 <p class="subtitle is-6"> 22 <div v-else>
24 <template v-if="item.subtitle"> 23 <p class="title is-4">{{ name }}</p>
25 {{ item.subtitle }} 24 <p class="subtitle is-6">
26 </template> 25 {{ temp | tempSuffix(this.item.units) }}
27 <template v-else-if="api"> 26 </p>
28 <template v-if="temp !== ''"> 27 </div>
29 {{ temp }}
30 <span v-if="this.item.units === 'metric'">&deg;C</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>
37 </template>
38 </p>
39 </div> 28 </div>
40 </div> 29 </div>
41 <div class="tag" :class="item.tagstyle" v-if="item.tag"> 30 <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -54,63 +43,21 @@ export default {
54 item: Object, 43 item: Object,
55 }, 44 },
56 data: () => ({ 45 data: () => ({
46 id: null,
47 icon: null,
48 name: null,
49 temp: null,
50 conditions: null,
57 error: false, 51 error: false,
58 api: {
59 id: "",
60 name: "",
61 weather: [
62 {
63 main: "",
64 description: "",
65 icon: "",
66 },
67 ],
68 main: {
69 temp: "",
70 humidity: "",
71 },
72 },
73 }), 52 }),
74 computed: {
75 locationId: function () {
76 if (this.api) {
77 return this.api.id;
78 }
79 return "";
80 },
81 locationName: function () {
82 if (this.api) {
83 return this.api.name;
84 }
85 return "";
86 },
87 temp: function () {
88 if (this.api && this.api.main.temp !== "") {
89 return parseInt(this.api.main.temp).toFixed(1);
90 }
91 return "";
92 },
93 image: function () {
94 if (this.api) {
95 return this.api.weather[0].icon;
96 }
97 return "";
98 },
99 conditions: function () {
100 if (this.api) {
101 return this.api.weather[0].description;
102 }
103 return "";
104 },
105 },
106 created() { 53 created() {
107 this.fetchStatus(); 54 this.fetchWeather();
108 }, 55 },
109 methods: { 56 methods: {
110 fetchStatus: async function () { 57 fetchWeather: async function () {
111 let locationQuery; 58 let locationQuery;
112 59
113 // If a specific location ID was specified, use it. Otherwise retrieve value from location (name). 60 // Use location ID if specified, otherwise retrieve value from location (name).
114 if (this.item.locationId) { 61 if (this.item.locationId) {
115 locationQuery = `id=${this.item.locationId}`; 62 locationQuery = `id=${this.item.locationId}`;
116 } else { 63 } else {
@@ -118,19 +65,43 @@ export default {
118 } 65 }
119 66
120 const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`; 67 const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`;
121 this.api = await fetch(url) 68 fetch(url)
122 .then((response) => response.json()) 69 .then((response) => {
123 .catch((e) => { 70 if (!response.ok) {
124 this.error = true; 71 throw Error(response.statusText);
125 console.log(e) 72 }
73 return response.json();
74 })
75 .then((weather) => {
76 this.id = weather.id;
77 this.name = weather.name;
78 this.temp = parseInt(weather.main.temp).toFixed(1);
79 this.icon = weather.weather[0].icon;
80 this.conditions = weather.weather[0].description;
81 })
82 .catch((e) => {
83 console.log(e);
84 this.error = true;
126 }); 85 });
127 }, 86 },
128 }, 87 },
88 filters: {
89 tempSuffix: function (value, type) {
90 if (!value) return "";
91
92 let unit = "K";
93 if (type === "metric") {
94 unit = "°C";
95 } else if (type === "imperial") {
96 unit = "°F";
97 }
98 return `${value} ${unit}`;
99 },
100 },
129}; 101};
130</script> 102</script>
131 103
132<style scoped lang="scss"> 104<style scoped lang="scss">
133
134// Add a border around the weather image. 105// Add a border around the weather image.
135// Otherwise the image is not always distinguishable. 106// Otherwise the image is not always distinguishable.
136.media-left { 107.media-left {