New Features:

1. CORS and Request to Ripe Atlas
New Pages:
1. Latency Test
Bugs Corrected:

To Be Corrected:

capacitor.config.ts

@@ -6,7 +6,15 @@ const config: CapacitorConfig = {
   webDir: 'www',
   server: {
     url: 'http://localhost:8100',
-  }
+  },
+  plugins: {
+    CapacitorHttp: {
+      enabled: true,
+    },
+  },
+
+
+
 };
 
 export default config;

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "^17.0.2",
     "@angular/platform-browser-dynamic": "^17.0.2",
     "@angular/router": "^17.0.2",
+    "@capacitor-community/http": "^1.4.1",
     "@capacitor/android": "6.0.0",
     "@capacitor/app": "6.0.0",
     "@capacitor/core": "6.0.0",
@@ -30,6 +31,7 @@
     "@capacitor/keyboard": "6.0.0",
     "@capacitor/status-bar": "6.0.0",
     "@ionic/angular": "^8.0.0",
+    "cors": "^2.8.5",
     "ionicons": "^7.0.0",
     "leaflet": "^1.9.4",
     "leaflet-ant-path": "^1.3.0",

src/app/app-routing.module.ts

@@ -50,6 +50,10 @@ const routes: Routes = [
     path: 'show-map',
     loadChildren: () => import('./pages/show-map/show-map.module').then( m => m.ShowMapPageModule)
   },
+  {
+    path: 'latency-test',
+    loadChildren: () => import('./pages/latency-test/latency-test.module').then( m => m.LatencyTestPageModule)
+  },
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -34,6 +34,11 @@ export class AppComponent implements OnInit {
       url: '/myteam',
       icon: 'people'
     },
+    {
+      title:'Latency Test',
+      url:'/latency-test',
+      icon:'pulse'
+    }
   ];
 
   /**

src/app/app.module.ts

@@ -19,7 +19,8 @@ import {HttpClientModule} from "@angular/common/http";
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideFirebaseApp(() => initializeApp(environment.firebase)),
     provideFirestore(() => getFirestore()),
-    provideAuth(() => getAuth())
+    provideAuth(() => getAuth()),
+    HttpClientModule
   ],
   bootstrap: [AppComponent],
 })

src/app/pages/latency-test/latency-test-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LatencyTestPage } from './latency-test.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LatencyTestPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LatencyTestPageRoutingModule {}

src/app/pages/latency-test/latency-test.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LatencyTestPageRoutingModule } from './latency-test-routing.module';
+
+import { LatencyTestPage } from './latency-test.page';
+import {ComponentsModule} from "../../components/components.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        LatencyTestPageRoutingModule,
+        ComponentsModule
+    ],
+  declarations: [LatencyTestPage]
+})
+export class LatencyTestPageModule {}

src/app/pages/latency-test/latency-test.page.html

@@ -0,0 +1,35 @@
+<app-header [title]="'Latency Test'"></app-header>
+
+<ion-content [fullscreen]="true">
+  <ion-grid>
+    <app-title [title]="'Latency Test'"></app-title>
+    <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" size-md="4" size-lg="4" class="">
+        <ion-input class="" label="Target" placeholder="Enter a url target" type="text" labelPlacement="stacked" [(ngModel)]="target"></ion-input>
+      </ion-col>
+      <ion-col size="12" size-md="4" size-lg="4">
+        <ion-input class="" label="Description" placeholder="Enter a description" type="text" labelPlacement="stacked" [(ngModel)]="description"></ion-input>
+      </ion-col>
+      <ion-col size="12" size-md="4" size-lg="4">
+        <ion-list>
+          <ion-item>
+            <ion-select
+              placeholder="Select a Type"
+              (ionChange)="changeType($event)"
+            >
+              <div slot="label">Select a Type <ion-text color="danger">(Required)</ion-text></div>
+              <ion-select-option value="ping" [(ngModel)]="type">Ping</ion-select-option>
+              <ion-select-option value="traceroute" [(ngModel)]="type">Traceroute</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </ion-col>
+    </ion-row>
+    <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" size-md="12" size-lg="12" class="flex flex-row justify-end">
+        <ion-button class="" (click)="sendMeasurementRequest()" color="primary">Add Test</ion-button>
+        <ion-button class="" (click)="getMeasurementResults()" color="primary">Get Test Results</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

src/app/pages/latency-test/latency-test.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LatencyTestPage } from './latency-test.page';
+
+describe('LatencyTestPage', () => {
+  let component: LatencyTestPage;
+  let fixture: ComponentFixture<LatencyTestPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LatencyTestPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/latency-test/latency-test.page.ts

@@ -0,0 +1,36 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {RipeService} from "../../services/ripe.service";
+
+@Component({
+  selector: 'app-latency-test',
+  templateUrl: './latency-test.page.html',
+  styleUrls: ['./latency-test.page.scss'],
+})
+export class LatencyTestPage implements OnInit {
+
+  @Input() target: string = 'portfoliojuanfranciscocisneros.web.app';
+  @Input() description: string = 'IONIC-TEST';
+  @Input() type: string = 'ping';
+
+
+  constructor(
+    private ripeService: RipeService
+  ) { }
+
+  ngOnInit() {
+  }
+
+  async sendMeasurementRequest() {
+    console.log(this.target, this.description, this.type);
+    await this.ripeService.sendMeasurementRequest(this.target, this.description, this.type);
+  }
+
+  async getMeasurementResults() {
+    let response = await this.ripeService.getMeasurementResults();
+    console.log(response);
+  }
+
+  changeType($event: any) {
+    this.type = $event.detail.value;
+  }
+}

src/app/pages/show-map/show-map.page.ts

@@ -15,11 +15,9 @@ export class ShowMapPage implements OnInit, OnDestroy{
   map: Leaflet.Map|undefined;
 
   constructor(
-    private ripeService: RipeService
   ) { }
 
   ngOnInit() {
-    this.ripeService.sendMeasurementRequest();
   }
   ionViewDidEnter() { this.leafletMap(); }
 
@@ -29,16 +27,14 @@ export class ShowMapPage implements OnInit, OnDestroy{
       attribution: 'edupala.com © Angular LeafLet',
     }).addTo(this.map);
 
-    Leaflet.marker([28.6, 77]).addTo(this.map).bindPopup('Delhi').openPopup();
-    Leaflet.marker([34, 77]).addTo(this.map).bindPopup('Leh').openPopup();
 
     antPath([[28.644800, 77.216721], [34.1526, 77.5771]],
       { color: '#FF0000', weight: 5, opacity: 0.6 })
       .addTo(this.map);
 
     setTimeout(() => {
         this.map!.invalidateSize();
-    },10);
+    },100);
 
   }
 

src/app/services/ripe.service.ts

@@ -1,48 +1,60 @@
 import { Injectable } from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 
+
 @Injectable({
   providedIn: 'root'
 })
 export class RipeService {
 
-  private measurementsUrl = 'https://cors-anywhere.herokuapp.com/https://atlas.ripe.net/api/v2/measurements/';
+  private measurementsUrl = 'https://cors-ea3m.onrender.com/https://atlas.ripe.net/api/v2/measurements/';
+  private measurementID: string = '';
 
   constructor(
     private http: HttpClient
   ) { }
 
-  sendMeasurementRequest() {
+  async sendMeasurementRequest(target: string, description: string, type: string) {
     let body = {
-        "definitions": [
+      "definitions": [
         {
-          "target": "portfoliojuanfranciscocisneros.web.app",
-          "description": "My First Measurement, A mi portfolio 5",
+          "target": target,
+          "description": description,
           "type": "ping",
           "af": 4,
-          "is_oneoff":true
+          "is_oneoff": true
         }
       ],
-        "probes": [
+      "probes": [
         {
           "requested": 1,
           "type": "area",
           "value": "WW"
         }
       ]
-      }
+    }
 
-      // Send the request with a header Authorization
-      this.http.post(this.measurementsUrl, body, {
-        headers: {
-            'Authorization': 'Key 92530695-134f-4cbc-b7c3-ec130f3719b0'
-        }
-      }).subscribe((response) => {
-        console.log("response", response);
-      });
+    let headers = {
+      "Authorization":"Key 92530695-134f-4cbc-b7c3-ec130f3719b0"
+    }
+
+    console.log(body);
 
+    let response:any = await this.http.post(this.measurementsUrl, body, {headers: headers}).toPromise();
+    console.log(response);
+    this.measurementID = response['measurements'][0];
+    console.log(this.measurementID);
   }
 
+  async getMeasurementResults() {
+    let headers = {
+      "Authorization": "Key 92530695-134f-4cbc-b7c3-ec130f3719b0"
+    }
+    let response: any = await this.http.get(this.measurementsUrl + this.measurementID + '/results/', {headers: headers}).toPromise();
+    return response;
+  }
+
+