Update RegisterWeatherWidget.js

openweathermap.org/RegisterWeatherWidget.js

-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/[email protected]/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);
+                    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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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:
         `<div class='p-2 bg-white'>
-            <div class='p-2'>Weather details</div>
-            <div class='row' v-if="data">
+            <div class='p-2 d-flex align-items-center justify-content-center'><h4>Weather details</h4></div>
+            <div class='row' v-if="weather_data">
                 <div class='col-6'>
-                    <div id="osm-map" style="height:300px;"></div>
+                    <div id="osm-map" style="height:300px;" class='d-flex justify-content-center align-items-center'>
+                        <b-spinner label="loading" v-if="!mapLoaded"></b-spinner>
+                    </div>
                 </div>
                 <div class='col-6'>
                     <table class='table table-striped'>
                         <tr><th>Properties</th><th>Value</th></tr>
-                        <tr><td>Sunrise Time</td><td>{{getDisplayTime(data.sys.sunrise)}}</td></tr>
-                        <tr><td>Sunset Time</td><td>{{getDisplayTime(data.sys.sunset)}}</td></tr>
-                        <tr><td>Max Temp</td><td>{{getDisplayTemperature(data.main.temp_min)}} C</td></tr>
-                        <tr><td>Min Temp</td><td>{{getDisplayTemperature(data.main.temp_min)}} C</td></tr>
-                        <tr><td>Weather description</td><td>{{data.weather[0].description}}</td></tr>
+                        <tr><td>Current Time</td><td>{{getDisplayTime(weather_data.dt+weather_data.timezone)}}</td></tr>
+                        <tr><td>Sunrise Time</td><td>{{getDisplayTime(weather_data.sys.sunrise+weather_data.timezone)}}</td></tr>
+                        <tr><td>Sunset Time</td><td>{{getDisplayTime(weather_data.sys.sunset+weather_data.timezone)}}</td></tr>
+                        <tr><td>Max Temp</td><td>{{getDisplayTemperature(weather_data.main.temp_min)}} C</td></tr>
+                        <tr><td>Min Temp</td><td>{{getDisplayTemperature(weather_data.main.temp_max)}} C</td></tr>
+                        <tr><td>Weather description</td><td>{{weather_data.weather[0].description}}</td></tr>
                     </table>
                 </div>
             </div>
+            <div v-else class='d-flex justify-content-center align-items-center' style='min-height:100px;'>
+                <b-spinner label="loading"></b-spinner>
+            </div>
         </div>`   
 });