Merge branch 'legend'

frontend/src/app/language.service.ts

@@ -13,9 +13,9 @@ export class LanguageService {
 
   public language: string = 'DE';
   public languages: string[] = ['DE', 'EN'];
-  public deMap : Map<string, string> = new Map<string, string>();
+  public deMap: Map<string, string> = new Map<string, string>();
-  public enMap : Map<string, string> = new Map<string, string>();
+  public enMap: Map<string, string> = new Map<string, string>();
-  public lMap : Map<string, string> = new Map<string, string>();
+  public lMap: Map<string, string> = new Map<string, string>();
   public deColumns: any[];
   public enColumns: any[];
   public dePlanTimeColumns: any[];
@@ -27,6 +27,17 @@ export class LanguageService {
   * The constructor sets all the language values and does the default mapping
   */
   constructor() {
+    this.deMap.set('routeDraft', "Entwurf"); this.enMap.set('routeDraft', 'Draft');
+    this.deMap.set('routeRFA', "Atorisierungsanforderung"); this.enMap.set('routeRFA', 'Request for Authorization');
+    this.deMap.set('routePIP', "Planung in Bearbeitung"); this.enMap.set('routePIP', 'Planning in Progress');
+    this.deMap.set('routeScheduled', "Geplant"); this.enMap.set('routeScheduled', 'Scheduled');
+    this.deMap.set('routeCancelled', "Storniert"); this.enMap.set('routeCancelled', 'Cancelled');
+    this.deMap.set('routeCFRR', "Fertiggestellt (Endüberprüfung Erforderlich)"); this.enMap.set('routeCFRR', 'Completed (final review required)');
+    this.deMap.set('routeFRF', "Fertiggestellt (Endüberprüfung Abgeschlossen)"); this.enMap.set('routeFRF', 'Completed (final review finished)');
+    this.deMap.set('routeClosed', "Abgeschlossen"); this.enMap.set('routeClosed', 'Closed');
+    this.deMap.set('routeRB', "Abgelehnt (Beginn)"); this.enMap.set('routeRB', 'Rejected (begin)');
+    this.deMap.set('routeRE', "Abgelehnt (Ende)"); this.enMap.set('routeRE', 'Rejected (end)');
+
     this.deMap.set('detailButton', 'Details anzeigen');
     this.enMap.set('detailButton', 'Show Details');
     this.deMap.set('filterButton', 'Filter anwenden');
@@ -187,49 +198,49 @@ export class LanguageService {
     this.deMap.set('D4N', 'End Datum');
     this.enMap.set('D4N', 'End Date');
 
-    this.dePlanTimeResources = [{resourceId: 1, resourceName: 'Planzeit Summen pro Woche'}];
+    this.dePlanTimeResources = [{ resourceId: 1, resourceName: 'Planzeit Summen pro Woche' }];
-    this.dePlanTimeColumns = [{ field: 'TaskName', headerText:  'Planzeiten pro Woche', width: 250 }];
+    this.dePlanTimeColumns = [{ field: 'TaskName', headerText: 'Planzeiten pro Woche', width: 250 }];
 
-    this.enPlanTimeResources = [{resourceId: 1, resourceName: 'Plantime Sum per Week'}];
+    this.enPlanTimeResources = [{ resourceId: 1, resourceName: 'Plantime Sum per Week' }];
-    this.enPlanTimeColumns = [{ field: 'TaskName', headerText:  'Planzeit pro Woche', width: 250 }];
+    this.enPlanTimeColumns = [{ field: 'TaskName', headerText: 'Planzeit pro Woche', width: 250 }];
 
     this.deColumns = [
       { field: 'TaskName', headerText: 'Kurzbeschreibung', width: 230 },
-      { field: 'stateName', headerText: 'Status', width: 250},
+      { field: 'stateName', headerText: 'Status', width: 250 },
       { field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 },
       { field: 'supportGroup', headerText: 'Gewählte Support Gruppe' },
-      { field: 'StartDate', headerText: 'Geplantes Start-Datum', format : {type:'date', format:'dd.MM.yyyy'}},
+      { field: 'StartDate', headerText: 'Geplantes Start-Datum', format: { type: 'date', format: 'dd.MM.yyyy' } },
       { field: 'plantime', headerText: 'Planzeit in H', width: 100 },
       { field: 'changeNr', headerText: 'Change Nummer', width: 140 }
     ];
     this.enColumns = [
       { field: 'TaskName', headerText: 'Summary', width: 230 },
-      { field: 'stateName', headerText: 'State', width: 250},
+      { field: 'stateName', headerText: 'State', width: 250 },
       { field: 'vertragName', headerText: 'Contract / Provider Cluster', width: 150 },
       { field: 'supportGroup', headerText: 'Selected Support Group' },
-      { field: 'StartDate', headerText: 'Planned Start-Date', format : {type:'date', format:'dd.MM.yyyy'}},
+      { field: 'StartDate', headerText: 'Planned Start-Date', format: { type: 'date', format: 'dd.MM.yyyy' } },
       { field: 'plantime', headerText: 'Plantime in h', width: 100 },
       { field: 'changeNr', headerText: 'Change Number', width: 140 }
-      ];
+    ];
 
-    if(navigator.language == 'de-DE'){
+    if (navigator.language == 'de-DE') {
       this.language = 'DE';
       this.lMap = this.deMap;
-    }else{
+    } else {
       this.language = 'EN';
       this.lMap = this.enMap;
     }
-   }
+  }
 
   /**
   * The function languageChange set the language map to the german or english map depending on the selected language
   * it is triggered by an language change from the NttGanttComponent
   * @param args args with the selected language
   */
-  public languageChange(args: any){
+  public languageChange(args: any) {
-    if(this.language == 'DE'){
+    if (this.language == 'DE') {
       this.lMap = this.deMap;
-    }else{
+    } else {
       this.language = 'EN';
       this.lMap = this.enMap;
     }
@@ -239,12 +250,12 @@ export class LanguageService {
   * The function getColumns delivers the gannt chart columns for the NttGanttComponent in the selected language
   * it is triggered by an language change from the NttGanttComponent
   */
-  public getColumns(){
+  public getColumns() {
-    if(this.language == 'DE'){
+    if (this.language == 'DE') {
       return this.deColumns;
-    }else{
+    } else {
       this.language = 'EN';
-     return this.enColumns;
+      return this.enColumns;
     }
   }
 }

frontend/src/app/ntt-gantt/ntt-gantt.component.css

@@ -262,7 +262,7 @@
   /* Semi-transparent background */
   border: solid rgba(0, 0, 0, 0.1) 1px;
   border-bottom: none;
-  border-radius: 10px 10px 0px 0px;
+  border-radius: 5px 5px 0px 0px;
   height: 60px;
   padding-left: 10px;
   padding-right: 15px;
@@ -458,11 +458,12 @@
   width: 100%;
   font-family: Arial, sans-serif;
   font-size: 13px;
-  display: flex;
-  flex-direction: column;
   gap: 4px;
   background-color: rgb(210, 217, 224);
   padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .inner-legend {
@@ -473,11 +474,14 @@
   border-radius: 50px;
   background-color: aliceblue;
   width: fit-content;
+  white-space: nowrap;
 }
 
 .route {
   height: 12px;
   width: 12px;
+  min-width: 12px;
+  min-height: 12px;
   transform: rotate(45deg);
 }
 .gantt-container {

frontend/src/app/ntt-gantt/ntt-gantt.component.html

@@ -57,48 +57,7 @@
   </div>
 </div>
 
-<div class="legend">
+
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f83200;"></div>
-    Draft
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f98700;"></div>
-    Request for Authorization
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f98700;"></div>
-    Planning in Progress
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f4fa00;"></div>
-    Scheduled
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f4fa00;"></div>
-    Cancelled
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #008642;"></div>
-    Completed (final review required)
-  </div> 
-  <div class="inner-legend">
-    <div class="route" style="background-color: #32cd32;"></div>
-    Completed (final review finished)
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #ffffff;"></div>
-    Closed
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #d3d3d3;"></div>
-    Rejected (begin)
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #808080;"></div>
-    Rejected (end)
-  </div>
-</div>
 
 
 
@@ -276,6 +235,49 @@
   [pageIndex]="0" aria-label="Seite auswählen">
 </mat-paginator>
 
+<div class="legend">
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f83200;"></div>
+    {{languageService.lMap.get('routeDraft')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f98700;"></div>
+    {{languageService.lMap.get('routeRFA')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #ffc006;"></div>
+    {{languageService.lMap.get('routePIP')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f4fa00;"></div>
+    {{languageService.lMap.get('routeScheduled')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #131313;"></div>
+    {{languageService.lMap.get('routeCancelled')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #008642;"></div>
+    {{languageService.lMap.get('routeCFRR')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #32cd32;"></div>
+    {{languageService.lMap.get('routeFRF')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #ffffff; border: solid 1px #8e8e8e;"></div>
+    {{languageService.lMap.get('routeClosed')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #d3d3d3;"></div>
+    {{languageService.lMap.get('routeRB')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #808080;"></div>
+    {{languageService.lMap.get('routeRE')}}
+  </div>
+</div>
+
 <mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
   <mat-card-header>
     <mat-card-title><mat-icon style="color: red;">error</mat-icon>

frontend/src/app/ntt-gantt/ntt-gantt.component.ts

@@ -911,11 +911,11 @@ export class NttGanttComponent implements OnInit {
           // console.log("orange");
         }
         if (args.data.taskData.resources[0].state == 3) {
-          args.milestoneColor = "#ff9248"; //light orange
+          args.milestoneColor = "#ffc006"; //light orange
           // console.log("light orange");
         }
         if (args.data.taskData.resources[0].state >= 6) {
-          args.milestoneColor = "#ffff00"; //yellow
+          args.milestoneColor = "#000000"; //yellow
           // console.log("yellow");
         }
         if (args.data.taskData.resources[0].state == 7) {