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">
28 <span class="location-time">
35 <div class="tag" :class="item.tagstyle" v-if="item.tag">
36 <strong class="tag-text">#{{ item.tag }}</strong>
60 temperature: function () {
61 if (!this.temp) return "";
64 if (this.item.units === "metric") {
66 } else if (this.item.units === "imperial") {
69 return `${this.temp} ${unit}`;
71 locationTime: function () {
72 return this.calcTime(this.timezoneOffset);
79 fetchWeather: async function () {
82 // Use location ID if specified, otherwise retrieve value from location (name).
83 if (this.item.locationId) {
84 locationQuery = `id=${this.item.locationId}`;
86 locationQuery = `q=${this.item.location}`;
89 const apiKey = this.item.apikey || this.item.apiKey;
91 let url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${apiKey}&units=${this.item.units}`;
92 if (this.item.endpoint) {
93 url = this.item.endpoint;
98 throw Error(response.statusText);
100 return response.json();
103 this.id = weather.id;
104 this.name = weather.name;
105 this.temp = parseInt(weather.main.temp).toFixed(1);
106 this.icon = weather.weather[0].icon;
107 this.conditions = weather.weather[0].description;
108 this.timezoneOffset = weather.timezone;
115 calcTime: (offset) => {
116 const localTime = new Date();
118 localTime.getTime() + localTime.getTimezoneOffset() * 60000;
119 const calculatedTime = new Date(utcTime + 1000 * offset);
120 return calculatedTime.toLocaleString([], {
129 <style scoped lang="scss">
130 // Add a border around the weather image.
131 // Otherwise the image is not always distinguishable.
135 background-color: #e4e4e4;
151 // Change background color in dark mode.
156 background-color: #909090;