109 lines
5.0 KiB
HTML
109 lines
5.0 KiB
HTML
<h2 mat-dialog-title>{{ isEditMode ? ('editCalendar' | translate) : ('addCalendar' | translate) }}</h2>
|
|
<mat-dialog-content class="form-container">
|
|
<mat-checkbox [(ngModel)]="isRemoteAvailable">
|
|
{{ 'remoteAvailability' | translate }}
|
|
</mat-checkbox>
|
|
|
|
<mat-divider style="margin: 10px 0;"></mat-divider>
|
|
|
|
<div *ngIf="!isRemoteAvailable" class="form-group">
|
|
<mat-label>{{ 'selectWeekDays' | translate }}</mat-label>
|
|
<p class="custom-text"> (Los dias y horas seleccionados se marcarán como aula no disponible para remote pc.) </p>
|
|
<div class="weekday-toggle-group full-width">
|
|
<button
|
|
*ngFor="let day of weekDays"
|
|
type="button"
|
|
class="weekday-toggle"
|
|
[class.selected]="busyWeekDays[day]"
|
|
(click)="busyWeekDays[day] = !busyWeekDays[day]">
|
|
{{ day.slice(0, 3) }}
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div class="time-fields">
|
|
<mat-form-field appearance="fill" class="time-field">
|
|
<mat-label>{{ 'startTime' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="busyFromHour" type="time" placeholder="{{ 'startTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="time-field">
|
|
<mat-label>{{ 'endTime' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="busyToHour" type="time" placeholder="{{ 'endTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<div class="unavailability-summary" *ngIf="busyFromHour && busyToHour && busyWeekDays && getSelectedDays().length">
|
|
<mat-icon style="width: 50px;" color="warn">block</mat-icon>
|
|
<span class="summary-text">
|
|
El aula estará <strong>no disponible</strong> para Remote PC los días:
|
|
<strong>{{ getSelectedDays().join(', ') }}</strong> de
|
|
<strong>{{ busyFromHour }}</strong> a <strong>{{ busyToHour }}</strong>.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="isRemoteAvailable" class="form-group">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>{{ 'reasonLabel' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="availableReason" placeholder="{{ 'reasonPlaceholder' | translate }}" [required]="isRemoteAvailable">
|
|
<mat-hint>Razón por la cual el aula SI está disponible para su uso en Remote PC</mat-hint>
|
|
</mat-form-field>
|
|
<div class="time-fields">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>{{ 'startDate' | translate }}</mat-label>
|
|
<input matInput [matDatepicker]="picker1" [(ngModel)]="availableFromDate" [required]="isRemoteAvailable">
|
|
<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>{{ 'endDate' | translate }}</mat-label>
|
|
<input matInput [matDatepicker]="picker2" [(ngModel)]="availableToDate" [required]="isRemoteAvailable">
|
|
<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 class="hour-fields">
|
|
<mat-form-field appearance="fill" class="time-field">
|
|
<mat-label>{{ 'startTime' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="busyFromHour" type="time" placeholder="{{ 'startTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="time-field">
|
|
<mat-label>{{ 'endTime' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="busyToHour" type="time" placeholder="{{ 'endTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<div class="availability-summary" *ngIf="availableFromDate && availableToDate">
|
|
<mat-icon color="primary" style="width: 50px;">info</mat-icon>
|
|
<span class="summary-text">
|
|
El aula estará <strong>disponible</strong> para reserva desde el
|
|
<strong>{{ availableFromDate | date:'fullDate' }}</strong> hasta el
|
|
<strong>{{ availableToDate | date:'fullDate' }}</strong>
|
|
<span *ngIf="busyFromHour && busyToHour">
|
|
en el horario de <strong>{{ busyFromHour }}</strong> a <strong>{{ busyToHour }}</strong>.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions class="action-container">
|
|
<button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
|
|
<button
|
|
class="submit-button"
|
|
(click)="submitRule()"
|
|
cdkFocusInitial
|
|
[disabled]="(!isRemoteAvailable && (!busyFromHour || !busyToHour)) || (isRemoteAvailable && (!availableReason || !availableFromDate || !availableToDate))">
|
|
{{ isEditMode ? ('buttonSave' | translate) : ('buttonAdd' | translate) }}
|
|
</button>
|
|
</mat-dialog-actions>
|