funky-framadate-front/src/app/features/administration/form/date-views/date-views.component.html

77 lines
2.4 KiB
HTML

<button class="btn btn--primary" (click)="pollService.addChoice()">
{{ 'dates.add' | translate }}
</button>
<div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
<input
[(ngModel)]="choice.date_object"
name="dateChoices_{{ id }}"
id="dateChoices_{{ id }}"
useValueAsDate
type="date"
/>
<button (click)="pollService.dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button
(click)="pollService.addTimeToDate(choice, id)"
*ngIf="'true' === pollService.allowSeveralHours"
class="btn btn--primary"
>
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="'true' === pollService.allowSeveralHours" class="several-times">
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
<input
[(ngModel)]="timeItem.literal"
name="dateTime_{{ id }}_Choices_{{ idTime }}"
id="dateTime_{{ id }}_Choices_{{ idTime }}"
type="text"
/>
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<button
(click)="pollService.showDateInterval = !pollService.showDateInterval"
[ngClass]="{ active: pollService.showDateInterval }"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class="fa fa-clock-o" aria-hidden="true"></i>
{{ 'dates.add_interval' | translate }}
</button>
<section *ngIf="pollService.showDateInterval" class="date-interval form-row">
<h2>{{ 'dates.add_interval' | translate }}</h2>
<div class="columns">
<div class="column">
{{ 'dates.interval_propose' | translate }}
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input
id="start_interval"
(change)="pollService.countDays()"
formControlName="startDateInterval"
type="date"
/>
</div>
</div>
<div class="columns">
<div class="column">
{{ 'dates.interval_span' | translate }}
</div>
<div class="column">
<label for="end_interval" class="hidden">end</label>
<input id="end_interval" formControlName="endDateInterval" type="date" />
</div>
</div>
<button (click)="pollService.addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ pollService.intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</section>