framadate-responsive/src/app/pages/dates/dates.component.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"
>
    {{"dates.add"|translate}}
</button >
<button
    (click)="showDateInterval = !showDateInterval "
    [ngClass]="{active: showDateInterval}"
    class="btn btn-primary"
    id="toggle_interval_button"
>
    {{"dates.add_interval"|translate}}
</button >

<button
    (click)="emptyAll()"
    class="btn btn-warning"
    id="empty_button"
>{{"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" >
    </p >
    <button
        (click)="addIntervalOfDates()"
        class="btn btn-block" >
        {{"dates.interval_button"|translate}}
        {{intervalDays}}
        {{"dates.interval_button_dates"|translate}}
    </button >
    <hr >
</section >
<div class="dates-list" >
    <span class="count-dates" >
    {{config.timeList.length}}
    </span >
    <span class="count-dates-txt" >
		{{"dates.count_time"|translate}}
	</span >
    <button
        (click)="addTime()"
        *ngIf="config.allowSeveralHours=='false'"
        class="btn btn-primary pull-right"
        id="add_time_button"
    >
        {{"dates.add_time"|translate}}
    </button >

    <div
        *ngIf="'false'==config.allowSeveralHours"
        class="identical-dates"
    >
        <div
            *ngFor="let choice of config.timeList; index as id"
            class="time-choice"
        >
            <input
                [(ngModel)]="choice.literal"
                name="timeChoices_{{id}}"
                type="name"
            >
            <button
                (click)="config.timeList.splice(id, 1)"
                class="btn btn-warning" >X
            </button >
        </div >
    </div >
    <hr >
    <span class="count-dates" >
    {{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"
        >
        <button
            (click)="config.dateList.splice(id, 1)"
            class="btn btn-warning"
        >X
        </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"
                >X
                </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 >