From 6e72163f2acb76f45f667a2213d33027c157a0b0 Mon Sep 17 00:00:00 2001 From: Vikas Date: Thu, 23 Sep 2021 19:20:45 +0000 Subject: [PATCH] Update RegisterWeatherWidget.js --- openweathermap.org/RegisterWeatherWidget.js | 72 ++++++++++++--------- 1 file changed, 43 insertions(+), 29 deletions(-) diff --git a/openweathermap.org/RegisterWeatherWidget.js b/openweathermap.org/RegisterWeatherWidget.js index 36ccfec..dd7e5a8 100644 --- a/openweathermap.org/RegisterWeatherWidget.js +++ b/openweathermap.org/RegisterWeatherWidget.js @@ -1,7 +1,15 @@ -var Contacts_Component_RegisterWeatherWidget = VTAP.Component.Core.extend({ +var Contacts_Component_WeatherWidget = VTAP.Component.Core.extend({ //all the component registration is done in created function created() { + //register for widget in summary view + VTAP.Component.Register('DETAIL_SUMMARY_WIDGET', + {}, + VTAP.Component.Load('WeatherWidgetContents','Contacts'), + {module:'Contacts'} + ); + + //this wil register for a link in List page settings accessible only for admins, this will be used to save api key. VTAP.Component.Register('LIST_ADVANCED_SETTING', { @@ -12,8 +20,6 @@ var Contacts_Component_RegisterWeatherWidget = VTAP.Component.Core.extend({ } }); - //register for widget in summary view - VTAP.Component.Register('DETAIL_SUMMARY_WIDGET', {}, VTAP.Component.Load('WeatherWidget','Contacts')); //add external javascript and style library VTAP.Resource.Require('https://unpkg.com/leaflet@1.6.0/dist/leaflet.js'); @@ -65,67 +71,75 @@ var Contacts_Component_WeatherSettings = VTAP.Component.Core.extend({ //this component will be called for DETAIL_SUMMARY_WIDGET registration. -var Contacts_Component_WeatherWidget = VTAP.Component.Core.extend({ +var Contacts_Component_WeatherWidgetContents = VTAP.Component.Core.extend({ data() { return { - data : '' + weather_data : '', + mapLoaded : false, } }, //when the Component html is mounted on DOM this function will be called. mounted() { //Request to get current record (if you have opened detail page of a record VTAP.Detail.Record().then( (record) => { - //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.data = JSON.parse(response.content); - setTimeout(() => { + this.weather_data = JSON.parse(response.content); + setTimeout(() => { + this.mapLoaded = true; this.showMap(); - }, 5000); + }, 1000); } }); }); }, methods : { - //shows open street map based on the lat lng received from openweather api + getDisplayTime(timestamp) { + let d = new Date(timestamp * 1000).toISOString().slice(0, 19).replace('T', ' ').split(' '); + return d[1]; + }, + getDisplayTemperature(temp) { + return Math.round(temp - 273.15); + }, + getMapURL() { + return "https://www.openstreetmap.org/#map=13/"+this.data.coord.lat+"/"+this.data.coord.lon+""; + }, 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); + L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map); + + var target = L.latLng(this.weather_data.coord.lat, this.weather_data.coord.lon); map.setView(target, 13); L.marker(target).addTo(map); }, - getDisplayTime(timestamp) { - return moment.unix(timestamp).format('hh:mm A'); - }, - getDisplayTemperature(temp) { - return Math.round(temp - 273.15); - } }, //html rendered in summary widget template: `
-
Weather details
-
+

Weather details

+
-
+
+ +
- - - - - + + + + + +
PropertiesValue
Sunrise Time{{getDisplayTime(data.sys.sunrise)}}
Sunset Time{{getDisplayTime(data.sys.sunset)}}
Max Temp{{getDisplayTemperature(data.main.temp_min)}} C
Min Temp{{getDisplayTemperature(data.main.temp_min)}} C
Weather description{{data.weather[0].description}}
Current Time{{getDisplayTime(weather_data.dt+weather_data.timezone)}}
Sunrise Time{{getDisplayTime(weather_data.sys.sunrise+weather_data.timezone)}}
Sunset Time{{getDisplayTime(weather_data.sys.sunset+weather_data.timezone)}}
Max Temp{{getDisplayTemperature(weather_data.main.temp_min)}} C
Min Temp{{getDisplayTemperature(weather_data.main.temp_max)}} C
Weather description{{weather_data.weather[0].description}}
+
+ +
` }); -- 2.18.1