131 lines
4.0 KiB
HTML

<mat-card class="confirm-card mat-elevation-z">
<mat-card-header>
<mat-card-title>
예약 발송
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div fxLayout="row">
<div fxFlex="60%">
<div fxLayout="column">
<div fxFlexFill>
<ucap-pick-date
[initSelected]="selectedDate"
(selected)="onSelectedDate($event)"
></ucap-pick-date>
</div>
<div fxFlex="30px" style="margin-top: 30px;">
<span flFlex="1 1 auto"></span>
<span style="width: 100px;">
<ucap-pick-time
[hour]="selectedDate.hour()"
[hourStep]="hourStep"
[minute]="selectedDate.minute()"
[minuteStep]="minuteStep"
(hourSelected)="onHourSelected($event)"
(minuteSelected)="onMinuteSelected($event)"
>
</ucap-pick-time>
</span>
<span flFlex="1 1 auto"></span>
</div>
</div>
</div>
<div fxFlex="40%" style="margin-left: 30px;">
<div fxLayout="column">
<div fxFlex="40px" style="margin-top: 30px;">
<span flFlexFill style="font-size: 22px;">
{{ selectedDate.format('MMM DD YYYY, HH:mm') }}
</span>
</div>
<div fxFlexFill>
<mat-list role="list">
<mat-list-item role="listitem">
<button
mat-stroked-button
class="preset-button"
(click)="onClickPresetHour(1)"
>
1시간 뒤
</button>
</mat-list-item>
<mat-list-item role="listitem">
<button
mat-stroked-button
class="preset-button"
(click)="onClickPresetHour(2)"
>
2시간 뒤
</button>
</mat-list-item>
<mat-list-item role="listitem">
<button
mat-stroked-button
class="preset-button"
(click)="onClickPresetTommorowMorning()"
>
내일 아침
</button>
</mat-list-item>
<mat-list-item role="listitem">
<button
mat-stroked-button
class="preset-button"
(click)="onClickPresetTommorowAfternoon()"
>
내일 오후
</button>
</mat-list-item>
<mat-list-item role="listitem">
<button
mat-stroked-button
class="preset-button"
(click)="onClickPresetDay(7)"
>
일주일 뒤
</button>
</mat-list-item>
<mat-list-item role="listitem">
<button
mat-stroked-button
class="preset-button"
(click)="onClickPresetDay(30)"
>
한달 뒤
</button>
</mat-list-item>
</mat-list>
</div>
</div>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<div class="actions-container">
<div class="actions-message">
<span *ngIf="dateIsToEarly">
현재 시각으로부터 30분 이후로만 설정 가능합니다.
</span>
</div>
<div class="actions-spacer"></div>
<div class="actions">
<button
mat-stroked-button
(click)="onClickCancel()"
class="mat-primary"
>
취소
</button>
<button
mat-stroked-button
[disabled]="dateIsToEarly"
(click)="onClickSend()"
class="mat-primary"
>
예약 발송
</button>
</div>
</div>
</mat-card-actions>
</mat-card>