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