62 lines
2.6 KiB
HTML
62 lines
2.6 KiB
HTML
<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} calendario</h2>
|
|
<mat-dialog-content class="form-container">
|
|
<mat-slide-toggle [(ngModel)]="isRemoteAvailable" class="example-margin">¿Disponibilidad remoto?</mat-slide-toggle>
|
|
|
|
<div *ngIf="!isRemoteAvailable" class="form-group">
|
|
<mat-label>Selecciona los días de la semana</mat-label>
|
|
<div class="row">
|
|
<div class="col-md-6 checkbox-group">
|
|
<mat-checkbox *ngFor="let day of weekDays.slice(0, (weekDays.length / 2) + 1)" [(ngModel)]="busyWeekDays[day]">
|
|
{{ day }}
|
|
</mat-checkbox>
|
|
</div>
|
|
<div class="col-md-6 checkbox-group ">
|
|
<mat-checkbox *ngFor="let day of weekDays.slice(weekDays.length / 2 + 1 )" [(ngModel)]="busyWeekDays[day]">
|
|
{{ day }}
|
|
</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="time-fields">
|
|
<mat-form-field appearance="fill" class="time-field">
|
|
<mat-label>Hora de inicio</mat-label>
|
|
<input matInput [(ngModel)]="busyFromHour" type="time" placeholder="Selecciona la hora de inicio">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="time-field">
|
|
<mat-label>Hora de fin</mat-label>
|
|
<input matInput [(ngModel)]="busyToHour" type="time" placeholder="Selecciona la hora de fin">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="isRemoteAvailable" class="form-group">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>Razón</mat-label>
|
|
<input matInput [(ngModel)]="availableReason" placeholder="Razon para la excepción">
|
|
</mat-form-field>
|
|
<div class="time-fields">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>Fecha de inicio</mat-label>
|
|
<input matInput [matDatepicker]="picker1" [(ngModel)]="availableFromDate">
|
|
<mat-hint>MM/DD/YYYY</mat-hint>
|
|
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
|
|
<mat-datepicker #picker1></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>Fecha de fin</mat-label>
|
|
<input matInput [matDatepicker]="picker2" [(ngModel)]="availableToDate">
|
|
<mat-hint>MM/DD/YYYY</mat-hint>
|
|
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
|
|
<mat-datepicker #picker2></mat-datepicker>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions align="end">
|
|
<button mat-button (click)="onNoClick()">Cancelar</button>
|
|
<button mat-button (click)="submitRule()" cdkFocusInitial>{{ isEditMode ? 'Guardar' : 'Añadir' }}</button>
|
|
</mat-dialog-actions>
|