I have an issue with ionic 3 local notification sound. The sound is coming when I did debug build.
It's not coming in production build and also I tried by setting the sound value as "res://platform_default"(not getting the sound). Please help me. Thanks in advance.
Below my codes.
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams, Platform, AlertController} from 'ionic-angular';
import {LocalNotifications} from '#ionic-native/local-notifications';
#IonicPage()
#Component({
selector: 'page-notifications',
templateUrl: 'notifications.html',
})
export class NotificationsPage {
data = {title: '', description: '', date: '', time: ''};
constructor(public navCtrl: NavController,
public localNotifications: LocalNotifications,
public platform: Platform,
public alertCtrl: AlertController) {
}
submit() {
console.log(this.data);
var date = new Date(this.data.date + " " + this.data.time);
console.log(date);
this.localNotifications.requestPermission().then((permission) => {
this.localNotifications.schedule({
id: 0,
text: 'Delayed ILocalNotification',
trigger: {at: date},
foreground:true,
vibrate: true,
led: {color: '#FF00FF', on: 500, off: 500},
data: {mydata: 'My hidden message this is'},
// sound: 'res://platform_default',
sound: this.setSound(),
});
let alert = this.alertCtrl.create({
title: 'Congratulation!',
subTitle: 'Notification setup successfully at ' + date,
buttons: ['OK']
});
alert.present();
this.data = {title: '', description: '', date: '', time: ''};
});
}
setSound() {
if (this.platform.is('android')) {
return 'file://assets/sounds/Rooster.mp3'
} else {
return 'file://assets/sounds/Rooster.caf'
}
}
}
In Dashboard Page
this.localNotifications.on('click').subscribe(
(datas: any) => {
alert('in_is');
alert(JSON.stringify(datas));
/*let alert = alertCtrl.create({
title: notification.title,
subTitle: json.mydata
});
alert.present();*/
});
Try assigning the mp3 sound by using ternary operator without calling the function to assign it
this.localNotifications.schedule({
id: 0,
text: 'Delayed ILocalNotification',
trigger: {at: date},
foreground:true,
vibrate: true,
led: {color: '#FF00FF', on: 500, off: 500},
data: {mydata: 'My hidden message this is'},
sound: this.platform.is('android') ? 'file://assets/sounds/Rooster.mp3' : 'file://assets/sounds/Rooster.caf',
});
Refer ionic documentation https://ionicframework.com/docs/native/local-notifications/
Related
I'm having trouble making a select-list with data from the database.
I followed some internet tutorials, but to no avail.
If someone can post an example or point out what I am wrong.
I will be very grateful, therefore, I must do when loading page 3 Select-lists.
auth_pagto.ts
empresa(user) {
//user.sidBanco = "bda1";
var headers = new Headers();
headers.append('Content-Type', 'application/json; charset=utf-8');
return new Promise(resolve => {
this.http.post('/itpowerbr-api/login/empresa', JSON.stringify(user), {headers: headers}).subscribe(data => {
console.log("ENTROU");
var mostraEmpresa: any[];
//lista das empresas
data.json().each(data, function(i, x){
//mostraEmpresa += '<ion-option value="'+ x.empresaNome +'" >'+ x.empresaID +' - '+ x.empresaNome +'</ion-option>';
//{description: "Fazer compras", priority: "7", horary: "22:20"},
this.mostraEmpresa = [
{description: x.empresaNome, priority: x.empresaID}
];
});
//$("#pgt-lista-filial").html(mostraEmpresa);
resolve(mostraEmpresa);
}, (err) => {
if ( err.status == 500 ){
var alert = this.alertCtrl.create({
title: "Pagamentos",
subTitle: "Lista Empresa não Encontrada",
buttons: ['ok']
});
alert.present();
resolve(false);
}else{
var alert = this.alertCtrl.create({
title: "Pagamentos",
subTitle: err,
buttons: ['ok']
});
alert.present();
resolve(false);
}
});
});
}// fim
pagamento.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, AlertController, LoadingController } from 'ionic-angular';
import { Auth_Pgto } from './auth_pgto';
import { AuthService } from '../login/authservice';
import { Storage } from '#ionic/storage';
import { LoginPage } from '../login/login';
#IonicPage()
#Component({
selector: 'page-pagamentos',
templateUrl: 'pagamentos.html',
})
export class PagamentosPage {
usercreds = {
//nomeUsuario: '',
//token: ''
};
private _lista: any;
constructor(public navCtrl: NavController, public storage: Storage, public navParams: NavParams, public authservice: AuthService, public auth_pgto: Auth_Pgto, public alertCtrl: AlertController, public loadingCtrl: LoadingController) {
var usuario = new Object();
usuario = {
nomeUsuario: window.localStorage.getItem('usuario'),
token: window.localStorage.getItem('raja')
};
this.auth_pgto.empresa(usuario).then(data => {
this._lista = data;
});
}// fim
logout() {
this.authservice.logout();
this.navCtrl.setRoot(LoginPage);
}
public event = {
month: '2017-07-01',
timeStarts: '07:43',
timeEnds: '1990-02-20'
}
ionViewDidLoad() {
console.log('ionViewDidLoad PagamentosPage');
}
}
pagamentos.html
<ion-content padding>
<ion-list> <!-- LISTA EMPRESA -->
<ion-item *ngFor="#_lista of _lista">
<ion-label>Empresa</ion-label>
{{lista.description}}
</ion-item>
</ion-list>
</ion-content>
thank you so much.
I think you are missing the let keyword in your ngFor directive.
<ion-item *ngFor="let item of _lista">
How can I detect if ionic 2 alert ui component instance is already open in order not to present another alert ?
I ended up writing a wrapping provider for Ionic's Alert controller like so :
import { Injectable } from '#angular/core';
import { AlertController } from 'ionic-angular';
#Injectable()
export class Alert {
public alertPresented: any;
constructor(public alertCtrl: AlertController) {
this.alertPresented = false
}
present(title, subTitle) {
let vm = this
if(!vm.alertPresented) {
vm.alertPresented = true
vm.alertCtrl.create({
title: title,
subTitle: subTitle,
buttons: [{
text: 'OK',
handler: () => {
vm.alertPresented = false
}
}],
}).present();
}
}
}
where alertPresented flag prevents more than one instance from being presented
I have another idea that you can assign message for a variable and check new message is equal to it or not. If equal, return.
This is my code and hope you enjoy with it.
import { Injectable } from '#angular/core';
import { AlertController } from 'ionic-angular';
#Injectable()
export class AlertProvider {
public showingMessage = ""
constructor(
private alertController: AlertController
) {}
showAlert(message) {
// Check this message is showing or not
if (message === this.showingMessage) {
return
}
this.showingMessage = message
this.alertController.create({
title: "APP_NAME",
message: message,
buttons: [{
text: "OK",
handler: () => {
this.showingMessage = ""
}
}]
}).present()
}
}
You can create an AlertService to handle that with more options without inject an event for the buttons
import { Injectable } from '#angular/core';
import { AlertController, Alert } from 'ionic-angular';
/**
* A simple alert class to show only one alert at the same time
*/
#Injectable()
export class AlertService {
currentAlert: Alert
constructor(private alertCtrl: AlertController) {
}
show(title, message, buttons: any = [], inputs: any = [], cssClass = '') {
if (!buttons.length) {
buttons.push('Ok')
}
let alertOptions: any = {
title: title,
subTitle: message,
buttons: buttons,
cssClass: buttons.length === 2 ? 'confirmAlert' : cssClass
}
if (inputs.length) {
alertOptions.inputs = inputs
}
if (!this.currentAlert) {
this.currentAlert = this.alertCtrl.create(alertOptions)
this.currentAlert.present()
this.currentAlert.onDidDismiss(() => {
this.currentAlert = null
})
}
return this.currentAlert
}
}
Regards, Nicholls
My solution worked, i had to put a boolean and set it true after a cancel event and set it false when an alert is presented
if (this.network_alert) {
let alert = await this.alertController.create({
header: "No Network",
message:
"Please check your internet connection",
buttons: [{
text: "Dismiss",
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
this.network_alert = true
}
}],
});
await alert.present();
this.network_alert = false
}
}
I am building an Ionic2 app. I have an alert like following:
constructor(private platform: Platform, public nav : NavController,
public exhibitionSurveyObjectService : ExhibitionSurveyObjectService ) {
this.initializeMap();
this.nav=nav;
this.testArray=[];
this.area=null;
}
addSurveyObject(){
let prompt = Alert.create({
title: 'Subscribe to our service',
message: "All the fields are necessary",
inputs: [
{
name: 'name',
placeholder: 'Name'
},
....
{
name: 'cycle',
placeholder: 'Cycle: once/weekly/monthly'
},
{
name: 'object_type',
placeholder: 'Farm/Solarpanel/plain'
},
],
buttons: [
....
{
text: 'Save',
handler: data => {
this.createExhibitionSuveyObject(data);
}
}
]
});
this.nav.present(prompt);
}
createExhibitionSuveyObject(data: any){
var cycle = data.cycle;
cycle = cycle.toUpperCase()
console.log(cycle)
var type = data.object_type;
type = type.toUpperCase()
console.log(type)
this.exhibitionSurveyObjectService.addObject(
data.name, data.farmer_email,
data.farmer_name, data.size, data.path, cycle, type).subscribe(
response => {
this.exhibitionSurveyObjects = response;
this.sayThanks();
},
error => {
this.errorMessage = <any>error;
console.log("error")
}
);
}
sayThanks(){
let alert = Alert.create({
title: 'Thank you!',
subTitle: 'We have received your data, we will get back to you soon!',
buttons: [{
text: 'Ok',
handler: () => {
this.nav.push(HomePage)
}
}]
});
this.nav.present(alert);
}
I want the last two fields to be dropdowns. How can I achieve this?
UPDATE: updated the code snippet with some more code. How it can be updated to use Modal instead of alert?
Just like you can see in Ionic2 docs
Alerts can also include several different inputs whose data can be
passed back to the app. Inputs can be used as a simple way to prompt
users for information. Radios, checkboxes and text inputs are all
accepted, but they cannot be mixed. For example, an alert could have
all radio button inputs, or all checkbox inputs, but the same alert
cannot mix radio and checkbox inputs.
And...
If you require a complex form UI which doesn't fit within the
guidelines of an alert then we recommend building the form within a
modal instead.
So you'll have to create a new Component with that form and then use it to create the Modal:
import { Modal, NavController, NavParams } from 'ionic-angular';
#Component(...)
class YourPage {
constructor(nav: NavController) {
this.nav = nav;
}
presentSubscriptionModal() {
let subscriptionModal = Modal.create(Subscription, { yourParam: paramValue });
this.nav.present(subscriptionModal);
}
}
#Component(...)
class Subscription{
constructor(params: NavParams) {
let param = params.get('yourParam');
}
}
I would like to raise an alert on Ionic2 when the device does not have a Camera.
When i launch : ionic serve
then i try to display the message as follow :
let alert = Alert.create({
title: 'Camera not found',
subTitle: 'It seems your camera is not working on your device',
buttons: ['Ok']
});
this.nav.present(alert);
i have a javascript error
Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: rootNav.getActive is not a function
ORIGINAL STACKTRACE:
TypeError: rootNav.getActive is not a function
at Tab.NavController.present (http://localhost:8100/build/js/app.bundle.js:46996:36)
at SmartScan.takePicture (http://localhost:8100/build/js/app.bundle.js:60864:23)
at AbstractChangeDetector.ChangeDetector_SmartScan_0.handleEventInternal (eval at <anonymous> (http://localhost:8100/build/js/app.bundle.js:14578:17), <anonymous>:185:36)
at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:13892:25)
at AppView.dispatchEvent (http://localhost:8100/build/js/app.bundle.js:18772:46)
at AppView.dispatchRenderEvent (http://localhost:8100/build/js/app.bundle.js:18766:22)
at DefaultRenderView.dispatchRenderEvent (http://localhost:8100/build/js/app.bundle.js:33592:39)
at eventDispatcher (http://localhost:8100/build/js/app.bundle.js:33258:22)
at http://localhost:8100/build/js/app.bundle.js:33329:40
In alert.js:
import {Page, Alert, NavController} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/alert/alert.html'
})
export class AlertPage {
static get parameters() {
return [[NavController]];
}
constructor(nav) {
this.nav = nav;
}
showAlert() {
let alert = Alert.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['Ok']
});
this.nav.present(alert);
}
}
In alert.html:
<button block dark (click)="showAlert()">test</button>
Try this:
with this structure of folder and files
In:
home.html
<ion-header>
<ion-navbar>
<ion-title>Ionic 2 Notifications</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button block dark (click)="showAlert()">Alert</button>
</ion-content>
In:
home.ts
import {Component} from "#angular/core";
import {NavController, AlertController} from 'ionic-angular';
#Component({
templateUrl: 'home.html'
})
export class HomePage {
constructor(public alertCtrl: AlertController) {
}
showAlert() {
let alert = this.alertCtrl.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['OK']
});
alert.present();
}
}
I got this information from the documentation site:
https://ionicframework.com/docs/v2/components/#action-sheets
I am also working on ionic2 and was in the need to implement "PopUp" window in my existing application.
I try many for that by does not get my task accomplished, finally i did something like this-
pop-up.html
<button block dark (click)="showAlert()">Help Window</button>
pop-up.ts
import { Component } from '#angular/core';
import { Alert, NavController, NavParams} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/pop-up/pop-up.html',
})
export class PopUpPage {
static get parameters() {
return [[NavController]];
}
constructor(private nav: NavController) {
this.nav = nav;
}
showAlert() {
let alert = Alert.create({
title: 'Help Window!',
subTitle: 'Mindfulness is here for you and your soul. We are intended to stablish your connection to All Mighty.',
buttons: ['Cancle']
});
this.nav.present(alert);
}
}
And that work fine for me.
Hope it will work for you too.
It seems that is not yet ready ...
investigating the code
this.nav.present(alert);
it is passing here and returns :
if (rootNav['_tabs']) {
// TODO: must have until this goes in
// https://github.com/angular/angular/issues/5481
void 0;
return;
}
I'm using $ionicPopup.confirm() but I would like to change "cancel's button" text. Is it possible to do so ?
I'm aware of .show() syntax:
buttons: [
{ text: 'Cancel' }
]
But it does not seem to work with .confirm() ...
Thank 4 the help
At least in the latest release of Ionic (1.0.0) you can do the following:
var confirmPopup = $ionicPopup.confirm({
title: 'Popup title',
template: 'Popup text',
cancelText: 'Custom cancel',
okText: 'Custom ok'
}).then(function(res) {
if (res) {
console.log('confirmed');
}
});
Here is the relative documentation.
UPDATE : on ionic 1.0.0, this is now possible, check here
showConfirm Options :
{
title: '', // String. The title of the popup.
cssClass: '', // String, The custom CSS class name
subTitle: '', // String (optional). The sub-title of the popup.
template: '', // String (optional). The html template to place in the popup body.
templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
cancelType: '', // String (default: 'button-default'). The type of the Cancel button.
okText: '', // String (default: 'OK'). The text of the OK button.
okType: '', // String (default: 'button-positive'). The type of the OK button.
}
Yes you can do wathever you want, using ionic popup.show and bind the Cancel event.
$ionicPopup.show({
template: msg,
title: titleConfirm,
buttons: [
{ text: "BTN_NO",
onTap:function(e){
return false;
}
},
{ text: "BTN_OK",
onTap:function(e){
return true;
}
},
]
});
After investigation on the ionic popover.confirm function this is
not possible to customize it. The value of popover.confirm are hardcoded line 446
function showConfirm(opts) {
return showPopup(extend({
buttons: [{
text: opts.cancelText || 'Cancel',
type: opts.cancelType || 'button-default',
onTap: function() { return false; }
}, {
text: opts.okText || 'OK',
type: opts.okType || 'button-positive',
onTap: function() { return true; }
}]
}, opts || {}));
}
It's possible to do, you have to use the "type" thing inside the button
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-assertive',
onTap: function(e) {
$scope.request_form.abc = "accepted";
}
}
]
in the type part you have to give the class name , and you can change the color of the button.