3 <div class="card" :class="item.class">
4 <a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer">
5 <div class="card-content">
7 <div v-if="image" class="media-left" :class="item.background">
8 <figure class="image is-48x48">
10 :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
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>
21 <div class="media-content">
22 <p class="title is-4">{{ locationName }}</p>
23 <p class="subtitle is-6">
24 <template v-if="item.subtitle">
27 <template v-else-if="api">
28 <template v-if="temp !== ''">
30 <span v-if="this.item.units === 'metric'">°C</span>
31 <span v-else-if="this.item.units === 'imperial'">°F</span>
35 <span class="error">Data could not be retrieved</span>
41 <div class="tag" :class="item.tagstyle" v-if="item.tag">
42 <strong class="tag-text">#{{ item.tag }}</strong>
75 locationId: function () {
81 locationName: function () {
88 if (this.api && this.api.main.temp !== "") {
89 return parseInt(this.api.main.temp).toFixed(1);
95 return this.api.weather[0].icon;
99 conditions: function () {
101 return this.api.weather[0].description;
110 fetchStatus: async function () {
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}`;
117 locationQuery = `q=${this.item.location}`;
120 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)
122 .then((response) => response.json())
132 <style scoped lang="scss">
134 // Add a border around the weather image.
135 // Otherwise the image is not always distinguishable.
139 background-color: #e4e4e4;
155 // Change background color in dark mode.
160 background-color: #909090;