Update RegisterWeatherWidget.js
Showing
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); | ||
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: '© <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>` | ||
}); | ||
... | ... |
Please register or sign in to comment