mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
171 lines
5.5 KiB
HTML
171 lines
5.5 KiB
HTML
<app-stepper [step_current]="4" [step_max]="pollService.step_max"></app-stepper>
|
|
<div class="step">
|
|
<div class="min-height">
|
|
<app-errors-list [form]="pollService.form"></app-errors-list>
|
|
|
|
<div class="custom-day-time-slices" *ngIf="environment.creation_display_hour_per_day">
|
|
<h2 class="title is-2">
|
|
{{ 'hours.title' | translate }}
|
|
</h2>
|
|
<div
|
|
class="days-list-having-separated-time-slices rounded-block"
|
|
*ngFor="let dayChoice of pollService.dateChoiceList; index as day_id"
|
|
>
|
|
<div class="heading-day-choice">
|
|
{{ dayChoice.date_object | date }}
|
|
</div>
|
|
|
|
<section class="time-slice-list-of-a-day">
|
|
<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice">
|
|
<label class="pull-left" for="dateChoices_{{ id }}">
|
|
{{ 'hours.element' | translate }} {{ id + 1 }}
|
|
</label>
|
|
<button
|
|
[attr.aria-label]="'choices.delete' | translate"
|
|
class="button is-full has-no-border delete-hour pull-right"
|
|
(click)="dayChoice.timeSlices.splice(id, 1)"
|
|
>
|
|
{{ 'choices.delete' | translate }}
|
|
<img src="assets/icons/trash-2.svg" class="icon" />
|
|
</button>
|
|
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
|
|
</div>
|
|
<div class="add-time-choice">
|
|
<button
|
|
class="has-text-primary button has-no-border is-fullwidth has-text-left"
|
|
(click)="addChoiceForDay(dayChoice)"
|
|
>
|
|
<img class="icon" aria-hidden="true" src="assets/icons/plus-circle.svg" />
|
|
{{ 'hours.add' | translate }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section more-bulk-actions" *ngIf="environment.display_time_actions_more">
|
|
<div class="actions">
|
|
<button
|
|
(click)="pollService.removeAllTimes()"
|
|
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
|
|
class="btn is-warning marged"
|
|
id="remove_time_button"
|
|
>
|
|
<i class="fa fa-trash" aria-hidden="true"></i>
|
|
{{ 'hours.empty' | translate }}
|
|
</button>
|
|
<button
|
|
(click)="pollService.resetTimes()"
|
|
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
|
|
class="btn is-warning marged"
|
|
id="reset_time_button"
|
|
>
|
|
<i class="fa fa-refresh" aria-hidden="true"></i>
|
|
{{ 'hours.reinit' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button id="apply_same_hour" class="has-text-primary button is-fullwidth" (click)="openModal()">
|
|
{{ 'hours.apply_same' | translate }}
|
|
</button>
|
|
</div>
|
|
<!-- modale pour quitter la création-->
|
|
<p-dialog
|
|
[modal]="true"
|
|
[(visible)]="display_same_hours_dialog"
|
|
[breakpoints]="{ '960px': '75vw' }"
|
|
[style]="{ width: '50vw' }"
|
|
[draggable]="false"
|
|
[showHeader]="false"
|
|
[resizable]="false"
|
|
>
|
|
<ng-template pTemplate="titlebar">
|
|
<div class="columns">
|
|
<div class="column"></div>
|
|
<div class="column is-narrow">
|
|
<button
|
|
id="close_dialog"
|
|
class="button cancel-button-reject pull-right has-text-right has-no-border"
|
|
(click)="closeModalAndFocusOnOpenModalButton()"
|
|
>
|
|
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<h1 class="title">
|
|
{{ 'hours.modal.title' | translate }}
|
|
</h1>
|
|
<section class="same-time-slices">
|
|
<section class="same-time-slices">
|
|
<section class="proposals" *ngIf="environment.creation_display_proposals_time_slices">
|
|
<div class="time-slices-proposals">
|
|
<div
|
|
class="button is-rounded"
|
|
*ngFor="let text of timeSlicesProposals"
|
|
(click)="addPreselect(text.literal)"
|
|
>
|
|
{{ text.literal }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div *ngFor="let timeSlice of pollService.timeList; index as id" class="time-choice">
|
|
<label for="timeList_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<input
|
|
class="input is-fullwidth"
|
|
type="text"
|
|
id="timeList_{{ id }}"
|
|
[(ngModel)]="timeSlice.literal"
|
|
/>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<button class="button is-block has-no-border" (click)="pollService.timeList.splice(id, 1)">
|
|
<img src="assets/icons/trash-2.svg" class="icon" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="title" *ngIf="environment.display_count_timelist && pollService.timeList.length">
|
|
<span class="count-dates">
|
|
{{ pollService.timeList.length }}
|
|
</span>
|
|
<span class="count-dates-txt">
|
|
{{ 'dates.count_time' | translate }}
|
|
</span>
|
|
</div>
|
|
<button
|
|
(click)="pollService.addTime()"
|
|
*ngIf="false == pollService.allowSeveralHours"
|
|
class="button is-block is-fullwidth has-text-left has-no-border"
|
|
id="add_time_button"
|
|
>
|
|
<img class="icon" aria-hidden="true" src="assets/icons/plus-circle.svg" />
|
|
{{ 'dates.add_time' | translate }}
|
|
</button>
|
|
</section>
|
|
</section>
|
|
</ng-template>
|
|
<ng-template pTemplate="footer">
|
|
<div class="columns">
|
|
<div class="column has-no-padding">
|
|
<button
|
|
class="button is-primary is-fullwidth pull-right has-text-white"
|
|
(click)="applyTimeSlicesToDateChoices()"
|
|
>
|
|
{{ 'hours.modal.validate' | translate }}
|
|
</button>
|
|
<button class="button is-outlined pull-right" (click)="closeModalAndFocusOnOpenModalButton()">
|
|
{{ 'SENTENCES.Cancel' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</p-dialog>
|
|
<app-nav-steps
|
|
[next_step_number]="pollService.step_current + 1"
|
|
[previous_step_number]="pollService.step_current - 1"
|
|
></app-nav-steps>
|