From ed314513c1c648ea88643e426fb78fa148ed5c58 Mon Sep 17 00:00:00 2001 From: manueltauber Date: Mon, 26 Jun 2023 16:02:48 +0200 Subject: [PATCH] languageComponen/implemented --- frontend/src/app/data.service.ts | 11 +- .../filter-dialog/filter-dialog.component.ts | 9 +- .../implementer-dialog.component.ts | 9 +- frontend/src/app/language.service.spec.ts | 16 + frontend/src/app/language.service.ts | 103 +++++ .../plan-time-bar/plan-time-bar.component.ts | 119 +----- .../state-dialog/state-dialog.component.ts | 9 +- .../src/ntt-gantt/ntt-gantt.component.html | 36 +- frontend/src/ntt-gantt/ntt-gantt.component.ts | 387 +++++------------- 9 files changed, 273 insertions(+), 426 deletions(-) create mode 100644 frontend/src/app/language.service.spec.ts create mode 100644 frontend/src/app/language.service.ts diff --git a/frontend/src/app/data.service.ts b/frontend/src/app/data.service.ts index bc5268a..0891346 100644 --- a/frontend/src/app/data.service.ts +++ b/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; diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.ts b/frontend/src/app/filter-dialog/filter-dialog.component.ts index c48254e..ad8ccc6 100644 --- a/frontend/src/app/filter-dialog/filter-dialog.component.ts +++ b/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, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) { + constructor(public languageService: LanguageService, public dialogRef: MatDialogRef, @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;})){ diff --git a/frontend/src/app/implementer-dialog/implementer-dialog.component.ts b/frontend/src/app/implementer-dialog/implementer-dialog.component.ts index f22a4f8..0bba028 100644 --- a/frontend/src/app/implementer-dialog/implementer-dialog.component.ts +++ b/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, @Inject(MAT_DIALOG_DATA) public data: any,private dataService: DataService, private _snackBar: MatSnackBar) { + constructor(public languageService: LanguageService, private dialogRef: MatDialogRef, @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{ diff --git a/frontend/src/app/language.service.spec.ts b/frontend/src/app/language.service.spec.ts new file mode 100644 index 0000000..299455e --- /dev/null +++ b/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(); + }); +}); diff --git a/frontend/src/app/language.service.ts b/frontend/src/app/language.service.ts new file mode 100644 index 0000000..eb75048 --- /dev/null +++ b/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 = new Map(); + public enMap : Map = new Map(); + public lMap : Map = new Map(); + 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; + } + } + } + diff --git a/frontend/src/app/plan-time-bar/plan-time-bar.component.ts b/frontend/src/app/plan-time-bar/plan-time-bar.component.ts index b045c9c..3976cbe 100644 --- a/frontend/src/app/plan-time-bar/plan-time-bar.component.ts +++ b/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 = { - taskLabel: '${taskData.planzeit}' - } + this.labelSettings = {taskLabel: '${taskData.planzeit}'}; this.resources = [{resourceId: 1, resourceName: 'Planzeit Summen pro Woche'}]; - // this.data.push({ - - // TaskID: '' + 0 , TaskName: "Woche " , StartDate: '28.11.2022', EndDate: '30.11.2022' , planzeit: 0, - // resources: [{resourceId: 1}], Progress: 0, work: 0, isRes: false - // }); - - this.fetchPlanTimes(); + this.resourceFields = {id: 'resourceId', name: 'resourceName'}; + this.columns = [{ field: 'TaskName', headerText: 'Planzeit pro Woche', width: 250 }]; + this.fetchPlanTimes(); this.timelineSettings = { bottomTier: { - format: 'WW', - unit: 'Week', - count: 1 + format: 'WW', + unit: 'Week', + 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) { - - args.taskbarElement.querySelector('.e-gantt-parent-taskbar-inner-div').style.outlineColor = "transparent" - + try { + args.taskbarElement.querySelector('.e-gantt-parent-taskbar-inner-div').style.outlineColor = "transparent" + } catch (error) {} } else { - - args.taskbarElement.querySelector('.e-gantt-child-taskbar-inner-div').style.outlineColor = "transparent" - - } - } - 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; - } - } + try { + args.taskbarElement.querySelector('.e-gantt-child-taskbar-inner-div').style.outlineColor = "transparent" + } catch (error) {} } - console.log(this.data); - } + } } diff --git a/frontend/src/app/state-dialog/state-dialog.component.ts b/frontend/src/app/state-dialog/state-dialog.component.ts index 370cb96..929cd15 100644 --- a/frontend/src/app/state-dialog/state-dialog.component.ts +++ b/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, @Inject(MAT_DIALOG_DATA) public data: any,private dataService: DataService, private _snackBar: MatSnackBar) { + constructor(public languageService: LanguageService, public dialogRef: MatDialogRef, @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'; diff --git a/frontend/src/ntt-gantt/ntt-gantt.component.html b/frontend/src/ntt-gantt/ntt-gantt.component.html index de54c6b..58a36cc 100644 --- a/frontend/src/ntt-gantt/ntt-gantt.component.html +++ b/frontend/src/ntt-gantt/ntt-gantt.component.html @@ -1,6 +1,6 @@
- {{lMap.get('dateRangeLabel')}} + {{languageService.lMap.get('dateRangeLabel')}} @@ -25,21 +25,21 @@
- {{lMap.get('detailButton')}} - {{lMap.get('filterButton')}} - {{lMap.get('sortButton')}} + {{languageService.lMap.get('detailButton')}} + {{languageService.lMap.get('filterButton')}} + {{languageService.lMap.get('sortButton')}}
- {{lMap.get('language')}} - - - {{language}} + {{languageService.lMap.get('language')}} + + + {{lang}} @@ -110,25 +110,25 @@ - + - + - + - + - + - + - + = new Map() - public enMap : Map = new Map() - public lMap : Map = new Map() - 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 planTimeScrollLeft: number = 0; 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 ) { - 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'); + constructor(public languageService: LanguageService,public dataService: DataService, public matDialog : MatDialog, private _snackBar: MatSnackBar ) { + // 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('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.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'); - if(navigator.language=='de-DE'){ - this.language = 'DE'; - }else{ - this.language = 'EN'; - } + // if(navigator.language=='de-DE'){ + // this.language = 'DE'; + // }else{ + // this.language = 'EN'; + // } this.initLanguge(true); } initLanguge(initial: boolean = false){ - if(this.language == 'DE'){ - this.dataService.selectedLanguage = 'DE'; - this.lMap = this.deMap; + if(this.languageService.language == 'DE'){ 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({ - google: { - families: [ - 'Material Icons', - ], - }, - }); + WebFont.load({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(new Date('12/01/'+(new Date().getFullYear()-1))), - // end: new FormControl(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' - }; - this.editSettings = { - allowAdding: true, - allowEditing: true, - allowDeleting: true, - allowTaskbarEditing: true, - showDeleteConfirmDialog: true - }; - - this.selectionSettings = { - mode: 'Row', - type: 'Multiple', + implementerEdit: 'implementerEdit', + plantime : 'plantime' }; 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'}}, - // { field: 'approvalStatus', headerText: 'Active Approval', 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' - }; + { 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.timelineSettings= { topTier: { @@ -363,28 +258,20 @@ public logg(args){ count: 1 } }; - this.tooltipSettings = { - showTooltip: true, - } - - this.projectStartDate = this.range.controls.start.value; - this.projectEndDate = this.range.controls.end.value; - - this.splitterSettings = { - columnIndex:3 - }; - - this.splitterSettings = { - position: 647+'px' - }; - - this.inputForTimeline = [this.splitterSettings, this.projectStartDate, this.projectEndDate]; - - + this.editSettings = {allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true, showDeleteConfirmDialog: true}; + this.filterSettings = {ignoreAccent: true}; + this.selectionSettings = {mode: 'Row',type: 'Multiple'}; + this.toolbar = ['Cancel']; + this.labelSettings = {rightLabel: 'resources',taskLabel: 'TaskName'}; + this.tooltipSettings = {showTooltip: true} + this.projectStartDate = this.range.controls.start.value; + this.projectEndDate = this.range.controls.end.value; + 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){
{{lMap.get('tooltipSummary')}}: {{data.taskData.resources[0].resourceName}}{{languageService.lMap.get('tooltipSummary')}}: {{data.taskData.resources[0].resourceName}}
{{lMap.get('tooltipState')}}: {{dataService.getStateNameById(data.taskData.resources[0].state)}}{{languageService.lMap.get('tooltipState')}}: {{dataService.getStateNameById(data.taskData.resources[0].state)}}
{{lMap.get('tooltipPaketType')}}: {{data.taskData.resources[0].packageName}}{{languageService.lMap.get('tooltipPaketType')}}: {{data.taskData.resources[0].packageName}}
{{lMap.get('tooltipContract')}}: {{data.taskData.resources[0].vertragName}}{{languageService.lMap.get('tooltipContract')}}: {{data.taskData.resources[0].vertragName}}
{{lMap.get('tooltipSupportGroupKv')}}: {{data.taskData.resources[0].supportGroup}}{{languageService.lMap.get('tooltipSupportGroupKv')}}: {{data.taskData.resources[0].supportGroup}}
{{lMap.get('tooltipSupportGroupIh')}}: {{data.taskData.resources[0].coordinatorSg}}{{languageService.lMap.get('tooltipSupportGroupIh')}}: {{data.taskData.resources[0].coordinatorSg}}
{{lMap.get('tooltipDate')}}: {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}{{languageService.lMap.get('tooltipDate')}}: {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}