3 <div class="card" :class="item.class">
5 :href="`https://openweathermap.org/city/${id}`"
9 <div class="card-content">
11 <div v-if="icon" class="media-left" :class="item.background">
12 <figure class="image is-48x48">
14 :src="`https://openweathermap.org/img/wn/${icon}@2x.png`"
20 <div class="media-content">
21 <p v-if="error" class="error">Data could not be retrieved</p>
23 <p class="title is-4">{{ name }}</p>
24 <p class="subtitle is-6">
25 {{ temp | tempSuffix(this.item.units) }}
30 <div class="tag" :class="item.tagstyle" v-if="item.tag">
31 <strong class="tag-text">#{{ item.tag }}</strong>
57 fetchWeather: async function () {
60 // Use location ID if specified, otherwise retrieve value from location (name).
61 if (this.item.locationId) {
62 locationQuery = `id=${this.item.locationId}`;
64 locationQuery = `q=${this.item.location}`;
67 const apiKey = this.item.apikey || this.item.apiKey;
68 const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${apiKey}&units=${this.item.units}`;
72 throw Error(response.statusText);
74 return response.json();
78 this.name = weather.name;
79 this.temp = parseInt(weather.main.temp).toFixed(1);
80 this.icon = weather.weather[0].icon;
81 this.conditions = weather.weather[0].description;
90 tempSuffix: function (value, type) {
91 if (!value) return "";
94 if (type === "metric") {
96 } else if (type === "imperial") {
99 return `${value} ${unit}`;
105 <style scoped lang="scss">
106 // Add a border around the weather image.
107 // Otherwise the image is not always distinguishable.
111 background-color: #e4e4e4;
127 // Change background color in dark mode.
132 background-color: #909090;