I see many types of data for displaying icon, and for custom sound etc, in push notification documentation. One of the example is like
{
"aps" : {
"alert" : "It's a notification with custom payload!",
"badge" : 1,
"content-available" : 0
},
"data" :{
"title" : "Game Request",
"body" : "Bob wants to play poker",
"action-loc-key" : "PLAY"
},
}
But how do I send this data? Can I send it through firebase console? I am using phonegap-plugin push for ionic 3
image
cordova.plugins.notification.local.schedule({
title: 'The big survey',
text: 'Are you a fan of RB Leipzig?',
attachments: ['file://img/rb-leipzig.jpg'],\\image binding
actions: [
{ id: 'yes', title: 'Yes' },
{ id: 'no', title: 'No' }
]
});
small icon && large icon
cordova.plugins.notification.local.schedule({
title: 'The Big Meeting',
text: '4:15 - 5:15 PM\nBig Conference Room',
smallIcon: 'res://calendar',
icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzfXKe6Yfjr6rCtR6cMPJB8CqMAYWECDtDqH-eMnerHHuXv9egrw'
});
click here for official page
Related
I'm using fullcalendar to display a month view which shows the time and title of events (and a popover showing the description when hovered). When I click the event, I show a listday view that shows all the events for that day. That all works fine and I have this working with this code:
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: 'dayGridMonth,listDay',
center: 'title',
end: 'prev,next'
},
initialView: 'dayGridMonth',
initialDate: '2023-01-12',
height: 'auto',
dayMaxEvents: 3,
moreLinkClick: 'listDay',
eventClick: function(info){
switchToListView(info)
},
eventColor: 'green',
views: {
listDay: {
displayEventEnd: true
}
},
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Meeting',
description: 'My Description',
start: '2023-01-12T10:30:00',
end: '2023-01-12T12:30:00'
},
and in this code pen
I'd like to show the description text for the event in addition to the title in the listday view and I can't figure out how to do this. I don't know whether I need to use an event hook or what. I just can't make my way through the docs and examples to see what to do.
Appreciate any help.
I got this working with this use of eventDidMount.
eventDidMount: function(info) {
info.el.querySelector('.fc-list-event-title a').innerHTML += ` ${info.event.extendedProps.description}`
},
Frankly, it feels a little weird that I need to go into the depths of the rendered HTML to adjust the output instead of changing what is going INTO the generated HTML but I guess that's just how it works (??)
Thanks to #ADyson for the push in the right direction.
I'm developing a Wordpress Plugin that allows users to add custom video playlists to their pages or posts, and for that I'm using Videojs and Videojs Playlist libraries.
I've successfully managed to add a single playlist into a page, but when a second one is created the first player is disabled.
First Player disabled
Other problem I'm facing is that, although the vjs-playlist div is added, it only shows in the first player created.
Code display in the browser
var options = {"techOrder": ["html5","youtube", "flash"]};
var myPlayer = videojs('my-playlist-player', {options, "autoplay": false, "controls": true, "fluid": true, "liveui": true});
myPlayer.playlist([{
name: 'Test item 1 type .m3u8',
description: 'Testing for videojs-playlist-ui integration',
duration: '45',
sources: [
{src: '//vjs.zencdn.net/v/oceans.mp4',type: 'video/mp4'}
],
thumbnail: [
{
srcset: '//bcvid.brightcove.com/players-example-content/clouds-1800.jpg',
type: 'image/jpeg',
style: 'max-height: 120px;'
}
]
},{
name: resTitle,
description: resDesc,
duration: resDuration,//'45',
sources: [
{src: resItemSrc, type: resMime}
],
thumbnail: [
{
srcset: resThumbnail,
type: resImgType,
style: thumbStyle//'max-height: 120px;'
}
]
}
}
]);
console.log(myPlayer.playlist());
myPlayer.playlistUi({el: document.getElementById('vjs-playlist'), horizontal: true});
myPlayer.playlist.autoadvance(1);
I believe my errors happen because videojs functions are detecting the same id in all elements, but if so how could I avoid this?
Any other ideas or opinions on why this errors might be happening, would be great.
Thanks in advance.
A bit more of information, I wanted to check how many players the script detected and so I printed in the console the window.videojs.players and only one player is detected even if more are created. Check result
Could this be because they have the same ID? If so how could it be fixed? HTML Result
I have a panel where in I have a button in the header which helps me to add two textfields in that panel. Now when I click on this button it takes me to a popup form where the user enters the value of the two textfields it wants and then clicks on save button in the header of this popup panel.
The two textfields are added but the value is not set to the value which is entered in the popup form. I think the problem is with the scope. Kindly look at the following code and tell me how to resolve this issue.
xtype: "panel",
id: 'idFieldpanel',
...
header:{
titlePosition: 0,
items:[{
xtype:'button',
text: 'Add',
handler: function(){
var addidFieldPanel= new Ext.form.Panel({
id: 'newidFieldPanel',
width: 250,
height: 100,
floating: true,
closable : true,
layout : {
type : 'vbox',
align : 'stretch'
},
bodyPadding: 10,
items : [
{
xtype : 'textfield',
id : 'newidFieldname',
fieldLabel : 'Name',
name : 'newidFieldname',
flex : 1,
scope : this
},
{
xtype : 'textfield',
id : 'newidFielddataType',
fieldLabel : 'DataType',
name : 'newidFielddataType',
flex : 1,
scope : this
}
],
header : {
titlePosition : 1,
items : [{
xtype: 'button',
text: 'Save',
handler: function() {
ctr++; //this is used so that the id of the added fields do not match and hence they do not overlap
Ext.getCmp('idFieldpanel').add({
xtype:"container",
layout : {
type : 'hbox',
align : 'stretch'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10'
},
items: [
{
xtype : 'textfield',
fieldLabel: 'Name',
id: 'idFieldName' + ctr,
name : 'Data',
margin:'0 10 10 0',
flex : 1,
height : 'auto'
},
{
xtype : 'textfield',
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType' + ctr,
margin: '0 10 10 0',
flex : 1,
height : 'auto'
}
]
});
Ext.getCmp('idFieldName' + ctr).setValue(Ext.getCmp('newidFieldname').getValue());
Ext.getCmp('idFielddataType' + ctr).setValue(Ext.getCmp('newidFielddataType').getValue());
}
}]
}
})
addidFieldPanel.show();
}
}]
}
There are a few things that can help you out here, but first would be to not bother with tracking unique ID's across your components. Let ExtJS handle that for you. Also, removing the nested handlers will make your code a lot easier to read. I put together this fiddle that shows how you can do that.
By not using ID's you can grab reference to parent/child components with the up/down selectors similar to saveBtn.up('panel').
You can also add a form to your popup for easier selecting. Hope this helps to give you an idea of a better way to leverage the framework.
I am trying to build an array of data returned from a third party API, and display it using the Highcharts map module.
I've done so with the charts module, using line and pie charts both with not much difficulty. Now that I've moved onto maps, I seem to be running into a bit of difficulty. It was quite clear from the examples provided how the data should be structured to be properly read by Highcharts.
When it comes to the maps module, the data structure is not clear at all. How would I structure my data to pass into my Highcharts map???
[ 'US' , 'United States' , 32 ] , [ 'CA' , 'Canada' , 100 ]
If I use the provided :
jQuery.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
console.log(data);
// Initiate the chart
jQuery('#geo_map').highcharts('Map', {
title : {
text : 'Campaign Link Clicks Around The World'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
},
}],
credits: {
enabled: false
},
});
});
});
It works. But I can't seem to figure out how to pass in my data. I thought it was as simple as
[ 'Abbreviation' , 'Name' , Value ] , [ 'Abbreviation' , 'Name' , Value ]
but clearly not. The documentation isn't very clear on data structure.
Thanks.
I'd like to create a simple app that shows me a list of the latest stories from my favourite news sites using Sencha Touch 2 and the RSS feeds, of course.
How do I get data from an rss-feed and then display it as a list, showing title, author, date and content?
I can get a list of the latest news stories going, but I can only manage to display each item title/headline, not the author, date, snippet etc. Here's my code:
1 model, 1 store, 1 view, 1 app.js:
//The store
Ext.define("NewsApp.store.EbStore", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP", "Ext.dataview.List" ],
config: {
model: "NewsApp.model.NewsListModel",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://feeds.feedburner.com/newsapp_pol',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
});
//The Model
Ext.define("NewsApp.model.NewsListModel", {
extend: "Ext.data.Model",
config: {
fields: [
{name: 'title', type: 'auto'},
{name: 'author', type: 'auto'},
]
}
});
//The view
Ext.define("NewsApp.view.NewsList", {
extend: "Ext.Container",
requires: "Ext.Toolbar",
alias: "widget.newslistview",
config: {
layout: {
type: 'fit'
},
items: [{
xtype: "toolbar",
title: "Danske Nyheder",
docked: "top",
items: [
{
xtype: 'spacer'
},
{
xtype: "button",
text: "Indstillinger",
ui: "action",
id: "settingsButton",
iconMask: true,
iconCls: 'settings'
},
{
xtype: "button",
text: "Refresh",
ui: "action",
id: "refreshButton",
iconMask: true,
iconCls: 'refresh'
}
]
},
{
xtype: "list",
store: "EbStore",
itemId:"EbList",
onItemDisclosure: true,
itemTpl: '{title}'
}
],
}
});
// And the app.js just for kicks
Ext.application({
name: "NewsApp",
models: ["NewsListModel"],
stores: ["EbStore"],
views: ["NewsList"],
launch: function () {
console.log("App starts");
var newsListView = {
xtype: "newslistview"
};
Ext.Viewport.add([newsListView]);
}
});
With this code, I can display the titles of the rss items nicely. But if I change the {title} to, say, {author}, the list items are created in my view, but without any content whatsoever. The RSS that I'm trying to read uses normal standards, I think: http://feeds.feedburner.com/newsapp_pol
So how do I display more than just the title and acces the rest of the rss?
I guess it boils to my not understanding what data is being captured in the proxy-code or how or in what format exactly.
Can anybody help? :-)
I have checked out these two examples of Sencha Touch RSS readers, and both are excellent, except that the code is way too advanced for me to understand:
http://www.sencha.com/apps/rssreader/
https://github.com/AndreaCammarata/FeedBurner-RSS-Reader
Troels,
If you want to look at the data response of your google feed, I suggest you take a peek at the json data with a json beautifier to make it easier to read. First paste your google feed url into the browser's address bar. Copy the resulting json response - and paste it into the beautifier. That will give you a structured view of the data fields in the response data.
When i tried it, the first entry looked like this:
"title": "Over 50 såret under kampe i Kosovo",
"link": "http://politiken.dk/udland/ECE1672568/over-50-saaret-under-kampe-i-kosovo/",
"author": "",
"publishedDate": "Thu, 28 Jun 2012 12:09:18 -0700",
"contentSnippet": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
"content": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
"categories": []
I noticed that the "author" field is empty on all entries, which may explain why you get an empty list.
That should help you understand the data structure in the feed and create matching references in your code.
Cheers,
Rasmus