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

191 lines
4.9 KiB
HTML

<div i18n >
{{"dates.title"|translate}}
</div >
<div >
<label for="multi_hours" >
<span >
{{"dates.hours_different"|translate}}
</span >
<select
[(ngModel)]="config.allowSeveralHours"
id="multi_hours"
name="multi_hours"
>
<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
(click)="addDate()"
class="btn btn--primary"
id="add_date_button"
>
<i class='fa fa-plus' ></i >
{{"dates.add"|translate}}
</button >
<button
(click)="showDateInterval = !showDateInterval "
[ngClass]="{active: showDateInterval}"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class='fa fa-clock-o' ></i >
{{"dates.add_interval"|translate}}
</button >
<button
(click)="emptyAll()"
class="btn btn--warning"
id="empty_button"
>
<i class='fa fa-trash' ></i >
{{"dates.empty"|translate}}
</button >
<section
*ngIf="showDateInterval"
class="date-interval " >
<!-- TODO à mettre en popup-->
<hr >
<h2 > {{"dates.add_interval"|translate}}</h2 >
<p >
{{"dates.interval_propose"|translate}}
<input
(change)="countDays()"
[(ngModel)]="startDateInterval"
type="date" >
{{"dates.interval_span"|translate}}
<input
(change)="countDays()"
[(ngModel)]="endDateInterval"
type="date" >
<br >
</p >
<button
(click)="addIntervalOfDates()"
class="btn btn-block btn--primary" >
<i class='fa fa-plus' ></i >
{{"dates.interval_button"|translate}}
{{intervalDays}}
{{"dates.interval_button_dates"|translate}}
</button >
<hr >
</section >
<div class="dates-list " >
<div class='title' >
<span class="count-dates" >
{{config.timeList.length}}
</span >
<span class="count-dates-txt " >
{{"dates.count_time"|translate}}
(pour chaque jour)
</span >
<button
(click)="addTime()"
*ngIf="config.allowSeveralHours=='false'"
class="btn btn--primary pull-right"
id="add_time_button"
>
<i class='fa fa-plus' ></i >
{{"dates.add_time"|translate}}
</button >
</div >
<div
*ngIf="'false'==config.allowSeveralHours"
class="identical-dates"
>
<div
*ngFor="let choice of config.timeList; index as id"
class="time-choice"
>
<label for='timeChoices_{{id}}' >
<i class='fa fa-clock-o' ></i >
</label >
<input
[(ngModel)]="choice.literal"
name="timeChoices_{{id}}"
type="name"
id='timeChoices_{{id}}'
>
<button
(click)="config.timeList.splice(id, 1)"
class="btn btn-warning" ><i class="fa fa-times" ></i >
</button >
</div >
</div >
<hr >
<span class="count-dates title" >
{{config.dateList.length}}
</span >
<span >
{{"dates.count_dates"|translate}}
</span >
<div
*ngFor="let choice of config.dateList; index as id"
class="date-choice"
>
<input
[(ngModel)]="choice.literal"
name="dateChoices_{{id}}"
type="date"
>
<pre class='debug padded warning' >
choice.literal :
{{choice.literal|json}}
</pre >
<button
(click)="config.dateList.splice(id, 1)"
class="btn btn-warning"
><i class="fa fa-times" ></i >
</button >
<button
(click)="addTimeToDate(choice, id)"
*ngIf="config.allowSeveralHours=='true'"
class="btn btn--primary"
>
{{"dates.add_time"|translate}}
</button >
<div
*ngIf="'true'==config.allowSeveralHours"
class="several-times"
>
<div
*ngFor="let time of choice.timeList; index as idTime"
class="time-choice"
>
<input
[(ngModel)]="time.literal"
name="dateTime_{{id}}_Choices_{{idTime}}"
type="name"
>
<button
(click)="choice.timeList.splice(idTime, 1)"
class="btn btn-warning"
><i class="fa fa-times" ></i >
</button >
</div >
</div >
</div >
</div >
<a
[routerLink]="'/step/end'"
class="btn btn--full btn--primary"
>
C'est parfait!
</a >
<a
[routerLink]="'/step/home'"
class="prev"
>
Retour
</a >