extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2025-01-28 00:38:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Format file.

Browse Source
This commit is contained in:
Dick Wolff 2021-01-12 11:39:27 +01:00
parent 593f8afc90
commit b79561bc9c
1 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/services/OpenWeather.vue
View File

@ -6,7 +6,11 @@
<div class="media"> <div class="media">
<div v-if="image" class="media-left"> <div v-if="image" class="media-left">
<figure class="image is-48x48"> <figure class="image is-48x48">
<img :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" :alt="conditions" :title="conditions" /> <img
:src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
:alt="conditions"
:title="conditions"
/>
</figure> </figure>
</div> </div>
<div v-if="item.icon" class="media-left"> <div v-if="item.icon" class="media-left">
@ -21,10 +25,10 @@
{{ item.subtitle }} {{ item.subtitle }}
</template> </template>
<template v-else-if="api"> <template v-else-if="api">
{{ temp }} {{ temp }}
<span v-if="this.item.units == 'metric'">&deg;C</span> <span v-if="this.item.units == 'metric'">&deg;C</span>
<span v-else-if="this.item.units == 'imperial'">&deg;F</span> <span v-else-if="this.item.units == 'imperial'">&deg;F</span>
<span v-else>K</span> <span v-else>K</span>
</template> </template>
</p> </p>
</div> </div>
@ -47,36 +51,38 @@ export default {
data: () => ({ data: () => ({
api: { api: {
name: "", name: "",
weather: [{ weather: [
main: "", {
description: "", main: "",
icon: "" description: "",
}], icon: "",
},
],
main: { main: {
temp: "", temp: "",
humidity: "" humidity: "",
} },
} },
}), }),
computed: { computed: {
temp: function () { temp: function () {
if (this.api) { if (this.api) {
return parseInt(this.api.main.temp).toFixed(1); return parseInt(this.api.main.temp).toFixed(1);
}
return "";
},
image: function () {
if (this.api) {
return this.api.weather[0].icon;
}
return "";
},
conditions: function () {
if (this.api) {
return this.api.weather[0].description;
} }
return ""; return "";
}, },
image: function () {
if (this.api) {
return this.api.weather[0].icon;
}
return "";
},
conditions: function () {
if (this.api) {
return this.api.weather[0].description;
}
return "";
}
}, },
created() { created() {
this.fetchStatus(); this.fetchStatus();
@ -96,4 +102,4 @@ export default {
.media-left img { .media-left img {
max-height: 100%; max-height: 100%;
} }
</style> </style>