| <!-- |
| /******************************************************************************** |
| * Copyright © 2018 Mettenmeier GmbH. |
| * |
| * This program and the accompanying materials are made available under the |
| * terms of the Eclipse Public License v. 2.0 which is available at |
| * http://www.eclipse.org/legal/epl-2.0. |
| * |
| * SPDX-License-Identifier: EPL-2.0 |
| ********************************************************************************/ |
| --> |
| <!-- StandbyDuration Modal --> |
| <ng-template #standbyDurationsModal let-c="close" let-d="dismiss"> |
| <div class="modal-header"> |
| <h4 class="modal-title" id="modal-basic-title">Bereitschaftsdauer hinzufügen</h4> |
| <button type="button" class="close" aria-label="Close" (click)="d('Cross click')" id="modalClose"> |
| <span aria-hidden="true">×</span> |
| </button> |
| </div> |
| <div class="modal-body"> |
| <form class="mt-3" [formGroup]="standbyDurationsForm" novalidate> |
| <div class="row"> |
| <div class="col"> |
| <div class="form-group row d-flex align-items-center h-100"> |
| <label for="user-role" class="col-sm-3 col-form-label">Von</label> |
| <div class="col-sm-9"> |
| <select class="form-control" placeHolder="test" id="user-role" formControlName="validDayFrom" required> |
| <option></option> |
| <option value="1">Montag</option> |
| <option value="2">Dienstag</option> |
| <option value="3">Mittwoch</option> |
| <option value="4">Donnerstag</option> |
| <option value="5">Freitag</option> |
| <option value="6">Samstag</option> |
| <option value="7">Sonntag</option> |
| </select> |
| <ok-error [control]="standbyDurationsForm.controls['validDayFrom']"></ok-error> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <ngb-timepicker formControlName="validFrom" id="durationPickerFrom"></ngb-timepicker> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col"> |
| <div class="form-group row d-flex align-items-center h-100"> |
| <label for="user-role" class="col-sm-3 col-form-label">Bis</label> |
| <div class="col-sm-9"> |
| <select class="form-control" placeHolder="test" id="user-role" formControlName="validDayTo" required> |
| <option></option> |
| <option value="1">Montag</option> |
| <option value="2">Dienstag</option> |
| <option value="3">Mittwoch</option> |
| <option value="4">Donnerstag</option> |
| <option value="5">Freitag</option> |
| <option value="6">Samstag</option> |
| <option value="7">Sonntag</option> |
| </select> |
| <ok-error [control]="standbyDurationsForm.controls['validDayTo']"></ok-error> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <ngb-timepicker formControlName="validTo" id="durationPickerTo"></ngb-timepicker> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col"> |
| <div class="form-check"> |
| <input class="form-check-input" type="checkbox" id="nextUserInNextDuration" formControlName="nextUserInNextDuration"> |
| <label class="form-check-label" for="nextUserInNextDuration"> |
| bei der nächsten Bereitschaftdauer wird der nächste Mitarbeiter verwendet |
| </label> |
| </div> |
| </div> |
| </div> |
| </form> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-success" (click)="saveStandbyDuration()" id="StandbyDurationSave">Speichern</button> |
| <button type="button" class="btn btn-danger" (click)="c()" id="StandbyDurationCancel">Abbrechen</button> |
| </div> |
| </ng-template> |
| <!-- Standbygroup form --> |
| <div class="container-fluid"> |
| <form class="mt-3" [formGroup]="form" novalidate> |
| <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom stick-headlines" |
| *ngIf="!isModal"> |
| <h1 class="h2">Bereitschaftsgruppe</h1> |
| <div class="btn-toolbar mb-2 mb-md-0"> |
| <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-success mr-1" (click)="saveStandbygroup()" |
| id="StandbyGroupSave">Speichern</button> |
| <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-success mr-1" (click)="openCopyDialog()" |
| id="StandbyGroupCopy">Kopieren</button> |
| <button class="btn btn-danger float-right" (click)="close()" id="StandbyGroupCancel">Abbrechen</button> |
| </div> |
| </div> |
| <ngb-accordion #acc="ngbAccordion" activeIds="standbygroupData,regionData,userData,standbyDurationData,branchData,functionData,calendarData"> |
| <!-- DATEN --> |
| <ngb-panel title="Bereitschaftsgruppe" id="standbygroupData"> |
| <ng-template ngbPanelContent> |
| <div class="row"> |
| <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}"> |
| <div class="form-group row"> |
| <label for="title" class="col-sm-3 col-form-label">Titel</label> |
| <div class="col-sm-9"> |
| <input type="text" class="form-control" id="title" placeholder="Titel" formControlName="title" |
| required> |
| <ok-error [control]="form.controls['title']"></ok-error> |
| </div> |
| </div> |
| </div> |
| <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}"> |
| <div class="form-check"> |
| <input class="form-check-input" type="checkbox" id="nextUserInNextCycle" formControlName="nextUserInNextCycle"> |
| <label class="form-check-label" for="nextUserInNextCycle"> |
| beim nächsten Zyklusbeginn wird in der Mitarbeiterliste mit dem nächsten Mitarbeiter gestartet |
| </label> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}"> |
| <div class="form-group row"> |
| <label for="note" class="col-sm-3 col-form-label">Notizen (Hinweise, Informationen)</label> |
| <div class="col-sm-9"> |
| <textarea rows="4" class="form-control textarea" id="note" placeholder="Notizen" cols="50" |
| formControlName="note"></textarea> |
| </div> |
| </div> |
| </div> |
| <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}"> |
| <div class="form-check"> |
| <input class="form-check-input" type="checkbox" id="extendStandbyTime" formControlName="extendStandbyTime"> |
| <label class="form-check-label" for="extendStandbyTime"> |
| An dienstfreien Tagen wird das Ende eines Bereitschaftsdienstes verlängert |
| </label> |
| </div> |
| </div> |
| </div> |
| </ng-template> |
| </ngb-panel> |
| <ngb-panel title="Regionen" id="regionData" *ngIf="!isModal"> |
| <ng-template ngbPanelContent> |
| <div class="row"> |
| <div class="col-md-12"> |
| <ok-picklist-reactive [sourceList]="sourceRegion" [targetList]="targetRegion" headlineSource="Regionen" |
| headlineTarget="ausgewählte Regionen" [sourceListColumnDefs]="sourceColumnDefsRegion" |
| [targetListColumnDefs]="targetColumnDefsRegion" (moveToTargetClicked)="moveToTargetRegion($event)" |
| (moveToSourceClicked)="moveToSourceRegion($event)" id="standbygroupPicklistRegion" embedLocation="standbygroup"> |
| </ok-picklist-reactive> |
| </div> |
| </div> |
| </ng-template> |
| </ngb-panel> |
| <ngb-panel title="Funktionen" id="functionData" *ngIf="!isModal"> |
| <ng-template ngbPanelContent> |
| <div class="row"> |
| <div class="col-md-12"> |
| <ok-picklist-reactive [sourceList]="sourceFunction" [targetList]="targetFunction" headlineSource="Funktionen" |
| headlineTarget="ausgewählte Funktionen" [sourceListColumnDefs]="sourceColumnDefsFunction" |
| [targetListColumnDefs]="targetColumnDefsFunction" (moveToTargetClicked)="moveToTargetFunction($event)" |
| (moveToSourceClicked)="moveToSourceFunction($event)" id="userPicklistFunction" rowSelection="single" |
| [showMultiMoveButtons]="false" embedLocation="standbygroup"> |
| </ok-picklist-reactive> |
| </div> |
| </div> |
| </ng-template> |
| </ngb-panel> |
| <ngb-panel title="Mitarbeiter" id="userData" *ngIf="!isModal"> |
| <ng-template ngbPanelContent> |
| <div class="row"> |
| <div class="col-md-12"> |
| <ok-picklist-reactive [sourceList]="sourceUser" [targetList]="targetUser" headlineSource="Mitarbeiter" |
| headlineTarget="ausgewählte Mitarbeiter" [sourceListColumnDefs]="sourceColumnDefsUser" |
| [targetListColumnDefs]="targetColumnDefsUser" (moveToTargetClicked)="moveToTargetUser($event, 'Verschieben')" |
| (moveToSourceClicked)="moveToSourceUser($event)" (headerActionTargetClickedRight)="moveToTargetUser($event, 'Daten ändern')" |
| headerActionTargetLableRight="Daten ändern" (headerActionTargetClickedLeft)="copyUserToTarget($event)" |
| headerActionTargetLableLeft="Kopieren +1 Jahr" id="standbygroupPicklistUser" embedLocation="standbygroup"> |
| </ok-picklist-reactive> |
| </div> |
| </div> |
| </ng-template> |
| </ngb-panel> |
| <ngb-panel title="Sparten" id="branchData" *ngIf="!isModal"> |
| <ng-template ngbPanelContent> |
| <div class="row"> |
| <div class="col-md-12"> |
| <ok-picklist-reactive [sourceList]="sourceBranch" [targetList]="targetBranch" headlineSource="Sparten" |
| headlineTarget="ausgewählte Sparten" [sourceListColumnDefs]="sourceColumnDefsBranch" |
| [targetListColumnDefs]="targetColumnDefsBranch" (moveToTargetClicked)="moveToTargetBranch($event)" |
| (moveToSourceClicked)="moveToSourceBranch($event)" id="standbygroupPicklistBranch" embedLocation="standbygroup"> |
| </ok-picklist-reactive> |
| </div> |
| </div> |
| </ng-template> |
| </ngb-panel> |
| <ngb-panel title="Kalender" id="calendarData" *ngIf="!isModal"> |
| <ng-template ngbPanelContent> |
| <div class="row"> |
| <div class="col-md-12"> |
| <ok-picklist-reactive [sourceList]="sourceCalendar" [targetList]="targetCalendar" headlineSource="dienstfreie Tage" |
| headlineTarget="abgewählte dienstfreie Tage (Arbeitstage)" [sourceListColumnDefs]="sourceColumnDefsCalendar" |
| [targetListColumnDefs]="targetColumnDefsCalendar" (moveToTargetClicked)="moveToTargetCalendar($event)" |
| (moveToSourceClicked)="moveToSourceCalendar($event)" id="standbygroupPicklistCalendar" embedLocation="standbygroup"> |
| </ok-picklist-reactive> |
| </div> |
| </div> |
| </ng-template> |
| </ngb-panel> |
| <ngb-panel title="Bereitschaftsdauer" id="standbyDurationData" *ngIf="!isModal"> |
| <ng-template ngbPanelContent> |
| <div class="row"> |
| <div class="col-md-12"> |
| <div class="card" *ngFor="let standbyDuration of standbyDurations;let i=index;"> |
| <div class="card-body"> |
| <div class="row"> |
| <div class="col d-flex align-items-center"> |
| <span *ngIf="standbyDuration.nextUserInNextDuration">{{'bei der nächsten Bereitschaftdauer wird |
| der |
| nächste Mitarbeiter verwendet'}} |
| </span> |
| </div> |
| <div class="col d-flex align-items-center"> |
| <span>{{'Von '+getWeekDay(standbyDuration.validDayFrom)+' |
| '+addZero(standbyDuration.validFrom.hour)+':'+addZero(standbyDuration.validFrom.minute)+' |
| Uhr'}} |
| </span> |
| </div> |
| <div class="col d-flex align-items-center"> |
| <span>{{'Bis '+getWeekDay(standbyDuration.validDayTo)+' |
| '+addZero(standbyDuration.validTo.hour)+':'+addZero(standbyDuration.validTo.minute)+' |
| Uhr'}} |
| </span> |
| </div> |
| <div class="col-md-1 d-flex align-items-center"> |
| <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-danger btn-circle btn-lg" |
| (click)="removeDuration(i)" id="removeDuration">-</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="d-flex justify-content-center"> |
| <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-primary btn-circle btn-lg overlap-top" |
| (click)="addDuration()" id="addDuration">+</button> |
| </div> |
| </div> |
| </div> |
| </ng-template> |
| </ngb-panel> |
| </ngb-accordion> |
| <div class="row mt-3 mb-3" *ngIf="isModal"> |
| <div class="col-md-12"> |
| <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-success" (click)="saveStandbygroup()" |
| id="StandbyGroupSave">Speichern</button> |
| <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-success ml-3" (click)="openCopyDialog()" |
| id="StandbyGroupCopy">Kopieren</button> |
| <button class="btn btn-danger float-right" (click)="close()" id="StandbyGroupCancel">Abbrechen</button> |
| </div> |
| </div> |
| </form> |
| </div> |