creating legend

frontend/src/app/app.component.css

@@ -7,4 +7,12 @@
 
 body {
   overflow-x: hidden;
-}
+}
+
+/* body {
+  margin: 0; 
+  padding: 0;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+} */

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

@@ -182,7 +182,8 @@
   padding-right: 15px;
   border: solid 1px rgba(0, 0, 0, 0.215);
   border-radius: 8px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
   /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
 }
 
@@ -220,7 +221,8 @@
   border-radius: 8px;
   font-weight: 500;
   gap: 3px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
   /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
 }
 
@@ -237,7 +239,8 @@
   border-radius: 8px;
   font-weight: 500;
   gap: 3px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
 
 }
 
@@ -255,7 +258,8 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: rgba(245, 245, 245, 0.528); /* Semi-transparent background */
+  background-color: rgba(245, 245, 245, 0.528);
+  /* Semi-transparent background */
   border: solid rgba(0, 0, 0, 0.1) 1px;
   border-bottom: none;
   border-radius: 10px 10px 0px 0px;
@@ -263,12 +267,15 @@
   padding-left: 10px;
   padding-right: 15px;
   justify-content: space-between;
-  position: -webkit-sticky; /* For Safari */
+  position: -webkit-sticky;
+  /* For Safari */
   position: sticky;
   top: 0;
-  z-index: 1000; /* Ensure it is above other content */
+  z-index: 1000;
+  /* Ensure it is above other content */
   border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(2px); /* Blur effect */
+  backdrop-filter: blur(2px);
+  /* Blur effect */
   animation: slideUp 1.5s forwards;
 }
 
@@ -276,7 +283,8 @@
   border-radius: 0;
 }
 
-.left, .right {
+.left,
+.right {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -330,7 +338,7 @@
   background-color: rgba(0, 0, 0, 0.08);
 }
 
-.editButton{
+.editButton {
   margin-left: 10px;
   display: flex;
   align-items: center;
@@ -344,7 +352,8 @@
   border-radius: 8px;
   font-weight: 500;
   gap: 3px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
 }
 
 .editButton:hover {
@@ -353,15 +362,18 @@
 }
 
 
-.editButton mat-icon{
+.editButton mat-icon {
   transform: scale(0.7);
   opacity: 0.75;
 }
+
 .deleteButton mat-icon {
   transform: scale(0.8);
   opacity: 0.75;
 }
-.editButton:hover>mat-icon, .deleteButton:hover>mat-icon {
+
+.editButton:hover>mat-icon,
+.deleteButton:hover>mat-icon {
   opacity: 1;
 }
 
@@ -378,7 +390,8 @@
   border-radius: 8px;
   font-weight: 500;
   gap: 3px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
 }
 
 .deleteButton:hover {
@@ -411,9 +424,11 @@
 } */
 
 .mat-button-toggle-checked {
-  background-color:#ef6c00; /* Gradient background */
+  background-color: #ef6c00;
+  /* Gradient background */
   color: white;
-  position: relative; /* Needed for the shadow effect */
+  position: relative;
+  /* Needed for the shadow effect */
 }
 
 .dot-badge {
@@ -437,4 +452,31 @@
 
 ::ng-deep .mat-calendar-cell-content{
    color: #d56100;
-} */
+} */
+
+.legend {
+  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;
+}
+
+.inner-legend {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 50px;
+  background-color: aliceblue;
+  width: fit-content;
+}
+
+.route {
+  height: 12px;
+  width: 12px;
+  transform: rotate(45deg);
+}

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

@@ -30,8 +30,9 @@
   </mat-form-field> -->
 
     <!-- Language Picker -->
-    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px; margin-left: 15px;" (change)="languageChange($event)"
+    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px; margin-left: 15px;"
-      name="languagePicker" aria-label="Language Picker" [(ngModel)]="languageService.language">
+      (change)="languageChange($event)" name="languagePicker" aria-label="Language Picker"
+      [(ngModel)]="languageService.language">
       <mat-button-toggle style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages"
         [value]="lang">
         {{lang}}
@@ -56,6 +57,51 @@
   </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>
+
+
+
 <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
   <div class="left">
 
@@ -67,8 +113,9 @@
       {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
     </button>
 
-    <button *ngIf="transitionButton" class="filterButton transitionButton" style="background-color: #00a79d; color: white;"
+    <button *ngIf="transitionButton" class="filterButton transitionButton"
-      aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
+      style="background-color: #00a79d; color: white;" aria-label="Filtern"
+      (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
 
     <button *ngIf="approveButton" class="filterButton" aria-label="Filtern"
       (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
@@ -259,4 +306,4 @@
   <mat-card-content>
     <p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
   </mat-card-content>
-</mat-card>
+</mat-card>

frontend/src/index.html

@@ -26,7 +26,6 @@
   } */
 
 
-
    .e-gantt-milestone-border {
      border-radius: 50%;
      color: red;