aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/services')
-rw-r--r--src/components/services/OpenWeather.vue164
1 files changed, 164 insertions, 0 deletions
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
new file mode 100644
index 0000000..0fc1fe5
--- /dev/null
+++ b/src/components/services/OpenWeather.vue
@@ -0,0 +1,164 @@
1<template>
2 <div>
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">
6 <div class="media">
7 <div v-if="image" class="media-left" :class="item.background">
8 <figure class="image is-48x48">
9 <img
10 :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
11 :alt="conditions"
12 :title="conditions"
13 />
14 </figure>
15 </div>
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>
19 </figure>
20 </div>
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">
25 {{ item.subtitle }}
26 </template>
27 <template v-else-if="api">
28 <template v-if="temp !== ''">
29 {{ temp }}
30 <span v-if="this.item.units === 'metric'">&deg;C</span>
31 <span v-else-if="this.item.units === 'imperial'">&deg;F</span>
32 <span v-else>K</span>
33 </template>
34 <template v-else>
35 <span class="error">Data could not be retrieved</span>
36 </template>
37 </template>
38 </p>
39 </div>
40 </div>
41 <div class="tag" :class="item.tagstyle" v-if="item.tag">
42 <strong class="tag-text">#{{ item.tag }}</strong>
43 </div>
44 </div>
45 </a>
46 </div>
47 </div>
48</template>
49
50<script>
51export default {
52 name: "OpenWeather",
53 props: {
54 item: Object,
55 },
56 data: () => ({
57 error: false,
58 api: {
59 id: "",
60 name: "",
61 weather: [
62 {
63 main: "",
64 description: "",
65 icon: "",
66 },
67 ],
68 main: {
69 temp: "",
70 humidity: "",
71 },
72 },
73 }),
74 computed: {
75 locationId: function () {
76 if (this.api) {
77 return this.api.id;
78 }
79 return "";
80 },
81 locationName: function () {
82 if (this.api) {
83 return this.api.name;
84 }
85 return "";
86 },
87 temp: function () {
88 if (this.api && this.api.main.temp !== "") {
89 return parseInt(this.api.main.temp).toFixed(1);
90 }
91 return "";
92 },
93 image: function () {
94 if (this.api) {
95 return this.api.weather[0].icon;
96 }
97 return "";
98 },
99 conditions: function () {
100 if (this.api) {
101 return this.api.weather[0].description;
102 }
103 return "";
104 },
105 },
106 created() {
107 this.fetchStatus();
108 },
109 methods: {
110 fetchStatus: async function () {
111 let locationQuery;
112
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}`;
116 } else {
117 locationQuery = `q=${this.item.location}`;
118 }
119
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())
123 .catch((e) => {
124 this.error = true;
125 console.log(e)
126 });
127 },
128 },
129};
130</script>
131
132<style scoped lang="scss">
133
134// Add a border around the weather image.
135// Otherwise the image is not always distinguishable.
136.media-left {
137 &.circle,
138 &.square {
139 background-color: #e4e4e4;
140 }
141
142 &.circle {
143 border-radius: 90%;
144 }
145
146 img {
147 max-height: 100%;
148 }
149}
150
151.error {
152 color: #de0000;
153}
154
155// Change background color in dark mode.
156.is-dark {
157 .media-left {
158 &.circle,
159 &.square {
160 background-color: #909090;
161 }
162 }
163}
164</style>