datepicker
Said Gedik
parent
b0145b20d7
commit
3e0c0b9063
|
|
@ -259,12 +259,19 @@
|
||||||
height: 70%;
|
height: 70%;
|
||||||
width: 59px;
|
width: 59px;
|
||||||
background-color: rgb(255, 255, 255);
|
background-color: rgb(255, 255, 255);
|
||||||
border-width: 1px;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
border: solid 1px rgba(0, 0, 0, 0.124);
|
border: solid 1px rgba(0, 0, 0, 0.124);
|
||||||
border-radius: 8px;
|
border-radius: 0px 8px 8px 0px;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dateButton mat-icon {
|
||||||
|
transform: scale(0.8);
|
||||||
|
opacity: 0.75;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dateButton:hover>mat-icon {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dateButton:hover {
|
.dateButton:hover {
|
||||||
|
|
|
||||||
|
|
@ -102,158 +102,156 @@
|
||||||
|
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<!-- Date Range Picker -->
|
<!-- Date Range Picker -->
|
||||||
<div style="display: flex; height: 100%; align-items: center; font-size: 13px; ">
|
<div style="display: flex; height: 100%; align-items: center; font-size: 13px; ">
|
||||||
<div style="height: 70%; display: flex; align-items: center; width: 160px; font-family: Arial, sans-serif; font-weight: 600;">
|
<div style="height: 70%; display: flex; align-items: center; width: 180px; font-family: Arial, sans-serif; border: solid 1px rgba(0, 0, 0, 0.124);
|
||||||
<!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
|
background-color: white; padding-left: 10px; border-radius: 5px 0px 0px 5px;">
|
||||||
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
|
<!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
|
||||||
<input matStartDate formControlName="start"
|
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
|
||||||
(dateChange)="startDateChanged($event)">
|
<input matStartDate formControlName="start" (dateChange)="startDateChanged($event)">
|
||||||
<input matEndDate formControlName="end"(dateChange)="endDateChanged($event)">
|
<input matEndDate formControlName="end" (dateChange)="endDateChanged($event)">
|
||||||
</mat-date-range-input>
|
</mat-date-range-input>
|
||||||
<!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
|
<!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
|
||||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
<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.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
|
||||||
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end 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>
|
||||||
|
|
||||||
<!-- Scale Picker -->
|
<button class="dateButton" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
|
||||||
<mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
<div class="detailsButton">
|
<!-- Scale Picker -->
|
||||||
{{languageService.lMap.get('detailButton')}}
|
<mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
|
||||||
<mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
|
name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
|
||||||
(change)="refreshData()"></mat-slide-toggle>
|
<mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
|
||||||
</div>
|
[value]="scalar">
|
||||||
|
{{scalar}}
|
||||||
|
</mat-button-toggle>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
|
||||||
|
<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
|
<div
|
||||||
*ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error"
|
*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%;">
|
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" [enableVirtualization]="true"
|
<ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault" [enableVirtualization]="true"
|
||||||
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
|
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
|
||||||
[resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
|
[resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
|
||||||
[columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
|
[columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
|
||||||
[highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate"
|
[highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate"
|
||||||
[projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true'
|
[projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true' [enableMultiTaskbar]='true'
|
||||||
[enableMultiTaskbar]='true' [collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true"
|
[collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true" [allowFiltering]="false"
|
||||||
[allowFiltering]="false" [timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings"
|
[timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings" [tooltipSettings]="tooltipSettings"
|
||||||
[tooltipSettings]="tooltipSettings" [splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)"
|
[splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)" gridLines="Both"
|
||||||
gridLines="Both" (splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)"
|
(splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)"
|
||||||
(taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)"
|
(taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)"
|
||||||
(toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)"
|
(toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)" (rowDeselected)="rowDeselected($event)"
|
||||||
(rowDeselected)="rowDeselected($event)" (created)="created($event)" (dataBound)="dataBound($event)"
|
(created)="created($event)" (dataBound)="dataBound($event)" (load)="load($event)"
|
||||||
(load)="load($event)" (queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)">
|
(queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)">
|
||||||
|
|
||||||
|
|
||||||
<ng-template #tooltipSettingsTaskbar let-data>
|
<ng-template #tooltipSettingsTaskbar let-data>
|
||||||
<div>
|
<div>
|
||||||
<table>
|
<table>
|
||||||
<ng-container>
|
<ng-container>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}:
|
<td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}:
|
||||||
{{data.taskData.resources[0].resourceName}}</td>
|
{{data.taskData.resources[0].resourceName}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.lMap.get('tooltipState')}}:
|
<td style="padding:3px">{{languageService.lMap.get('tooltipState')}}:
|
||||||
{{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
|
{{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.lMap.get('tooltipPaketType')}}:
|
<td style="padding:3px">{{languageService.lMap.get('tooltipPaketType')}}:
|
||||||
{{data.taskData.resources[0].packageName}}</td>
|
{{data.taskData.resources[0].packageName}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.lMap.get('tooltipContract')}}:
|
<td style="padding:3px">{{languageService.lMap.get('tooltipContract')}}:
|
||||||
{{data.taskData.resources[0].vertragName}}</td>
|
{{data.taskData.resources[0].vertragName}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupKv')}}:
|
<td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupKv')}}:
|
||||||
{{data.taskData.resources[0].supportGroup}}</td>
|
{{data.taskData.resources[0].supportGroup}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupIh')}}:
|
<td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupIh')}}:
|
||||||
{{data.taskData.resources[0].coordinatorSg}}</td>
|
{{data.taskData.resources[0].coordinatorSg}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding:3px">{{languageService.lMap.get('tooltipDate')}}:
|
<td style="padding:3px">{{languageService.lMap.get('tooltipDate')}}:
|
||||||
{{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}</td>
|
{{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>
|
||||||
</tr> -->
|
</tr> -->
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</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" [splitterSettings]="splitterSettings" [parentResources]="allResources"
|
[inputData]="inputForTimeline" [splitterSettings]="splitterSettings" [parentResources]="allResources"
|
||||||
[filters]="filters"></app-plan-time-bar>
|
[filters]="filters"></app-plan-time-bar>
|
||||||
|
|
||||||
<div *ngIf="this.showNoResultsError && this.languageService.language =='DE'">
|
<div *ngIf="this.showNoResultsError && this.languageService.language =='DE'">
|
||||||
<h2>Die Suche lieferte keine Ergebnisse</h2>
|
<h2>Die Suche lieferte keine Ergebnisse</h2>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="this.showNoResultsError && this.languageService.language =='EN'">
|
<div *ngIf="this.showNoResultsError && this.languageService.language =='EN'">
|
||||||
<h2>The search did not return any results</h2>
|
<h2>The search did not return any results</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- [filterSettings]="filterSettings" -->
|
<!-- [filterSettings]="filterSettings" -->
|
||||||
|
|
||||||
<mat-paginator #paginator [ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}" class="demo-paginator"
|
<mat-paginator #paginator [ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}" class="demo-paginator"
|
||||||
(page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="20" [disabled]="false"
|
(page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="20" [disabled]="false"
|
||||||
[showFirstLastButtons]="true" [pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]" [hidePageSize]="false"
|
[showFirstLastButtons]="true" [pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]" [hidePageSize]="false"
|
||||||
[pageIndex]="0" aria-label="Seite auswählen">
|
[pageIndex]="0" aria-label="Seite auswählen">
|
||||||
</mat-paginator>
|
</mat-paginator>
|
||||||
|
|
||||||
<mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
|
<mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
|
||||||
<mat-card-header>
|
<mat-card-header>
|
||||||
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
||||||
{{errorService.getLastError('rsso').name}}</mat-card-title>
|
{{errorService.getLastError('rsso').name}}</mat-card-title>
|
||||||
<mat-card-subtitle>{{errorService.getLastError('rsso').userInfo}}</mat-card-subtitle>
|
<mat-card-subtitle>{{errorService.getLastError('rsso').userInfo}}</mat-card-subtitle>
|
||||||
</mat-card-header>
|
</mat-card-header>
|
||||||
<mat-card-content>
|
<mat-card-content>
|
||||||
<p style="padding-left: 15px;">{{errorService.getLastError('rsso').message}}</p>
|
<p style="padding-left: 15px;">{{errorService.getLastError('rsso').message}}</p>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
||||||
|
|
||||||
<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && errorService.critical">
|
<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && errorService.critical">
|
||||||
<mat-card-header>
|
<mat-card-header>
|
||||||
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
||||||
{{errorService.getLastError('critical').name}}</mat-card-title>
|
{{errorService.getLastError('critical').name}}</mat-card-title>
|
||||||
<mat-card-subtitle>{{errorService.getLastError('critical').userInfo}}</mat-card-subtitle>
|
<mat-card-subtitle>{{errorService.getLastError('critical').userInfo}}</mat-card-subtitle>
|
||||||
</mat-card-header>
|
</mat-card-header>
|
||||||
<mat-card-content>
|
<mat-card-content>
|
||||||
<p style="padding-left: 15px;">{{errorService.getLastError('critical').message}}</p>
|
<p style="padding-left: 15px;">{{errorService.getLastError('critical').message}}</p>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
||||||
<mat-card style="width: 50%; margin: auto;"
|
<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && !errorService.critical && errorService.error">
|
||||||
*ngIf="!errorService.rsso && !errorService.critical && errorService.error">
|
<mat-card-header>
|
||||||
<mat-card-header>
|
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
||||||
<mat-card-title><mat-icon style="color: red;">error</mat-icon>
|
{{errorService.getLastError('error').name}}</mat-card-title>
|
||||||
{{errorService.getLastError('error').name}}</mat-card-title>
|
<mat-card-subtitle>{{errorService.getLastError('error').userInfo}}</mat-card-subtitle>
|
||||||
<mat-card-subtitle>{{errorService.getLastError('error').userInfo}}</mat-card-subtitle>
|
</mat-card-header>
|
||||||
</mat-card-header>
|
<mat-card-content>
|
||||||
<mat-card-content>
|
<p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
|
||||||
<p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
|
</mat-card-content>
|
||||||
</mat-card-content>
|
</mat-card>
|
||||||
</mat-card>
|
|
||||||
Loading…
Reference in New Issue