112 lines
4.6 KiB
HTML
112 lines
4.6 KiB
HTML
<h2 mat-dialog-title class="dialog-title">
|
|
{{ (data.schedule ? 'editSchedule' : 'createSchedule') | translate }} {{ 'taskSchedule' | translate }}
|
|
</h2>
|
|
|
|
<mat-dialog-content class="dialog-content">
|
|
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="task-form">
|
|
|
|
<mat-form-field appearance="fill" class="w-full">
|
|
<mat-label>{{ 'repetition' | translate }}</mat-label>
|
|
<mat-select formControlName="recurrenceType">
|
|
<mat-option *ngFor="let opt of recurrenceTypes" [value]="opt.value">{{ opt.label }}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="w-full" *ngIf="form.get('recurrenceType')?.value === 'none'">
|
|
<mat-label>{{ 'executionDate' | translate }}</mat-label>
|
|
<input matInput [matDatepicker]="oneTimePicker" formControlName="executionDate">
|
|
<mat-datepicker-toggle matSuffix [for]="oneTimePicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #oneTimePicker></mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="w-full">
|
|
<mat-label>{{ 'executionTime' | translate }}</mat-label>
|
|
<input matInput formControlName="executionTime" placeholder="08:00" type="time">
|
|
<mat-hint>{{ 'timeFormatHint' | translate }}</mat-hint>
|
|
</mat-form-field>
|
|
|
|
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" class="mb-4">
|
|
<label class="section-label">{{ 'weekDaysLabel' | translate }}:</label>
|
|
<div class="weekday-toggle-group">
|
|
<button
|
|
*ngFor="let day of weekDays"
|
|
type="button"
|
|
class="weekday-toggle"
|
|
[class.selected]="selectedDays[day]"
|
|
(click)="toggleDay(day)">
|
|
{{ day.slice(0, 3) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" >
|
|
<label class="section-label">{{ 'monthsLabel' | translate }}:</label>
|
|
<div class="month-toggle-row" *ngFor="let row of monthRows">
|
|
<button
|
|
*ngFor="let month of row"
|
|
type="button"
|
|
class="month-toggle"
|
|
[class.selected]="selectedMonths[month]"
|
|
(click)="toggleMonth(month)">
|
|
{{ month.slice(0, 3) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" class="custom-time" formGroupName="recurrenceDetails">
|
|
<mat-form-field appearance="fill" class="w-half">
|
|
<mat-label>{{ 'startDate' | translate }}</mat-label>
|
|
<input matInput [matDatepicker]="fromPicker" formControlName="initDate">
|
|
<mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #fromPicker></mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="w-half">
|
|
<mat-label>{{ 'endDate' | translate }}</mat-label>
|
|
<input matInput [matDatepicker]="toPicker" formControlName="endDate">
|
|
<mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #toPicker></mat-datepicker>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<mat-checkbox formControlName="enabled" class="enabled-checkbox">
|
|
<mat-icon class="checkbox-icon">power_settings_new</mat-icon>
|
|
{{ 'enableSchedule' | translate }}
|
|
</mat-checkbox>
|
|
|
|
<mat-card *ngIf="summaryText" class="summary-card">
|
|
<mat-card-header>
|
|
<mat-card-title class="summary-title">
|
|
<mat-icon color="primary">info</mat-icon>
|
|
{{ 'scheduleSummaryTitle' | translate }}
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="schedule-summary">
|
|
<div class="summary-item">
|
|
<mat-icon class="summary-icon">schedule</mat-icon>
|
|
<span class="summary-text">{{ summaryText }}</span>
|
|
</div>
|
|
<div class="summary-item" *ngIf="nextExecutionDate">
|
|
<mat-icon class="summary-icon">next_plan</mat-icon>
|
|
<span class="summary-text">{{ 'nextExecution' | translate }}: {{ nextExecutionDate | date:'full' }}</span>
|
|
</div>
|
|
<div class="summary-item" *ngIf="executionCount">
|
|
<mat-icon class="summary-icon">repeat</mat-icon>
|
|
<span class="summary-text">{{ 'willExecuteTimes' | translate:{ count: executionCount } }}</span>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</form>
|
|
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions class="action-container">
|
|
<button class="ordinary-button" (click)="onCancel()">{{ 'buttonCancel' | translate }}</button>
|
|
<button class="submit-button" [disabled]="!form.valid" (click)="onSubmit()">
|
|
<mat-icon>save</mat-icon>
|
|
{{ 'buttonSave' | translate }}
|
|
</button>
|
|
</mat-dialog-actions>
|