veenm
9fbb61fef4
-manier van afspraken maken veranderd in de backend ivm meerdere bedrijven gebruiker -email is aangepast op bedrijf en gebruiker -dropdown voor instellingen toegevoegd
118 lines
3.7 KiB
HTML
118 lines
3.7 KiB
HTML
<div class="container">
|
|
<div class="heading">
|
|
<button
|
|
appearance="primary"
|
|
iconStart="@tui.chevron-left"
|
|
size="m"
|
|
tuiIconButton
|
|
id="vorigeDag"
|
|
(click)="previousDay()"
|
|
type="button">
|
|
</button>
|
|
<h1 class="date" id="geselecteerdeDatum" (click)="toggleCalendar()">{{ getDate() }}
|
|
<tui-icon
|
|
*ngIf="!showCalendar"
|
|
icon="@tui.chevron-down"
|
|
[style.color]="'var(--tui-background-accent-1)'"/>
|
|
<tui-icon
|
|
*ngIf="showCalendar"
|
|
icon="@tui.chevron-up"
|
|
[style.color]="'var(--tui-background-accent-1)'"/>
|
|
</h1>
|
|
<button
|
|
appearance="primary"
|
|
iconStart="@tui.chevron-right"
|
|
size="m"
|
|
tuiIconButton
|
|
id="volgendeDag"
|
|
(click)="nextDay()"
|
|
type="button">
|
|
</button>
|
|
</div>
|
|
<div class="calendar" *ngIf="showCalendar">
|
|
<tui-calendar
|
|
id="calenderDatum"
|
|
[value]="value"
|
|
(dayClick)="onDayClick($event)"
|
|
/>
|
|
</div>
|
|
<div class="toolbar">
|
|
<button
|
|
*ngIf="today.getDate() != selectedDate.getDate()"
|
|
appearance="secondary"
|
|
size="m"
|
|
tuiButton
|
|
id="vandaag"
|
|
(click)="setToday()"
|
|
type="button">
|
|
Vandaag
|
|
</button>
|
|
<button
|
|
appearance="secondary"
|
|
size="m"
|
|
tuiButton
|
|
id="afspraakMaken"
|
|
(click)="showNewItem = true"
|
|
type="button">
|
|
<tui-icon
|
|
icon="@tui.plus"
|
|
[style.height.rem]="1"
|
|
/>
|
|
Afspraak maken
|
|
</button>
|
|
<button
|
|
appearance="secondary"
|
|
size="m"
|
|
tuiButton
|
|
id="instellingen"
|
|
(click)="openSettings()"
|
|
[tuiDropdown]="dropdownContent"
|
|
[tuiDropdownManual]="open"
|
|
type="button">
|
|
<tui-icon
|
|
icon="@tui.settings"
|
|
[style.height.rem]="1">
|
|
</tui-icon>
|
|
</button>
|
|
<ng-template #dropdownContent>
|
|
<div class="dropdown">But there is nothing to choose...</div>
|
|
</ng-template>
|
|
</div>
|
|
<div class="content">
|
|
<div class="agenda-container">
|
|
<div *ngFor="let hour of timeSlots" class="time-slot">
|
|
<span class="time">{{ hour.toString().padStart(2, '0') }}:00</span>
|
|
|
|
<div *ngFor="let appointment of getAppointmentsForHour(hour)"
|
|
class="appointment"
|
|
[attr.id]="'afspraak-'+appointment.id"
|
|
(click)="selectAppointment(appointment)"
|
|
[ngClass]="{ 'large': (getAppointmentHeight(appointment) > 50) }"
|
|
[ngStyle]="getInlineStyles(appointment)">
|
|
|
|
<strong>{{ appointment.title }}</strong>
|
|
<span class="appointment-time" *ngIf="appointment.customer">
|
|
<tui-icon icon="@tui.user" [style.font-size.rem]="1"></tui-icon>
|
|
{{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
|
|
<span class="appointment-time">
|
|
<tui-icon icon="@tui.clock" [style.font-size.rem]="1"></tui-icon>
|
|
{{ getFormattedTime(appointment.startHour, appointment.startMinute) }}
|
|
- {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="showNewItem">
|
|
<app-new-item [appointments]="appointments" [appointmentForm]="appointmentForm"
|
|
(appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
|
|
</app-modal>
|
|
|
|
<app-modal title="{{selectedAppointment.title}}" (close)="selectedAppointment = undefined"
|
|
*ngIf="selectedAppointment != undefined">
|
|
<app-details [appointment]="selectedAppointment" (appointmentDeleted)="appointmentIsDeleted($event)"
|
|
(appointmentEdited)="appointmentIsEdited($event)"></app-details>
|
|
</app-modal>
|