waypoint visited percentage

src/app/component/list/list.component.html

@@ -31,9 +31,9 @@
       </div>
     </div>
     <div class="right">
-      <div class="radial-progress text-primary" id="radial" style="--value:70; --size:12rem; --thickness: 1.5rem;">
+      <div class="radial-progress text-primary" id="radial" style="--value:{{percentage}}; --size:12rem; --thickness: 1.5rem;">
         <span style="font-size: 20pt">
-          70%
+          {{percentage}}%
         </span>
       </div>
     </div>

src/app/component/list/list.component.ts

@@ -9,6 +9,7 @@ import {WaypointService} from "../../service/http/waypoint.service"
 import {cookieService} from "../../service/cookie.service";
 import {UserService} from "../../service/http/user.service";
 import {WaypointVisitedService} from "../../service/http/waypointVisited.service";
+import {filter} from "rxjs";
 
 @Component({
   selector: 'app-list',
@@ -57,8 +58,8 @@ export class ListComponent implements OnInit, OnChanges {
         this.waypointService.getWaypoints(this.location.location).subscribe(waypoints => {
           this.waypoints = waypoints;
           console.log("waypoints", this.waypoints);
+          this.setVisited();
           this.setDistance();
-          //this.setVisited();
         });
       }
 
@@ -70,7 +71,7 @@ export class ListComponent implements OnInit, OnChanges {
     });
     this.getPosition();
     this.positionNotFoundFunction();
-
+    this.setDistance();
   }
 
 
@@ -126,6 +127,25 @@ export class ListComponent implements OnInit, OnChanges {
       }
     }
   }
+
+  private setVisited(): void {
+    console.log("setVisited")
+    if (this.username && this.waypoints) {
+      for (let i = 0; i < this.waypoints.length; i++) {
+        if (this.waypoints[i].id) {
+          this.waypointVisitedService.getWaypointByUserAndWaypoint(this.username, this.waypoints[i].id).subscribe((waypointVisited: any) => {
+            if (this.waypoints) {
+              this.waypoints[i].visited = waypointVisited;
+              console.log(this.waypoints[i].visited);
+              this.setPercentage();
+            }
+          });
+        }
+      }
+    }
+
+  }
+
   /*
     private setVisited(): void {
       if (this.username && this.waypoints) {
@@ -137,6 +157,7 @@ export class ListComponent implements OnInit, OnChanges {
       }
     }
   */
+
   /*
     private setVisited(): void {
       this.userService.getUser(this.username).subscribe((user: any) => {
@@ -162,9 +183,17 @@ export class ListComponent implements OnInit, OnChanges {
 
   */
 
-  setPercentage()
-    :
-    void {
-    this.percentage = this.waypoints?.length ?? 0;
+  setPercentage(): void {
+    if (this.waypoints) {
+      let count: number = 0;
+      for (let i = 0; i < this.waypoints.length; i++) {
+        if (this.waypoints[i].visited) {
+          count++;
         }
       }
+      this.percentage = parseFloat((count / this.waypoints.length * 100).toFixed(0));
+    }
+  console.log("percentage", this.percentage)
+  }
+
+}

src/app/component/management/management.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {UserEntity} from "../../interface/UserEntity";
 import {LocationEntity} from "../../interface/LocationEntity";
-import {WaypointsEntity} from "../../interface/WaypointsEntity";
+import {newWaypoint, WaypointsEntity} from "../../interface/WaypointsEntity";
 import {Router} from "@angular/router";
 import {LocationService} from "../../service/http/location.service";
 import {UserService} from "../../service/http/user.service";
@@ -26,7 +26,7 @@ export class ManagementComponent implements OnInit {
 
   newUser: UserEntity = { password: "", username: ""};
   newLocation: LocationEntity = {location: "", lat: 0, lon: 0, region: ""};
-  newWaypoint: WaypointsEntity = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""};
+  newWaypoint: newWaypoint = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""};
 
   locations: LocationEntity[] | undefined;
   waypoints: WaypointsEntity[] | undefined;

src/app/interface/WaypointsEntity.ts

@@ -1,5 +1,5 @@
 export interface WaypointsEntity {
-  id?: number;
+  id: number;
   name: string;
   lat: number;
   lon: number;
@@ -9,3 +9,11 @@ export interface WaypointsEntity {
   distance?: number;
   visited?: boolean;
 }
+export interface newWaypoint {
+  name: string;
+  lat: number;
+  lon: number;
+  description: string;
+  img: string;
+  locationName: string;
+}

src/app/service/http/waypoint.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
-import {WaypointsEntity} from "../../interface/WaypointsEntity";
+import {newWaypoint, WaypointsEntity} from "../../interface/WaypointsEntity";
 import {catchError, throwError} from "rxjs";
 
 const BASE_URL = "progetto152";
@@ -35,7 +35,7 @@ export class WaypointService {
     return this.http.get<WaypointsEntity>(GET_WAYPOINT_BY_ID + id);
   }
 
-  createWaypoint(waypoint: WaypointsEntity) {
+  createWaypoint(waypoint: newWaypoint) {
     return this.http.post<WaypointsEntity>(WAYPOINT, waypoint);
   }
 

src/app/service/http/waypointVisited.service.ts

@@ -31,7 +31,7 @@ export class WaypointVisitedService {
   }
 
   getWaypointByUserAndWaypoint(user: string, waypoint: number) {
-    return this.http.get<boolean>(GET_WAYPOINT_BY_USER + user + "/" + waypoint);
+    return this.http.get<boolean>(WAYPOINT_VISITED+ "/"+user + "/" + waypoint);
   }
 
   createWaypoint(waypointvisited: WaypointsVisitedEntity) {

src/assets/data.json

@@ -1,66 +0,0 @@
-[
-  {
-    "location": "Biasca",
-    "region": "ticino",
-    "lat": 46.361184,
-    "lon": 8.970937,
-    "waypoints": [
-      {
-        "id": 1,
-        "name": "Cascata Santa Petronilla",
-        "lat": 46.35328215446709,
-        "lon": 8.97758397155138,
-        "description": "",
-        "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
-      },
-      {
-        "id": 2,
-        "name": "Casa Küng",
-        "lat": 46.363570208549994,
-        "lon": 8.963464722308554,
-        "description": "Descrizione del punto 2",
-        "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
-      },
-      {
-        "id": 3,
-        "name": "Punto 3",
-        "lat": 46.123,
-        "lon": 8.123,
-        "description": "Descrizione del punto 3",
-        "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
-      }
-    ]
-  },
-  {
-    "location": "Lugano",
-    "region": "TI",
-    "lat": 46.0036778,
-    "lon": 8.951052,
-    "waypoints": [
-      {
-        "id": 4,
-        "name": "Punto 1",
-        "lat": 46.123,
-        "lon": 8.123,
-        "description": "un grandissimo",
-        "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
-      },
-      {
-        "id": 5,
-        "name": "Punto 2",
-        "lat": 46.123,
-        "lon": 8.123,
-        "description": "Descrizione del punto 2",
-        "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
-      },
-      {
-        "id": 6,
-        "name": "Punto 3",
-        "lat": 46.123,
-        "lon": 8.123,
-        "description": "Descrizione del punto 3",
-        "img": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
-      }
-    ]
-  }
-]