New Features:

1. Implementing get history by description
2. Get more data
New Pages:
1. trace-results.page.html
Bugs Corrected:

To Be Corrected:
0. On product delete, delete trace results
0.1 Show on map trace results
1. Get analytics from Ripe Service
2. Show in the Graph

src/app/app-routing.module.ts

@@ -84,6 +84,10 @@ const routes: Routes = [
     path: 'trace-results',
     loadChildren: () => import('./pages/trace-results/trace-results.module').then( m => m.TraceResultsPageModule)
   },
+  {
+    path: 'show-map-trace',
+    loadChildren: () => import('./pages/show-map-trace/show-map-trace.module').then( m => m.ShowMapTracePageModule)
+  },
 ];
 
 @NgModule({

src/app/classes/traceroute.ts

@@ -8,6 +8,7 @@
 // match the expected interface, even if the JSON is valid.
 
 export interface Traceroute {
+  id?: string;
   fw?:                       number;
   mver?:                     string;
   lts?:                      number;

src/app/pages/show-map-trace/show-map-trace-routing.module.ts

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

src/app/pages/show-map-trace/show-map-trace.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 { ShowMapTracePageRoutingModule } from './show-map-trace-routing.module';
+
+import { ShowMapTracePage } from './show-map-trace.page';
+import {ComponentsModule} from "../../components/components.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        ShowMapTracePageRoutingModule,
+        ComponentsModule
+    ],
+  declarations: [ShowMapTracePage]
+})
+export class ShowMapTracePageModule {}

src/app/pages/show-map-trace/show-map-trace.page.html

@@ -0,0 +1,5 @@
+<app-header-return [title]="'Show Map'"></app-header-return>
+
+<ion-content class="relative">
+  <div id="mapId" style="width: 100%; height: 100%"></div>
+</ion-content>

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

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

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-show-map-trace',
+  templateUrl: './show-map-trace.page.html',
+  styleUrls: ['./show-map-trace.page.scss'],
+})
+export class ShowMapTracePage implements OnInit {
+  ripeData: any;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/trace-results/trace-results.page.html

@@ -6,15 +6,15 @@
     <h2 class="text-xs m-2 lg:m-10 lg:text-2xl md:text-2xl md:m-10">Results for {{description}}</h2>
     <br>
 
-    @for (result of results; track result){
+    @for (result of ripeResults; track result){
       <ion-row class="lg:m-10 md:m-10">
         <ion-col size="12">
           <h1 class="text-2xl">FROM {{ result.src_city }}, {{ result.src_country }}</h1>
         </ion-col>
       </ion-row>
       <ion-row class="lg:m-10 md:m-10">
         @for (hop of result.result; track hop) {
-            <ion-col size="4" size-md="4" size-lg="4" class="flex flex-row justify-center">
+            <ion-col size="12" size-md="4" size-lg="4" class="flex flex-row justify-center">
               <ion-card class="p-10 min-w-full">
               <ion-card-subtitle>Hop{{ hop.hop }}</ion-card-subtitle>
                 @if (hop.result![0].x){
@@ -43,14 +43,21 @@ <h1 class="text-2xl">FROM {{ result.src_city }}, {{ result.src_country }}</h1>
 <ion-footer [translucent]="true">
   <ion-toolbar>
     <ion-grid>
+
       <ion-row>
-        <ion-col size="4">
+        <ion-col size="4" class="flex flex-row justify-start items-center ">
+          <h1 class="text-sm hidden lg:flex md:flex  ">No city found might be due to host protections!</h1>
         </ion-col>
         <ion-col size="8" class="flex flex-row justify-end">
           <ion-button (click)="getMoreResults()" size="small" color="light">GET MORE RESULTS <ion-icon name="refresh" class="m-2"></ion-icon></ion-button>
           <ion-button (click)="goToMap()" size="small" color="primary">GO TO MAP <ion-icon name="arrow-forward" class="m-2"></ion-icon></ion-button>
         </ion-col>
       </ion-row>
+      <ion-row>
+        <ion-col size="12" class="flex lg:hidden md:hidden flex-row justify-center items-center">
+          <h1 class="text-sm">No city found might be due to host protections!</h1>
+        </ion-col>
+      </ion-row>
     </ion-grid>
   </ion-toolbar>
 </ion-footer>

src/app/pages/trace-results/trace-results.page.ts

@@ -2,8 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import {Traceroute} from "../../classes/traceroute";
 import {RipeTraceService} from "../../services/ripe-trace.service";
 import {User} from "../../interfaces/user";
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {LocationTraceService} from "../../services/location-trace.service";
+import {AlertController, LoadingController} from "@ionic/angular";
 
 @Component({
   selector: 'app-trace-results',
@@ -12,21 +13,21 @@ import {LocationTraceService} from "../../services/location-trace.service";
 })
 export class TraceResultsPage implements OnInit {
 
-  results: Traceroute[] = [
-    {
-      from: 'USA',
-    }
-  ];
+  ripeResults: Traceroute[] = [];
 
   description: string = '';
   productObjective: string = '';
   orgName: string = '';
+  measurementID: string = '';
 
 
   constructor(
     private ripeTraceService: RipeTraceService,
     private route: ActivatedRoute,
-    private locationTraceService: LocationTraceService
+    private router: Router,
+    private locationTraceService: LocationTraceService,
+    private loadingCtrl: LoadingController,
+    private alertCtrl: AlertController
   ) { }
 
   async ngOnInit() {
@@ -50,6 +51,7 @@ export class TraceResultsPage implements OnInit {
 
 
     await this.ripeTraceService.getHistoryResults(this.orgName, this.productObjective).then(r => {
+      console.log(r);
       let res = [];
       // @ts-ignore
       for (let i = 0; i < r.length; i++) {
@@ -59,18 +61,98 @@ export class TraceResultsPage implements OnInit {
           res.push(r[i]['data']['data']);
         }
       }
-      this.results = res[0]
-      console.log(this.results);
+      this.ripeResults = res[0]
+      this.measurementID = this.ripeResults[0].id!;
+      console.log(this.ripeResults);
+      console.log(this.measurementID);
     });
 
 
   }
 
-  getMoreResults() {
 
+
+
+
+  async getMoreResults() {
+    this.ripeResults = [];
+    try {
+      await this.showLoading();
+      const response = await this.ripeTraceService.getTraceResults(this.measurementID);
+      if (!response || response.length === 0) {
+        await this.hideLoading();
+        await this.showAlert('No trace results found', 'Error');
+        await this.getMoreResults();
+        return;
+      }
+      for (let traceroute of response) {
+        try {
+          traceroute = await this.locationTraceService.getLocationDestSrc(traceroute);
+          traceroute = await this.locationTraceService.getLocationFrom(traceroute);
+          this.ripeResults.push(traceroute);
+        }catch (e){
+          console.log(e);
+        }
+      }
+      const saveResponse = await this.ripeTraceService.saveMeasurementResults(this.orgName, this.productObjective, this.description, this.ripeResults);
+
+      if (saveResponse) {
+        await this.hideLoading();
+        await this.showAlert('Trace results saved successfully', 'Success');
+      } else {
+        await this.hideLoading();
+        await this.showAlert('Error saving trace results', 'Error');
+      }
+    } catch (e) {
+      console.log(e);
+      await this.hideLoading();
+    }
   }
 
+
+
+
   goToMap() {
+      this.router.navigate(['/show-map-trace'], { queryParams: { description: this.description, productObjective: this.productObjective, orgName: this.orgName } });
+  }
 
+
+
+  /**
+   * Show a loading spinner.
+   */
+  async showLoading() {
+    const loading = await this.loadingCtrl.create({
+    });
+    await loading.present();
+  }
+
+  /**
+   * Hide the loading spinner.
+   */
+  async hideLoading() {
+    await this.loadingCtrl.dismiss();
+  }
+
+  /**
+   * Show an alert with the given message.
+   *
+   * @param {string} message - The message to show in the alert.
+   */
+  async showAlert(message:string, header:string) {
+    const alert = await this.alertCtrl.create({
+      header: header,
+      message:message,
+      buttons: ['OK']
+    });
+    await alert.present();
+
+    const {role} = await alert.onDidDismiss();
+    if (role === 'ok') {
+      return true;
+    }
+    return true;
   }
+
+
 }

src/app/services/ripe-trace.service.ts

@@ -10,7 +10,7 @@ import {Traceroute} from "../classes/traceroute";
 export class RipeTraceService {
 
   private measurementsUrl = 'https://cors-ea3m.onrender.com/https://atlas.ripe.net/api/v2/measurements/';
-  public measurementID: string = '73614089';
+  public measurementID: string = '';
 
 
   constructor(
@@ -96,6 +96,7 @@ export class RipeTraceService {
       const docRef = doc(collectionRef, description);
 
       const data = traceroutes.map((item, index) => ({
+        id: this.measurementID,
         dst_addr: item.dst_addr,
         dst_city: item.dst_city,
         dst_country: item.dst_country,