framadate-responsive/src/app/pages/dates/dates.component.html

<div i18n>
    {{"dates.title"|translate}}
</div>

<div>
    <label for="multi_hours">
		<span i18n>
			Je souhaite mettre des créneaux horaires
		</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>
			pour chaque journée
		</span>
    </label>
</div>

<button
    class="btn btn-primary"
    (click)="addDate()"
    id="add_date_button"
>
    {{"dates.add"|translate}}
</button>
<button
    class="btn btn-primary"
    (click)="addtime()"
    id="add_time_button"
    *ngIf="config.allowSeveralHours=='false'"
>
    {{"dates.addTime"|translate}}
</button>

<button
    class="btn btn-warning"
    (click)="emptyAll()"
    id="empty_button"
>{{"dates.empty"|translate}}
</button>
<div class="dates-list">
    {{config.dateList.length}}
    <span>
		{{"dates.count_dates"|translate}}
	</span>
    <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 (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="text"
            name="dateChoices_{{id}}"
            [(ngModel)]="choice.literal"
        >
        <button
            class="btn btn-warning"
            (click)="config.dateList.splice(id, 1)"
        >X
        </button>
        <button
            class="btn btn-primary"
            (click)="addTimetoDate(choice, id)"
        > Ajouter un choix d'heure
        </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)="config.timeList.splice(idTime, 1)"
                >X
                </button>
            </div>
        </div>
    </div>
</div>

<a
    [routerLink]="'/step/end'"
    class="btn btn-block"
>
    C'est parfait!
</a>