funky-framadate-front/mocks/old-stuff/pages/dates/dates.component.html
2021-04-29 10:41:47 +02:00

169 lines
4.9 KiB
HTML

<h1 class="title is-1"><i class="fa fa-calendar" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
{{ 'dates.add_interval' | translate }}
</button>
<button (click)="emptyAll()" class="btn btn--warning" id="empty_button">
<i class="fa fa-trash" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" 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>
<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" aria-hidden="true"></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" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<app-resume></app-resume>
</div>
</div>
<a routerLink="../resume" class="btn btn--full btn--primary">
C'est parfait!
</a>
<a routerLink="../../home" class="prev">
Retour
</a>