From 5272a357e7793e5b18a3538d104b8523f24ee179 Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Sun, 7 May 2023 13:14:40 +0200
Subject: [PATCH] Added check if waypoint is visited and label with translation
 for radial percentage

---
 src/app/app.component.ts                      |  1 +
 src/app/component/list/list.component.css     | 25 +++++++++++++++++--
 src/app/component/list/list.component.html    | 11 ++++++--
 src/app/interface/translations.ts             |  1 +
 .../language/readTranslateJson.service.ts     |  1 +
 src/assets/i18n/list/en.json                  |  3 ++-
 6 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b3d26f..a4152da 100644
--- a/src/app/app.component.ts
+++ b/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);
diff --git a/src/app/component/list/list.component.css b/src/app/component/list/list.component.css
index a709ef5..636c4eb 100644
--- a/src/app/component/list/list.component.css
+++ b/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;
+}
diff --git a/src/app/component/list/list.component.html b/src/app/component/list/list.component.html
index 1c53ba3..6e7f75c 100644
--- a/src/app/component/list/list.component.html
+++ b/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>
diff --git a/src/app/interface/translations.ts b/src/app/interface/translations.ts
index 4790151..4be33e1 100644
--- a/src/app/interface/translations.ts
+++ b/src/app/interface/translations.ts
@@ -11,6 +11,7 @@ export interface listTranslations {
   locationName: string;
   distance: string;
   positionNotFoundErrorMessage: string;
+  waypointVisitedPercentage: string;
 }
 
 export interface managementTranslations {
diff --git a/src/app/service/language/readTranslateJson.service.ts b/src/app/service/language/readTranslateJson.service.ts
index ccdc8d2..7abef94 100644
--- a/src/app/service/language/readTranslateJson.service.ts
+++ b/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 => {
diff --git a/src/assets/i18n/list/en.json b/src/assets/i18n/list/en.json
index 040580c..abad012 100644
--- a/src/assets/i18n/list/en.json
+++ b/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"
 }