Added 2 example apps
parents
Showing
openweathermap.org/README.md
0 → 100644
var Contacts_Component_RegisterWeatherWidget = VTAP.Component.Core.extend({ | |||
//all the component registration is done in created function | |||
created() { | |||
//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', | |||
{ | |||
name:'Weather Settings', | |||
clickHandler:() => { | |||
//show modal popup, search WeatherSettings component of Contacts module (Contacts_Component_WeatherSettings) | |||
VTAP.Utility.ShowModal({component:VTAP.Component.Load("WeatherSettings","Contacts")}); | |||
} | |||
}); | |||
//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'); | |||
VTAP.Resource.Require('https://unpkg.com/[email protected]/dist/leaflet.css','style'); | |||
} | |||
}); | |||
//This will be called by VTAP.Utility.ShowModal to show popup and save api key. | |||
var Contacts_Component_WeatherSettings = VTAP.Component.Core.extend({ | |||
//store any internal data that will be used in html template | |||
data() { | |||
return { | |||
key : '' | |||
} | |||
}, | |||
created() { | |||
//request the api key that was stored and assign it to internal data variable key, this will be used in html template to display. | |||
VTAP.AppData.Get('Contacts', {"data_key":"weather_apikey"}, (error, success) => { | |||
if(success && success.length) { | |||
this.key = success[0]['data_value']; | |||
} | |||
}); | |||
}, | |||
//functions that can be called from template in this component | |||
methods : { | |||
save() { | |||
//this will save api key and will be accessible only for admins | |||
//to use this key in API Designer, you need to access it with $apps.$app.Contacts.weather_apikey | |||
//$apps.$app will access data that is saved from VTAP.AppData.Save api, next is module name and final is data_key. | |||
VTAP.AppData.Save('Contacts', {"data_key":"weather_apikey", "data_value":this.key, onlyadmin : true}, (error, success) => { | |||
if(success) { | |||
VTAP.Utility.ShowSuccessNotification(); | |||
} | |||
}); | |||
} | |||
}, | |||
//html template which will be rendered, using bootstrap vue components like b-modal. | |||
template: | |||
`<b-modal size="md" title="Weather API Key" @ok="save()" :ok-title="translate('LBL_SAVE')"> | |||
<div class='p-4'> | |||
<div class='align-items-center d-flex justify-content-center'> | |||
<div class='col-3'>API Key</div> | |||
<div class='col-9'><input type="text" class='form-control' v-model="key"></div> | |||
</div> | |||
</div> | |||
</b-modal>` | |||
}); | |||
//this component will be called for DETAIL_SUMMARY_WIDGET registration. | |||
var Contacts_Component_WeatherWidget = VTAP.Component.Core.extend({ | |||
data() { | |||
return { | |||
data : '' | |||
} | |||
}, | |||
//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.showMap(); | |||
}, 5000); | |||
} | |||
}); | |||
}); | |||
}, | |||
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: '© <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); | |||
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='col-6'> | |||
<div id="osm-map" style="height:300px;"></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> | |||
</table> | |||
</div> | |||
</div> | |||
</div>` | |||
}); | |||
slackintegration/README.md
0 → 100644
slackintegration/Register.js
0 → 100644
Please register or sign in to comment