funky-framadate-front/src/app/features/administration/form/date-select/date-select.component.html

147 lines
4.8 KiB
HTML

<div class="date-selection">
<!-- <form [formGroup]="form">-->
<!-- interval-->
<!-- <section *ngIf="showDateInterval" class="date-interval form-row">-->
<!-- <button-->
<!-- (click)="showDateInterval = !showDateInterval"-->
<!-- [ngClass]="{ active: showDateInterval }"-->
<!-- class="btn btn&#45;&#45;primary"-->
<!-- id="toggle_interval_button"-->
<!-- >-->
<!-- <i class="fa fa-clock-o" aria-hidden="true"></i>-->
<!-- {{ 'dates.add_interval' | translate }}-->
<!-- </button>-->
<!-- <h2>{{ 'dates.add_interval' | translate }}</h2>-->
<!-- <div class="columns">-->
<!-- <div class="column">-->
<!-- {{ 'dates.interval_propose' | translate }}-->
<!-- </div>-->
<!-- <div class="column">-->
<!-- <label for="start_interval" class="hidden">start</label>-->
<!-- <input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="columns">-->
<!-- <div class="column">-->
<!-- {{ 'dates.interval_span' | translate }}-->
<!-- </div>-->
<!-- <div class="column">-->
<!-- <label for="end_interval" class="hidden">end</label>-->
<!-- <input id="end_interval" formControlName="endDateInterval" type="date" />-->
<!-- </div>-->
<!-- </div>-->
<!-- <button (click)="addIntervalOfDates()" class="btn btn-block btn&#45;&#45;primary">-->
<!-- <i class="fa fa-plus" aria-hidden="true"></i>-->
<!-- {{ 'dates.interval_button' | translate }}-->
<!-- {{ intervalDays }}-->
<!-- {{ 'dates.interval_button_dates' | translate }}-->
<!-- </button>-->
<!-- </section>-->
<!-- </form>-->
<div class="dates-list">
<div class="title">
<span class="count-dates">
{{ timeList.length }}
</span>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
(pour chaque jour)
</span>
</div>
<div class="actions">
<pre class="debug padded warning">
form.value.hasSeveralHours :
{{ form.value.hasSeveralHours | json }}
</pre
>
<button
(click)="addTime()"
*ngIf="!form.value.hasSeveralHours"
class="btn btn--primary"
id="add_time_button"
>
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }}
</button>
<button
(click)="removeAllTimes()"
*ngIf="'false' === allowSeveralHours"
class="btn btn--warning"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
Aucune plage horaire
</button>
<button
(click)="resetTimes()"
*ngIf="'false' === allowSeveralHours"
class="btn btn--warning"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
réinitialiser
</button>
</div>
<!-- <div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
<!-- <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
<!-- <div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
<!-- <label for="timeChoices_{{ id }}">-->
<!-- <i class="fa fa-clock-o" aria-hidden="true"></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" aria-hidden="true"></i>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<hr />
<span class="count-dates title">
{{ dateList.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
<button class="btn btn--primary" (click)="addChoice()">
{{ 'dates.add' | translate }}
</button>
<div *ngFor="let choice of dateList; index as id" class="date-choice">
{{ id }})
<input
[(ngModel)]="choice.date_object"
name="dateChoices_{{ id }}"
id="dateChoices_{{ id }}"
useValueAsDate
type="date"
/>
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="'true' === 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" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>