diff --git a/src/app/interfaces/ripe.ts b/src/app/interfaces/ripe.ts
new file mode 100644
index 0000000..6c96321
--- /dev/null
+++ b/src/app/interfaces/ripe.ts
@@ -0,0 +1,10 @@
+export interface Ripe {
+ avg?: number;
+ dst_addr?: string;
+ from?: string;
+ fromLatitude?: number;
+ fromLongitude?: number;
+ toLatitude?: number;
+ toLongitude?: number;
+ latency?: number;
+}
diff --git a/src/app/pages/latency-test/latency-test.module.ts b/src/app/pages/latency-test/latency-test.module.ts
index 4ed0e55..510114f 100644
--- a/src/app/pages/latency-test/latency-test.module.ts
+++ b/src/app/pages/latency-test/latency-test.module.ts
@@ -10,13 +10,13 @@ import { LatencyTestPage } from './latency-test.page';
import {ComponentsModule} from "../../components/components.module";
@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- IonicModule,
- LatencyTestPageRoutingModule,
- ComponentsModule
- ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ LatencyTestPageRoutingModule,
+ ComponentsModule
+ ],
declarations: [LatencyTestPage]
})
export class LatencyTestPageModule {}
diff --git a/src/app/pages/latency-test/latency-test.page.html b/src/app/pages/latency-test/latency-test.page.html
index bd5a726..3c5464b 100644
--- a/src/app/pages/latency-test/latency-test.page.html
+++ b/src/app/pages/latency-test/latency-test.page.html
@@ -5,7 +5,7 @@
-
+
@@ -14,12 +14,10 @@
- Select a Type (Required)
- Ping
- Traceroute
+ Ping
+ Traceroute
@@ -27,8 +25,7 @@
- Add Test
- Get Test Results
+ Add Test
diff --git a/src/app/pages/latency-test/latency-test.page.ts b/src/app/pages/latency-test/latency-test.page.ts
index f034adc..5095b13 100644
--- a/src/app/pages/latency-test/latency-test.page.ts
+++ b/src/app/pages/latency-test/latency-test.page.ts
@@ -1,5 +1,6 @@
import {Component, Input, OnInit} from '@angular/core';
import {RipeService} from "../../services/ripe.service";
+import {Ripe} from "../../interfaces/ripe";
@Component({
selector: 'app-latency-test',
@@ -8,29 +9,42 @@ import {RipeService} from "../../services/ripe.service";
})
export class LatencyTestPage implements OnInit {
- @Input() target: string = 'portfoliojuanfranciscocisneros.web.app';
- @Input() description: string = 'IONIC-TEST';
- @Input() type: string = 'ping';
+ @Input() host: string = 'portfoliojuanfranciscocisneros.web.app';
+ @Input() description: string = 'NEW IONIC';
+ type: string = 'ping';
+ ripeResults:Ripe[] = [];
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 ngOnInit() {
+ await this.getResults();
}
- async getMeasurementResults() {
- let response = await this.ripeService.getMeasurementResults();
- console.log(response);
+ sendRequest() {
+ console.log(this.host, this.description, this.type);
+ this.ripeService.sendMeasurementRequest(this.host, this.description, this.type);
}
- changeType($event: any) {
+ async getResults() {
+ (await this.ripeService.getMeasurementResults()).subscribe((data) => {
+ for (let i = 0; i < data.length; i++) {
+ let ripe: Ripe = {
+ latency: data[i].avg,
+ dst_addr: data[i].dst_addr,
+ from: data[i].from,
+ }
+ this.ripeResults.push(ripe);
+ console.log(ripe);
+ }
+ });
+ }
+
+ handleChange($event: any) {
this.type = $event.detail.value;
}
}
diff --git a/src/app/pages/show-map/show-map.page.ts b/src/app/pages/show-map/show-map.page.ts
index d535267..11dc480 100644
--- a/src/app/pages/show-map/show-map.page.ts
+++ b/src/app/pages/show-map/show-map.page.ts
@@ -4,6 +4,8 @@ import * as Leaflet from 'leaflet';
// @ts-ignore
import { antPath } from 'leaflet-ant-path';
import {RipeService} from "../../services/ripe.service";
+import {LatLngExpression} from "leaflet";
+import {Ripe} from "../../interfaces/ripe";
@Component({
selector: 'app-show-map',
@@ -13,25 +15,45 @@ import {RipeService} from "../../services/ripe.service";
export class ShowMapPage implements OnInit, OnDestroy{
map: Leaflet.Map|undefined;
+ ripeData:Ripe = {
+ fromLatitude: 0,
+ fromLongitude: 0,
+ toLatitude: 0,
+ toLongitude: 0,
+ latency: 0
+ }
constructor(
- ) { }
+ ) {
+
+ }
ngOnInit() {
}
ionViewDidEnter() { this.leafletMap(); }
leafletMap() {
- this.map = Leaflet.map('mapId').setView([28.644800, 77.216721], 5);
+ this.map = Leaflet.map('mapId').setView([0, 0], 2.5);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'edupala.com © Angular LeafLet',
}).addTo(this.map);
- antPath([[28.644800, 77.216721], [34.1526, 77.5771]],
+ antPath([[this.ripeData.fromLatitude, this.ripeData.fromLongitude], [this.ripeData.toLatitude, this.ripeData.toLongitude]],
{ color: '#FF0000', weight: 5, opacity: 0.6 })
.addTo(this.map);
+ //in the middle of the path add a Latency in ms thing
+ const labelIcon = Leaflet.divIcon({
+ className: 'label-icon',
+ html: `Latency: ${this.ripeData.latency} ms
`,
+ iconSize: [120, 20] // size of the icon
+ })
+
+ // Add the label to the map at the desired coordinates
+ const labelCoordinates:LatLngExpression = [(this.ripeData.fromLatitude! + this.ripeData.toLatitude!) / 2, (this.ripeData.fromLongitude! + this.ripeData.toLongitude!) / 2];
+ Leaflet.marker(labelCoordinates, { icon: labelIcon }).addTo(this.map);
+
setTimeout(() => {
this.map!.invalidateSize();
},100);
diff --git a/src/app/services/ripe.service.ts b/src/app/services/ripe.service.ts
index 1251296..82390b6 100644
--- a/src/app/services/ripe.service.ts
+++ b/src/app/services/ripe.service.ts
@@ -1,5 +1,7 @@
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
+import {Ripe} from "../interfaces/ripe";
+import {Observable} from "rxjs";
@Injectable({
@@ -8,11 +10,12 @@ import {HttpClient} from "@angular/common/http";
export class RipeService {
private measurementsUrl = 'https://cors-ea3m.onrender.com/https://atlas.ripe.net/api/v2/measurements/';
- private measurementID: string = '';
+ public measurementID: string = '73134479';
constructor(
private http: HttpClient
- ) { }
+ ) {
+ }
async sendMeasurementRequest(target: string, description: string, type: string) {
let body = {
@@ -35,28 +38,23 @@ export class RipeService {
}
let headers = {
- "Authorization":"Key 92530695-134f-4cbc-b7c3-ec130f3719b0"
+ "Authorization": "Key 92530695-134f-4cbc-b7c3-ec130f3719b0"
}
console.log(body);
- let response:any = await this.http.post(this.measurementsUrl, body, {headers: headers}).toPromise();
+ 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() {
+ async getMeasurementResults():Promise> {
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;
- }
-
-
-
-
+ return this.http.get(this.measurementsUrl + this.measurementID + '/results/', {headers: headers})
+ }
}