Added check if waypoint is visited and label with translation for radial percentage

src/app/app.component.ts

@@ -64,6 +64,7 @@ export class AppComponent implements OnInit {
     this.listTranslations.distance = await this.translateService.getData(this.listTranslations.distance, lang);
     this.listTranslations.locationName = await this.translateService.getData(this.listTranslations.locationName, lang);
     this.listTranslations.positionNotFoundErrorMessage = await this.translateService.getData(this.listTranslations.positionNotFoundErrorMessage, lang);
+    this.listTranslations.waypointVisitedPercentage = await this.translateService.getData(this.listTranslations.waypointVisitedPercentage, lang);
 
     // Load Management Page Translations
     this.managementTranslation.users = await this.translateService.getData(this.managementTranslation.users, lang);

src/app/component/list/list.component.css

@@ -45,8 +45,6 @@ h4 {
 }
 .right {
   width: 60%;
-  display: flex;
-  justify-content: center;
 }
 
 #radial {
@@ -57,3 +55,26 @@ h4 {
   display: flex;
   flex-direction: row;
 }
+
+.radial-container{
+  display: flex;
+  justify-content: center;
+}
+
+#radialTitle{
+  margin-top: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+#location-name{
+  display: flex;
+  flex-direction: row;
+}
+
+#check{
+  height: 100%;
+  align-self: center;
+  margin-left: 10px;
+  color: #519903;
+}

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

@@ -24,8 +24,11 @@
   <div class="container2">
     <div class="left">
       <div *ngFor="let waypoint of waypoints, let i = index" class="row">
-        <h3>
+        <h3 id="location-name">
           <a class="link link-primary" href="location/{{location.location}}/{{waypoint.id}}"> {{waypoint.name}}</a>
+          <svg *ngIf="waypoint.visited" id="check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
         </h3>
         <div class="distance">
           <h4 *ngIf="waypoint.distance && !positionNotFound">{{translations.distance}}: {{waypoint.distance}} km</h4>
@@ -35,10 +38,14 @@
       </div>
     </div>
     <div class="right">
-      <div class="radial-progress text-primary" id="radial" style="--value:{{percentage}}; --size:12rem; --thickness: 1.5rem;">
+      <h3 id="radialTitle">{{translations.waypointVisitedPercentage}}</h3>
+      <div class="radial-container">
+        <div class="radial-progress text-primary" id="radial"
+             style="--value:{{percentage}}; --size:12rem; --thickness: 1.5rem;">
         <span style="font-size: 20pt">
           {{percentage}}%
         </span>
+        </div>
       </div>
     </div>
   </div>

src/app/interface/translations.ts

@@ -11,6 +11,7 @@ export interface listTranslations {
   locationName: string;
   distance: string;
   positionNotFoundErrorMessage: string;
+  waypointVisitedPercentage: string;
 }
 
 export interface managementTranslations {

src/app/service/language/readTranslateJson.service.ts

@@ -34,6 +34,7 @@ export class ReadTranslateJsonService {
       this.listTranslation.distance = data.distance;
       this.listTranslation.locationName = data.locationName;
       this.listTranslation.positionNotFoundErrorMessage = data.positionNotFoundErrorMessage;
+      this.listTranslation.waypointVisitedPercentage = data.waypointVisitedPercentage;
     });
 
     this.http.get<managementTranslations>('assets/i18n/management/en.json').subscribe(data => {

src/assets/i18n/list/en.json

@@ -2,5 +2,6 @@
   "translate": "Translate",
   "locationName": "Position not found",
   "distance": "Distance",
-  "positionNotFoundErrorMessage": "Could not retrieve position"
+  "positionNotFoundErrorMessage": "Could not retrieve position",
+  "waypointVisitedPercentage": "Percentage of waypoints visited"
 }