231 lines
9.4 KiB
HTML
231 lines
9.4 KiB
HTML
<div id="topbar">
|
|
|
|
<mat-form-field class="datePicker" appearance="fill" >
|
|
<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)">
|
|
</mat-date-range-input>
|
|
<!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
|
|
<mat-date-range-picker #picker></mat-date-range-picker>
|
|
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
|
|
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
|
|
</mat-form-field>
|
|
<button mat-basic-button class="dateButton" color="" style="" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
|
|
|
|
<mat-form-field style="width: 90px; height: 59px;" appearance="fill">
|
|
<mat-label>{{languageService.lMap.get('language')}}</mat-label>
|
|
<mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
|
|
<mat-option *ngFor="let lang of languageService.languages" [value]="lang">
|
|
{{lang}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<div class="scalarContainer">
|
|
<mat-button-toggle-group style="margin-top: 5px;" (change)="changeScalar()" name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
|
|
<mat-button-toggle value="bold"*ngFor="let scalar of scalars" [value]="scalar">
|
|
{{scalar}}
|
|
</mat-button-toggle>
|
|
</mat-button-toggle-group>
|
|
</div>
|
|
|
|
<!-- <mat-form-field appearance="fill" >
|
|
<mat-label>Preset</mat-label>
|
|
<mat-select [(value)]="selectedPreset">
|
|
<mat-option *ngFor="let preset of presets" [value]="preset">
|
|
{{preset.name}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field> -->
|
|
|
|
<mat-form-field appearance="fill" style="width: 300px;">
|
|
<mat-label>Preset</mat-label>
|
|
<mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
|
|
<mat-optgroup *ngFor="let group of presetGroups" [label]="group.name"
|
|
[disabled]="group.disabled">
|
|
<mat-option *ngFor="let preset of group.presets" [value]="preset">
|
|
{{preset.name}}
|
|
<!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
|
|
<button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
|
|
</mat-option>
|
|
</mat-optgroup>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="filterContainer">
|
|
<button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
|
|
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
|
|
</button>
|
|
<button *ngIf="showSaveButton" mat-raised-button (click)="updatePreset()">Speichern</button>
|
|
<button *ngIf="showSaveUnderButton" mat-raised-button >Speichern unter</button>
|
|
<button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" class="clearFilter" (click)="clearFilter()">
|
|
{{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
|
|
</button>
|
|
|
|
<mat-slide-toggle class="showDetails" color="primary" [(ngModel)]="showDetails" [checked]="showDetails" (change)="refreshData()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
|
|
</div>
|
|
|
|
|
|
<div
|
|
*ngIf="!this.showNoResultsError" id="showSpin" data-bind="visible: spin"
|
|
style=" position: absolute; top: auto; left: 45%;">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" rel="stylesheet"/>
|
|
</div>
|
|
|
|
|
|
<!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
|
|
<ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault"
|
|
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}"
|
|
[dataSource]="data"
|
|
[allowSorting] = 'true'
|
|
[resources]="resources"
|
|
[taskFields]="taskSettings"
|
|
[resourceFields]="resourceFields"
|
|
[editSettings]="editSettings"
|
|
[columns]="columns"
|
|
[toolbar]="toolbar"
|
|
[labelSettings]="labelSettings"
|
|
[allowSelection]='true'
|
|
[allowResizing] = 'true'
|
|
[highlightWeekends] = 'true'
|
|
[treeColumnIndex]="1"
|
|
[projectStartDate]="this.projectStartDate"
|
|
[projectEndDate]="this.projectEndDate"
|
|
viewType="ResourceView"
|
|
[showOverAllocation] = 'true'
|
|
[enableMultiTaskbar]= 'true'
|
|
[collapseAllParentTasks]= 'true'
|
|
[enableVirtualization]="false"
|
|
[allowSorting]= "true"
|
|
[allowFiltering]="false"
|
|
[timelineSettings]="timelineSettings"
|
|
[selectionSettings]="selectionSettings"
|
|
[tooltipSettings]="tooltipSettings"
|
|
[splitterSettings] = "splitterSettings"
|
|
(actionComplete)="actionComplete($event)"
|
|
gridLines="Both"
|
|
(splitterResizing)="splitterResizing($event)"
|
|
(actionBegin)="actionBegin($event)"
|
|
(taskbarEditing)="taskbarEditing($event)"
|
|
(taskbarEdited)="taskbarEdited($event)"
|
|
(toolbarClick)="toolbarBtnClicked($event)"
|
|
(rowSelected) = "rowSelected($event)"
|
|
(rowDeselected) = "rowDeselected($event)"
|
|
(created)="created($event)"
|
|
(dataBound)="dataBound($event)"
|
|
(load)="load($event)"
|
|
(queryTaskbarInfo) = "queryTaskbarInfo($event)"
|
|
(expanding)="onExpand($event)"
|
|
|
|
>
|
|
<!-- <e-columns>
|
|
<e-column headerText="Kurzbeschreibung" field="TaskName" width="250">
|
|
<ng-template #headerTemplate>
|
|
Kurzbeschreibung
|
|
<div class="square"><mat-icon>arrow_downward</mat-icon></div>
|
|
</ng-template>
|
|
</e-column>
|
|
|
|
<e-column headerText="Kurzbeschreibung" field="stateName" width="250">
|
|
<ng-template #headerTemplate>
|
|
<div class="square"><mat-icon>arrow_downward</mat-icon></div>
|
|
</ng-template>
|
|
</e-column>
|
|
|
|
<e-column headerText="Kurzbeschreibung" field="vertragName" width="250">
|
|
<ng-template #headerTemplate>
|
|
<div class="square"><mat-icon>arrow_downward</mat-icon></div>
|
|
</ng-template>
|
|
</e-column>
|
|
|
|
<e-column headerText="Kurzbeschreibung" field="supportGroup" width="250">
|
|
<ng-template #headerTemplate>
|
|
<div class="square"><mat-icon>arrow_downward</mat-icon></div>
|
|
</ng-template>
|
|
</e-column>
|
|
|
|
<e-column headerText="Kurzbeschreibung" field="StartDate" width="250">
|
|
<ng-template #headerTemplate>
|
|
<div class="square"><mat-icon>arrow_downward</mat-icon></div>
|
|
</ng-template>
|
|
</e-column>
|
|
|
|
<e-column headerText="Kurzbeschreibung" field="plantime" width="250">
|
|
<ng-template #headerTemplate>
|
|
<div class="square"><mat-icon>arrow_downward</mat-icon></div>
|
|
</ng-template>
|
|
</e-column>
|
|
|
|
<e-column headerText="Kurzbeschreibung" field="changeNr" width="250">
|
|
<ng-template #headerTemplate>
|
|
<div class="square"><mat-icon>arrow_downward</mat-icon></div>
|
|
</ng-template>
|
|
</e-column>
|
|
</e-columns> -->
|
|
|
|
<ng-template #tooltipSettingsTaskbar let-data>
|
|
<div>
|
|
<table>
|
|
<ng-container>
|
|
<tr>
|
|
<td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}: {{data.taskData.resources[0].resourceName}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:3px">{{languageService.lMap.get('tooltipState')}}: {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:3px">{{languageService.lMap.get('tooltipPaketType')}}: {{data.taskData.resources[0].packageName}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:3px">{{languageService.lMap.get('tooltipContract')}}: {{data.taskData.resources[0].vertragName}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupKv')}}: {{data.taskData.resources[0].supportGroup}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupIh')}}: {{data.taskData.resources[0].coordinatorSg}}</td>
|
|
</tr>
|
|
<tr>
|
|
<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>
|
|
</tr> -->
|
|
|
|
</ng-container>
|
|
</table>
|
|
</div>
|
|
</ng-template>
|
|
</ejs-gantt>
|
|
|
|
<app-plan-time-bar #plantimeComponent *ngIf="renderplanTime"
|
|
[inputData]="inputForTimeline"
|
|
[splitterSettings]="splitterSettings"
|
|
[parentResources]="allResources"
|
|
[filters]="filters"
|
|
|
|
></app-plan-time-bar>
|
|
|
|
<div *ngIf="this.showNoResultsError && this.languageService.language =='DE'"><h2>Die Suche lieferte keine Ergebnisse</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
|
|
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}"
|
|
class="demo-paginator"
|
|
(page)="handlePageEvent($event)"
|
|
[length]="this.dataService.getTotalSize()"
|
|
[pageSize]="20"
|
|
[disabled]="false"
|
|
[showFirstLastButtons]="true"
|
|
[pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]"
|
|
[hidePageSize]="false"
|
|
[pageIndex]="0"
|
|
aria-label="Seite auswählen">
|
|
</mat-paginator>
|
|
|
|
|
|
|
|
|