1 <eg-staff-banner bannerText="Create Reservation" i18n-bannerText>
3 <eg-title i18n-prefix i18n-suffix prefix="Booking" suffix="Create Reservation"></eg-title>
5 {{selectedAttributes.value | json}}
6 <form [formGroup]="criteria" class="row">
10 <div class="input-group">
11 <div class="input-group-prepend">
12 <label class="input-group-text" for="ideal-reservation-type" i18n>Reservation type</label>
14 <select class="form-control" id="ideal-reservation-type" formControlName="reservationType">
15 <option *ngFor="let type of reservationTypes" [ngValue]="type" i18n>{{type.name}}</option>
20 <div class="input-group">
21 <div class="input-group-prepend">
22 <label class="input-group-text" for="ideal-reservation-date" i18n>Reservation date</label>
24 <eg-date-select *ngIf="!multiday" #dateLimiter domId="ideal-reservation-date" formControlName="idealDate"></eg-date-select>
25 <eg-daterange-select *ngIf="multiday" formControlName="idealDateRange"></eg-daterange-select>
30 <div class="card col-sm-6">
31 <h2 class="card-header" i18n>Reservation details</h2>
32 <ngb-tabset #details="ngbTabset">
33 <ngb-tab id="select-resource-type">
34 <ng-template ngbTabTitle>
35 <span class="material-icons">category</span>
36 <ng-container i18n>Choose resource by type</ng-container>
38 <ng-template ngbTabContent>
39 <div ngbPanelContent class="row">
41 <div class="input-group">
42 <div class="input-group-prepend">
43 <label class="input-group-text" for="ideal-resource-type" i18n>Search by resource type</label>
46 formControlName="resourceType"
47 domId="ideal-resource-type"
49 [asyncSupportsEmptyTermClick]="true">
53 <eg-org-family-select [hideAncestorSelector]="true" labelText="Owning library" i18n-labelText formControlName="owningLibrary">
54 </eg-org-family-select>
61 <ngb-tab id="select-resource">
62 <ng-template ngbTabTitle>
63 <span class="material-icons">assignment</span>
64 <ng-container i18n>Choose resource by barcode</ng-container>
66 <ng-template ngbTabContent>
67 <div ngbPanelContent class="row">
69 <div class="input-group">
70 <div class="input-group-prepend">
71 <label class="input-group-text" for="ideal-resource-barcode" i18n>Search by resource barcode</label>
73 <input type="text" id="ideal-resource-barcode" class="form-control" formControlName="resourceBarcode">
80 <ngb-tab id="attributes" [disabled]="0 === attributes.length">
81 <ng-template ngbTabTitle>
82 <span class="material-icons">filter_list</span>
83 <ng-container i18n>Limit by attributes</ng-container>
85 <ng-template ngbTabContent>
86 <ul class="list-group list-group-flush" formArrayName="selectedAttributes">
87 <li *ngFor="let attribute of attributes; let i = index" class="list-group-item">
88 <span class="input-group">
89 <span class="input-group-prepend">
90 <label class="input-group-text" for="attribute-{{attribute.id()}}" i18n>{{attribute.name()}}</label>
92 <eg-combobox [formControlName]="i">
93 <eg-combobox-entry *ngFor="let value of attribute.valid_values()"
94 [entryId]="value.id()" [entryLabel]="value.valid_value()">
103 <ngb-tab id="display-settings">
104 <ng-template ngbTabTitle>
105 <span class="material-icons">settings</span>
106 <ng-container i18n>Schedule settings</ng-container>
108 <ng-template ngbTabContent>
109 <ul class="list-group list-group-flush">
110 <li class="list-group-item">
111 <span class="input-group">
112 <span class="input-group-prepend">
113 <label class="input-group-text" for="start-time" i18n>Start time</label>
115 <ngb-timepicker formControlName="startOfDay" [minuteStep]="minuteStep()" [meridian]="true"></ngb-timepicker>
118 <li class="list-group-item">
119 <span class="input-group">
120 <span class="input-group-prepend">
121 <label class="input-group-text" for="end-time" i18n>End time</label>
123 <ngb-timepicker formControlName="endOfDay" [minuteStep]="minuteStep()" [meridian]="true"></ngb-timepicker>
126 <li *ngIf="criteria.errors && criteria.errors.startOfDayNotBeforeEndOfDay" class="list-group-item">
127 <div role="alert" class="alert alert-danger">
128 <span class="material-icons" aria-hidden="true">error</span>
129 <span i18n>Start time must be before end time</span>
132 <li class="list-group-item">
133 <span class="input-group">
134 <span class="input-group-prepend">
135 <label class="input-group-text" for="granularity" i18n>Granularity</label>
137 <eg-combobox (onChange)="changeGranularity($event)" [startId]="granularity ? granularity : 30">
138 <eg-combobox-entry [entryId]="15" entryLabel="15 minutes"
139 i18n-entryLabel></eg-combobox-entry>
140 <eg-combobox-entry [entryId]="30" entryLabel="30 minutes"
141 i18n-entryLabel></eg-combobox-entry>
142 <eg-combobox-entry [entryId]="60" entryLabel="60 minutes"
143 i18n-entryLabel></eg-combobox-entry>
154 <ng-container *ngIf="resources.length">
156 <div class="row" *ngIf="idealDate && !multiday">
157 <button class="btn btn-info col-sm-2 offset-sm-3" (click)="addDays(-1)">
158 <span class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
159 <span i18n>Previous day</span>
161 <h2 class="col-sm-2 text-center" i18n>{{idealDate | formatValue:'timestamp'}}</h2>
162 <button class="btn btn-info col-sm-2" (click)="addDays(1)">
163 <span i18n>Next day</span>
164 <span class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
167 <eg-grid #scheduleGrid
169 (onRowActivate)="openTheDialog([$event])"
170 [dataSource]="scheduleSource"
171 [rowFlairIsEnabled]="true"
172 [rowFlairCallback]="resourceAvailabilityIcon"
173 [disablePaging]="true"
174 persistKey="disabled">
175 <eg-grid-toolbar-action label="Create Reservation" i18n-label (onClick)="openTheDialog($event)"></eg-grid-toolbar-action>
176 <eg-grid-column path="time" [index]="true" name="Time" i18n-name [cellTemplate]="timeTemplate" ></eg-grid-column>
177 <eg-grid-column *ngFor="let resource of resources" path="{{resource.barcode()}}" [cellTemplate]="reservationsTemplate" [disableTooltip]="true"></eg-grid-column>
180 <div class="text-sm-center" *ngIf="this.resourceType.value && !resources.length" i18n>
181 There are no bookable resource that match your criteria.
182 Would you like to create <a [routerLink]="['/staff', 'admin', 'booking', 'splash']">some new resources</a>?
185 <eg-create-reservation-dialog #createDialog
186 (onComplete)="fetchData()"
187 [targetResourceBarcode]="resourceBarcode"
188 [targetResource]="resourceId"
189 [targetResourceType]="resourceType.value"
190 [attributes]="flattenedSelectedAttributes"
191 [resources]="resources">
192 </eg-create-reservation-dialog>
194 <ng-template #reservationsTemplate let-row="row" let-col="col">
195 <ng-container *ngIf="row[col.name]">
196 <ul class="list-unstyled">
197 <li *ngFor="let reservation of row[col.name]">
198 <button class="btn btn-info" (click)="openReservationViewer(reservation['reservationId'])">
199 {{reservation['patronLabel']}}
205 <ng-template #timeTemplate let-row="row" let-col="col">
206 <ng-container *ngIf="!multiday">
207 {{row['time'].format('LT')}}
209 <ng-container *ngIf="multiday">
210 {{row['time'] | formatValue:'timestamp'}}
213 <eg-fm-record-editor #viewReservation
215 datetimeFields="start_time,end_time"
216 hiddenFields="xact_start,xact_finish,cancel_time,booking_interval">
217 </eg-fm-record-editor>
218 <eg-no-timezone-set-dialog #noTimezoneSetDialog>
219 </eg-no-timezone-set-dialog>