Merge branch 'DEVELOP' of ssh://git.eclipse.org:29418/openk-usermodules/org.eclipse.openk-usermodules.gridFailureInformation.frontend into SI-176-sonstiges-und-bugs
+ [SI-176]: Bugs and other things
Signed-off-by: Dennis Schmitt <dennis.schmitt@pta.de>
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
index 7c36ff0..00559eb 100644
--- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
+++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
@@ -263,8 +263,8 @@
<div class="input-group col-sm-4">
<div class="input-group-prepend">
<app-date-time-picker
- (dateTimeEvent)="setGridFailureDateTime($event, 'failureBegin')"
- [dateString]="failureBeginDateTime"
+ (dateTimeChange)="setGridFailureDateTime($event, 'failureBegin')"
+ [dateString]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureBegin']?.value"
[disabled]="!gridFailureDetailsSandbox.saveEnabled"
[class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
></app-date-time-picker>
@@ -301,8 +301,8 @@
<div class="input-group col-sm-4">
<div class="input-group-prepend">
<app-date-time-picker
- (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndPlanned')"
- [dateString]="failureEndPlannedDateTime"
+ (dateTimeChange)="setGridFailureDateTime($event, 'failureEndPlanned')"
+ [dateString]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndPlanned']?.value"
[disabled]="!gridFailureDetailsSandbox.saveEnabled"
[class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
></app-date-time-picker>
@@ -337,8 +337,8 @@
<label for="failureEndResupplied" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndResupplied' | translate }}</label>
<div class="input-group col-sm-4">
<app-date-time-picker
- (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndResupplied')"
- [dateString]="failureEndResuppliedDateTime"
+ (dateTimeChange)="setGridFailureDateTime($event, 'failureEndResupplied')"
+ [dateString]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndResupplied']?.value"
[disabled]="!gridFailureDetailsSandbox.saveEnabled"
[class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
></app-date-time-picker>
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts
index 4569e05..8810b12 100644
--- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts
+++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts
@@ -25,9 +25,6 @@
styleUrls: ['./grid-failure-details.component.scss'],
})
export class GridFailureDetailsComponent implements OnInit {
- public failureBeginDateTime: string;
- public failureEndPlannedDateTime: string;
- public failureEndResuppliedDateTime: string;
public Globals = Globals;
public gridFailureVersions$: Observable<GridFailure[]> = this.appState$.select(store.getGridFailureVersionsData);
@@ -35,32 +32,26 @@
ngOnInit() {
this.gridFailureDetailsSandbox.registerEvents();
-
- this.gridFailureDetailsSandbox.gridFailureDetailsFormState$.subscribe(gridFailureDetailFormItem => {
- this.failureBeginDateTime = gridFailureDetailFormItem.value.failureBegin;
- this.failureEndPlannedDateTime = gridFailureDetailFormItem.value.failureEndPlanned;
- this.failureEndResuppliedDateTime = gridFailureDetailFormItem.value.failureEndResupplied;
- });
}
- public setGridFailureDateTime(event, actionType: string): void {
- let dateTime: Date = this._createDateTime(event);
- this.gridFailureDetailsSandbox.setGridFailureDateTime(dateTime.toISOString(), actionType);
+ public setGridFailureDateTime(dateTime: any, actionType: string): void {
+ let date: Date = this._createDateTime(dateTime);
+ this.gridFailureDetailsSandbox.setGridFailureDateTime(date.toISOString(), actionType);
}
public resetGridFailureDateTime(actionType: string): void {
this.gridFailureDetailsSandbox.clearGridFailureData(actionType);
}
- private _createDateTime(event: any): Date {
- let dateTime: Date = new Date();
- dateTime.setDate(event.day);
- dateTime.setMonth(event.month - 1);
- dateTime.setFullYear(event.year);
- dateTime.setHours(event.hour);
- dateTime.setMinutes(event.minute - dateTime.getTimezoneOffset());
- dateTime.setSeconds(event.second);
- return dateTime;
+ private _createDateTime(dateTime: any): Date {
+ let date: Date = new Date();
+ date.setDate(dateTime.day);
+ date.setMonth(dateTime.month - 1);
+ date.setFullYear(dateTime.year);
+ date.setHours(dateTime.hour);
+ date.setMinutes(dateTime.minute - date.getTimezoneOffset());
+ date.setSeconds(dateTime.second);
+ return date;
}
ngOnDestroy() {
diff --git a/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.html b/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.html
index 481bec1..3fd3540 100644
--- a/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.html
+++ b/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.html
@@ -11,28 +11,40 @@
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/ -->
<div class="input-group-prepend">
- <button class="btn btn-outline-primary" [ngbPopover]="calendarContent" [disabled]="disabled" type="button">
+ <button class="btn btn-outline-primary" [ngbPopover]="calendarContent" [disabled]="disabled" type="button" (click)="showTimePicker = false">
<em class="fa fa-calendar"></em>
</button>
</div>
<ng-template #calendarContent>
<div>
- <div *ngIf="!showTimePickerToggle">
- <ngb-datepicker #dp name="datepicker" [ngModel]="datetime" (ngModelChange)="changeDate($event)"></ngb-datepicker>
- <button class="btn btn-block btn-outline-secondary" [ngbPopover]="timePickerContent" type="button" (click)="toggleDateTimeState($event)">
- <em class="fas fa-clock"></em>
- </button>
+ <div *ngIf="!showTimePicker">
+ <ngb-datepicker
+ [dayTemplate]="customDayTemplate"
+ name="datePicker"
+ [ngModel]="dateTime"
+ (dateSelect)="changeDate($event); showTimePicker = true"
+ [startDate]="dateTime"
+ ></ngb-datepicker>
</div>
- <div *ngIf="showTimePickerToggle">
- <button class="btn btn-block btn-outline-secondary" [ngbPopover]="calendarContent" type="button" (click)="toggleDateTimeState($event)">
+ <ng-template #customDayTemplate let-today="today" let-date let-selected="selected">
+ <span *ngIf="today; else defaultDayTemplate" class="ngb-dp-day today" [class.bg-primary]="selected">
+ {{ date.day }}
+ </span>
+ <ng-template #defaultDayTemplate let-focused="focused">
+ <span class="custom-day" [class.focused]="focused" [class.bg-primary]="selected">
+ {{ date.day }}
+ </span>
+ </ng-template>
+ </ng-template>
+ <div *ngIf="showTimePicker">
+ <button class="btn btn-block btn-outline-secondary" type="button" (click)="showTimePicker = false">
<em class="fa fa-calendar"></em>
</button>
<div class="mt-auto">
<ngb-timepicker
- #tp
- name="timepicker"
- [ngModel]="datetime"
+ name="timePicker"
+ [ngModel]="dateTime"
(ngModelChange)="changeTime($event)"
[seconds]="seconds"
[hourStep]="hourStep"
diff --git a/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.scss b/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.scss
index df58327..114d278 100644
--- a/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.scss
+++ b/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.scss
@@ -18,3 +18,38 @@
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
+.bg-primary {
+ border-radius: 0.25rem;
+ color: white;
+}
+.today {
+ text-align: center;
+ padding: 0.25rem;
+ display: inline-block;
+ height: 2rem;
+ width: 2rem;
+ border: 1px solid #5bc0de;
+ border-radius: 0.25rem;
+}
+.today:hover {
+ background-color: #5bc0de;
+ color: white;
+}
+
+.custom-day {
+ text-align: center;
+ padding: 0.25rem;
+ display: inline-block;
+ height: 2rem;
+ width: 2rem;
+}
+.custom-day.range,
+.custom-day:hover {
+ background-color: #5bc0de;
+
+ border-radius: 0.25rem;
+ color: white;
+}
+.custom-day.faded {
+ background-color: rgba(2, 117, 216, 0.5);
+}
diff --git a/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.spec.ts b/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.spec.ts
index d9626e2..22dd63a 100644
--- a/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.spec.ts
+++ b/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.spec.ts
@@ -10,122 +10,92 @@
*
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/
-import { DateTimePickerComponent } from '@grid-failure-information-app/shared/components/date-time-picker/date-time-picker.component';
-import { NgbPopoverConfig, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import { DateTimePickerComponent, CustomDatepickerI18n } from '@grid-failure-information-app/shared/components/date-time-picker/date-time-picker.component';
+import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
import { DateTimeModel } from '@grid-failure-information-app/shared/models/date-time.model';
+import { async } from '@angular/core/testing';
describe('DateTimePickerComponent', () => {
let component: DateTimePickerComponent;
+ let customDatePicker: CustomDatepickerI18n;
+
let config: NgbPopoverConfig;
- let event$: any;
beforeEach(() => {
config = {
- autoClose() {},
- placement() {},
+ autoClose: {},
+ placement: {},
} as any;
- event$ = {
- stopPropagation() {},
- };
component = new DateTimePickerComponent(config);
+ customDatePicker = new CustomDatepickerI18n();
+ component.dateTime = new DateTimeModel();
});
it('should create component', () => {
expect(component).toBeTruthy();
});
- it('should call ngOnInit()', () => {
- let spy = spyOn(component, 'writeValue');
- component.dateString = 'test';
- component.ngOnInit();
-
- expect(spy).toHaveBeenCalledWith('test');
- });
-
- it('should call writeValue(newModel: string)', () => {
- let spy = spyOn(component, 'setDateStringModel');
- const newModel = 'test';
- component.writeValue('');
- expect(spy).not.toHaveBeenCalled();
-
- component.writeValue(newModel);
- expect(spy).toHaveBeenCalled();
- });
-
- it('should call registerOnChange()', () => {
- let fn = 'test';
- component.registerOnChange(fn);
-
- expect((component as any).onChange).toBe(fn);
- });
-
- it('should call registerOnTouched()', () => {
- let fn = 'test';
- component.registerOnTouched(fn);
-
- expect((component as any).onTouched).toBe(fn);
- });
-
- it('should call toggleDateTimeState(event$)', () => {
- component.showTimePickerToggle = false;
- event$ = {
- ...event$,
- day: 1,
- month: 3,
- year: 2020,
- };
-
- component.toggleDateTimeState(event$);
- expect(component.showTimePickerToggle).toBeTruthy();
- });
-
it('should call changeDate(event$)', () => {
- let spy = spyOn(component, 'setDateStringModel');
-
- component.showTimePickerToggle = false;
- event$ = {
- ...event$,
+ const dateTime = {
day: 1,
month: 3,
year: 2020,
};
-
- component.changeDate({});
- expect(spy).not.toHaveBeenCalled();
-
- component.changeDate(event$);
- expect(spy).toHaveBeenCalled();
+ component.changeDate(dateTime);
+ const newDateTime = component.dateTime;
+ expect(newDateTime.day).toEqual(dateTime.day);
+ expect(newDateTime.month).toEqual(dateTime.month);
+ expect(newDateTime.year).toEqual(dateTime.year);
});
it('should call changeTime(event$)', () => {
- let spy = spyOn(component, 'setDateStringModel');
-
- component.showTimePickerToggle = false;
- event$ = {
- day: 1,
- month: 3,
- year: 2020,
+ const dateTime = {
hour: 1,
minute: 1,
second: 1,
};
- component.changeTime(event$);
- expect(spy).toHaveBeenCalled();
+ component.changeTime(dateTime);
+ const newDateTime = component.dateTime;
+ expect(newDateTime.hour).toEqual(dateTime.hour);
+ expect(newDateTime.minute).toEqual(dateTime.minute);
+ expect(newDateTime.second).toEqual(dateTime.second);
});
- it('should call setDateStringModel()', () => {
- let spy = spyOn(component.dateTimeEvent, 'emit');
-
- component.datetime = DateTimeModel.fromLocalString('2020-03-04T00:00:00.000Z');
+ it('should has providers and call getWeekdayShortName(weekday: number)', () => {
+ const selectMonday = customDatePicker.getWeekdayShortName(1);
+ expect(selectMonday).toEqual('Mo');
+ });
+ it('should has providers and call getMonthShortName(month: number)', () => {
+ const selectJanuary = customDatePicker.getMonthShortName(1);
+ expect(selectJanuary).toEqual('Jan');
+ });
+ it('should has providers and call getMonthFullName(month: number)', () => {
+ const selectJanuary = customDatePicker.getMonthFullName(1);
+ expect(selectJanuary).toEqual('Jan');
+ });
+ it('should has providers and call getDayAriaLabel(date: NgbDateStruct)', () => {
+ const date = {
+ year: 2001,
+ month: 1,
+ day: 1,
+ };
+ const getDate = customDatePicker.getDayAriaLabel(date);
+ expect(getDate).toEqual('1-1-2001');
+ });
+ it('should call changeDate() and check if it works', () => {
+ component.dateTime = null;
+ const date = {
+ year: 2001,
+ month: 1,
+ day: 1,
+ };
+ component.changeDate(date);
+ expect(component.dateTime).not.toBe(null);
+ });
+ it('should call set dateString() and check if it works', async(() => {
component.dateString = null;
- component.firstTimeAssign = true;
-
- component.setDateStringModel();
- expect(component.firstTimeAssign).toBeFalsy();
-
- component.setDateStringModel();
- expect(spy).toHaveBeenCalled();
- });
+ expect(component.dateTime).toBe(null);
+ }));
});
diff --git a/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.ts b/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.ts
index 69561fe..d48fd7d 100644
--- a/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.ts
+++ b/projects/grid-failure-information-app/src/app/shared/components/date-time-picker/date-time-picker.component.ts
@@ -10,131 +10,89 @@
*
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/
-import { Component, OnInit, Input, forwardRef, ViewChild, AfterViewInit, Output, EventEmitter } from '@angular/core';
-import { NgbTimeStruct, NgbPopoverConfig, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
-import { DatePipe } from '@angular/common';
+import { Component, Input, Output, EventEmitter, Injectable } from '@angular/core';
+import { NgbTimeStruct, NgbPopoverConfig, NgbDateStruct, NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
import { DateTimeModel } from '@grid-failure-information-app/shared/models/date-time.model';
-import { noop } from 'rxjs';
+
+@Injectable()
+export class CustomDatepickerI18n extends NgbDatepickerI18n {
+ private readonly _I18N_VALUES = {
+ weekdays: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
+ months: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+ };
+ constructor() {
+ super();
+ }
+
+ public getWeekdayShortName(weekday: number): string {
+ return this._I18N_VALUES.weekdays[weekday - 1];
+ }
+ public getMonthShortName(month: number): string {
+ return this._I18N_VALUES.months[month - 1];
+ }
+ public getMonthFullName(month: number): string {
+ return this.getMonthShortName(month);
+ }
+
+ public getDayAriaLabel(date: NgbDateStruct): string {
+ return `${date.day}-${date.month}-${date.year}`;
+ }
+}
@Component({
selector: 'app-date-time-picker',
templateUrl: './date-time-picker.component.html',
styleUrls: ['./date-time-picker.component.scss'],
- providers: [
- DatePipe,
- {
- provide: NG_VALUE_ACCESSOR,
- useExisting: forwardRef(() => DateTimePickerComponent),
- multi: true,
- },
- ],
+ providers: [{ provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }],
})
-export class DateTimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit {
+export class DateTimePickerComponent {
+ model: NgbDateStruct;
@Input()
- dateString: string;
-
+ public set dateString(dateString: string) {
+ if (!this.dateTime || !dateString) {
+ this.dateTime = DateTimeModel.fromLocalString(dateString);
+ }
+ }
@Input()
- inputDatetimeFormat: string = 'd/M/d/yyyy HH:mm:ss';
+ public inputDatetimeFormat: string = 'd/M/d/yyyy HH:mm:ss';
@Input()
- hourStep: number = 1;
+ public hourStep: number = 1;
@Input()
- minuteStep: number = 1;
+ public minuteStep: number = 1;
@Input()
- secondStep: number = 30;
+ public secondStep: number = 30;
@Input()
- seconds: boolean = false;
-
+ public seconds: boolean = false;
@Input()
- disabled: boolean = false;
+ public disabled: boolean = false;
- @Output() dateTimeEvent: EventEmitter<any> = new EventEmitter();
+ @Output()
+ public dateTimeChange: EventEmitter<any> = new EventEmitter();
- public showTimePickerToggle: boolean = false;
+ public dateTime: DateTimeModel;
- public datetime: DateTimeModel = new DateTimeModel();
- public firstTimeAssign: boolean = true;
-
- @ViewChild(NgbPopover, { static: false })
- public popover: NgbPopover;
-
- private onTouched: () => void = noop;
- private onChange: (_: any) => void = noop;
-
- constructor(private config: NgbPopoverConfig) {
- config.autoClose = 'outside';
- config.placement = 'auto';
+ constructor(private _config: NgbPopoverConfig) {
+ this._config.autoClose = 'outside';
+ this._config.placement = 'auto';
}
- ngOnInit(): void {
- this.writeValue(this.dateString);
- }
-
- public ngAfterViewInit(): void {
- this.popover.hidden.subscribe($event => {
- this.showTimePickerToggle = false;
- });
- }
-
- public writeValue(newModel: string) {
- if (newModel) {
- this.datetime = DateTimeModel.fromLocalString(newModel);
- this.setDateStringModel();
+ public changeDate(ngbDate: NgbDateStruct): void {
+ if (!this.dateTime) {
+ this.dateTime = new DateTimeModel(ngbDate);
} else {
- this.datetime = new DateTimeModel();
- }
- }
-
- public registerOnChange(fn: any): void {
- this.onChange = fn;
- }
-
- public registerOnTouched(fn: any): void {
- this.onTouched = fn;
- }
-
- public toggleDateTimeState($event) {
- this.showTimePickerToggle = !this.showTimePickerToggle;
- $event.stopPropagation();
- }
-
- public changeDate($event: any) {
- if ($event.year) {
- $event = `${$event.year}-${$event.month}-${$event.day}`;
+ this.dateTime.year = ngbDate.year;
+ this.dateTime.month = ngbDate.month;
+ this.dateTime.day = ngbDate.day;
}
- const date = DateTimeModel.fromLocalString($event);
-
- if (!date) {
- return;
- }
-
- this.datetime.year = date.year;
- this.datetime.month = date.month;
- this.datetime.day = date.day;
-
- this.setDateStringModel();
+ this.dateTimeChange.emit(this.dateTime);
}
- public changeTime(event: NgbTimeStruct) {
- this.datetime.hour = event.hour;
- this.datetime.minute = event.minute;
- this.datetime.second = event.second;
+ public changeTime(ngbDate: NgbTimeStruct): void {
+ this.dateTime.hour = ngbDate.hour;
+ this.dateTime.minute = ngbDate.minute;
+ this.dateTime.second = ngbDate.second;
- this.setDateStringModel();
- }
-
- public setDateStringModel() {
- this.dateString = this.datetime.toString();
-
- if (!this.firstTimeAssign) {
- this.onChange(this.dateString);
- this.dateTimeEvent.emit(this.datetime);
- } else {
- // Skip very first assignment to null done by Angular
- if (this.dateString !== null) {
- this.firstTimeAssign = false;
- }
- }
+ this.dateTimeChange.emit(this.dateTime);
}
}
diff --git a/projects/grid-failure-information-app/src/app/shared/models/date-time.model.ts b/projects/grid-failure-information-app/src/app/shared/models/date-time.model.ts
index 355ec16..04b5152 100644
--- a/projects/grid-failure-information-app/src/app/shared/models/date-time.model.ts
+++ b/projects/grid-failure-information-app/src/app/shared/models/date-time.model.ts
@@ -15,28 +15,24 @@
export interface NgbDateTimeStruct extends NgbDateStruct, NgbTimeStruct {}
export class DateTimeModel implements NgbDateTimeStruct {
- year: number;
- month: number;
- day: number;
- hour: number;
- minute: number;
- second: number;
+ year: number = 0;
+ month: number = 0;
+ day: number = 0;
+ hour: number = 0;
+ minute: number = 0;
+ second: number = 0;
- timeZoneOffset: number;
+ timeZoneOffset: number = 0;
public constructor(init?: Partial<DateTimeModel>) {
Object.assign(this, init);
}
public static fromLocalString(dateString: string): DateTimeModel {
- const date = new Date(dateString);
-
- const isValidDate = !isNaN(date.valueOf());
-
- if (!dateString || !isValidDate) {
+ const date = !!dateString ? new Date(dateString) : null;
+ if (!date) {
return null;
}
-
return new DateTimeModel({
year: date.getFullYear(),
month: date.getMonth() + 1,
diff --git a/proxy.conf-integration.json b/proxy.conf-integration.json
index 4539591..a45f017 100644
--- a/proxy.conf-integration.json
+++ b/proxy.conf-integration.json
@@ -1,6 +1,6 @@
{
"/api": {
- "target": "http://entdockergss:9166/",
+ "target": "http://entdockergss:9165/",
"secure": false,
"pathRewrite": {
"^/api": ""
