<template>
<div>
<div class="card" :class="item.class">
- <a :href="item.url" :target="item.target" rel="noreferrer">
+ <a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer">
<div class="card-content">
<div class="media">
- <div v-if="image" class="media-left">
+ <div v-if="image" class="media-left" :class="item.background">
<figure class="image is-48x48">
<img
:src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
{{ item.subtitle }}
</template>
<template v-else-if="api">
- {{ temp }}
- <span v-if="this.item.units == 'metric'">°C</span>
- <span v-else-if="this.item.units == 'imperial'">°F</span>
- <span v-else>K</span>
+ <template v-if="temp !== ''">
+ {{ temp }}
+ <span v-if="this.item.units === 'metric'">°C</span>
+ <span v-else-if="this.item.units === 'imperial'">°F</span>
+ <span v-else>K</span>
+ </template>
+ <template v-else>
+ <span class="error">Data could not be retrieved</span>
+ </template>
</template>
</p>
</div>
item: Object,
},
data: () => ({
+ error: false,
api: {
+ id: "",
name: "",
weather: [
{
},
}),
computed: {
- temp: function () {
+ locationId: function () {
if (this.api) {
+ return this.api.id;
+ }
+ return "";
+ },
+ temp: function () {
+ if (this.api && this.api.main.temp !== "") {
return parseInt(this.api.main.temp).toFixed(1);
}
return "";
},
methods: {
fetchStatus: async function () {
- const url = `${this.item.url}?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
+ const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
this.api = await fetch(url)
.then((response) => response.json())
- .catch((e) => console.log(e));
+ .catch((e) => {
+ this.error = true;
+ console.log(e)
+ });
},
},
};
</script>
<style scoped lang="scss">
-.media-left img {
- max-height: 100%;
+
+// Add a border around the weather image.
+// Otherwise the image is not always distinguishable.
+.media-left {
+ &.circle,
+ &.square {
+ background-color: #e4e4e4;
+ }
+
+ &.circle {
+ border-radius: 90%;
+ }
+
+ img {
+ max-height: 100%;
+ }
+}
+
+.error {
+ color: #de0000;
+}
+
+// Change background color in dark mode.
+.is-dark {
+ .media-left {
+ &.circle,
+ &.square {
+ background-color: #909090;
+ }
+ }
}
</style>