Local Notifications in ionic - ionic-framework

This is my code
this.platform.ready().then(() => {
this.localNotifications.schedule({ // ionic local notification native plugin.
title: 'Welcome',
text: 'xxxxxxxxxx',
at: new Date(new Date().getTime() + 1000)
})
})
When use the at: variable I get the error as
Argument of type ‘{ title: any; text: string; at: Date; }’ is not
assignable to parameter of type ‘ILocalNotification |
ILocalNotification’. Object literal may only specify known properties,
and ‘at’ does not exist in type ‘ILocalNotification |
ILocalNotification’.
I want to prompt the notification after 1 sec. How can I do it ?

Your options object is not match with local-notifications options kindly review this link https://ionicframework.com/docs/native/local-notifications/. Here you can find the all the options. For schedule 1 second delay local-notification you can modify code like this.
this.localNotifications.schedule({
title: 'Welcome',
text: 'xxxxxxxxxx',
trigger: {at: new Date(new Date().getTime() + 1000)},
});
Hope you find your solutions.

Related

Ionic 4 Arrow Functions

I am creating a to do list app with Ionic 4. When the user clicks add a task an alert opens. However when a task is put it the input and the add task button is clicked, nothing happens. I feel like there is an issue with my arrow function but I am not familiar enough with them to spot the problem. I have attached a photo of the bit of code I think is the issue and the link to my github. I would really appreciate feedback and a solution!
To do list github
I see two issues with the code here:
this.tasks = this.taskList.valueChanges();
This returns an observable so you must use an async pipe to retrieve its value within the template such as:
*ngFor="let task of tasks | async"
The input was set for a different name, the input name here is "title" and that is how the data returned within the arrow function should be referenced as well
async addItem(){
let addItem = await this.alertCtrl.create({
header: 'Add a Task',
message: 'Please enter a Task',
inputs: [{
name: 'title',
type: 'text'
}],
buttons:[{
text: 'Cancel',
role: 'cancel'
},{
text: 'Add Task',
handler: data => {
let newTaskRef = this.taskList.push(
{ id: '', title: data.title, status: 'open' }
);
newTaskRef.update( { id: newTaskRef.key } );
}
}]
})
await addItem.present();
}

How to add border to a basic card in action on Google

As described in action on google website, you can add a border to a basic card.
Basic Card- Action on Google
I built a basic card through the code below and it is working
conversation.ask(new BasicCard({
text: cardText,
subtitle: product.company_name,
title: product.name,
buttons: new Button({
title: 'View Details',
url: deeplink_url,
}),
image: new Image({
url: product.image,
alt: 'Image alternate text',
}),
}));
Action on Google website says you can add border by calling the .setImageDisplay method which accepts a string as its parameter.
Where should I call this method in the above code snippet ?
The documentation to which you link is for the original version of the client library. In a version 1 Action of mine I have lines similar to these
card = app.buildBasicCard()
.setImage(<image_goes_here>, <alternate>, <width>, <height>)
.setImageDisplay('CROPPED');
And in a version 2 Action I have something like these
card.image = {};
card.image.url = <image_goes_here>;
card.image.width = <width>;
card.image.height = <height>;
card.image.accessibilityText = <alternate_text>;
card.display = 'CROPPED';
...
card = new BasicCard(card);

Uncaught TypeError: sap.ui.layout.form.SimpleForm is not a constructor

I am sorry to ask this silly question but when I am initializing the simple form layout , I am getting "Uncaught TypeError: sap.ui.layout.form.SimpleForm is not a constructor" . I am using below mentioned code :
// Add a Pagebar
var oBar = new sap.m.Bar("idFOBar", {
contentLeft: new sap.m.Button("idFOBackButton", {
icon: "sap-icon://nav-back",
press: function(){
app.back();
}
})
});
// Simple form
var oButton = new sap.m.Button({text: "Press"});
var oSimpleform = new sap.ui.layout.form.SimpleForm({
title:"Elements with Simple Form Layout",
content:[oButton]
});
var oPage = new sap.m.Page({
title: "Find Order",
content: [oBar,oSimpleform]
});
return oPage;
I remember I implemented forms before with the same code. I am not able to understand what is wrong here ?
Regards,
MS
The problem seems to be, that the class sap.ui.layout.form.SimpleForm cannot be found, so you cannot use it as a constructor.
It seems to work when you add sap.ui.layout to your sap-ui-core.js-bootstrap (jsbin).
Another option is to call $.sap.require("sap.ui.layout.form.SimpleForm"); to specifically load the SimpleForm-class.

Google Visualization Meteor Implementation

help me in upper or lower code problem must be appreciated
i want to make a bar chart and populate it from my collection from meteor i
want to print exercises with there status
but when i return one record from db it is working well graph is coming but
when coming two records its not working kindly help in it
Just help me that how i can make a correct JSON format for "google visualization graph" from meteor mongodb
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
console.log("graphData==========",graphData)
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Room' });
data.addColumn({ type: 'string', id: 'Name' });
data.addRows([
[ myDoc.status, myDoc.patientExerciseName]
])
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
Note : Foreach function when return two rows from database it not works
as i also try this
when i give JSON to my graph it is giving error "Invalid data table format:
must have at least 2 columns".
how i can make a JSON format which support Google visualization charts
please help me mine code is there
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var Mydoc=JSON.stringify(myDoc)
var data = new google.visualization.DataTable(Mydoc)
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
1) Check that the data is received: in Meteor it is sometimes tricky as publications may not be ready when you draw your chart. You need to make sure you wait for the publication to be ready. (Use console log to log the data and see if it's there, as within the debugger the data will be there by the time you look it up
2) once you are sure the data is there, read the GoogleChart docs: it is a fairly extensive library with lots of examples, so just make sure you data matches the right format.
this question and answer should help:
Building array and formatting JSON for Google Charting API

react-datepicker with no initial value

I started using the react-datepicker component.
https://github.com/Hacker0x01/react-datepicker
I got the example running and now I want to adapt it that there is no initial value.
The example code is the following:
<script type="text/javascript">
var container = document.querySelector('#datepicker-container');
var exampleComponent = React.createClass({
displayName: 'exampleComponent',
getInitialState: function() {
return {
start_date: moment(),
};
},
handleStartDateChange: function(date) {
this.setState({
start_date: date
});
},
render: function() {
return React.DOM.div({}, [
DatePicker({
key: 'example1',
selected: this.state.start_date,
onChange: this.handleStartDateChange
}),
]);
}
})
React.renderComponent(exampleComponent(), container);
</script>
I tried to use selected: none or even leave selected out but then I get the following error:
TypeError: newProps.date is null
value: newProps.date.format(this.props.dateFormat)
I also looked into the source code, but didn't find any possibility to start with an empty date.
Thanks in advance for your help!
You should be able to achieve what you want by setting start_date: null in your getInitialState,
Alternatively, if you use example 3 from react-datepicker, you can define a function like this:
handleResetDate: function() {
this.setState({
new_date: null
});
},
, and call it whenever you want the date to reset.
Hope this helps!
Note: I'm using react-datepicker version 4.10
Setting start_date or selected to null didn't work for me, instead I simply changed the value for selected to "", as in selected={""}. That worked for me.