From ac8c5e4c733e3edfd9a13b8361fcdfe5363a7831 Mon Sep 17 00:00:00 2001 From: Vikas Date: Thu, 23 Sep 2021 19:05:02 +0000 Subject: [PATCH] Update WeatherWidgetContents.js --- openweathermap.org/WeatherWidgetContents.js | 23 +++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/openweathermap.org/WeatherWidgetContents.js b/openweathermap.org/WeatherWidgetContents.js index 62cb8ee..88ba32a 100644 --- a/openweathermap.org/WeatherWidgetContents.js +++ b/openweathermap.org/WeatherWidgetContents.js @@ -1,19 +1,37 @@ +//this component will be called for DETAIL_SUMMARY_WIDGET registration. var Contacts_Component_WeatherWidgetContents = VTAP.Component.Core.extend({ data() { weather_data : '' - }, + }, + //when the Component html is mounted on DOM this function will be called. created() { + //Request to get current record (if you have opened detail page of a record VTAP.Detail.Record().then( (record) => { - //fetch weather details from openweathermap + //this will call get_weather custom api we added from Api Designer. VTAP.CustomApi.Get('get_weather', {'city' : record.mailingcity}, (error, response) => { if(response && response.content) { this.weather_data = JSON.parse(response.content); + setTimeout(() => { + this.showMap(); + }, 2000); } }); }); }, methods : { + //shows open street map based on the lat lng received from openweather api + showMap() { + var element = document.getElementById('osm-map'); + var map = L.map(element); + L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors' + }).addTo(map); + // set's GPS coordinates. + var target = L.latLng(this.data.coord.lat, this.data.coord.lon); + map.setView(target, 13); + L.marker(target).addTo(map); + }, getDisplayTime(timestamp) { let d = new Date(timestamp * 1000).toISOString().slice(0, 19).replace('T', ' ').split(' '); return d[1]; @@ -22,6 +40,7 @@ var Contacts_Component_WeatherWidgetContents = VTAP.Component.Core.extend({ return Math.round(temp - 273.15); } }, + //html rendered in summary widget template : `

Weather details

-- 2.18.1