languageComponen/implemented

frontend/src/app/data.service.ts

@@ -2,6 +2,7 @@ import { JsonPipe } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ResourceFields } from '@syncfusion/ej2-angular-gantt';
+import { LanguageService } from './language.service';
 
 
 @Injectable({
@@ -20,12 +21,12 @@ export class DataService {
   private paketTypes: any [];
   private totalSize: number = null;
   public userSupportGroup: string;
-  public selectedLanguage: string = 'DE';
+  //public selectedLanguage: string = 'DE';
   /**
    * This constructor builds the dataService and fetches the states from the backend
    * @param http
    */
-  constructor(private http: HttpClient) {
+  constructor(public languageService: LanguageService, private http: HttpClient) {
     this.fetchStates().then((res: any [])=>{
       this.states = res;
     });
@@ -285,7 +286,7 @@ export class DataService {
       console.log(dataJson);
       this.http.post('http://localhost:8080/api/getChanges', dataJson)
       .subscribe((response:any)=>{
-       //console.log(response);
+        console.log(response);
         this.totalSize = response.totalSize;
         response.changes.forEach(resp=>{
           //console.log(resp.resourceId+"  "+resp.approvalStatus)
@@ -415,14 +416,14 @@ export class DataService {
 
 
   getStateNameById(stateNr): String {
-    if(this.selectedLanguage == 'EN'){
+    if(this.languageService.language == 'EN'){
       for (let state of this.states) {
         if(stateNr == state.actualState){
           return state.stateNameEN;
         }
       }
     }
-    if(this.selectedLanguage == 'DE'){
+    if(this.languageService.language == 'DE'){
       for (let state of this.states) {
         if(stateNr == state.actualState){
           return state.stateNameDE;

frontend/src/app/filter-dialog/filter-dialog.component.ts

@@ -1,3 +1,4 @@
+import { LanguageService } from './../language.service';
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -59,10 +60,10 @@ export class FilterDialogComponent implements OnInit {
 
 
 
-    constructor(public dialogRef: MatDialogRef<FilterDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) {
+    constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<FilterDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) {
       //dialogRef.beforeClosed().subscribe(() => dialogRef.close(this.dataToReturn));
       this.filterLabels = [];
-      if(this.dataService.selectedLanguage == "DE"){
+      if(this.languageService.language == "DE"){
         this.filterLabels.push("Kurzbeschreibung* (Eingabe eines Textteiles filtert alle passenden Pakete)");
         this.filterLabels.push("Gewählte Supportgruppe in der Rolle Planender IH oder Kostenverantwortlicher (eine)");
         this.filterLabels.push("Status (einer oder mehrere) des Pakets");
@@ -100,7 +101,7 @@ export class FilterDialogComponent implements OnInit {
         this.userSupportGroup = res.name;
       });
       console.log(this.userSupportGroup);
-      if(this.dataService.selectedLanguage == 'DE'){
+      if(this.languageService.language == 'DE'){
         for (const state of this.dataService.getStates()) {
           this.states.push(state.stateNameDE);
         }
@@ -136,7 +137,7 @@ export class FilterDialogComponent implements OnInit {
         break;
         case 'state':
           // this.statesFilter = event.data;
-          if(this.dataService.selectedLanguage == 'DE'){
+          if(this.languageService.language == 'DE'){
             console.log(event.data);
             for (const state of event.data) {
               if(this.dataService.getStates().find((item)=> {return item.stateNameDE == state;})){

frontend/src/app/implementer-dialog/implementer-dialog.component.ts

@@ -7,6 +7,7 @@ import {
   MatSnackBarHorizontalPosition,
   MatSnackBarVerticalPosition,
 } from '@angular/material/snack-bar';
+import { LanguageService } from '../language.service';
 
 @Component({
   selector: 'app-implementer-dialog',
@@ -36,14 +37,14 @@ export class ImplementerDialogComponent implements OnInit {
   * @param data contains an array of Changes which should be sent to the backend for a status transition
   * @param dataService injects the dataService for data management and backend communication
   */
- constructor(private dialogRef: MatDialogRef<ImplementerDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any,private dataService: DataService, private _snackBar: MatSnackBar) {
+ constructor(public languageService: LanguageService, private dialogRef: MatDialogRef<ImplementerDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any,private dataService: DataService, private _snackBar: MatSnackBar) {
    this.progress = 0;
    this.bdiasbled = true;
    this.diasbled = false;
    this.selectedValue = -1;
    this.possibleImplementers = [];
    this.labels = [];
-   if(this.dataService.selectedLanguage == 'DE'){
+   if(this.languageService.language == 'DE'){
     this.labels.push("Implementer Eintragen");
     this.labels.push("Implementer auswählen");
     this.labels.push("Abbrechen");
@@ -114,7 +115,7 @@ export class ImplementerDialogComponent implements OnInit {
          if(res.status == 500){
           let msg;
           let action;
-          if(this.dataService.selectedLanguage == 'DE'){
+          if(this.languageService.language == 'DE'){
             msg = 'Implementer Eintragung fehlgeschlagen';
             action ='Schließen';
           }else{
@@ -139,7 +140,7 @@ export class ImplementerDialogComponent implements OnInit {
            this.bdiasbled = true;
            let msg;
            let action;
-           if(this.dataService.selectedLanguage == 'DE'){
+           if(this.languageService.language == 'DE'){
             msg = 'Implementer Eintragung erfolgreich';
             action ='Schließen';
           }else{

frontend/src/app/language.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LanguageService } from './language.service';
+
+describe('LanguageService', () => {
+  let service: LanguageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LanguageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/language.service.ts

@@ -0,0 +1,103 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LanguageService {
+
+  public language: string = 'DE';
+  public languages: string[] = ['DE', 'EN'];
+  public deMap : 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 deColumns: any[];
+  public enColumns: any[];
+
+  constructor() {
+    this.deMap.set('detailButton', 'Details anzeigen');
+    this.enMap.set('detailButton', 'Show Details');
+    this.deMap.set('filterButton', 'Filter anwenden');
+    this.enMap.set('filterButton', 'Apply Filters');
+    this.deMap.set('sortButton', 'Sortierung anwenden');
+    this.enMap.set('sortButton', 'Apply Sort');
+    this.deMap.set('field1', 'Kurzbeschreibung');
+    this.enMap.set('field1', 'Summary');
+    this.deMap.set('dateRangeLabel', 'Datumsbereich auswählen');
+    this.enMap.set('dateRangeLabel', 'Select Date Range');
+    this.deMap.set('language', 'Sprache');
+    this.enMap.set('language', 'Language');
+    this.deMap.set('clearFilter', 'Filter Löschen');
+    this.enMap.set('clearFilter', 'Clear Filter');
+
+    this.deMap.set('tooltipSummary', 'Name');
+    this.enMap.set('tooltipSummary', 'Name');
+    this.deMap.set('tooltipState', 'Status');
+    this.enMap.set('tooltipState', 'State');
+    this.deMap.set('tooltipPaketType', 'Paket Typ');
+    this.enMap.set('tooltipPaketType', 'Package Type');
+    this.deMap.set('tooltipContract', 'Vertrag / Provider Cluster');
+    this.enMap.set('tooltipContract', 'Contract / Provider Cluster');
+    this.deMap.set('tooltipSupportGroupKv', 'KV SG');
+    this.enMap.set('tooltipSupportGroupKv', 'KV SG');
+    this.deMap.set('tooltipSupportGroupIh', 'IH SG');
+    this.enMap.set('tooltipSupportGroupIh', 'IH SG');
+    this.deMap.set('tooltipDate', 'Geplantes Start Datum');
+    this.enMap.set('tooltipDate', 'Planned Start Date');
+
+    this.deMap.set('permit', 'Zur Genehmigung');
+    this.enMap.set('permit', 'Permit');
+    this.deMap.set('genehmigen', 'Genehmigen');
+    this.enMap.set('genehmigen', 'Approve');
+    this.deMap.set('ablehnen', 'Ablehnen');
+    this.enMap.set('ablehnen', 'Reject');
+    this.deMap.set('stornieren', 'Stornieren');
+    this.enMap.set('stornieren', 'Cancel');
+    this.deMap.set('implementer', 'Implementer Eintragen');
+    this.enMap.set('implementer', 'Enter Implementer');
+    this.deMap.set('stateChange', 'Statusübergang');
+    this.enMap.set('stateChange', 'State Transition');
+
+    this.deColumns = [
+      { field: 'TaskName', headerText: 'Kurzbeschreibung', 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: 'plantime', headerText: 'Planzeit in H', width: 100 },
+    ];
+    this.enColumns = [
+      { field: 'TaskName', headerText: 'Summary', 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: 'plantime', headerText: 'Plantime in h', width: 100 },
+      ];
+
+    if(navigator.language == 'de-DE'){
+      this.language = 'DE';
+      this.lMap = this.deMap;
+    }else{
+      this.language = 'EN';
+      this.lMap = this.enMap;
+    }
+   }
+
+   public languageChange(args: any){
+    if(this.language == 'DE'){
+      this.lMap = this.deMap;
+    }else{
+      this.language = 'EN';
+      this.lMap = this.enMap;
+    }
+   }
+   public getColumns(){
+    if(this.language == 'DE'){
+      return this.deColumns;
+    }else{
+      this.language = 'EN';
+     return this.enColumns;
+    }
+   }
+  }
+

frontend/src/app/plan-time-bar/plan-time-bar.component.ts

@@ -43,34 +43,24 @@ export class PlanTimeBarComponent implements OnInit {
   public toolbar: any[] = [];
   public timelineSettings: object = {};
   public renderTimeGantt: boolean = false;
-
   public filterObj: any;
-  constructor(public dataService: DataService) {
 
-  }
+  constructor(public dataService: DataService) {}
 
   ngOnInit(): void {
-    //this.renderTimeGantt = false;
-
     this.splitterSettings = this.inputData[0];
     this.projectStartDate = this.inputData[1];
     this.projectEndDate = this.inputData[2];
-    this.labelSettings = {
+    this.labelSettings = {taskLabel: '${taskData.planzeit}'};
-      taskLabel: '${taskData.planzeit}'
-  }
     this.resources = [{resourceId: 1, resourceName: 'Planzeit Summen pro Woche'}];
-    // this.data.push({
+    this.resourceFields = {id: 'resourceId', name: 'resourceName'};
-
+    this.columns = [{ field: 'TaskName', headerText: 'Planzeit pro Woche', width: 250 }];
-    //   TaskID: '' + 0 , TaskName: "Woche " , StartDate: '28.11.2022', EndDate: '30.11.2022'  , planzeit: 0,
+    this.fetchPlanTimes();
-    //   resources: [{resourceId: 1}],  Progress: 0, work: 0, isRes: false
-    // });
-
-  this.fetchPlanTimes();
     this.timelineSettings = {
       bottomTier: {
-          format: 'WW',
+        format: 'WW',
-          unit: 'Week',
+        unit: 'Week',
-          count: 1
+        count: 1
       }
     };
     this.taskSettings = {
@@ -86,15 +76,7 @@ export class PlanTimeBarComponent implements OnInit {
       expandState: 'isExpand',
       child: 'subtasks',
       planzeit: 'planzeit'
-  };
+    };
-  this.resourceFields = {
-      id: 'resourceId',
-      name: 'resourceName',
-  };
-
-  this.columns = [
-      { field: 'TaskName', headerText: 'Planzeit pro Woche', width: 250 }
-    ]
   }
 
   public fetchPlanTimes(filter:any = null){
@@ -115,7 +97,6 @@ export class PlanTimeBarComponent implements OnInit {
           }
         }
       }
-      console.log(this.filterObj);
       this.dataService.fetchPlanTimes( this.filterObj, this.projectStartDate, this.projectEndDate).then((res:any[])=>{
         res.forEach((week)=>{
           this.data.push(
@@ -126,90 +107,22 @@ export class PlanTimeBarComponent implements OnInit {
         });
         this.renderTimeGantt = true;
        });
-
     });
   }
-  getPlantimeFromResources(resources: any[], week: string){
-    let planzeit = 0;
-    for (const res of resources) {
-      if(res.calenderWeek == week){
-        // console.log(res.plantime);
-        // console.log(res.plantime);
-         planzeit+= res.plantime;
-
-      }
-    }
-    return planzeit
-  }
-
-  getWeekNumber(d) {
-    // Copy date so don't modify original
-    d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
-    // Set to nearest Thursday: current date + 4 - current day number
-    // Make Sunday's day number 7
-    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
-    // Get first day of year
-    let yearStart : any;
-    yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
-    // Calculate full weeks to nearest Thursday
-    let weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
-    // Return array of year and week number
-    return '' + d.getUTCFullYear() + weekNo;
-}
-
-getCalendarWeeks(startDate: Date, endDate: Date): { start: Date, end: Date }[] {
-  const weeks: { start: Date, end: Date }[] = [];
-
-  let currentDate = moment(startDate).startOf('isoWeek');
-  let endMoment = moment(endDate).startOf('isoWeek');
-
-  while (currentDate.isSameOrBefore(endMoment)) {
-    let startOfWeek = currentDate.clone().toDate();
-    let endOfWeek = currentDate.clone().add(6, 'days').toDate();
-
-    weeks.push({ start: startOfWeek, end: endOfWeek });
-
-    currentDate = currentDate.add(7, 'days');
-  }
-  return weeks;
-}
 
   public queryTaskbarInfo(args: any) {
-    // console.log(args);
-    //console.log(this.ganttObj);
     args.taskbarBgColor = "transparent";
     args.taskbarBorderColor = "transparent";
     args.taskLabelColor = "black";
     if (args.data.childRecords.length > 0) {
-
+      try {
-      args.taskbarElement.querySelector('.e-gantt-parent-taskbar-inner-div').style.outlineColor = "transparent"
+        args.taskbarElement.querySelector('.e-gantt-parent-taskbar-inner-div').style.outlineColor = "transparent"
-
+      } catch (error) {}
      } else {
-
+      try {
-      args.taskbarElement.querySelector('.e-gantt-child-taskbar-inner-div').style.outlineColor = "transparent"
+        args.taskbarElement.querySelector('.e-gantt-child-taskbar-inner-div').style.outlineColor = "transparent"
-
+      } catch (error) {}
-     }
-  }
-  public movePlanTime(oldDate: Date, newDate: Date, planTime: any){
-    if(planTime && planTime != 0){
-      let oldWeek = this.getWeekNumber(oldDate);
-      let newWeek = this.getWeekNumber(newDate);
-
-      for (let week of this.data) {
-        if(week.TaskID == oldWeek){
-          console.log(week);
-          week.planzeit - planTime;
-        }
-      }
-
-      for (let week of this.data) {
-        if(week.TaskID == newWeek){
-          console.log(week);
-          week.planzeit + planTime;
-        }
-      }
     }
-  console.log(this.data);
+  }
-   }
 }
 

frontend/src/app/state-dialog/state-dialog.component.ts

@@ -6,6 +6,7 @@ import {
   MatSnackBarHorizontalPosition,
   MatSnackBarVerticalPosition,
 } from '@angular/material/snack-bar';
+import { LanguageService } from '../language.service';
 
 @Component({
   selector: 'app-state-dialog',
@@ -38,7 +39,7 @@ export class StateDialogComponent implements OnInit {
    * @param data contains an array of Changes which should be sent to the backend for a status transition
    * @param dataService injects the dataService for data management and backend communication
    */
-  constructor(public dialogRef: MatDialogRef<StateDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any,private dataService: DataService, private _snackBar: MatSnackBar) {
+  constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<StateDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any,private dataService: DataService, private _snackBar: MatSnackBar) {
     //dialogRef.beforeClosed().subscribe(() => dialogRef.close(this.dataToReturn));
     this.progress = 0;
     this.bdiasbled = true;
@@ -47,7 +48,7 @@ export class StateDialogComponent implements OnInit {
     this.possibleStates = [];
 
     this.labels = [];
-    if(this.dataService.selectedLanguage == 'DE'){
+    if(this.languageService.language == 'DE'){
      this.labels.push("Statusübergang");
      this.labels.push("Status auswählen");
      this.labels.push("Abbrechen");
@@ -112,7 +113,7 @@ export class StateDialogComponent implements OnInit {
           if(res.status == 500){
             let msg;
             let action;
-            if(this.dataService.selectedLanguage == 'DE'){
+            if(this.languageService.language == 'DE'){
               msg = 'Statusübergang fehlgeschlagen:';
               action = 'Schließen';
             }else{
@@ -137,7 +138,7 @@ export class StateDialogComponent implements OnInit {
             let msg1;
             let msg2;
             let action;
-            if(this.dataService.selectedLanguage == 'DE'){
+            if(this.languageService.language == 'DE'){
               msg1 = 'Statusübergang';
               msg2 = 'erfolgreich';
               action ='Schließen';

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

@@ -1,6 +1,6 @@
 <div id="topbar">
   <mat-form-field appearance="fill">
-    <mat-label>{{lMap.get('dateRangeLabel')}}</mat-label>
+    <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label>
     <mat-date-range-input  [formGroup]="range" [rangePicker]="picker">
       <input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)">
       <input matEndDate formControlName="end" placeholder="End date" (dateChange)="endDateChanged($event)">
@@ -25,21 +25,21 @@
   </mat-radio-group>
   <!-- <p>Selected range: {{range.value | json}}</p> -->
   <div class="toggleContainer">
-    <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails" (change)="renderDetails()">{{lMap.get('detailButton')}}</mat-slide-toggle>
+    <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails" (change)="renderDetails()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
-    <mat-slide-toggle [disabled]="filters == null" (change)="refreshData()" color="primary" [(ngModel)]="filterEnabled" [checked]="filterEnabled" (change)="applyFilter()">{{lMap.get('filterButton')}}</mat-slide-toggle>
+    <mat-slide-toggle [disabled]="filters == null" (change)="refreshData()" color="primary" [(ngModel)]="filterEnabled" [checked]="filterEnabled" (change)="applyFilter()">{{languageService.lMap.get('filterButton')}}</mat-slide-toggle>
-    <mat-slide-toggle  color="primary" [(ngModel)]="sortEnabled" [checked]="sortEnabled" >{{lMap.get('sortButton')}}</mat-slide-toggle>
+    <mat-slide-toggle  color="primary" [(ngModel)]="sortEnabled" [checked]="sortEnabled" >{{languageService.lMap.get('sortButton')}}</mat-slide-toggle>
     <button mat-icon-button aria-label="clear Filters and Sort" (click)="clearFilter()">
-      {{lMap.get('clearFilter')}}<mat-icon>clear_all</mat-icon>
+      {{languageService.lMap.get('clearFilter')}}<mat-icon>clear_all</mat-icon>
     </button>
   </div>
 
 
 
   <mat-form-field style="width: 5%;">
-    <mat-label>{{lMap.get('language')}}</mat-label>
+    <mat-label>{{languageService.lMap.get('language')}}</mat-label>
-    <mat-select (selectionChange)="languageChange($event)" [(value)]="language">
+    <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
-      <mat-option *ngFor="let language of languages" [value]="language">
+      <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
-        {{language}}
+        {{lang}}
       </mat-option>
     </mat-select>
   </mat-form-field>
@@ -110,25 +110,25 @@
       <table>
         <ng-container>
           <tr>
-            <td style="padding:3px">{{lMap.get('tooltipSummary')}}: {{data.taskData.resources[0].resourceName}}</td>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}: {{data.taskData.resources[0].resourceName}}</td>
           </tr>
           <tr>
-            <td style="padding:3px">{{lMap.get('tooltipState')}}: {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipState')}}: {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
           </tr>
           <tr>
-            <td style="padding:3px">{{lMap.get('tooltipPaketType')}}: {{data.taskData.resources[0].packageName}}</td>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipPaketType')}}: {{data.taskData.resources[0].packageName}}</td>
           </tr>
           <tr>
-            <td style="padding:3px">{{lMap.get('tooltipContract')}}: {{data.taskData.resources[0].vertragName}}</td>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipContract')}}: {{data.taskData.resources[0].vertragName}}</td>
           </tr>
           <tr>
-            <td style="padding:3px">{{lMap.get('tooltipSupportGroupKv')}}: {{data.taskData.resources[0].supportGroup}}</td>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupKv')}}: {{data.taskData.resources[0].supportGroup}}</td>
           </tr>
           <tr>
-            <td style="padding:3px">{{lMap.get('tooltipSupportGroupIh')}}: {{data.taskData.resources[0].coordinatorSg}}</td>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupIh')}}: {{data.taskData.resources[0].coordinatorSg}}</td>
           </tr>
           <tr>
-            <td style="padding:3px">{{lMap.get('tooltipDate')}}: {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}</td>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipDate')}}: {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}</td>
           </tr>
           <!-- <tr>
             <td style="padding:3px"> Date: {{data.TaskID}}</td>
@@ -148,8 +148,8 @@
 
 ></app-plan-time-bar>
 
-<div *ngIf="this.showNoResultsError && this.language =='DE'"><h2>Die Suche lieferte keine Ergebnisse</h2></div>
+<div *ngIf="this.showNoResultsError && this.languageService.language =='DE'"><h2>Die Suche lieferte keine Ergebnisse</h2></div>
-<div *ngIf="this.showNoResultsError && this.language =='EN'"><h2>The search did not return any results</h2></div>
+<div *ngIf="this.showNoResultsError && this.languageService.language =='EN'"><h2>The search did not return any results</h2></div>
   <!-- [filterSettings]="filterSettings" -->
 
     <mat-paginator  #paginator

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

@@ -1,3 +1,4 @@
+import { LanguageService } from './../app/language.service';
 import { PlanTimeBarComponent } from './../app/plan-time-bar/plan-time-bar.component';
 import { FilterDialogComponent } from './../app/filter-dialog/filter-dialog.component';
 import { filteredData, editingData } from './../data';
@@ -67,6 +68,7 @@ export class NttGanttComponent implements OnInit {
   public spin: boolean = true;
   public sliceStart: number;
   public sliceEnd: number;
+
   public filterSettings: object;
   public splitterSettings : object;
   public renderGantt: boolean;
@@ -76,57 +78,19 @@ export class NttGanttComponent implements OnInit {
   public showDetails: boolean = true;
   public panelOpenState:boolean;
   public showNoResultsError: boolean = false;
-  public languages: string[] = ['DE', 'EN'];
+
-  public language: string = 'DE';
   public horizontalPosition: MatSnackBarHorizontalPosition = 'end';
   public verticalPosition: MatSnackBarVerticalPosition = 'bottom';
   public inputForTimeline = [];
   public renderplanTime: boolean = false;
-
+  public planTimeScrollLeft: number = 0;
-  public deMap : 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 attributes: any[] = [
-    //{value: 'vertrag', viewValue: 'WI Vertrag'},
-    {value: 'resourceName', viewValue: 'Name'},
-    {value: 'status', viewValue: 'Status'},
-    //{value: 'implementer', viewValue: 'Implementer'},
-    {value: 'changeid', viewValue: 'Change Id'},
-  ];
-
-  public paketTypeList: any[] = [
-    {name: 'Paket Typ A', checked: false},
-    {name: 'Paket Typ B', checked: false},
-    {name: 'Paket Typ C', checked: false},
-  ];
 
   public stateList: any[] = [];
-
-  public vertragList: any[] = [
-    {name: 'Vertrag A', checked: false},
-    {name: 'Vertrag B', checked: false},
-    {name: 'Vertrag C', checked: false},
-  ];
-
-  public supportGroupList: any[] = [
-    {name: 'SM ITSM', id: 'SG0001' },
-    {name: 'Support Group B', id: 'SG0002' },
-    {name: 'Support Group C', id: 'SG0003' },
-  ];
-  public selectedSupportGroup: any = this.supportGroupList[0];
-
   public filterStartDate: Date;
   public filterEndDate: Date;
-
-
-  public selectedAttribute: string;
   public showFilters: boolean = false;
-
-  //  ["=",">","<","beinhaltet"];
-  public selectedFilter: string;
-  public showCriterea: boolean = false;
-  public criteria: string = '';
   public filterEnabled: boolean = false;
+  private oldFilters:{};
   public filters: any = null;
   public sortEnabled: boolean = false;
   public sortedData: any[] = [];
@@ -147,125 +111,88 @@ export class NttGanttComponent implements OnInit {
    * @param dataService injects the dataService for data management and backend communication
    * @param matDialog injects the matDialog
    */
-  constructor(public dataService: DataService, public matDialog : MatDialog, private _snackBar: MatSnackBar ) {
+  constructor(public languageService: LanguageService,public dataService: DataService, public matDialog : MatDialog, private _snackBar: MatSnackBar ) {
-    this.deMap.set('detailButton', 'Details anzeigen');
+    // this.deMap.set('detailButton', 'Details anzeigen');
-    this.enMap.set('detailButton', 'Show Details');
+    // this.enMap.set('detailButton', 'Show Details');
-    this.deMap.set('filterButton', 'Filter anwenden');
+    // this.deMap.set('filterButton', 'Filter anwenden');
-    this.enMap.set('filterButton', 'Apply Filters');
+    // this.enMap.set('filterButton', 'Apply Filters');
-    this.deMap.set('sortButton', 'Sortierung anwenden');
+    // this.deMap.set('sortButton', 'Sortierung anwenden');
-    this.enMap.set('sortButton', 'Apply Sort');
+    // this.enMap.set('sortButton', 'Apply Sort');
-    this.deMap.set('field1', 'Kurzbeschreibung');
+    // this.deMap.set('field1', 'Kurzbeschreibung');
-    this.enMap.set('field1', 'Summary');
+    // this.enMap.set('field1', 'Summary');
-    this.deMap.set('dateRangeLabel', 'Datumsbereich auswählen');
+    // this.deMap.set('dateRangeLabel', 'Datumsbereich auswählen');
-    this.enMap.set('dateRangeLabel', 'Select Date Range');
+    // this.enMap.set('dateRangeLabel', 'Select Date Range');
-    this.deMap.set('language', 'Sprache');
+    // this.deMap.set('language', 'Sprache');
-    this.enMap.set('language', 'Language');
+    // this.enMap.set('language', 'Language');
-    this.deMap.set('clearFilter', 'Filter Löschen');
+    // this.deMap.set('clearFilter', 'Filter Löschen');
-    this.enMap.set('clearFilter', 'Clear Filter');
+    // this.enMap.set('clearFilter', 'Clear Filter');
 
-    this.deMap.set('tooltipSummary', 'Name');
+    // this.deMap.set('tooltipSummary', 'Name');
-    this.enMap.set('tooltipSummary', 'Name');
+    // this.enMap.set('tooltipSummary', 'Name');
-    this.deMap.set('tooltipState', 'Status');
+    // this.deMap.set('tooltipState', 'Status');
-    this.enMap.set('tooltipState', 'State');
+    // this.enMap.set('tooltipState', 'State');
-    this.deMap.set('tooltipPaketType', 'Paket Typ');
+    // this.deMap.set('tooltipPaketType', 'Paket Typ');
-    this.enMap.set('tooltipPaketType', 'Package Type');
+    // this.enMap.set('tooltipPaketType', 'Package Type');
-    this.deMap.set('tooltipContract', 'Vertrag / Provider Cluster');
+    // this.deMap.set('tooltipContract', 'Vertrag / Provider Cluster');
-    this.enMap.set('tooltipContract', 'Contract / Provider Cluster');
+    // this.enMap.set('tooltipContract', 'Contract / Provider Cluster');
-    this.deMap.set('tooltipSupportGroupKv', 'KV SG');
+    // this.deMap.set('tooltipSupportGroupKv', 'KV SG');
-    this.enMap.set('tooltipSupportGroupKv', 'KV SG');
+    // this.enMap.set('tooltipSupportGroupKv', 'KV SG');
-    this.deMap.set('tooltipSupportGroupIh', 'IH SG');
+    // this.deMap.set('tooltipSupportGroupIh', 'IH SG');
-    this.enMap.set('tooltipSupportGroupIh', 'IH SG');
+    // this.enMap.set('tooltipSupportGroupIh', 'IH SG');
-    this.deMap.set('tooltipDate', 'Geplantes Start Datum');
+    // this.deMap.set('tooltipDate', 'Geplantes Start Datum');
-    this.enMap.set('tooltipDate', 'Planned Start Date');
+    // this.enMap.set('tooltipDate', 'Planned Start Date');
 
-    this.deMap.set('permit', 'Zur Genehmigung');
+    // this.deMap.set('permit', 'Zur Genehmigung');
-    this.enMap.set('permit', 'Permit');
+    // this.enMap.set('permit', 'Permit');
-    this.deMap.set('genehmigen', 'Genehmigen');
+    // this.deMap.set('genehmigen', 'Genehmigen');
-    this.enMap.set('genehmigen', 'Approve');
+    // this.enMap.set('genehmigen', 'Approve');
-    this.deMap.set('ablehnen', 'Ablehnen');
+    // this.deMap.set('ablehnen', 'Ablehnen');
-    this.enMap.set('ablehnen', 'Reject');
+    // this.enMap.set('ablehnen', 'Reject');
-    this.deMap.set('stornieren', 'Stornieren');
+    // this.deMap.set('stornieren', 'Stornieren');
-    this.enMap.set('stornieren', 'Cancel');
+    // this.enMap.set('stornieren', 'Cancel');
-    this.deMap.set('implementer', 'Implementer Eintragen');
+    // this.deMap.set('implementer', 'Implementer Eintragen');
-    this.enMap.set('implementer', 'Enter Implementer');
+    // this.enMap.set('implementer', 'Enter Implementer');
-    this.deMap.set('stateChange', 'Statusübergang');
+    // this.deMap.set('stateChange', 'Statusübergang');
-    this.enMap.set('stateChange', 'State Transition');
+    // this.enMap.set('stateChange', 'State Transition');
 
-    if(navigator.language=='de-DE'){
+    // if(navigator.language=='de-DE'){
-      this.language = 'DE';
+    //   this.language = 'DE';
-    }else{
+    // }else{
-      this.language = 'EN';
+    //   this.language = 'EN';
-    }
+    // }
 
     this.initLanguge(true);
   }
 
   initLanguge(initial: boolean = false){
 
-    if(this.language == 'DE'){
+    if(this.languageService.language == 'DE'){
-      this.dataService.selectedLanguage = 'DE';
-      this.lMap = this.deMap;
       this.scalars = ['Woche-Tag', 'Monat-Woche', 'Jahr-Monat'];
       this.selectedScalar = 'Monat-Woche';
-      this.columns = [
-        { field: 'TaskName', headerText: 'Kurzbeschreibung', 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'}}
-      ]
     }
     else{
-      this.dataService.selectedLanguage = 'EN';
-      this.lMap = this.enMap;
       this.scalars = ['Week-Day', 'Month-Week', 'Year-Month'];
       this.selectedScalar = 'Month-Week';
-      this.columns = [
+
-        { field: 'TaskName', headerText: 'Summary', 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'}}
-      ]
     }
+    this.columns = this.languageService.getColumns();
     if(!initial){
       this.refreshData();
     }
-
   }
 
 
-public logg(args){
-  console.log(args);
-}
-
-
   /**
    * The function ngOnInit sets values which are required for rendering the gantt Chart. Furthermore it trims the resources (Changes Array) and sets the paginator to the first page.
    */
   public ngOnInit(): void {
     var WebFont = require('webfontloader');
-    WebFont.load({
+    WebFont.load({google: {families: ['Material Icons',],},});
-       google: {
-          families: [
-             'Material Icons',
-          ],
-       },
-    });
     this.renderGantt = false;
     this.firstLoad = true;
     this.sliceStart = 0;
     this.sliceEnd = 20;
-    // this.dataService.fetchChanges().then((res: any[])=>{
+
-    //   console.log(res);
-    //     this.allResources = res;
-    //     this.mapTasksToResources(0,20);
-    //     this.range = new FormGroup({
-    //       start: new FormControl<Date | null>(new Date('12/01/'+(new Date().getFullYear()-1))),
-    //       end: new FormControl<Date | null>(new Date('01/31/'+(new Date().getFullYear()+1))),
-    //     });
-    //     this.renderGantt = true;
-    // });
     this.dataService.fetchUserSupportGroup().then((res: any)=>{
       this.userSupportGroup = res.name;
       this.refreshData();
@@ -279,16 +206,6 @@ public logg(args){
       });
     });
 
-
-
-
-    this.filterSettings = {
-      ignoreAccent: true
-      // columns: [
-      //   { field: 'vertrag', matchCase: false, operator: 'startswith', predicate: 'and', value: 'WV' },
-      // ]
-    };
-
     this.taskSettings = {
       id: 'TaskID',
       name: 'TaskName',
@@ -304,6 +221,7 @@ public logg(args){
       isFixed: 'isFixed',
       vertrag: 'vertrag'
     };
+
     this.resourceFields = {
       id: 'resourceId',
       name: 'resourceName',
@@ -316,41 +234,18 @@ public logg(args){
       vertragName: 'vertragName',
       supportGroup: 'supportGroup',
       supportGroupId: 'supportGroupId',
-      implementerEdit: 'implementerEdit'
+      implementerEdit: 'implementerEdit',
-    };
+      plantime : 'plantime'
-    this.editSettings = {
-      allowAdding: true,
-      allowEditing: true,
-      allowDeleting: true,
-      allowTaskbarEditing: true,
-      showDeleteConfirmDialog: true
-    };
-
-    this.selectionSettings = {
-      mode: 'Row',
-      type: 'Multiple',
     };
 
     this.columns = [
-         { field: 'TaskName', headerText: 'Kurzbeschreibung', width: 250 },
+      { field: 'TaskName', headerText: 'Kurzbeschreibung', width: 250 },
-         { field: 'stateName', headerText: 'Status', width: 250},
+      { field: 'stateName', headerText: 'Status', width: 250},
-         { field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 },
+      { field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 },
-         { field: 'supportGroup', headerText: 'Gewählte Support Gruppe' },
+      { 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: 'approvalStatus', headerText: 'Active Approval', width: 100 },
+      { field: 'plantime', headerText: 'Planzeit in H', width: 100 },
-        // { field: 'supportGroupId' },
+    ];
-        //{ field: 'Duration' },
-        //{ field: 'TaskID', headerText: 'Taks ID', width: 250 },
-         //{ field: 'work', headerText: 'Work' },
-         //{ field: 'Progress' },
-         //{ field: 'resourceGroup', headerText: 'Group' },
-     ];
-
-    this.toolbar = ['Cancel'];
-    this.labelSettings = {
-      rightLabel: 'resources',
-      taskLabel: 'TaskName'
-     };
 
     this.timelineSettings= {
       topTier: {
@@ -363,28 +258,20 @@ public logg(args){
           count: 1
       }
     };
-    this.tooltipSettings = {
+    this.editSettings = {allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true, showDeleteConfirmDialog: true};
-      showTooltip: true,
+    this.filterSettings = {ignoreAccent: true};
-      }
+    this.selectionSettings = {mode: 'Row',type: 'Multiple'};
-
+    this.toolbar = ['Cancel'];
-     this.projectStartDate = this.range.controls.start.value;
+    this.labelSettings = {rightLabel: 'resources',taskLabel: 'TaskName'};
-     this.projectEndDate = this.range.controls.end.value;
+    this.tooltipSettings = {showTooltip: true}
-
+    this.projectStartDate = this.range.controls.start.value;
-     this.splitterSettings = {
+    this.projectEndDate = this.range.controls.end.value;
-      columnIndex:3
+    this.splitterSettings = {position: 647+'px'};
-    };
+    this.inputForTimeline = [this.splitterSettings, this.projectStartDate, this.projectEndDate];
-
-    this.splitterSettings = {
-      position: 647+'px'
-    };
-
-     this.inputForTimeline = [this.splitterSettings, this.projectStartDate, this.projectEndDate];
-
-
   }
 
   languageChange(args: any){
-    console.log(this.language);
+    this.languageService.languageChange(args.value),
     this.initLanguge();
   }
 
@@ -399,7 +286,6 @@ public logg(args){
   }
 
   public renderDetails(){
-    // console.log(this.showDetails);
     if(this.showDetails == false){
       this.refreshData();
     }else{
@@ -413,8 +299,8 @@ public logg(args){
         '#'+'ganttDefaultSum'+ 'GanttChart > div.e-chart-root-container > div'
       );
       elem.scrollLeft = args.scrollLeft;
+      this.planTimeScrollLeft = args.scrollLeft;
     }
-
   }
 
   public changeScalar(){
@@ -430,6 +316,7 @@ public logg(args){
             count: 1
         }
       };
+      this.renderplanTime = false;
     }
 
     if(this.selectedScalar == this.scalars[1]){
@@ -444,6 +331,7 @@ public logg(args){
             count: 1
         }
       };
+      this.renderplanTime = true;
     }
 
     if(this.selectedScalar == this.scalars[2]){
@@ -458,6 +346,7 @@ public logg(args){
             count: 1
         }
       };
+      this.renderplanTime = false;
     }
 
   }
@@ -475,8 +364,12 @@ public logg(args){
         return resource.resourceId == args.data.taskData.resources[0].resourceId;
       });
       this.dataService.updateDatePerChange(found);
-      //this.renderplanTime = false;
       this.plantimeComponent.fetchPlanTimes();
+
+        let elem = document.querySelector(
+          '#'+'ganttDefaultSum'+ 'GanttChart > div.e-chart-root-container > div'
+        );
+        elem.scrollLeft = this.planTimeScrollLeft;
     }
   }
 
@@ -725,22 +618,22 @@ public logg(args){
     if(allStates){
       this.toolbar = [];
       if(allTransition){
-        this.toolbar.push({text:this.lMap.get("stateChange"), id: "6"});
+        this.toolbar.push({text:this.languageService.lMap.get("stateChange"), id: "6"});
       }
       if(allPermit){
-        this.toolbar.push({text: this.lMap.get("permit"), id: "5"});
+        this.toolbar.push({text: this.languageService.lMap.get("permit"), id: "5"});
       }
       if(allApprove){
-        this.toolbar.push({text: this.lMap.get("genehmigen"), id: "7"});
+        this.toolbar.push({text: this.languageService.lMap.get("genehmigen"), id: "7"});
       }
       if(allReject){
-        this.toolbar.push({text: this.lMap.get("ablehnen"), id: "8"});
+        this.toolbar.push({text: this.languageService.lMap.get("ablehnen"), id: "8"});
       }
       if(allCancel){
-        this.toolbar.push({text: this.lMap.get("stornieren"), id: "11"});
+        this.toolbar.push({text: this.languageService.lMap.get("stornieren"), id: "11"});
       }
       if(allImplementer){
-        this.toolbar.push({text: this.lMap.get("implementer"), id: "10"});
+        this.toolbar.push({text: this.languageService.lMap.get("implementer"), id: "10"});
       }
 
     }else{
@@ -833,22 +726,22 @@ public logg(args){
     if(allStates){
       this.toolbar = [];
       if(allTransition){
-        this.toolbar.push({text:this.lMap.get("stateChange"), id: "6"});
+        this.toolbar.push({text:this.languageService.lMap.get("stateChange"), id: "6"});
       }
       if(allPermit){
-        this.toolbar.push({text: this.lMap.get("permit"), id: "5"});
+        this.toolbar.push({text: this.languageService.lMap.get("permit"), id: "5"});
       }
       if(allApprove){
-        this.toolbar.push({text: this.lMap.get("genehmigen"), id: "7"});
+        this.toolbar.push({text: this.languageService.lMap.get("genehmigen"), id: "7"});
       }
       if(allReject){
-        this.toolbar.push({text: this.lMap.get("ablehnen"), id: "8"});
+        this.toolbar.push({text: this.languageService.lMap.get("ablehnen"), id: "8"});
       }
       if(allCancel){
-        this.toolbar.push({text: this.lMap.get("stornieren"), id: "11"});
+        this.toolbar.push({text: this.languageService.lMap.get("stornieren"), id: "11"});
       }
       if(allImplementer){
-        this.toolbar.push({text: this.lMap.get("implementer"), id: "10"});
+        this.toolbar.push({text: this.languageService.lMap.get("implementer"), id: "10"});
       }
 
     }else{
@@ -1076,7 +969,7 @@ public logg(args){
     }
     return request;
   }
-private oldFilters:{};
+
   applyFilter(){
     if(this.filterEnabled){
       this.oldFilters = this.filters
@@ -1099,7 +992,6 @@ private oldFilters:{};
         width: '80%'
       }).afterClosed().subscribe((res)=>{
         if(res){
-          // console.log(res);
           this.filters = res;
           this.filterEnabled = true;
           this.refreshData();
@@ -1109,94 +1001,13 @@ private oldFilters:{};
 
   }
 
-
-
-  public buildFilterObject(){
-    this.filterEnabled = true;
-    let filter = []
-    let critPaketTypeFilter = [];
-    let critStateTypeFilter = [];
-    let critVertragTypeFilter = [];
-    let critSupportGroupfilter = {};
-    let critDateFilter = {};
-    let critTextFilter = {};
-
-
-    for (const paketType of this.paketTypeList) {
-      if(paketType.checked == true){
-        critPaketTypeFilter.push(paketType.name);
-      }
-    }
-
-    if(critPaketTypeFilter.length > 0){
-      filter.push({
-        "column": "paketType",
-         "filter": "equals",
-         "criteria": critPaketTypeFilter
-        });
-    }
-
-    for (const state of this.stateList) {
-      if(state.checked == true){
-        critStateTypeFilter.push(state.stateNameEN);
-      }
-    }
-
-    if(critStateTypeFilter.length > 0){
-      filter.push({
-        "column": "State",
-         "filter": "equals",
-         "criteria": critStateTypeFilter
-        });
-    }
-
-    for (const vertrag of this.vertragList) {
-      if(vertrag.checked == true){
-        critVertragTypeFilter.push(vertrag.name);
-      }
-    }
-
-    if(critVertragTypeFilter.length > 0){
-      filter.push({
-        "column": "Contract",
-        "filter": "equals",
-        "criteria": critVertragTypeFilter
-        });
-    }
-
-//     filter.push({
-//       "column": "supportGroup",
-//       "filter": "equals",
-//       "criteria": [this.selectedSupportGroup.id]
-//       });
-
-    if(this.filterStartDate != null && this.filterEndDate != null){
-      filter.push({
-        "column": "D2",
-        "filter": "dateRange",
-        "criteria": [this.filterStartDate, this.filterEndDate]
-        });
-    }
-
-    if(this.criteria != null && this.criteria != ""){
-      filter.push({
-        "column": "ResourceName",
-        "filter": "contains",
-        "criteria": [this.criteria]
-        });
-    }
-    this.filters = filter;
-    this.refreshData();
-  }
   public onResizing(args){
-
     let width ='' + args.paneSize[0]+'px';
     this.splitterSettings = {
       position: width
     };
   }
   public actionBegin(args: any) {
-     //console.log(args); //custom Action
      if(args.dialogModel){
       args.cancel = true;
       if(args.rowData.taskData.resources[0].state == 0){