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 url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apikey}&units=${this.item.units}`;
71 throw Error(response.statusText);
73 return response.json();
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;
89 tempSuffix: function (value, type) {
90 if (!value) return "";
93 if (type === "metric") {
95 } else if (type === "imperial") {
98 return `${value} ${unit}`;
104 <style scoped lang="scss">
105 // Add a border around the weather image.
106 // Otherwise the image is not always distinguishable.
110 background-color: #e4e4e4;
126 // Change background color in dark mode.
131 background-color: #909090;