]>
Commit | Line | Data |
---|---|---|
593f8afc DW |
1 | <template> |
2 | <div> | |
3 | <div class="card" :class="item.class"> | |
f11b1c9d BW |
4 | <a |
5 | :href="`https://openweathermap.org/city/${id}`" | |
6 | :target="item.target" | |
7 | rel="noreferrer" | |
8 | > | |
593f8afc DW |
9 | <div class="card-content"> |
10 | <div class="media"> | |
f11b1c9d | 11 | <div v-if="icon" class="media-left" :class="item.background"> |
593f8afc | 12 | <figure class="image is-48x48"> |
b79561bc | 13 | <img |
f11b1c9d | 14 | :src="`https://openweathermap.org/img/wn/${icon}@2x.png`" |
b79561bc DW |
15 | :alt="conditions" |
16 | :title="conditions" | |
17 | /> | |
593f8afc DW |
18 | </figure> |
19 | </div> | |
593f8afc | 20 | <div class="media-content"> |
f11b1c9d BW |
21 | <p v-if="error" class="error">Data could not be retrieved</p> |
22 | <div v-else> | |
23 | <p class="title is-4">{{ name }}</p> | |
24 | <p class="subtitle is-6"> | |
59994bfe | 25 | {{ temperature }} |
f11b1c9d BW |
26 | </p> |
27 | </div> | |
593f8afc DW |
28 | </div> |
29 | </div> | |
30 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | |
31 | <strong class="tag-text">#{{ item.tag }}</strong> | |
32 | </div> | |
33 | </div> | |
34 | </a> | |
35 | </div> | |
36 | </div> | |
37 | </template> | |
38 | ||
39 | <script> | |
40 | export default { | |
41 | name: "OpenWeather", | |
42 | props: { | |
43 | item: Object, | |
44 | }, | |
45 | data: () => ({ | |
f11b1c9d BW |
46 | id: null, |
47 | icon: null, | |
48 | name: null, | |
49 | temp: null, | |
50 | conditions: null, | |
fb158d47 | 51 | error: false, |
593f8afc | 52 | }), |
59994bfe BW |
53 | computed: { |
54 | temperature: function () { | |
55 | if (!this.temp) return ""; | |
56 | ||
57 | let unit = "K"; | |
58 | if (this.item.type === "metric") { | |
59 | unit = "°C"; | |
60 | } else if (this.item.type === "imperial") { | |
61 | unit = "°F"; | |
62 | } | |
63 | return `${this.temp} ${unit}`; | |
64 | }, | |
65 | }, | |
593f8afc | 66 | created() { |
f11b1c9d | 67 | this.fetchWeather(); |
593f8afc DW |
68 | }, |
69 | methods: { | |
f11b1c9d | 70 | fetchWeather: async function () { |
551e32e2 DW |
71 | let locationQuery; |
72 | ||
f11b1c9d | 73 | // Use location ID if specified, otherwise retrieve value from location (name). |
551e32e2 DW |
74 | if (this.item.locationId) { |
75 | locationQuery = `id=${this.item.locationId}`; | |
76 | } else { | |
77 | locationQuery = `q=${this.item.location}`; | |
78 | } | |
79 | ||
9fce0ce5 RS |
80 | const apiKey = this.item.apikey || this.item.apiKey; |
81 | const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${apiKey}&units=${this.item.units}`; | |
f11b1c9d BW |
82 | fetch(url) |
83 | .then((response) => { | |
84 | if (!response.ok) { | |
85 | throw Error(response.statusText); | |
86 | } | |
87 | return response.json(); | |
88 | }) | |
89 | .then((weather) => { | |
90 | this.id = weather.id; | |
91 | this.name = weather.name; | |
92 | this.temp = parseInt(weather.main.temp).toFixed(1); | |
93 | this.icon = weather.weather[0].icon; | |
94 | this.conditions = weather.weather[0].description; | |
95 | }) | |
96 | .catch((e) => { | |
97 | console.log(e); | |
98 | this.error = true; | |
fb158d47 | 99 | }); |
593f8afc DW |
100 | }, |
101 | }, | |
102 | }; | |
103 | </script> | |
104 | ||
105 | <style scoped lang="scss"> | |
fb158d47 DW |
106 | // Add a border around the weather image. |
107 | // Otherwise the image is not always distinguishable. | |
fd12de9e DW |
108 | .media-left { |
109 | &.circle, | |
110 | &.square { | |
111 | background-color: #e4e4e4; | |
112 | } | |
113 | ||
114 | &.circle { | |
115 | border-radius: 90%; | |
116 | } | |
117 | ||
118 | img { | |
119 | max-height: 100%; | |
120 | } | |
121 | } | |
122 | ||
fb158d47 DW |
123 | .error { |
124 | color: #de0000; | |
125 | } | |
126 | ||
127 | // Change background color in dark mode. | |
fd12de9e DW |
128 | .is-dark { |
129 | .media-left { | |
130 | &.circle, | |
131 | &.square { | |
132 | background-color: #909090; | |
133 | } | |
134 | } | |
593f8afc | 135 | } |
b79561bc | 136 | </style> |