Merge branch 'layoutChanges'
commit
01c1d1ff6b
|
|
@ -4,3 +4,7 @@
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
filter: alpha(opacity = 90);
|
filter: alpha(opacity = 90);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
@ -1,19 +1,20 @@
|
||||||
.container{
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.filterHeading{
|
|
||||||
font-family: Roboto;
|
.filterHeading {
|
||||||
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filterBox{
|
.filterBox {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonBox{
|
.buttonBox {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
@ -22,7 +23,10 @@ font-family: Roboto;
|
||||||
.dot-badge {
|
.dot-badge {
|
||||||
background-color: #00a79d;
|
background-color: #00a79d;
|
||||||
color: #00a79d;
|
color: #00a79d;
|
||||||
width: 10px; /* Breite des Punkts */
|
width: 10px;
|
||||||
height: 10px; /* Höhe des Punkts */
|
/* Breite des Punkts */
|
||||||
border-radius: 50%; /* Rundung des Punkts */
|
height: 10px;
|
||||||
|
/* Höhe des Punkts */
|
||||||
|
border-radius: 50%;
|
||||||
|
/* Rundung des Punkts */
|
||||||
}
|
}
|
||||||
|
|
@ -3,60 +3,52 @@
|
||||||
<h2 class="filterHeading">{{this.languageService.lMap.get('filterDialogHeading')}}</h2>
|
<h2 class="filterHeading">{{this.languageService.lMap.get('filterDialogHeading')}}</h2>
|
||||||
<mat-accordion>
|
<mat-accordion>
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
|
|
||||||
<mat-panel-title>{{this.languageService.lMap.get('filterDialogShortDesc')}} <mat-badge *ngIf="TextEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
<mat-panel-title>{{this.languageService.lMap.get('filterDialogShortDesc')}} <mat-badge *ngIf="TextEnabled"
|
||||||
<mat-panel-description>{{this.languageService.lMap.get('filterDialogShortDescText')}}</mat-panel-description>
|
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
||||||
</mat-expansion-panel-header>
|
<mat-panel-description>{{this.languageService.lMap.get('filterDialogShortDescText')}}</mat-panel-description>
|
||||||
<mat-form-field appearance="fill" style="width: 100%;" >
|
</mat-expansion-panel-header>
|
||||||
|
<mat-form-field appearance="fill" style="width: 100%;">
|
||||||
<mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label>
|
<mat-label>{{this.languageService.lMap.get('filterDilogSearchText')}}</mat-label>
|
||||||
<input matInput (input)="this.TextEnabled = this.criteria !== '';" type="text" [(ngModel)]="criteria" >
|
<input matInput (input)="this.TextEnabled = this.criteria !== '';" type="text" [(ngModel)]="criteria">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</mat-expansion-panel>
|
</mat-expansion-panel>
|
||||||
|
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>{{this.languageService.lMap.get('filterDilogSg')}}<mat-badge *ngIf="SgEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
<mat-panel-title>{{this.languageService.lMap.get('filterDilogSg')}}<mat-badge *ngIf="SgEnabled"
|
||||||
|
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
||||||
<mat-panel-description>{{this.languageService.lMap.get('filterDilogSgText')}}</mat-panel-description>
|
<mat-panel-description>{{this.languageService.lMap.get('filterDilogSgText')}}</mat-panel-description>
|
||||||
</mat-expansion-panel-header>
|
</mat-expansion-panel-header>
|
||||||
<multiselect-autocomplete
|
<multiselect-autocomplete [placeholder]="userSupportGroup" [data]="supportGroups" [key]="'supportGroup'"
|
||||||
[placeholder]="userSupportGroup"
|
[appliedFilters]="prevFiltersSg" (result)="onResult($event)">
|
||||||
[data]="supportGroups"
|
|
||||||
[key]="'supportGroup'"
|
|
||||||
[appliedFilters]= "prevFiltersSg"
|
|
||||||
(result)="onResult($event)">
|
|
||||||
</multiselect-autocomplete>
|
</multiselect-autocomplete>
|
||||||
</mat-expansion-panel>
|
</mat-expansion-panel>
|
||||||
|
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>{{this.languageService.lMap.get('filterDilogState')}}<mat-badge *ngIf="StateEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
<mat-panel-title>{{this.languageService.lMap.get('filterDilogState')}}<mat-badge *ngIf="StateEnabled"
|
||||||
<mat-panel-description>{{this.languageService.lMap.get('filterDilogStateText')}}</mat-panel-description>
|
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
||||||
</mat-expansion-panel-header>
|
<mat-panel-description>{{this.languageService.lMap.get('filterDilogStateText')}}</mat-panel-description>
|
||||||
<multiselect-autocomplete
|
</mat-expansion-panel-header>
|
||||||
[placeholder]="languageService.lMap.get('filterDilogSearchState')"
|
<multiselect-autocomplete [placeholder]="languageService.lMap.get('filterDilogSearchState')" [data]="states"
|
||||||
[data]="states"
|
[key]="'state'" [appliedFilters]="prevFiltersState" (result)="onResult($event)">
|
||||||
[key]="'state'"
|
</multiselect-autocomplete>
|
||||||
[appliedFilters]= "prevFiltersState"
|
</mat-expansion-panel>
|
||||||
(result)="onResult($event)">
|
|
||||||
</multiselect-autocomplete>
|
|
||||||
</mat-expansion-panel>
|
|
||||||
|
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>{{this.languageService.lMap.get('filterDilogContract')}}<mat-badge *ngIf="ContractEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
<mat-panel-title>{{this.languageService.lMap.get('filterDilogContract')}}<mat-badge *ngIf="ContractEnabled"
|
||||||
<mat-panel-description>{{this.languageService.lMap.get('filterDilogContractText')}}</mat-panel-description>
|
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
||||||
</mat-expansion-panel-header>
|
<mat-panel-description>{{this.languageService.lMap.get('filterDilogContractText')}}</mat-panel-description>
|
||||||
<multiselect-autocomplete
|
</mat-expansion-panel-header>
|
||||||
[placeholder]="languageService.lMap.get('filterDilogSearchContract')"
|
<multiselect-autocomplete [placeholder]="languageService.lMap.get('filterDilogSearchContract')"
|
||||||
[data]="contracts"
|
[data]="contracts" [key]="'contract'" [appliedFilters]="prevFiltersContract" (result)="onResult($event)">
|
||||||
[key]="'contract'"
|
</multiselect-autocomplete>
|
||||||
[appliedFilters]= "prevFiltersContract"
|
</mat-expansion-panel>
|
||||||
(result)="onResult($event)">
|
|
||||||
</multiselect-autocomplete>
|
|
||||||
</mat-expansion-panel>
|
|
||||||
|
|
||||||
<!-- <mat-expansion-panel>
|
<!-- <mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>{{this.languageService.lMap.get('filterDilogPaketType')}}</mat-panel-title>
|
<mat-panel-title>{{this.languageService.lMap.get('filterDilogPaketType')}}</mat-panel-title>
|
||||||
<mat-panel-description>{{this.languageService.lMap.get('filterDilogPaketTypeText')}}</mat-panel-description>
|
<mat-panel-description>{{this.languageService.lMap.get('filterDilogPaketTypeText')}}</mat-panel-description>
|
||||||
|
|
@ -70,36 +62,39 @@
|
||||||
</multiselect-autocomplete>
|
</multiselect-autocomplete>
|
||||||
</mat-expansion-panel> -->
|
</mat-expansion-panel> -->
|
||||||
|
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>{{this.languageService.lMap.get('filterDilogDate')}}<mat-badge *ngIf="DateEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
<mat-panel-title>{{this.languageService.lMap.get('filterDilogDate')}}<mat-badge *ngIf="DateEnabled"
|
||||||
<mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description>
|
[matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
||||||
</mat-expansion-panel-header>
|
<mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description>
|
||||||
<mat-form-field appearance="fill" style="width: 48%;">
|
</mat-expansion-panel-header>
|
||||||
<mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
|
<mat-form-field appearance="fill" style="width: 48%;">
|
||||||
<input (input)="this.onDateSelect()" matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
|
<mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
|
||||||
<mat-hint>MM/DD/YYYY</mat-hint>
|
<input (input)="this.onDateSelect()" matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
|
||||||
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
|
<mat-hint>MM/DD/YYYY</mat-hint>
|
||||||
<mat-datepicker #picker1></mat-datepicker>
|
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
|
||||||
</mat-form-field>
|
<mat-datepicker #picker1></mat-datepicker>
|
||||||
-
|
</mat-form-field>
|
||||||
<mat-form-field appearance="fill" style="width: 48%;">
|
-
|
||||||
<mat-label>{{this.languageService.lMap.get('filterDilogSearchTo')}}</mat-label>
|
<mat-form-field appearance="fill" style="width: 48%;">
|
||||||
<input (input)="this.onDateSelect()" matInput [matDatepicker]="picker2" [(ngModel)]="filterEndDate">
|
<mat-label>{{this.languageService.lMap.get('filterDilogSearchTo')}}</mat-label>
|
||||||
<mat-hint>MM/DD/YYYY</mat-hint>
|
<input (input)="this.onDateSelect()" matInput [matDatepicker]="picker2" [(ngModel)]="filterEndDate">
|
||||||
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
|
<mat-hint>MM/DD/YYYY</mat-hint>
|
||||||
<mat-datepicker #picker2></mat-datepicker>
|
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
|
||||||
</mat-form-field>
|
<mat-datepicker #picker2></mat-datepicker>
|
||||||
</mat-expansion-panel>
|
</mat-form-field>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled" [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
|
<mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
|
||||||
<mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description>
|
class="dot-badge"></mat-badge></mat-panel-title>
|
||||||
</mat-expansion-panel-header>
|
<mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
|
||||||
<mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete mit Intervall > 1 Jahr!</mat-checkbox>
|
<mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete
|
||||||
</mat-expansion-panel>
|
mit Intervall > 1 Jahr!</mat-checkbox>
|
||||||
|
</mat-expansion-panel>
|
||||||
</mat-accordion>
|
</mat-accordion>
|
||||||
|
|
||||||
<!-- <mat-form-field appearance="fill" style="width: 100%;" >
|
<!-- <mat-form-field appearance="fill" style="width: 100%;" >
|
||||||
|
|
@ -158,8 +153,10 @@
|
||||||
<br><br> -->
|
<br><br> -->
|
||||||
<br>
|
<br>
|
||||||
<mat-dialog-actions align="end">
|
<mat-dialog-actions align="end">
|
||||||
<button mat-raised-button style="margin-right: 3px;" matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button>
|
<button mat-raised-button style="margin-right: 3px;"
|
||||||
<button mat-raised-button color = "primary" style="margin-left: 3px;" (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
|
matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button>
|
||||||
|
<button mat-raised-button color="primary" style="margin-left: 3px;"
|
||||||
|
(click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
|
||||||
</mat-dialog-actions>
|
</mat-dialog-actions>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -5,3 +5,23 @@
|
||||||
.chip-list-wrapper {
|
.chip-list-wrapper {
|
||||||
min-height: 3em;
|
min-height: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-form-field {
|
||||||
|
height: 56px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-form-field .form-field-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-form-field input[matInput] {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-form-field mat-checkbox {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
<div class="chip-list-wrapper">
|
<div class="chip-list-wrapper">
|
||||||
<mat-chip-list #chipList>
|
<mat-chip-list #chipList>
|
||||||
<ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
|
<ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
|
||||||
|
|
@ -7,43 +6,38 @@
|
||||||
<mat-icon class="mat-chip-remove">cancel</mat-icon>
|
<mat-icon class="mat-chip-remove">cancel</mat-icon>
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">... {{selectData.length-20}} weitere
|
<mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">...
|
||||||
|
{{selectData.length-20}} weitere
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
</mat-chip-list>
|
</mat-chip-list>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<mat-form-field class="full-width" appearance="fill" (onmouseover)="this.showCheckBox()"(onmouseout)="this.hideCheckBox()">
|
<mat-form-field class="full-width custom-form-field" appearance="fill">
|
||||||
<input matInput type="text"
|
<div class="form-field-container">
|
||||||
[placeholder]="placeholder"
|
<mat-checkbox [checked]="allSelected" [(indeterminate)]="indeterminate" (change)="toggleAll()"></mat-checkbox>
|
||||||
[matAutocomplete]="auto"
|
<input matInput type="text" [placeholder]="placeholder" [matAutocomplete]="auto" [formControl]="selectControl">
|
||||||
[formControl]="selectControl">
|
</div>
|
||||||
<mat-checkbox *ngIf="this.showCheckbox == true"
|
|
||||||
[checked]="this.allSelected"
|
|
||||||
[(indeterminate)]="indeterminate"
|
|
||||||
(change)="this.toggleAll()"></mat-checkbox>
|
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <mat-form-field>
|
<!-- <mat-form-field>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
[placeholder]="placeholder"
|
[placeholder]="placeholder"
|
||||||
matInput
|
matInput
|
||||||
[matAutocomplete]="auto"> -->
|
[matAutocomplete]="auto"> -->
|
||||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" color="primary" >
|
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" color="primary">
|
||||||
<cdk-virtual-scroll-viewport
|
<cdk-virtual-scroll-viewport [ngStyle]="{height: '200px'}" itemSize="25">
|
||||||
[ngStyle]="{height: '200px'}"
|
<mat-option *cdkVirtualFor="let data of filteredData" color="primary">
|
||||||
itemSize="25">
|
<div (click)="optionClicked($event, data)">
|
||||||
<mat-option *cdkVirtualFor="let data of filteredData" color="primary">
|
<mat-checkbox [checked]="data.selected" color="primary" (change)="toggleSelection(data)"
|
||||||
<div (click)="optionClicked($event, data)">
|
(click)="$event.stopPropagation()">
|
||||||
<mat-checkbox [checked]="data.selected" color="primary"
|
{{ data.item }}
|
||||||
(change)="toggleSelection(data)"
|
</mat-checkbox>
|
||||||
(click)="$event.stopPropagation()">
|
</div>
|
||||||
{{ data.item }}
|
</mat-option>
|
||||||
</mat-checkbox>
|
</cdk-virtual-scroll-viewport>
|
||||||
</div>
|
</mat-autocomplete>
|
||||||
</mat-option>
|
|
||||||
</cdk-virtual-scroll-viewport>
|
|
||||||
</mat-autocomplete>
|
|
||||||
|
|
||||||
<!-- </mat-form-field> -->
|
<!-- </mat-form-field> -->
|
||||||
|
|
@ -1,3 +1,131 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
color: rgba(41, 46, 50, 0.8);
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
height: 50px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.head {
|
||||||
|
overflow: hidden;
|
||||||
|
/* Hides anything that overflows the boundary of this element */
|
||||||
|
}
|
||||||
|
|
||||||
|
.head h2 {
|
||||||
|
user-select: none;
|
||||||
|
display: inline-block;
|
||||||
|
/* Ensures that the element can be transformed */
|
||||||
|
white-space: nowrap;
|
||||||
|
/* Keeps the text on a single line */
|
||||||
|
transform: translateX(-100%);
|
||||||
|
/* Starts the text off-screen to the left */
|
||||||
|
animation: slideIn 1.5s forwards;
|
||||||
|
/* Adjust '2s' to control the speed of the animation */
|
||||||
|
}
|
||||||
|
|
||||||
|
.head div {
|
||||||
|
display: inline-block;
|
||||||
|
/* Ensures that the element can be transformed */
|
||||||
|
white-space: nowrap;
|
||||||
|
/* Keeps the text on a single line */
|
||||||
|
transform: translateX(100%);
|
||||||
|
/* Starts the text off-screen to the left */
|
||||||
|
animation: slideInRight 1.5s forwards;
|
||||||
|
/* Adjust '2s' to control the speed of the animation */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
/* Start from off-screen left */
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(0%);
|
||||||
|
/* End at the normal position */
|
||||||
|
opacity: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInRight {
|
||||||
|
from {
|
||||||
|
transform: translateX(100%);
|
||||||
|
/* Start from off-screen left */
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(0%);
|
||||||
|
/* End at the normal position */
|
||||||
|
opacity: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#topbar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 57px;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
animation: slideUp 1.5s forwards;
|
||||||
|
gap: 10px;
|
||||||
|
/* Adjust '2s' to control the speed of the animation */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
/* Start from off-screen left */
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateY(0%);
|
||||||
|
/* End at the normal position */
|
||||||
|
opacity: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.restartButton {
|
||||||
|
width: 60px;
|
||||||
|
background-color: white;
|
||||||
|
border: none;
|
||||||
|
border: solid 1px rgba(94, 94, 94, 0.18);
|
||||||
|
color: #000000a7;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.restartButton:hover {
|
||||||
|
color: #000000;
|
||||||
|
background-color: rgb(243, 243, 243);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.transitionButton {
|
||||||
|
background-color: #00a79d;
|
||||||
|
color: white;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.example-radio-group {
|
.example-radio-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -9,22 +137,18 @@
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#topbar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 0px 0;
|
|
||||||
align-items: flex-start;
|
|
||||||
height: 3%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-mdc-form-field + .mat-mdc-form-field {
|
|
||||||
|
.mat-mdc-form-field+.mat-mdc-form-field {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.mat-button-toggle-group .mat-button-toggle-button {
|
|
||||||
height: 100%!important;
|
.mat-button-toggle-group .mat-button-toggle-button {
|
||||||
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
.toggleContainer{
|
|
||||||
|
.toggleContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -32,88 +156,205 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filterContainer{
|
.filterButton mat-icon {
|
||||||
width: 100%;
|
transform: scale(0.8);
|
||||||
|
margin-right: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailsButton {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 70%;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
gap: 8px;
|
||||||
|
user-select: none;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButton {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 70%;
|
||||||
|
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
border: solid 1px rgba(0, 0, 0, 0.124);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
gap: 3px;
|
||||||
|
transition: background-color 0.3s ease; /* Add this line for smooth transition */
|
||||||
|
/* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearFilter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 70%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.175);
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
border: solid 1px rgba(0, 0, 0, 0.124);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
gap: 3px;
|
||||||
|
transition: background-color 0.3s ease; /* Add this line for smooth transition */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearFilter:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.804);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.filterButton:hover {
|
||||||
|
background-color: rgb(240, 240, 240);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure filterContainer sticks to the top when scrolling */
|
||||||
|
.filterContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
|
background-color: rgba(245, 245, 245, 0.528); /* Semi-transparent background */
|
||||||
|
border: solid rgba(0, 0, 0, 0.1) 1px;
|
||||||
|
border-bottom: none;
|
||||||
|
border-radius: 10px 10px 0px 0px;
|
||||||
|
height: 60px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 15px;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: -webkit-sticky; /* For Safari */
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000; /* Ensure it is above other content */
|
||||||
|
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
|
||||||
|
backdrop-filter: blur(2px); /* Blur effect */
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearFilter{
|
|
||||||
margin-left: 10px;
|
.filterContainer.sticky {
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.showDetails{
|
.left, .right {
|
||||||
margin-left: 80px;
|
display: flex;
|
||||||
margin-top: 8.5px;
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
gap: 9px;
|
||||||
}
|
}
|
||||||
.filter{
|
|
||||||
|
|
||||||
|
.split {
|
||||||
|
height: 100%;
|
||||||
|
border-right: solid 1px rgba(0, 0, 0, 0.124);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter {
|
||||||
margin-top: 0.5%;
|
margin-top: 0.5%;
|
||||||
margin-left: 1%;
|
margin-left: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.checkbox{
|
.checkbox {
|
||||||
margin: 0 0.5%;
|
margin: 0 0.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scalarContainer{
|
.dateRangePicker input:hover {
|
||||||
margin-left: 0.5%;
|
color: rgb(0, 0, 0);
|
||||||
margin-right: 0.5%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filterButton{
|
.dateButton {
|
||||||
|
height: 70%;
|
||||||
|
width: 59px;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
border: solid 1px rgba(0, 0, 0, 0.124);
|
||||||
|
border-radius: 0px 8px 8px 0px;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.dateButton mat-icon {
|
||||||
|
transform: scale(0.8);
|
||||||
|
opacity: 0.75;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.dateButton{
|
.dateButton:hover>mat-icon {
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 1px; border-top: none; border-left: none; border-right: none; border-top-right-radius: 4px; margin-right: 15px;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dateButton:hover{
|
.dateButton:hover {
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dateButton:checked{
|
.editButton {
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px;
|
height: 59px;
|
||||||
background-color: red;
|
width: 59px;
|
||||||
}
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
|
border: none;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.editButton{
|
.editButton:hover {
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border: none; border-top-right-radius: 4px; margin-right: 15px;
|
height: 59px;
|
||||||
}
|
width: 59px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
.editButton:hover{
|
border-top-right-radius: 4px;
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-top-right-radius: 4px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.editButton:checked{
|
.editButton:checked {
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-top-right-radius: 4px;
|
height: 59px;
|
||||||
|
width: 59px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
|
border-top-right-radius: 4px;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deleteButton{
|
.deleteButton {
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 1px; border: none; border-top-right-radius: 4px; margin-right: 15px; margin-left: -15px;
|
height: 59px;
|
||||||
}
|
width: 59px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
|
border-width: 1px;
|
||||||
|
border: none;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
.deleteButton:hover{
|
.deleteButton:hover {
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top-right-radius: 4px;
|
height: 59px;
|
||||||
|
width: 59px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
|
border-width: 2px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.deleteButton:checked{
|
.deleteButton:checked {
|
||||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top-right-radius: 4px;
|
height: 59px;
|
||||||
|
width: 59px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
|
border-width: 2px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .datePickerContainer{
|
/* .datePickerContainer{
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
} */
|
} */
|
||||||
/*
|
/*
|
||||||
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
|
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
|
||||||
background-color: #d56100;
|
background-color: #d56100;
|
||||||
}
|
}
|
||||||
|
|
@ -134,14 +375,18 @@
|
||||||
|
|
||||||
.mat-button-toggle-checked {
|
.mat-button-toggle-checked {
|
||||||
background-color: #ef6c00;
|
background-color: #ef6c00;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot-badge {
|
.dot-badge {
|
||||||
background-color: #00a79d;
|
background-color: #00a79d;
|
||||||
color: #00a79d;
|
color: #00a79d;
|
||||||
width: 15px; /* Breite des Punkts */
|
width: 10x;
|
||||||
height: 15px; /* Höhe des Punkts */
|
/* Breitedes Punkts */
|
||||||
border-radius: 50%; /* Rundung des Punkts */
|
height: 10px;
|
||||||
|
/* Höhe des Punkts */
|
||||||
|
border-radius: 50%;
|
||||||
|
/* Rundung des Punkts */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ::ng-deep .mat-calendar{
|
/* ::ng-deep .mat-calendar{
|
||||||
|
|
@ -149,7 +394,7 @@
|
||||||
} */
|
} */
|
||||||
|
|
||||||
/* ::ng-deep .mat-calendar-body-label{ */
|
/* ::ng-deep .mat-calendar-body-label{ */
|
||||||
/* color: white; */
|
/* color: white; */
|
||||||
/* }
|
/* }
|
||||||
|
|
||||||
::ng-deep .mat-calendar-cell-content{
|
::ng-deep .mat-calendar-cell-content{
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,41 @@
|
||||||
|
<div class="head">
|
||||||
|
<h2>W&I Kalender</h2>
|
||||||
|
|
||||||
|
<!-- 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" id="topbar">
|
<div *ngIf="!errorService.rsso && !rssoInit" 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">
|
<!-- Language Picker -->
|
||||||
<mat-label>{{languageService.lMap.get('language')}}</mat-label>
|
<mat-form-field style="width: 90px;" appearance="fill">
|
||||||
<mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
|
<mat-label>{{languageService.lMap.get('language')}}</mat-label>
|
||||||
<mat-option *ngFor="let lang of languageService.languages" [value]="lang">
|
<mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
|
||||||
{{lang}}
|
<mat-option *ngFor="let lang of languageService.languages" [value]="lang">
|
||||||
</mat-option>
|
{{lang}}
|
||||||
</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-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field> -->
|
</mat-form-field>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Preset Picker -->
|
||||||
<mat-form-field appearance="fill" style="width: 300px;">
|
<mat-form-field appearance="fill" style="width: 300px;">
|
||||||
<mat-label>Preset</mat-label>
|
<mat-label>Preset</mat-label>
|
||||||
<mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
|
<mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
|
||||||
<mat-optgroup *ngFor="let group of presetGroups" [label]="group.name"
|
<mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
|
||||||
[disabled]="group.disabled">
|
|
||||||
<mat-option *ngFor="let preset of group.presets" [value]="preset">
|
<mat-option *ngFor="let preset of group.presets" [value]="preset">
|
||||||
{{preset.name}}
|
{{preset.name}}
|
||||||
<!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
|
<!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
|
||||||
|
|
@ -52,98 +45,120 @@
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<button mat-basic-button *ngIf="isUserPreset" class="editButton" (click)="openRenameDialog()" color="" style="" ><mat-icon>edit</mat-icon></button>
|
<!-- Restart Button -->
|
||||||
<button mat-basic-button *ngIf="isUserPreset" class="deleteButton" (click)="openDeleteDialog()" color="" style="" ><mat-icon>delete_forever</mat-icon></button>
|
<button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
|
||||||
<button mat-raised-button style="margin-top: 5px; margin-left: 10px; height: 50px; margin-right: 5px;" aria-label="Refresh" (click)="refreshGanttWithFilters()">
|
<mat-icon>restart_alt</mat-icon>
|
||||||
<mat-icon >restart_alt</mat-icon>
|
|
||||||
</button>
|
</button>
|
||||||
<h3 *ngIf="userId" style="font-family: Arial, Helvetica, sans-serif;"><mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}</h3>
|
|
||||||
<h3 *ngIf="errorService.rsso" style="font-family: Arial, Helvetica, sans-serif;"><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;"><mat-icon style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
|
<div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
|
||||||
<button *ngIf="transitionButton" mat-raised-button style="margin-bottom: 2px; background-color: #00a79d; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
|
<div class="left">
|
||||||
<button *ngIf="approveButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
|
|
||||||
<button *ngIf="rejectButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
|
|
||||||
<button *ngIf="cancelButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
|
|
||||||
<button *ngIf="reApproveButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="reApprove()">Erneut zur Genehmigung</button>
|
|
||||||
<button *ngIf="implementerButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
|
|
||||||
<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>
|
|
||||||
<mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
|
|
||||||
|
|
||||||
<button *ngIf="showSaveButton" mat-raised-button (click)="updatePreset()">Speichern</button>
|
<button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
|
||||||
<button *ngIf="showSaveUnderButton" mat-raised-button (click)="openSaveUnderDialog()" >Speichern unter</button>
|
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
|
||||||
<button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" class="clearFilter" (click)="clearFilter()">
|
</button>
|
||||||
{{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>
|
<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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
*ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error" id="showSpin" data-bind="visible: spin"
|
*ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error"
|
||||||
style=" position: absolute; top: auto; left: 30%;">
|
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"/>
|
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" rel="stylesheet" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
|
<!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
|
||||||
<ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault"
|
<ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault" [enableVirtualization]="true"
|
||||||
[enableVirtualization]="true"
|
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
|
||||||
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}"
|
[resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
|
||||||
[dataSource]="data"
|
[columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
|
||||||
[allowSorting] = 'true'
|
[highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate"
|
||||||
[resources]="resources"
|
[projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true' [enableMultiTaskbar]='true'
|
||||||
[taskFields]="taskSettings"
|
[collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true" [allowFiltering]="false"
|
||||||
[resourceFields]="resourceFields"
|
[timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings" [tooltipSettings]="tooltipSettings"
|
||||||
[editSettings]="editSettings"
|
[splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)" gridLines="Both"
|
||||||
[columns]="columns"
|
(splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)"
|
||||||
[toolbar]="toolbar"
|
(taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)"
|
||||||
[labelSettings]="labelSettings"
|
(toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)" (rowDeselected)="rowDeselected($event)"
|
||||||
[allowSelection]='true'
|
(created)="created($event)" (dataBound)="dataBound($event)" (load)="load($event)"
|
||||||
[allowResizing] = 'true'
|
(queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)">
|
||||||
[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>
|
<ng-template #tooltipSettingsTaskbar let-data>
|
||||||
|
|
@ -151,25 +166,32 @@
|
||||||
<table>
|
<table>
|
||||||
<ng-container>
|
<ng-container>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.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>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.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>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.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>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.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>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.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>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.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>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.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>
|
||||||
<!-- <tr>
|
<!-- <tr>
|
||||||
<td style="padding:3px"> Date: {{data.TaskID}}</td>
|
<td style="padding:3px"> Date: {{data.TaskID}}</td>
|
||||||
|
|
@ -182,61 +204,53 @@
|
||||||
</ejs-gantt>
|
</ejs-gantt>
|
||||||
|
|
||||||
<app-plan-time-bar #plantimeComponent *ngIf="!errorService.rsso && renderplanTime && renderGantt"
|
<app-plan-time-bar #plantimeComponent *ngIf="!errorService.rsso && renderplanTime && renderGantt"
|
||||||
[inputData]="inputForTimeline"
|
[inputData]="inputForTimeline" [splitterSettings]="splitterSettings" [parentResources]="allResources"
|
||||||
[splitterSettings]="splitterSettings"
|
[filters]="filters"></app-plan-time-bar>
|
||||||
[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" -->
|
||||||
|
|
||||||
<div *ngIf="this.showNoResultsError && this.languageService.language =='DE'"><h2>Die Suche lieferte keine Ergebnisse</h2></div>
|
<mat-paginator #paginator [ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}" class="demo-paginator"
|
||||||
<div *ngIf="this.showNoResultsError && this.languageService.language =='EN'"><h2>The search did not return any results</h2></div>
|
(page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="20" [disabled]="false"
|
||||||
<!-- [filterSettings]="filterSettings" -->
|
[showFirstLastButtons]="true" [pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]" [hidePageSize]="false"
|
||||||
|
[pageIndex]="0" aria-label="Seite auswählen">
|
||||||
|
</mat-paginator>
|
||||||
|
|
||||||
<mat-paginator #paginator
|
<mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
|
||||||
[ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}"
|
<mat-card-header>
|
||||||
class="demo-paginator"
|
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
||||||
(page)="handlePageEvent($event)"
|
{{errorService.getLastError('rsso').name}}</mat-card-title>
|
||||||
[length]="this.dataService.getTotalSize()"
|
<mat-card-subtitle>{{errorService.getLastError('rsso').userInfo}}</mat-card-subtitle>
|
||||||
[pageSize]="20"
|
</mat-card-header>
|
||||||
[disabled]="false"
|
<mat-card-content>
|
||||||
[showFirstLastButtons]="true"
|
<p style="padding-left: 15px;">{{errorService.getLastError('rsso').message}}</p>
|
||||||
[pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]"
|
</mat-card-content>
|
||||||
[hidePageSize]="false"
|
</mat-card>
|
||||||
[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>
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -8,3 +8,9 @@ $my-warn: mat-palette($mat-red, 600);
|
||||||
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
|
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
|
||||||
|
|
||||||
@include angular-material-theme($my-theme);
|
@include angular-material-theme($my-theme);
|
||||||
|
|
||||||
|
.dateButton.mat-button {
|
||||||
|
background-color: blue !important; /* Use !important as a last resort */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue