]>
Commit | Line | Data |
---|---|---|
593f8afc DW |
1 | <template> |
2 | <div> | |
3 | <div class="card" :class="item.class"> | |
fb158d47 | 4 | <a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer"> |
593f8afc DW |
5 | <div class="card-content"> |
6 | <div class="media"> | |
fd12de9e | 7 | <div v-if="image" class="media-left" :class="item.background"> |
593f8afc | 8 | <figure class="image is-48x48"> |
b79561bc DW |
9 | <img |
10 | :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" | |
11 | :alt="conditions" | |
12 | :title="conditions" | |
13 | /> | |
593f8afc DW |
14 | </figure> |
15 | </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"> | |
551e32e2 | 22 | <p class="title is-4">{{ locationName }}</p> |
593f8afc DW |
23 | <p class="subtitle is-6"> |
24 | <template v-if="item.subtitle"> | |
25 | {{ item.subtitle }} | |
26 | </template> | |
27 | <template v-else-if="api"> | |
fb158d47 DW |
28 | <template v-if="temp !== ''"> |
29 | {{ temp }} | |
30 | <span v-if="this.item.units === 'metric'">°C</span> | |
31 | <span v-else-if="this.item.units === 'imperial'">°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> | |
593f8afc DW |
37 | </template> |
38 | </p> | |
39 | </div> | |
40 | </div> | |
41 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | |
42 | <strong class="tag-text">#{{ item.tag }}</strong> | |
43 | </div> | |
44 | </div> | |
45 | </a> | |
46 | </div> | |
47 | </div> | |
48 | </template> | |
49 | ||
50 | <script> | |
51 | export default { | |
52 | name: "OpenWeather", | |
53 | props: { | |
54 | item: Object, | |
55 | }, | |
56 | data: () => ({ | |
fb158d47 | 57 | error: false, |
593f8afc | 58 | api: { |
fb158d47 | 59 | id: "", |
593f8afc | 60 | name: "", |
b79561bc DW |
61 | weather: [ |
62 | { | |
63 | main: "", | |
64 | description: "", | |
65 | icon: "", | |
66 | }, | |
67 | ], | |
593f8afc | 68 | main: { |
b79561bc DW |
69 | temp: "", |
70 | humidity: "", | |
71 | }, | |
72 | }, | |
593f8afc DW |
73 | }), |
74 | computed: { | |
fb158d47 | 75 | locationId: function () { |
593f8afc | 76 | if (this.api) { |
fb158d47 DW |
77 | return this.api.id; |
78 | } | |
79 | return ""; | |
80 | }, | |
551e32e2 DW |
81 | locationName: function () { |
82 | if (this.api) { | |
83 | return this.api.name; | |
84 | } | |
85 | return ""; | |
86 | }, | |
fb158d47 DW |
87 | temp: function () { |
88 | if (this.api && this.api.main.temp !== "") { | |
b79561bc DW |
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; | |
593f8afc DW |
102 | } |
103 | return ""; | |
104 | }, | |
593f8afc DW |
105 | }, |
106 | created() { | |
107 | this.fetchStatus(); | |
108 | }, | |
109 | methods: { | |
110 | fetchStatus: async function () { | |
551e32e2 DW |
111 | let locationQuery; |
112 | ||
113 | // If a specific location ID was specified, use it. Otherwise retrieve value from location (name). | |
114 | if (this.item.locationId) { | |
115 | locationQuery = `id=${this.item.locationId}`; | |
116 | } else { | |
117 | locationQuery = `q=${this.item.location}`; | |
118 | } | |
119 | ||
120 | const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`; | |
593f8afc DW |
121 | this.api = await fetch(url) |
122 | .then((response) => response.json()) | |
fb158d47 DW |
123 | .catch((e) => { |
124 | this.error = true; | |
125 | console.log(e) | |
126 | }); | |
593f8afc DW |
127 | }, |
128 | }, | |
129 | }; | |
130 | </script> | |
131 | ||
132 | <style scoped lang="scss"> | |
fb158d47 DW |
133 | |
134 | // Add a border around the weather image. | |
135 | // Otherwise the image is not always distinguishable. | |
fd12de9e DW |
136 | .media-left { |
137 | &.circle, | |
138 | &.square { | |
139 | background-color: #e4e4e4; | |
140 | } | |
141 | ||
142 | &.circle { | |
143 | border-radius: 90%; | |
144 | } | |
145 | ||
146 | img { | |
147 | max-height: 100%; | |
148 | } | |
149 | } | |
150 | ||
fb158d47 DW |
151 | .error { |
152 | color: #de0000; | |
153 | } | |
154 | ||
155 | // Change background color in dark mode. | |
fd12de9e DW |
156 | .is-dark { |
157 | .media-left { | |
158 | &.circle, | |
159 | &.square { | |
160 | background-color: #909090; | |
161 | } | |
162 | } | |
593f8afc | 163 | } |
b79561bc | 164 | </style> |