front end version 2 de framadate, un gestionnaire de sondage
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
funky-framadate-front/src/app/features/administration/form/date-select/date-select.component.html

249 lines
7.4 KiB

<div class="date-selection">
<form [formGroup]="form">
<h2>
{{ 'choices.title' | translate }}
</h2>
{{ 'dates.add' | translate }}
<p>
<i>
{{ 'choices.helper' | translate }}
</i>
</p>
{{ 'choices.answer_preset_1' | translate }}
{{ 'choices.add' | translate }}
{{ 'choices.continue' | translate }}
<!-- interval-->
<button
(click)="showDateInterval = !showDateInterval"
[ngClass]="{ active: showDateInterval }"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class="fa fa-clock-o" aria-hidden="true"></i>
<span>
{{ 'dates.add_interval' | translate }}
</span>
</button>
<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
<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--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</fieldset>
</form>
<div class="dates-list">
<button
class="btn"
[class.is-primary]="form.value.hasSeveralHours"
(click)="form.patchValue({ hasSeveralHours: !form.value.hasSeveralHours })"
>
<i class="fa fa-check-square-o" *ngIf="form.value.hasSeveralHours"></i>
<i class="fa fa-square-o" *ngIf="!form.value.hasSeveralHours"></i>
<span> horaires avancées</span>
<i class="fa fa-clock-o"></i>
</button>
<div class="is-info notification">
<span *ngIf="form.value.hasSeveralHours">
Chaque jour aura ses plages de temps personnalisées
</span>
<span *ngIf="!form.value.hasSeveralHours">
Tous les jours auront les mêmes plages de temps
</span>
</div>
<fieldset class="range-container is-boxed">
<div class="actions columns">
<div class="column"></div>
<div class="column has-text-right">
<button
(click)="addTime()"
*ngIf="!form.value.hasSeveralHours"
class="btn btn--primary"
id="add_time_button"
>
<i class="fa fa-plus" aria-hidden="true"></i>
<span>
{{ 'dates.add_time' | translate }}
</span>
</button>
<button
(click)="removeAllTimes()"
*ngIf="form.value.hasSeveralHours"
class="btn btn--warning"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
<span>
Aucune plage horaire
</span>
</button>
<button
(click)="resetTimes()"
*ngIf="form.value.hasSeveralHours"
class="btn btn--warning"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
<span>
réinitialiser
</span>
</button>
</div>
</div>
<div class="range-time" *ngIf="!form.value.hasSeveralHours">
<h2>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
(identique pour chaque jour)
</span>
</h2>
<div class="title">
<span class="count-dates">
{{ timeList.length }}
</span>
</div>
<div class="identical-dates" cdkDropListGroup>
<div
class="time-list"
cdkDropList
[cdkDropListData]="timeList"
(cdkDropListDropped)="dropTimeItem($event)"
>
<div *ngFor="let time of timeList; index as time_id" class="time-choice movable" cdkDrag>
<div class="columns">
<div class="column">
<label class="button pull-left" [for]="'timeChoices_' + time_id">
<i class="icon fa fa-arrows-v" aria-hidden="true"></i>
</label>
<input
class="pull-left"
[(ngModel)]="time.literal"
name="timeChoices_{{ time_id }}"
type="text"
id="timeChoices_{{ time_id }}"
/>
<button (click)="timeList.splice(time_id, 1)" class="button is-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<hr />
<div class="main-box is-boxed">
<div class="columns">
<div class="column">
<!-- ajouter une date-->
<button class="btn btn--primary" (click)="addChoice()">
{{ 'dates.add' | translate }}
</button>
</div>
<div class="column">
<span class="count-dates title">
{{ dateList.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
</div>
</div>
<div class="columns">
<div class="column">
<!-- TODO lier au formulaire les valeurs des dates-->
<h2>Dates</h2>
<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="form.value.hasSeveralHours"
class="btn btn--primary"
>
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="form.value.hasSeveralHours" class="several-times">
plage horaire distincte
<br />
<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>
<!-- date picker calendrier-->
<!-- <div class="column calendar-column">-->
<!-- <button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">-->
<!-- plage de jours-->
<!-- </button>-->
<!-- <button-->
<!-- class="btn"-->
<!-- (click)="selectionKind = 'multiple'"-->
<!-- [class.is-primary]="selectionKind == 'multiple'"-->
<!-- >-->
<!-- jours séparés-->
<!-- </button>-->
<!-- <button class="btn" (click)="setDefaultDatesForInterval()">-->
<!-- réinitialiser</button-->
<!-- ><button class="btn" (click)="dateCalendarEnum = [today]">-->
<!-- vider-->
<!-- </button>-->
<!-- <div class="text-center">-->
<!-- <br />-->
<!-- <p-calendar-->
<!-- [(ngModel)]="dateCalendarEnum"-->
<!-- [locale]="'calendar_widget' | translate"-->
<!-- [inline]="true"-->
<!-- [monthNavigator]="true"-->
<!-- [selectionMode]="selectionKind"-->
<!-- ></p-calendar>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
</div>