funky-framadate-front/src/app/pages/dates/dates.component.html

151 lines
3.8 KiB
HTML

<div i18n>
{{"dates.title"|translate}}
</div>
<div>
<label for="multi_hours">
<span>
{{"dates.hours_different"|translate}}
</span>
<select
name="multi_hours"
id="multi_hours"
[(ngModel)]="config.allowSeveralHours"
>
<option value="true">{{"dates.multiple.different"|translate}}</option>
<option value="false">{{"dates.multiple.identical"|translate}}</option>
</select>
<span i18n>
{{"dates.hours_each_day"|translate}}
</span>
</label>
</div>
<button
class="btn btn-primary"
(click)="addDate()"
id="add_date_button"
>
{{"dates.add"|translate}}
</button>
<button
class="btn btn-primary"
[ngClass]="{active: showDateInterval}"
(click)="showDateInterval = !showDateInterval "
id="toggle_interval_button"
>
{{"dates.add_interval"|translate}}
</button>
<button
class="btn btn-warning"
(click)="emptyAll()"
id="empty_button"
>{{"dates.empty"|translate}}
</button>
<section class="date-interval" *ngIf="showDateInterval">
<!-- TODO à mettre en popup-->
<hr>
<h2> {{"dates.add_interval"|translate}}</h2>
<p>
Je souhaite proposer pour mon sondage toutes les dates entre le
<input type="date" [(ngModel)]="startDateInterval">
({{startDateInterval }})
et le
<input type="date" [(ngModel)]="endDateInterval">
({{endDateInterval }})
</p>
<button class="btn btn-block"
(click)="addIntervalOfDates()">
Ajouter ces {{intervalDays}} dates
</button>
<hr>
</section>
<div class="dates-list">
<span class="count-dates">
{{config.dateList.length}}
</span>
<span class="count-dates-txt">
{{"dates.count_dates"|translate}}
</span>
<button
class="btn btn-primary pull-right"
(click)="addtime()"
id="add_time_button"
*ngIf="config.allowSeveralHours=='false'"
>
{{"dates.addTime"|translate}}
</button>
<div
class="identical-dates"
*ngIf="'false'==config.allowSeveralHours"
>
<div
class="time-choice"
*ngFor="let choice of config.timeList; index as id"
>
<input
type="text"
name="timeChoices_{{id}}"
[(ngModel)]="choice.literal"
>
<button class="btn btn-warning" (click)="config.timeList.splice(id, 1)">X</button>
</div>
</div>
<hr>
<span>
{{"dates.count_dates"|translate}}
</span>
<div
*ngFor="let choice of config.dateList; index as id"
class="date-choice"
>
<input
type="date"
name="dateChoices_{{id}}"
[(ngModel)]="choice.literal"
>
<button
class="btn btn-warning"
(click)="config.dateList.splice(id, 1)"
>X
</button>
<button
*ngIf="config.allowSeveralHours=='true'"
class="btn btn-primary"
(click)="addTimetoDate(choice, id)"
>
{{"dates.add_time"|translate}}
</button>
<div
class="several-times"
*ngIf="'true'==config.allowSeveralHours"
>
<div
class="time-choice"
*ngFor="let time of choice.timeList; index as idTime"
>
<input
type="text"
name="dateTime_{{id}}_Choices_{{idTime}}"
[(ngModel)]="time.literal"
>
<button
class="btn btn-warning"
(click)="choice.timeList.splice(idTime, 1)"
>X
</button>
</div>
</div>
</div>
</div>
<a
[routerLink]="'/step/end'"
class="btn btn-block"
>
C'est parfait!
</a>