Commit 6e72163f authored by Vikas's avatar Vikas

Update RegisterWeatherWidget.js

parent fd487f12
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 //all the component registration is done in created function
created() { 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. //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', VTAP.Component.Register('LIST_ADVANCED_SETTING',
{ {
...@@ -12,8 +20,6 @@ var Contacts_Component_RegisterWeatherWidget = VTAP.Component.Core.extend({ ...@@ -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 //add external javascript and style library
VTAP.Resource.Require('https://unpkg.com/[email protected]/dist/leaflet.js'); VTAP.Resource.Require('https://unpkg.com/[email protected]/dist/leaflet.js');
...@@ -65,67 +71,75 @@ var Contacts_Component_WeatherSettings = VTAP.Component.Core.extend({ ...@@ -65,67 +71,75 @@ var Contacts_Component_WeatherSettings = VTAP.Component.Core.extend({
//this component will be called for DETAIL_SUMMARY_WIDGET registration. //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() { data() {
return { return {
data : '' weather_data : '',
mapLoaded : false,
} }
}, },
//when the Component html is mounted on DOM this function will be called. //when the Component html is mounted on DOM this function will be called.
mounted() { mounted() {
//Request to get current record (if you have opened detail page of a record //Request to get current record (if you have opened detail page of a record
VTAP.Detail.Record().then( (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}, VTAP.CustomApi.Get('get_weather', {'city' : record.mailingcity},
(error, response) => { (error, response) => {
if(response && response.content) { if(response && response.content) {
this.data = JSON.parse(response.content); this.weather_data = JSON.parse(response.content);
setTimeout(() => { setTimeout(() => {
this.mapLoaded = true;
this.showMap(); this.showMap();
}, 5000); }, 1000);
} }
}); });
}); });
}, },
methods : { 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() { showMap() {
var element = document.getElementById('osm-map'); var element = document.getElementById('osm-map');
var map = L.map(element); var map = L.map(element);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); var target = L.latLng(this.weather_data.coord.lat, this.weather_data.coord.lon);
// set's GPS coordinates.
var target = L.latLng(this.data.coord.lat, this.data.coord.lon);
map.setView(target, 13); map.setView(target, 13);
L.marker(target).addTo(map); 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 //html rendered in summary widget
template: template:
`<div class='p-2 bg-white'> `<div class='p-2 bg-white'>
<div class='p-2'>Weather details</div> <div class='p-2 d-flex align-items-center justify-content-center'><h4>Weather details</h4></div>
<div class='row' v-if="data"> <div class='row' v-if="weather_data">
<div class='col-6'> <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>
<div class='col-6'> <div class='col-6'>
<table class='table table-striped'> <table class='table table-striped'>
<tr><th>Properties</th><th>Value</th></tr> <tr><th>Properties</th><th>Value</th></tr>
<tr><td>Sunrise Time</td><td>{{getDisplayTime(data.sys.sunrise)}}</td></tr> <tr><td>Current Time</td><td>{{getDisplayTime(weather_data.dt+weather_data.timezone)}}</td></tr>
<tr><td>Sunset Time</td><td>{{getDisplayTime(data.sys.sunset)}}</td></tr> <tr><td>Sunrise Time</td><td>{{getDisplayTime(weather_data.sys.sunrise+weather_data.timezone)}}</td></tr>
<tr><td>Max Temp</td><td>{{getDisplayTemperature(data.main.temp_min)}} C</td></tr> <tr><td>Sunset Time</td><td>{{getDisplayTime(weather_data.sys.sunset+weather_data.timezone)}}</td></tr>
<tr><td>Min Temp</td><td>{{getDisplayTemperature(data.main.temp_min)}} C</td></tr> <tr><td>Max Temp</td><td>{{getDisplayTemperature(weather_data.main.temp_min)}} C</td></tr>
<tr><td>Weather description</td><td>{{data.weather[0].description}}</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> </table>
</div> </div>
</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>` </div>`
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment