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

<h1 class="title is-1"><i class="fa fa-calendar"></i> {{ 'dates.title' | translate }}</h1>

<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="columns">
    <div class="column">
        <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>
            </div>
            <div class="actions">
                <button
                    (click)="addTime()"
                    *ngIf="'false' === config.allowSeveralHours"
                    class="btn btn--primary"
                    id="add_time_button"
                >
                    <i class="fa fa-plus"></i>
                    {{ 'dates.add_time' | translate }}
                </button>
                <button
                    (click)="removeAllTimes()"
                    *ngIf="'false' === config.allowSeveralHours"
                    class="btn btn--warning"
                    id="remove_time_button"
                >
                    <i class="fa fa-trash"></i>
                    Aucune plage horaire
                </button>
                <button
                    (click)="resetTimes()"
                    *ngIf="'false' === config.allowSeveralHours"
                    class="btn btn--warning"
                    id="reset_time_button"
                >
                    <i class="fa fa-refresh"></i>
                    réinitialiser
                </button>
            </div>

            <div *ngIf="'false' === config.allowSeveralHours" class="identical-dates">
                <div *ngFor="let time of config.timeList; index as id" class="time-choice">
                    <label for="timeChoices_{{ id }}">
                        <i class="fa fa-clock-o"></i>
                    </label>
                    <input
                        [(ngModel)]="time.literal"
                        name="timeChoices_{{ id }}"
                        type="text"
                        id="timeChoices_{{ id }}"
                    />
                    <button (click)="time.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>
            <button class="btn btn--primary" (click)="addDate()">
                {{ 'dates.add' | translate }}
            </button>
            <div *ngFor="let choice of config.dateList; index as id" class="date-choice">
                {{ id }})
                <input
                    [(ngModel)]="choice.date_object"
                    name="dateChoices_{{ id }}"
                    id="dateChoices_{{ id }}"
                    useValueAsDate
                    type="date"
                />
                <button (click)="config.dateList.splice(id, 1)" class="btn btn-warning">
                    <i class="fa fa-times"></i>
                </button>
                <button
                    (click)="addTimeToDate(choice, id)"
                    *ngIf="'true' === config.allowSeveralHours"
                    class="btn btn--primary"
                >
                    {{ 'dates.add_time' | translate }}
                </button>
                <div *ngIf="'true' === config.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"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column">
        <framadate-resume></framadate-resume>
    </div>
</div>

<a [routerLink]="'/step/resume'" class="btn btn--full btn--primary">
    C'est parfait!
</a>
<a [routerLink]="'/step/home'" class="prev">
    Retour
</a>