262 lines
13 KiB
HTML
262 lines
13 KiB
HTML
<div class="head" style="">
|
|
<div style="display: flex; align-items: center; gap: 15px; height: 100%;">
|
|
<h2 style="padding-top: 3px;">W&I Kalender</h2>
|
|
<div class="splitter"></div>
|
|
<!-- Preset Picker -->
|
|
<div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 14px;">
|
|
<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>
|
|
</div>
|
|
<button mat-basic-button *ngIf="isUserPreset" class="editButton"
|
|
(click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
|
|
<button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
|
|
(click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
|
|
|
|
<!-- Language Picker -->
|
|
<!-- <mat-form-field style="width: 90px;" 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> -->
|
|
|
|
<!-- Language Picker -->
|
|
<mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px; margin-left: 15px;" (change)="languageChange($event)"
|
|
name="languagePicker" aria-label="Language Picker" [(ngModel)]="languageService.language">
|
|
<mat-button-toggle style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages"
|
|
[value]="lang">
|
|
{{lang}}
|
|
</mat-button-toggle>
|
|
</mat-button-toggle-group>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- User -->
|
|
<div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
|
|
<h3 *ngIf="userId"
|
|
style="font-family: Arial, Helvetica, sans-serif; font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);">
|
|
<mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}
|
|
</h3>
|
|
<h3 *ngIf="errorService.rsso"
|
|
style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
|
|
style="color: red;">verified_user</mat-icon> RSSO Auth Failed</h3>
|
|
<h3 *ngIf="!errorService.rsso &&rssoInit"
|
|
style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
|
|
style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
|
|
<div class="left">
|
|
|
|
<button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
|
|
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
|
|
</button>
|
|
|
|
<button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter" (click)="clearFilter()">
|
|
{{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
|
|
</button>
|
|
|
|
<button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;"
|
|
aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
|
|
|
|
<button *ngIf="approveButton" class="filterButton" aria-label="Filtern"
|
|
(click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
|
|
|
|
<button *ngIf="rejectButton" class="filterButton" aria-label="Filtern"
|
|
(click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
|
|
|
|
<button *ngIf="cancelButton" class="filterButton" aria-label="Filtern"
|
|
(click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
|
|
|
|
<button *ngIf="reApproveButton" class="filterButton" aria-label="Filtern" (click)="reApprove()">Erneut zur
|
|
Genehmigung</button>
|
|
|
|
<button *ngIf="implementerButton" class="filterButton" aria-label="Filtern"
|
|
(click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
|
|
|
|
|
|
|
|
<mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
|
|
|
|
<button *ngIf="showSaveButton" class="filterButton" (click)="updatePreset()">Speichern</button>
|
|
<button *ngIf="showSaveUnderButton" class="filterButton" style="border: solid 1px rgba(0, 0, 0, 0.3);"
|
|
(click)="openSaveUnderDialog()">Speichern unter</button>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- <div class="split"></div> -->
|
|
|
|
<div class="right">
|
|
|
|
<!-- Scale Picker -->
|
|
<mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
|
|
name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
|
|
<mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
|
|
[value]="scalar">
|
|
{{scalar}}
|
|
</mat-button-toggle>
|
|
</mat-button-toggle-group>
|
|
|
|
<!-- Date Range Picker -->
|
|
<div class="dateRangePicker"
|
|
style="display: flex; height: 100%; align-items: center; font-size: 13px; color: rgba(0, 0, 0, 0.734);">
|
|
<div style="height: 70%; display: flex; align-items: center; width: 170px; font-family: Arial, sans-serif; border: solid 1px rgba(0, 0, 0, 0.124);
|
|
background-color: white; padding-left: 10px; border-radius: 8px 0px 0px 8px;">
|
|
<!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
|
|
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
|
|
<input matStartDate formControlName="start" (dateChange)="startDateChanged($event)">
|
|
<input matEndDate formControlName="end" (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>
|
|
</div>
|
|
|
|
<button class="dateButton" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
|
|
</div>
|
|
|
|
<div class="detailsButton">
|
|
{{languageService.lMap.get('detailButton')}}
|
|
<mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
|
|
(change)="refreshData()"></mat-slide-toggle>
|
|
</div>
|
|
|
|
<!-- Restart Button -->
|
|
<button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
|
|
<mat-icon>restart_alt</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error"
|
|
id="showSpin" data-bind="visible: spin" style=" position: absolute; top: auto; left: 30%;">
|
|
<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" [enableVirtualization]="true"
|
|
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
|
|
[resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
|
|
[columns]="columns" [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)">
|
|
|
|
|
|
<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="!errorService.rsso && renderplanTime && renderGantt"
|
|
[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':renderGantt ? 'visible' : 'hidden'}" 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>
|
|
|
|
<mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
|
|
<mat-card-header>
|
|
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
|
{{errorService.getLastError('rsso').name}}</mat-card-title>
|
|
<mat-card-subtitle>{{errorService.getLastError('rsso').userInfo}}</mat-card-subtitle>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<p style="padding-left: 15px;">{{errorService.getLastError('rsso').message}}</p>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|
|
|
|
<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && errorService.critical">
|
|
<mat-card-header>
|
|
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
|
{{errorService.getLastError('critical').name}}</mat-card-title>
|
|
<mat-card-subtitle>{{errorService.getLastError('critical').userInfo}}</mat-card-subtitle>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<p style="padding-left: 15px;">{{errorService.getLastError('critical').message}}</p>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|
|
<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && !errorService.critical && errorService.error">
|
|
<mat-card-header>
|
|
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
|
{{errorService.getLastError('error').name}}</mat-card-title>
|
|
<mat-card-subtitle>{{errorService.getLastError('error').userInfo}}</mat-card-subtitle>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
|
|
</mat-card-content>
|
|
</mat-card> |