[SI-371], [SI-370]: Alignment adapted, create expandables in Detail-View
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..3d5ec86 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
@@ -33,501 +33,506 @@
</div>
<form [ngrxFormState]="gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async">
<div>
- <div class="section">
- <label class="heading">{{ 'GridFailure.SubTitle1' | translate }}</label>
+ <app-expandable [showBodyInitially]="true">
+ <label header>{{ 'GridFailure.SubTitle1' | translate }}</label>
+ <div class="expandable-content" body>
+ <!-- failureClassificationId (temporär) -->
+ <div class="form-group row">
+ <label for="failureClassificationId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.FailureClassificationId' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="failureClassificationId"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassificationId']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
- <!-- failureClassificationId (temporär) -->
- <div class="form-group row">
- <label for="failureClassificationId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.FailureClassificationId' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="failureClassificationId"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassificationId']"
- autocomplete="off"
- />
+ <!-- failureClassification -->
+ <div class="form-group row">
+ <label for="failureClassification" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureClassification' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="failureClassification"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassification']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- failureTypeId temporär -->
+ <div class="form-group row">
+ <label for="failureTypeId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.FailureTypeId' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="failureTypeId"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureTypeId']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- failureType -->
+ <div class="form-group row">
+ <label for="failureType" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureType' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="failureType"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureType']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- responsibility -->
+ <div class="form-group row">
+ <label for="responsibility" class="col-sm-2 col-form-label">{{ 'GridFailure.Responsibility' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="responsibility"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['responsibility']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- internExtern -->
+ <div class="form-group row">
+ <label for="internExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.InternExtern' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="internExtern"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internExtern']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- statusInternId (temporär) -->
+ <div class="form-group row">
+ <label for="statusInternId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.StatusInternId' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="statusInternId"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusInternId']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- statusIntern -->
+ <div class="form-group row">
+ <label for="statusIntern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusIntern' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="statusIntern"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusIntern']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- statusExternId (temporär) -->
+ <div class="form-group row">
+ <label for="statusExternId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.StatusExternId' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="statusExternId"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExternId']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- statusExtern -->
+ <div class="form-group row">
+ <label for="statusExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusExtern' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="statusExtern"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExtern']"
+ autocomplete="off"
+ />
+ </div>
</div>
</div>
+ </app-expandable>
- <!-- failureClassification -->
- <div class="form-group row">
- <label for="failureClassification" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureClassification' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="failureClassification"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassification']"
- autocomplete="off"
- />
+ <app-expandable [showBodyInitially]="true">
+ <label header>{{ 'GridFailure.SubTitle2' | translate }}</label>
+ <div class="expandable-content" body>
+ <!-- branchId temporär -->
+ <div class="form-group row">
+ <label for="branchId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.BranchId' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="branchId"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branchId']"
+ autocomplete="off"
+ />
+ </div>
</div>
- </div>
- <!-- failureTypeId temporär -->
- <div class="form-group row">
- <label for="failureTypeId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.FailureTypeId' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="failureTypeId"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureTypeId']"
- autocomplete="off"
- />
+ <!-- branch -->
+ <div class="form-group row">
+ <label for="branch" class="col-sm-2 col-form-label">{{ 'GridFailure.Branch' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="branch"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branch']"
+ autocomplete="off"
+ />
+ </div>
</div>
- </div>
- <!-- failureType -->
- <div class="form-group row">
- <label for="failureType" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureType' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="failureType"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureType']"
- autocomplete="off"
- />
+ <!-- voltageLevel -->
+ <div class="form-group row">
+ <label for="voltageLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.VoltageLevel' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="voltageLevel"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['voltageLevel']"
+ autocomplete="off"
+ />
+ </div>
</div>
- </div>
- <!-- responsibility -->
- <div class="form-group row">
- <label for="responsibility" class="col-sm-2 col-form-label">{{ 'GridFailure.Responsibility' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="responsibility"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['responsibility']"
- autocomplete="off"
- />
+ <!-- pressureLevel -->
+ <div class="form-group row">
+ <label for="pressureLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.PressureLevel' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="pressureLevel"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['pressureLevel']"
+ autocomplete="off"
+ />
+ </div>
</div>
- </div>
- <!-- internExtern -->
- <div class="form-group row">
- <label for="internExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.InternExtern' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="internExtern"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internExtern']"
- autocomplete="off"
- />
+ <div class="form-group row">
+ <label for="failureBegin" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureBegin' | translate }}</label>
+ <div class="input-group col-sm-4">
+ <div class="input-group-prepend">
+ <app-date-time-picker
+ (dateTimeEvent)="setGridFailureDateTime($event, 'failureBegin')"
+ [dateString]="failureBeginDateTime"
+ [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+ [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+ ></app-date-time-picker>
+ </div>
+
+ <input
+ required
+ class="form-control editable"
+ type="text"
+ placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
+ id="failureBegin"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureBegin']"
+ [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
+ [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+ readonly
+ />
+ <div class="input-group-append">
+ <button
+ class="btn btn-outline-primary calendar"
+ (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureBegin)"
+ type="button"
+ [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+ [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+ >
+ <em class="fa fa-times-circle" aria-hidden="true"></em>
+ </button>
+ </div>
+ </div>
</div>
- </div>
- <!-- statusInternId (temporär) -->
- <div class="form-group row">
- <label for="statusInternId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.StatusInternId' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="statusInternId"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusInternId']"
- autocomplete="off"
- />
+ <!-- failureEndPlanned -->
+ <div class="form-group row">
+ <label for="failureEndPlanned" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndPlanned' | translate }}</label>
+ <div class="input-group col-sm-4">
+ <div class="input-group-prepend">
+ <app-date-time-picker
+ (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndPlanned')"
+ [dateString]="failureEndPlannedDateTime"
+ [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+ [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+ ></app-date-time-picker>
+ </div>
+
+ <input
+ class="form-control editable"
+ type="text"
+ placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
+ id="failureEndPlanned"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndPlanned']"
+ [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
+ [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+ readonly
+ />
+ <div class="input-group-append">
+ <button
+ class="btn btn-outline-primary calendar"
+ (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndPlanned)"
+ type="button"
+ [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+ [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+ >
+ <em class="fa fa-times-circle" aria-hidden="true"></em>
+ </button>
+ </div>
+ </div>
</div>
- </div>
- <!-- statusIntern -->
- <div class="form-group row">
- <label for="statusIntern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusIntern' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="statusIntern"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusIntern']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- statusExternId (temporär) -->
- <div class="form-group row">
- <label for="statusExternId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.StatusExternId' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="statusExternId"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExternId']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- statusExtern -->
- <div class="form-group row">
- <label for="statusExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusExtern' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="statusExtern"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExtern']"
- autocomplete="off"
- />
- </div>
- </div>
- </div>
-
- <div class="section">
- <label class="heading">{{ 'GridFailure.SubTitle2' | translate }}</label>
-
- <!-- branchId temporär -->
- <div class="form-group row">
- <label for="branchId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.BranchId' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="branchId"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branchId']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- branch -->
- <div class="form-group row">
- <label for="branch" class="col-sm-2 col-form-label">{{ 'GridFailure.Branch' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="branch"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branch']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- voltageLevel -->
- <div class="form-group row">
- <label for="voltageLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.VoltageLevel' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="voltageLevel"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['voltageLevel']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- pressureLevel -->
- <div class="form-group row">
- <label for="pressureLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.PressureLevel' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="pressureLevel"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['pressureLevel']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- failureBegin -->
- <div class="form-group row">
- <label for="failureBegin" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureBegin' | translate }}</label>
- <div class="input-group col-sm-4">
- <div class="input-group-prepend">
+ <!-- failureEndResupplied -->
+ <div class="form-group row">
+ <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, 'failureBegin')"
- [dateString]="failureBeginDateTime"
+ (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndResupplied')"
+ [dateString]="failureEndResuppliedDateTime"
[disabled]="!gridFailureDetailsSandbox.saveEnabled"
[class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
></app-date-time-picker>
- </div>
-
- <input
- required
- class="form-control editable"
- type="text"
- placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
- id="failureBegin"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureBegin']"
- [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
- [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
- readonly
- />
- <div class="input-group-append">
- <button
- class="btn btn-outline-primary calendar"
- (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureBegin)"
- type="button"
- [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+ <input
+ class="form-control editable"
+ type="text"
+ placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
+ id="failureEndResupplied"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndResupplied']"
+ [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
[class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
- >
- <em class="fa fa-times-circle" aria-hidden="true"></em>
- </button>
+ readonly
+ />
+ <div class="input-group-append">
+ <button
+ class="btn btn-outline-primary calendar"
+ (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndResupplied)"
+ type="button"
+ [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+ [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+ >
+ <em class="fa fa-times-circle" aria-hidden="true"></em>
+ </button>
+ </div>
+ </div>
+ </div>
+
+ <!-- probableReason -->
+ <div class="form-group row">
+ <label for="probableReason" class="col-sm-2 col-form-label">{{ 'GridFailure.ProbableReason' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="probableReason"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['probableReason']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- internalRemark -->
+ <div class="form-group row">
+ <label for="internalRemark" class="col-sm-2 col-form-label">{{ 'GridFailure.InternalRemark' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="internalRemark"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internalRemark']"
+ autocomplete="off"
+ />
</div>
</div>
</div>
+ </app-expandable>
- <!-- failureEndPlanned -->
- <div class="form-group row">
- <label for="failureEndPlanned" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndPlanned' | translate }}</label>
- <div class="input-group col-sm-4">
- <div class="input-group-prepend">
- <app-date-time-picker
- (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndPlanned')"
- [dateString]="failureEndPlannedDateTime"
- [disabled]="!gridFailureDetailsSandbox.saveEnabled"
- [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
- ></app-date-time-picker>
+ <app-expandable [showBodyInitially]="true">
+ <label header>{{ 'GridFailure.SubTitle3' | translate }}</label>
+
+ <div class="expandable-content" body>
+ <!-- postcode -->
+ <div class="form-group row">
+ <label for="postcode" class="col-sm-2 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="postcode"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['postcode']"
+ autocomplete="off"
+ />
</div>
+ </div>
- <input
- class="form-control editable"
- type="text"
- placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
- id="failureEndPlanned"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndPlanned']"
- [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
- [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
- readonly
- />
- <div class="input-group-append">
- <button
- class="btn btn-outline-primary calendar"
- (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndPlanned)"
- type="button"
- [disabled]="!gridFailureDetailsSandbox.saveEnabled"
- [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
- >
- <em class="fa fa-times-circle" aria-hidden="true"></em>
- </button>
+ <!-- city -->
+ <div class="form-group row">
+ <label for="city" class="col-sm-2 col-form-label">{{ 'GridFailure.City' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="city"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['city']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- district -->
+ <div class="form-group row">
+ <label for="district" class="col-sm-2 col-form-label">{{ 'GridFailure.District' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="district"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['district']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- street -->
+ <div class="form-group row">
+ <label for="street" class="col-sm-2 col-form-label">{{ 'GridFailure.Street' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="street"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['street']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- housenumber -->
+ <div class="form-group row">
+ <label for="housenumber" class="col-sm-2 col-form-label">{{ 'GridFailure.Housenumber' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="housenumber"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['housenumber']"
+ autocomplete="off"
+ />
</div>
</div>
</div>
+ </app-expandable>
- <!-- failureEndResupplied -->
- <div class="form-group row">
- <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"
- [disabled]="!gridFailureDetailsSandbox.saveEnabled"
- [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
- ></app-date-time-picker>
- <input
- class="form-control editable"
- type="text"
- placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
- id="failureEndResupplied"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndResupplied']"
- [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
- [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
- readonly
- />
- <div class="input-group-append">
- <button
- class="btn btn-outline-primary calendar"
- (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndResupplied)"
- type="button"
- [disabled]="!gridFailureDetailsSandbox.saveEnabled"
- [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
- >
- <em class="fa fa-times-circle" aria-hidden="true"></em>
- </button>
+ <app-expandable [showBodyInitially]="true">
+ <label header>{{ 'GridFailure.SubTitle4' | translate }}</label>
+ <div class="expandable-content" body>
+ <!-- stationDescription -->
+ <div class="form-group row">
+ <label for="stationDescription" class="col-sm-2 col-form-label">{{ 'GridFailure.StationDescription' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="stationDescription"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationDescription']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- stationCoords -->
+ <div class="form-group row">
+ <label for="stationCoords" class="col-sm-2 col-form-label">{{ 'GridFailure.StationCoords' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="stationCoords"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationCoords']"
+ autocomplete="off"
+ />
+ </div>
+ </div>
+
+ <!-- radius -->
+ <div class="form-group row">
+ <label for="radius" class="col-sm-2 col-form-label">{{ 'GridFailure.Radius' | translate }}</label>
+ <div class="col-sm-4">
+ <input
+ required
+ type="text"
+ maxlength="255"
+ class="form-control"
+ id="radius"
+ [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['radius']"
+ autocomplete="off"
+ />
</div>
</div>
</div>
-
- <!-- probableReason -->
- <div class="form-group row">
- <label for="probableReason" class="col-sm-2 col-form-label">{{ 'GridFailure.ProbableReason' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="probableReason"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['probableReason']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- internalRemark -->
- <div class="form-group row">
- <label for="internalRemark" class="col-sm-2 col-form-label">{{ 'GridFailure.InternalRemark' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="internalRemark"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internalRemark']"
- autocomplete="off"
- />
- </div>
- </div>
- </div>
-
- <div class="section">
- <label class="heading">{{ 'GridFailure.SubTitle3' | translate }}</label>
- <!-- postcode -->
- <div class="form-group row">
- <label for="postcode" class="col-sm-2 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="postcode"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['postcode']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- city -->
- <div class="form-group row">
- <label for="city" class="col-sm-2 col-form-label">{{ 'GridFailure.City' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="city"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['city']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- district -->
- <div class="form-group row">
- <label for="district" class="col-sm-2 col-form-label">{{ 'GridFailure.District' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="district"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['district']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- street -->
- <div class="form-group row">
- <label for="street" class="col-sm-2 col-form-label">{{ 'GridFailure.Street' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="street"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['street']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- housenumber -->
- <div class="form-group row">
- <label for="housenumber" class="col-sm-2 col-form-label">{{ 'GridFailure.Housenumber' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="housenumber"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['housenumber']"
- autocomplete="off"
- />
- </div>
- </div>
- </div>
-
- <div class="section">
- <label class="heading">{{ 'GridFailure.SubTitle4' | translate }}</label>
-
- <!-- stationDescription -->
- <div class="form-group row">
- <label for="stationDescription" class="col-sm-2 col-form-label">{{ 'GridFailure.StationDescription' | translate }}</label>
- <div class="col-sm-4">
- <input
- type="text"
- maxlength="255"
- class="form-control"
- id="stationDescription"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationDescription']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- stationCoords -->
- <div class="form-group row">
- <label for="stationCoords" class="col-sm-2 col-form-label">{{ 'GridFailure.StationCoords' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="stationCoords"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationCoords']"
- autocomplete="off"
- />
- </div>
- </div>
-
- <!-- radius -->
- <div class="form-group row">
- <label for="radius" class="col-sm-2 col-form-label">{{ 'GridFailure.Radius' | translate }}</label>
- <div class="col-sm-4">
- <input
- required
- type="text"
- maxlength="255"
- class="form-control"
- id="radius"
- [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['radius']"
- autocomplete="off"
- />
- </div>
- </div>
- </div>
+ </app-expandable>
<!-- buttons -->
<div class="row justify-content-between">
@@ -535,12 +540,12 @@
<button
*ngIf="gridFailureDetailsSandbox.saveEnabled"
type="button"
- class="btn btn-success person-buttons"
+ class="btn btn-success person-buttons div-button"
(click)="gridFailureDetailsSandbox.saveGridFailure()"
>
{{ 'SaveBtn' | translate }}
</button>
- <button type="button" class="btn btn-primary person-buttons cancel-button" (click)="gridFailureDetailsSandbox.cancel()">
+ <button type="button" class="btn btn-primary person-buttons div-button" (click)="gridFailureDetailsSandbox.cancel()">
{{ 'CancelBtn' | translate }}
</button>
</div>
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
index 8840f19..bea6bf8 100644
--- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
+++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
@@ -43,7 +43,7 @@
padding-left: 16px;
width: 247px;
}
-.cancel-button {
+.div-button {
margin-left: 15px;
}
.editable {
@@ -57,3 +57,7 @@
.isDisabled {
background-color: rgb(233, 236, 239);
}
+
+.expandable-content {
+ padding: 20px 0px 20px 35px;
+}
diff --git a/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.html b/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.html
index d952ee5..9e44f45 100644
--- a/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.html
+++ b/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.html
@@ -12,17 +12,17 @@
********************************************************************************/ -->
<div class="panel panel-default" style="width:100%;">
<div class="panel-heading">
- <h4 class="panel-title">
- <a data-toggle="collapse">
- <em *ngIf="isExpandedStatus" class="fa fa-chevron-up" aria-hidden="true"></em>
- <em *ngIf="!isExpandedStatus" class="fa fa-chevron-down" aria-hidden="true"></em>
- </a>
- <a data-toggle="collapse" href="#{{ collapseId }}" (click)="isExpandedStatus = !isExpandedStatus">
+ <a data-toggle="collapse" style="width: 100%;" href="#{{ collapseId }}" (click)="isExpandedStatus = !isExpandedStatus">
+ <h4 class="panel-title">
+ <span>
+ <em class="fa" [ngClass]="isExpandedStatus ? 'fa-chevron-up' : 'fa-chevron-down'"></em>
+ </span>
+
<ng-content select="[header]"></ng-content>
- </a>
- </h4>
+ </h4>
+ </a>
</div>
- <div *ngIf="isExpandedStatus" id="{{ collapseId }}" class="collapse5 panel-collapse collapse in" [ngClass]="{ in: !isStatusCollapsed }">
+ <div id="{{ collapseId }}" class="collapse5 {{ showBody }} panel-collapse collapse in">
<ng-content class="bodyContent" select="[body]"></ng-content>
</div>
</div>
diff --git a/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.ts b/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.ts
index 56dbe03..daefb8f 100644
--- a/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.ts
+++ b/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.ts
@@ -11,21 +11,32 @@
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/
import { Component } from '@angular/core';
+import { OnInit, Input } from '@angular/core';
@Component({
selector: 'app-expandable',
templateUrl: './expandable.component.html',
styleUrls: ['./expandable.component.scss'],
})
-export class ExpandableComponent {
+export class ExpandableComponent implements OnInit {
+ @Input()
+ public showBodyInitially: boolean = false;
+
static count: number = 0;
- public isStatusCollapsed = true;
public isExpandedStatus = false;
public collapseId: string = null;
+ public showBody: string = null;
constructor() {
this.collapseId = 'collapse' + ExpandableComponent.count;
ExpandableComponent.count++;
}
+
+ ngOnInit() {
+ if (this.showBodyInitially) {
+ this.showBody = 'show';
+ this.isExpandedStatus = true;
+ }
+ }
}
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": ""
