diff options
-rw-r--r-- | src/components/services/OpenWeather.vue | 29 |
1 files changed, 28 insertions, 1 deletions
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue index ba0be96..3169866 100644 --- a/src/components/services/OpenWeather.vue +++ b/src/components/services/OpenWeather.vue | |||
@@ -22,7 +22,12 @@ | |||
22 | <div v-else> | 22 | <div v-else> |
23 | <p class="title is-4">{{ name }}</p> | 23 | <p class="title is-4">{{ name }}</p> |
24 | <p class="subtitle is-6"> | 24 | <p class="subtitle is-6"> |
25 | {{ temperature }} | 25 | <span> |
26 | {{ temp | tempSuffix(this.item.units) }} | ||
27 | </span> | ||
28 | <span class="location-time"> | ||
29 | {{ locationTime }} | ||
30 | </span> | ||
26 | </p> | 31 | </p> |
27 | </div> | 32 | </div> |
28 | </div> | 33 | </div> |
@@ -49,6 +54,7 @@ export default { | |||
49 | temp: null, | 54 | temp: null, |
50 | conditions: null, | 55 | conditions: null, |
51 | error: false, | 56 | error: false, |
57 | timezoneOffset: 0, | ||
52 | }), | 58 | }), |
53 | computed: { | 59 | computed: { |
54 | temperature: function () { | 60 | temperature: function () { |
@@ -66,6 +72,11 @@ export default { | |||
66 | created() { | 72 | created() { |
67 | this.fetchWeather(); | 73 | this.fetchWeather(); |
68 | }, | 74 | }, |
75 | computed: { | ||
76 | locationTime: function () { | ||
77 | return this.calcTime(this.timezoneOffset); | ||
78 | }, | ||
79 | }, | ||
69 | methods: { | 80 | methods: { |
70 | fetchWeather: async function () { | 81 | fetchWeather: async function () { |
71 | let locationQuery; | 82 | let locationQuery; |
@@ -92,12 +103,23 @@ export default { | |||
92 | this.temp = parseInt(weather.main.temp).toFixed(1); | 103 | this.temp = parseInt(weather.main.temp).toFixed(1); |
93 | this.icon = weather.weather[0].icon; | 104 | this.icon = weather.weather[0].icon; |
94 | this.conditions = weather.weather[0].description; | 105 | this.conditions = weather.weather[0].description; |
106 | this.timezoneOffset = weather.timezone; | ||
95 | }) | 107 | }) |
96 | .catch((e) => { | 108 | .catch((e) => { |
97 | console.log(e); | 109 | console.log(e); |
98 | this.error = true; | 110 | this.error = true; |
99 | }); | 111 | }); |
100 | }, | 112 | }, |
113 | calcTime: (offset) => { | ||
114 | const localTime = new Date(); | ||
115 | const utcTime = | ||
116 | localTime.getTime() + localTime.getTimezoneOffset() * 60000; | ||
117 | const calculatedTime = new Date(utcTime + 1000 * offset); | ||
118 | return calculatedTime.toLocaleString([], { | ||
119 | hour: "2-digit", | ||
120 | minute: "2-digit", | ||
121 | }); | ||
122 | }, | ||
101 | }, | 123 | }, |
102 | }; | 124 | }; |
103 | </script> | 125 | </script> |
@@ -133,4 +155,9 @@ export default { | |||
133 | } | 155 | } |
134 | } | 156 | } |
135 | } | 157 | } |
158 | |||
159 | //Location Time | ||
160 | .location-time { | ||
161 | margin-left: 20px; | ||
162 | } | ||
136 | </style> | 163 | </style> |