I'm building an app at the moment, where you have a To Do List.
These Task should be saved. I don't know why it doenst work :(
Every time you click on Create Task the task should automatically be saved.
And every time you open the app it should be displayed.
Here is the Popup with the Create task button
Popup
$scope.newTask = function() {
$ionicPopup.prompt({
title: "New Task",
template: "Enter Task:",
inputPlaceholder: "What do you need to do?",
okText: 'Create Task'
}).then(function(res) { // promise
if (res) $scope.tasks.push({title: res, completed: false});
})
};
You need to use LocalStorage. See if it's helpful: http://learn.ionicframework.com/formulas/localstorage/
You need to save it using localStorage like this:
$scope.newTask = function() {
$ionicPopup.prompt({
title: "New Task",
template: "Enter Task:",
inputPlaceholder: "What do you need to do?",
okText: 'Create Task'
}).then(function(res) { // promise
if (res)
var randomNumber = Math.floor((Math.random() * 100) + 1);
var task = {title: res, completed: false};
window.localStorage.setItem("Task" + randomNumber, JSON.stringify(testObject));
})
};
Then in your controller you need to retrieve them
$scope.readTasks = function() {
for (var a in localStorage) {
$scope.tasks.push(JSON.parse(localStorage[a]));
}
};
In your view you can call the function like this:
<ion-content ng-init="readTasks()">
Related
I am sending a notification web. I want to display up to ten minutes if the user does not click on the notification.
I used setTimeout, but it is displayed for about 15 seconds and then hidden.
please guide me.
This is my code:
function notify(title, message, link) {
var option = {
body: message,
dir: 'rtl',
title: title,
icon: '/Images/notification.png',
}
var notify = new Notification(title, option);
notify.onclick = function () {
window.open(link, '_blank');
notify.close();
};
notification.onshow = function () {
setTimeout(notification.close, 600000);
}
}
i have update your code. May this helps you !
var options = {
body: "My notification message",
dir : "ltr",
requireInteraction: true
};
var notify = new Notification('Hello User', options);
notify.onclick = function () {
notify.close();
};
notify.onshow = function () {
setTimeout(()=>{
notify.close();
}, 15000);
}
Just add the property requireInteraction.
var option = {
body: message,
dir: 'rtl',
title: title,
icon: '/Images/notification.png',
requireInteraction: true,
}
The requireInteraction read-only property of the Notification
interface returns a Boolean indicating that a notification should
remain active until the user clicks or dismisses it, rather than
closing automatically.
See here: https://developer.mozilla.org/en-US/docs/Web/API/notification/requireInteraction
So I have a DatePicker that I can change a certain field with, but I want it to update the HTML only when the user confirms the change.
However, currently, when I use the (ionChange) event in my ion-datetime element, it updates the UI automatically before my confirmation alert pops up.
How can I make it so that the value in my date picker will only change when the user presses confirm?
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [{
text: 'Cancel',
handler: () => {
console.log('cancel');
}
}, {
text: 'Confirm',
handler: () => {
console.log(startTime);
}
}]
});
alert.present();
}
<ion-item detail-push>
<ion-label><b>Start: </b></ion-label>
<ion-datetime displayFormat="hh:mm A"
[(ngModel)]="item.EventStart"
(ionChange)="updateStartTime(item.EventStart)"></ion-datetime>
</ion-item>
You could just do a trick by keeping the old value of the EventStart. I added two code samples. First one will update the HTML but it will only keep the updated value if click on confirmation, otherwise it will set DatePicker to old value back. Second one will work as you expected but I don't know your value of item.EventStart is look like. I just guess it would something similar to this pattern '00:00'. Sample codes will worth you than explanation in words :).
First one
public oldEventStart = this.item.EventStart;
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [
{
text: 'Cancel',
handler: () => {
this.item.EventStart = this.oldEventStart;
console.log('cancel');
}
},
{
text: 'Confirm',
handler: () => {
this.item.EventStart = startTime;
this.oldEventStart = startTime;
console.log(startTime);
}
}
]
});
alert.present();
alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; });
}
Second one
public oldEventStart = this.item.EventStart;
updateStartTime(startTime) {
this.item.EventStart = new Date('2000-01-01T'+this.oldEventStart+':00.00').toISOString();
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [
{
text: 'Cancel',
handler: () => {
this.item.EventStart = this.oldEventStart;
console.log('cancel');
}
},
{
text: 'Confirm',
handler: () => {
this.item.EventStart = startTime;
this.oldEventStart = startTime;
console.log(startTime);
}
}
]
});
alert.present();
alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; });
}
Hope this will help to solve your problem. Cheers!.
When I use a bootstrap dialog I would use a prevent default. Try to change the following: updateStartTime(startTime) to updateStartTime(startTime,e) and then on your first line in that function add e.preventDefault(); See if that helps. You should then be able to do whatever you like in your cancel and confirm handlers.
Just return false in your updateStartTime function, so that the default datepicker handler that is bound to the change event does not get called. Like this:
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [{
text: 'Cancel',
handler: () => {
console.log('cancel');
}
}, {
text: 'Confirm',
handler: () => {
console.log(startTime);
}
}]
});
alert.present();
/** prevent default datepicker behavior **/
return false;
}
I want to show a popUp in ionic, which does not allow the user to exit when he hasn't entered some input. Right now I'm using this here:
public showOwnIdentifierPrompt() {
// Prompt popup code
var promptPopup = this.$ionicPopup.prompt({
title: this.floor_name,
template: `<input ng-model="$ctrl.customFloorName"></input>`,
scope: this.$scope,
buttons: [
{
text: this.cancel,
type: 'button-clear button-balanced',
onTap: function(e) {
// Cancel creation
return false;
}
},
{
text: this.save,
type: 'button-clear button-balanced',
onTap: () => {
// Create new floor
return true;
}
}
]
});
promptPopup.then((res) => {
if (res) {
this.addNewFloor(this.customFloorName);
}
})
}
In the save onTap() event handler, I would like to access this.customFloorName from my class, to decide whether the user entered input. But it is always undefined. What can I do?
You can get value on Save with below code :
var value = this.scope.$ctrl.customFloorName;
The Chrome extension works fine. My problem is that the notification closes in 7 seconds. I want for the user click to close the notification.
function engine(){
var latestId;
var ids;
var messages = [];
var newmessage = [];
$.get('http://localhost/site/json.php',function (data){
var json = $.parseJSON(data);
messages = json;
ids = json[0].id;
if(latestId == ids){
//no update
}else if(latestId === undefined){
var run = {
type: "basic",
title: "Title",
message: "Some message",
iconUrl : "icon.png",
};
chrome.notifications.create(run);
}
});
}
First create your notification and give it a notificationID parameter to close it later.
var notification = {
type:"basic",
title:"News From Us!",
message:"Google Chrome Updated to v50!",
iconUrl:"assets/images/icon.png"
};
chrome.notifications.create("notfyId",notification);
On notification click you can close notification using its id (which is "notfyId")
function forwardNotfy(){
chrome.notifications.clear("notfyId");
window.open(url); //optional
}
chrome.notifications.onClicked.addListener(forwardNotfy);
Now, when you click your notification it'll close.
This feature is currently only implemented in the beta channel, and not in the latest version of chrome. See here for details.
When it is implemented, you will be able to use requireInteraction : True like:
var run = {
type: "basic",
title: "Title",
message: "Some message",
iconUrl : "icon.png",
requireInteraction : True,
}
to implement this.
You can use notification.close();:
setTimeout(function() {
notification.close();
}, 2000);
Demo:
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function notifyMe() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Notification title', {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: "Hey there! You've been notified!x",
});
notification.onclick = function () {
window.open("http://stackoverflow.com/a/13328397/1269037");
};
setTimeout(function() {
notification.close();
}, 2000);
}
}
<button onclick="notifyMe()">
Notify me!
</button>
JSBin Demo
notification.close() is used to close any notification.
For more information please see the below code-
To create the notification:
var notification = new Notification('OnlineOfferPrice', {
icon: 'icon.png',
body: "Test Message",
});
If you want to perform operation on notification click please use the below code. After your business logic it will automatically close-
notification.onclick = function () {
//write your business logic here.
notification.close();
};
If notification is not clicked and you want to close it automatically after 6 seconds-
setTimeout(function() { notification.close(); }, 6000);
The documentation says:
Show a simple prompt popup, which has an input, OK button, and Cancel
button. Resolves the promise with the value of the input if the user
presses OK, and with undefined if the user presses Cancel.
I was doing:
$ionicPopup.prompt({
//options
}).then(function (userinput) {
//get userinput and send to server
});
I need to add a third button, but can't get the text of the input, how can I resolve the promise on the onTap event of the button to get the input?
$ionicPopup.prompt({
title: '¿Are you sure?',
inputType: 'text',
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
//send to server response NO
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
//get user input and send to server
}
}]
See this demo i made with your code: http://play.ionic.io/app/ac79490c8914
prompt() is not meant to add more than two buttons,show() is used to make complex pop ups, Please see show() method in same documentation. As written in documentation, i am quoting:
Show a complex popup. This is the master show function
for all popups.
A complex popup has a buttons array, with each button having a text
and type field, in addition to an onTap function.
Your code will be like:
$scope.showPop = function(){
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input type="text" ng-model="data.myData">',
title: '¿Are you sure?',
scope: $scope,
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
return null;
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
return $scope.data.myData;
}
}]
});
myPopup.then(function(userinput) {
if(userinput){
console.log('returned data'+ userinput)
}
});
}
Simple thing about above code is that you have bind input with $scope (<input type="text" ng-model="data.myData">) so you can access it in any manner.