diff options
-rw-r--r-- | dummy-data/openweather/weather | 46 | ||||
-rw-r--r-- | public/assets/config-demo.yml.dist | 6 | ||||
-rw-r--r-- | src/components/services/OpenWeather.vue | 16 | ||||
-rw-r--r-- | src/components/services/Ping.vue | 7 |
4 files changed, 66 insertions, 9 deletions
diff --git a/dummy-data/openweather/weather b/dummy-data/openweather/weather new file mode 100644 index 0000000..80245ef --- /dev/null +++ b/dummy-data/openweather/weather | |||
@@ -0,0 +1,46 @@ | |||
1 | { | ||
2 | "coord": { | ||
3 | "lon": 4.5833, | ||
4 | "lat": 45.75 | ||
5 | }, | ||
6 | "weather": [ | ||
7 | { | ||
8 | "id": 804, | ||
9 | "main": "Clouds", | ||
10 | "description": "overcast clouds", | ||
11 | "icon": "04d" | ||
12 | } | ||
13 | ], | ||
14 | "base": "stations", | ||
15 | "main": { | ||
16 | "temp": 23, | ||
17 | "feels_like": 22.3, | ||
18 | "temp_min": 21.75, | ||
19 | "temp_max": 25.03, | ||
20 | "pressure": 1019, | ||
21 | "humidity": 36, | ||
22 | "sea_level": 1019, | ||
23 | "grnd_level": 957 | ||
24 | }, | ||
25 | "visibility": 10000, | ||
26 | "wind": { | ||
27 | "speed": 2.29, | ||
28 | "deg": 174, | ||
29 | "gust": 6.22 | ||
30 | }, | ||
31 | "clouds": { | ||
32 | "all": 97 | ||
33 | }, | ||
34 | "dt": 1667136939, | ||
35 | "sys": { | ||
36 | "type": 2, | ||
37 | "id": 2005747, | ||
38 | "country": "FR", | ||
39 | "sunrise": 1667110705, | ||
40 | "sunset": 1667147524 | ||
41 | }, | ||
42 | "timezone": 3600, | ||
43 | "id": 2996943, | ||
44 | "name": "Arrondissement de Lyon", | ||
45 | "cod": 200 | ||
46 | } \ No newline at end of file | ||
diff --git a/public/assets/config-demo.yml.dist b/public/assets/config-demo.yml.dist index 43188fb..4d088cc 100644 --- a/public/assets/config-demo.yml.dist +++ b/public/assets/config-demo.yml.dist | |||
@@ -100,6 +100,12 @@ services: | |||
100 | keywords: "demo" | 100 | keywords: "demo" |
101 | url: "#" | 101 | url: "#" |
102 | target: "_blank" | 102 | target: "_blank" |
103 | - name: "Weather" | ||
104 | location: "Lyon" | ||
105 | apikey: "xxxxxxxxxxxx" # insert your own API key here. Request one from https://openweathermap.org/api. | ||
106 | units: "metric" | ||
107 | endpoint: "https://homer-demo-content.netlify.app/openweather/weather" | ||
108 | type: "OpenWeather" | ||
103 | - name: "interesting links" | 109 | - name: "interesting links" |
104 | icon: "fas fa-solid fa-arrow-up-right-from-square" | 110 | icon: "fas fa-solid fa-arrow-up-right-from-square" |
105 | items: | 111 | items: |
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue index 3169866..649e8e5 100644 --- a/src/components/services/OpenWeather.vue +++ b/src/components/services/OpenWeather.vue | |||
@@ -23,7 +23,7 @@ | |||
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 | <span> | 25 | <span> |
26 | {{ temp | tempSuffix(this.item.units) }} | 26 | {{ temperature }} |
27 | </span> | 27 | </span> |
28 | <span class="location-time"> | 28 | <span class="location-time"> |
29 | {{ locationTime }} | 29 | {{ locationTime }} |
@@ -68,15 +68,13 @@ export default { | |||
68 | } | 68 | } |
69 | return `${this.temp} ${unit}`; | 69 | return `${this.temp} ${unit}`; |
70 | }, | 70 | }, |
71 | }, | ||
72 | created() { | ||
73 | this.fetchWeather(); | ||
74 | }, | ||
75 | computed: { | ||
76 | locationTime: function () { | 71 | locationTime: function () { |
77 | return this.calcTime(this.timezoneOffset); | 72 | return this.calcTime(this.timezoneOffset); |
78 | }, | 73 | }, |
79 | }, | 74 | }, |
75 | created() { | ||
76 | this.fetchWeather(); | ||
77 | }, | ||
80 | methods: { | 78 | methods: { |
81 | fetchWeather: async function () { | 79 | fetchWeather: async function () { |
82 | let locationQuery; | 80 | let locationQuery; |
@@ -89,7 +87,11 @@ export default { | |||
89 | } | 87 | } |
90 | 88 | ||
91 | const apiKey = this.item.apikey || this.item.apiKey; | 89 | const apiKey = this.item.apikey || this.item.apiKey; |
92 | const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${apiKey}&units=${this.item.units}`; | 90 | |
91 | let url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${apiKey}&units=${this.item.units}`; | ||
92 | if (this.item.endpoint) { | ||
93 | url = this.item.endpoint; | ||
94 | } | ||
93 | fetch(url) | 95 | fetch(url) |
94 | .then((response) => { | 96 | .then((response) => { |
95 | if (!response.ok) { | 97 | if (!response.ok) { |
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue index 07bc053..e2db050 100644 --- a/src/components/services/Ping.vue +++ b/src/components/services/Ping.vue | |||
@@ -29,9 +29,12 @@ export default { | |||
29 | }, | 29 | }, |
30 | methods: { | 30 | methods: { |
31 | fetchStatus: async function () { | 31 | fetchStatus: async function () { |
32 | const method = typeof this.item.method === 'string' ? this.item.method.toUpperCase() : 'HEAD'; | 32 | const method = |
33 | typeof this.item.method === "string" | ||
34 | ? this.item.method.toUpperCase() | ||
35 | : "HEAD"; | ||
33 | 36 | ||
34 | if (!['GET', 'HEAD', 'OPTION'].includes(method)) { | 37 | if (!["GET", "HEAD", "OPTION"].includes(method)) { |
35 | console.error(`Ping: ${method} is not a supported HTTP method`); | 38 | console.error(`Ping: ${method} is not a supported HTTP method`); |
36 | return; | 39 | return; |
37 | } | 40 | } |