aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
authorDick Wolff <dckwlff@gmail.com>2021-01-12 11:35:57 +0100
committerDick Wolff <dckwlff@gmail.com>2021-01-12 11:35:57 +0100
commit593f8afc909e166260f32a9e97f8d54d941802e6 (patch)
treed3d70f6612cdabba9981c7b00704baa1d94fcce0 /src/components
parent3786f80dae2df7780d19ba8ffd9374ef3c2fc30f (diff)
downloadhomer-593f8afc909e166260f32a9e97f8d54d941802e6.tar.gz
homer-593f8afc909e166260f32a9e97f8d54d941802e6.tar.zst
homer-593f8afc909e166260f32a9e97f8d54d941802e6.zip
Added OpenWeather service component.
Diffstat (limited to 'src/components')
-rw-r--r--src/components/services/OpenWeather.vue99
1 files changed, 99 insertions, 0 deletions
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
new file mode 100644
index 0000000..30abb2d
--- /dev/null
+++ b/src/components/services/OpenWeather.vue
@@ -0,0 +1,99 @@
1<template>
2 <div>
3 <div class="card" :class="item.class">
4 <a :href="item.url" :target="item.target" rel="noreferrer">
5 <div class="card-content">
6 <div class="media">
7 <div v-if="image" class="media-left">
8 <figure class="image is-48x48">
9 <img :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" :alt="conditions" :title="conditions" />
10 </figure>
11 </div>
12 <div v-if="item.icon" class="media-left">
13 <figure class="image is-48x48">
14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
15 </figure>
16 </div>
17 <div class="media-content">
18 <p class="title is-4">{{ item.location }}</p>
19 <p class="subtitle is-6">
20 <template v-if="item.subtitle">
21 {{ item.subtitle }}
22 </template>
23 <template v-else-if="api">
24 {{ temp }}
25 <span v-if="this.item.units == 'metric'">&deg;C</span>
26 <span v-else-if="this.item.units == 'imperial'">&deg;F</span>
27 <span v-else>K</span>
28 </template>
29 </p>
30 </div>
31 </div>
32 <div class="tag" :class="item.tagstyle" v-if="item.tag">
33 <strong class="tag-text">#{{ item.tag }}</strong>
34 </div>
35 </div>
36 </a>
37 </div>
38 </div>
39</template>
40
41<script>
42export default {
43 name: "OpenWeather",
44 props: {
45 item: Object,
46 },
47 data: () => ({
48 api: {
49 name: "",
50 weather: [{
51 main: "",
52 description: "",
53 icon: ""
54 }],
55 main: {
56 temp: "",
57 humidity: ""
58 }
59 }
60 }),
61 computed: {
62 temp: function () {
63 if (this.api) {
64 return parseInt(this.api.main.temp).toFixed(1);
65 }
66 return "";
67 },
68 image: function () {
69 if (this.api) {
70 return this.api.weather[0].icon;
71 }
72 return "";
73 },
74 conditions: function () {
75 if (this.api) {
76 return this.api.weather[0].description;
77 }
78 return "";
79 }
80 },
81 created() {
82 this.fetchStatus();
83 },
84 methods: {
85 fetchStatus: async function () {
86 const url = `${this.item.url}?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
87 this.api = await fetch(url)
88 .then((response) => response.json())
89 .catch((e) => console.log(e));
90 },
91 },
92};
93</script>
94
95<style scoped lang="scss">
96.media-left img {
97 max-height: 100%;
98}
99</style> \ No newline at end of file