Ionic Notification - app service Appelle

I have been developing an Ionic app and incorporating local notifications with server-sent events from a Spring Boot backend. However, I am encountering issues when trying to call a web service every time a notification is clicked. The web service endpoint I am attempting to reach is localhost:8888/listtick.

import { Component, OnInit } from '@angular/core';
import {Observable} from "rxjs";
import { Platform, AlertController } from '@ionic/angular';
import { LocalNotifications, ELocalNotificationTriggerUnit, ILocalNotificationActionType, ILocalNotification } from '@ionic-native/local-notifications/ngx';
import { Alert } from 'selenium-webdriver';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  scheduled = [];
  myData:any;
  constructor(public http: HttpClient,private plt: Platform, private localNotifications: LocalNotifications, private alertCtrl: AlertController) {
    this.connect();

    this.plt.ready().then(() => {
      this.localNotifications.on('click').subscribe(
        res => {
        let msg = res.data ? res.data.mydata : '';
        this.showAlert(res.title, res.text, msg);
      });

      this.localNotifications.on('trigger').subscribe(res => {
        let msg = res.data ? res.data.mydata : '';
        this.showAlert(res.title, res.text, msg);
      });
    });
  }
  getListTickets(){
    console.log('You will see this message every second');
    var url='http://localhost:8888/listtick';
    console.log("Clickeed");
    var result = this.http.get(url);
    return result;
  }
  connect(): void { //Get Notif From serverSentEvents
    let source = new EventSource('http://localhost:8080/get_mydata');
    source.addEventListener('message', message => {
        this.myData = JSON.parse(message.data);

        //alert(this.myData.data);
        this.localNotifications.schedule({
          id: 1,
          title: 'Attention',
          text: 'Test Notification',
          data: { mydata: this.myData.data },
          foreground: true // Show the notification while app is open
        });
      });

 }

    showAlert(header, sub, msg) {
      this.alertCtrl.create({
        header: header,
        subHeader: sub,
        message: msg,
        buttons: ['Ok']
      }).then(alert => alert.present());
    }

}

The code above illustrates my current attempt. If anyone has suggestions or solutions, I would greatly appreciate the help!

Thank you in advance for any assistance provided.

Answer №1

It seems like you have defined a function called getListTickets() but it appears that you never actually called it anywhere in your code. Consider calling the function within your click subscription or any other appropriate location.

this.localNotifications.on('click').subscribe(
   res => {
       this.getListTickets();
   });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using TypeScript to Declare Third Party Modules in Quasar

I'm currently trying to integrate Dropzone-vue into my Quasar project. However, I've encountered an issue as I can't directly install and declare it in a main.js file due to the lack of one in Quasar's structure. Additionally, an error ...

Issue with D3: Events not triggering transitions

I am currently working on creating a bar chart using D3 in Angular4. // Enter Phase this.chart.selectAll('.bar') .data(this.barData) .enter() .append('rect') .attr('class', 'bar'); // Update Phase let bars ...

The d.ts file is causing Typescript confusion - it's saying that the 'browser' field doesn't have a valid alias configuration

I am currently working on an Angular 9 application and experimenting with the new module federation feature provided by beta Webpack 5. My standalone store application, which is served on localhost:9006 with module federation, offers an external remote bu ...

Challenges with inferencing union types in TypeScript generics

type SingleOrArray<T> = T | [T] function f<T extends 'a' | 'b'>(a: SingleOrArray<T>, b: SingleOrArray<T>) { return a && b } f('a', ['b']) Then an error occurred: Argument of typ ...

Guide on specifying a type for a default export in a Node.js module

export const exampleFunc: Function = (): boolean => true; In the code snippet above, exampleFunc is of type Function. If I wish to define a default export as shown below, how can I specify it as a Function? export default (): boolean => true; ...

Guide on protecting the test.ts file within an Angular application

Within our Angular project, we have a ./src/test.ts file that is responsible for loading all spec files to run under test with Karma and Jasmine: // This file is necessary for karma.conf.js and recursively loads all .spec and framework files import &ap ...

Ways to manage a two-click event on a covalent table

After facing challenges with the angular/material datatable integration, I decided to switch to Teradata covalent datatable. However, I am currently struggling with implementing a double click event on a specific row of the data table. Can someone guide ...

Solving the issue in Next JS: Troubleshooting the Error: connect ECONNREFUSED 127.0.0.1:3003 in TCPConnectWrap.afterConnect [as oncomplete]

I recently started using Next JS and I'm having trouble building my application locally. When I run the npm run build command, I encounter the following errors: ... _currentUrl: 'http://localhost:3003/data/menus.json', [Symbol(kCapture)] ...

Leverage ngFor to loop through a "highly intricate" data structure

In my project, I have stored data in a JSON file structured as follows: { "name": { "source1": ____, "source2": ____, "source3": ____ }, "xcoord": { "source1": ____, "source2": ____, "source3": _ ...

"Creating a Typescript function that guarantees a non-null and non-undefined return

Currently, I am working on developing a function that is designed to return a specific value. In the event that the returned value is null or undefined, the function should then default to a pre-determined value. function test<A, B>(input: A, fallba ...

Unable to access data from the Array by passing the index as an argument to the method

Having trouble retrieving an item from an Array using method() with an index argument that returns undefined export class DataService { public list = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, ...

The React-Typescript error message is stating that the module "react-router-dom" does not have the exported member "RouteComponentProps"

I encountered an issue with my project involving a login page and the usage of "RouteComponentProps". Unfortunately, I received the following error: Module '"react-router-dom"' has no exported member 'RouteComponentProps'. Upon attempt ...

How can you recognize the landing page of an Angular.Js - Ionic mobile app?

Currently, I am working on building an application using Angularjs library within the Cordova platform. My main goal is to set a specific landing page for the application, however, this landing page should only appear once. Unfortunately, in many examples ...

The reason behind TypeScript failing to correctly infer the type upon variable redeclaration

Recently, I was working on a code snippet that looked something like this: function helloWorld(customName: string) { return `Hello, ${customName}`; } const myName: string | null = null; const isValidName = myName !== null; if (isValidName) { console. ...

My postman is successfully uploading image files, but for some reason, my code isn't cooperating. Are there any adjustments that need to be made?

While attempting to upload an image file with form data in Angular, I encountered a discrepancy in behavior between Postman and my project. In Postman, under the headers section, I have configured the following: Content-Type: multipart/form-data, token: ...

Exploring Karma Testing in Angular 6

I'm attempting to run Angular tests using npm ng test However, the issue is that Chrome starts but does not stop after the test finishes. So, I tried: ng test --watch=false This caused the error "Chrome 69.0.3497 (Linux 0.0.0) ERROR" which made Ch ...

Guide on sending a service instance to a React Router component using TypeScript

Consider the code snippet below: //routes.tsx const auth = new AuthService(); export default <Route component={ Layout }> <Route path='/login' components={{body:Login}} </Route>; //layout.tsx export interface LayoutProps { ...

Rxjs: handling arrays of observables by processing them in batches

I am facing a scenario where I have an array of observables. Let's say: const responses$: Observable<Response>[] = [ this.service.get(1), this.service.get(2), this.service.get(3), this.service.get(4) ]; My goal is to process ...

Experimenting with a TypeScript function containing a subscription operation

Currently, I am experimenting with Jasmine/Karma while working on an Angular 4 project. The issue I'm facing involves testing a function that seems to have trouble setting the 'name' property: https://i.stack.imgur.com/3q49i.jpg The assign ...

The interaction between Backbone PUT requests and Laravel

Currently, I am encountering some unusual behavior while working with a Backbone front end and a Laravel REST api backend. When sending a PUT request and then attempting to read that data at the API end, I am facing some issues. When using Input::all(), i ...