「实用场景教程」如何用日程控件DHTMLX Scheduler制作酒店预订日历？（二）

dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件，日历事件通过Ajax动态加载，支持通过拖放功能调整事件日期和时间，事件可以按天，周，月三个种视图显示。

DHTMLX Scheduler正式版下载

在本教程中，我们将使用两个强大的工具：DHTMLX Scheduler库和Angular框架来创建一个全面的酒店客房预订应用程序。在上文中（点击这里回顾>>）我们为大家介绍了一些基础的准备工作及如何创建Scheduler组件，本文将继续介绍数据相关的问题、服务器配置等。

Step 4 – 提供和保存数据

数据加载

要在Angular Scheduler中添加数据加载，您需要添加reservation和collections服务。但在此之前，让我们为项目创建并配置一个环境文件，执行如下命令：

ng generate environments

在src/environments文件夹下新创建的environment.development.ts文件中，我们将添加以下代码：

export const environment = {
production: false,
apiBaseUrl: 'http://localhost:3000/data'
};

我们还将为错误创建一个助手，当出现错误时，它将通过向控制台发送错误消息来通知用户。为此，用以下代码在app/services.ts文件夹中创建service- helpers文件：

export function HandleError(error: any): Promise{
console.log(error);
return Promise.reject(error);
}

现在让我们创建预订和收集服务，执行如下命令：

ng generate service services/reservation --flat --skip-tests
ng generate service services/collections --flat --skip-tests

在services文件夹中新创建的reservation.service.ts文件中，我们将添加以下代码：

import { Injectable } from '@angular/core';
import { Reservation } from "../models/reservation";
import { HttpClient } from "@angular/common/http";
import { HandleError } from "./service-helper";
import { firstValueFrom } from 'rxjs';
import { environment } from '../../environments/environment.development';

@Injectable()
export class ReservationService {
private reservationUrl = `${environment.apiBaseUrl}/reservations`;

constructor(private http: HttpClient) { }

get(): Promise{
return firstValueFrom(this.http.get(this.reservationUrl))
.catch(HandleError);
}

insert(reservation: Reservation): Promise {
return firstValueFrom(this.http.post(this.reservationUrl, reservation))
.catch(HandleError);
}

update(reservation: Reservation): Promise {
return firstValueFrom(this.http.put(`${this.reservationUrl}/${reservation.id}`, reservation))
.catch(HandleError);
}

remove(id: number): Promise {
return firstValueFrom(this.http.delete(`${this.reservationUrl}/${id}`))
.catch(HandleError);
}
}

在新创建的collections.service.ts文件中，添加以下代码行：

import { Injectable } from '@angular/core';
import { Room } from "../models/room.model";
import { RoomType } from "../models/room-type.model";
import { CleaningStatus } from "../models/cleaning-status.model";
import { BookingStatus } from "../models/booking-status.model";
import { HttpClient } from "@angular/common/http";
import { HandleError } from "./service-helper";
import { firstValueFrom } from 'rxjs';
import { environment } from '../../environments/environment.development';

@Injectable()
export class CollectionsService {
private collectionsUrl = `${environment.apiBaseUrl}/collections`;

constructor(private http: HttpClient) { }

getRooms(): Promise{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/rooms`))
.catch(HandleError);
}

updateRoom(room: Room): Promise {
return firstValueFrom(this.http.put(`${this.collectionsUrl}/rooms/${room.id}`, room))
.catch(HandleError);
}

getRoomTypes(): Promise{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/roomTypes`))
.catch(HandleError);
}

getCleaningStatuses(): Promise{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/cleaningStatuses`))
.catch(HandleError);
}

getBookingStatuses(): Promise{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/bookingStatuses`))
.catch(HandleError);
}
}

get()、getRooms()、getRoomTypes()、getCleaningStatuses()和getBookingStatuses()方法从服务器检索数据。

reservationUrl和collectionurl是服务的私有元素，它们包含REST API的URL。为了发送HTTP请求，一个HTTP类被注入到服务中。

要插入新项，需要向URL发送POST请求，请求体中包含新项。

要更新项，需要向url/item_id发送一个PUT请求。此请求还在其主体中包含更新后的项。

要删除项，需要向url/item_id发送删除请求。

CRUD操作

服务应该处理调度器中的CRUD操作，通过在reservations.service.ts和collections.service.ts文件中添加HttpClient模块，HTTP通信已经启用：

import { HttpClient } from "@angular/common/http";

这一步允许我们在Angular应用中无缝地获取数据。

要利用HttpClient模块，还需要从@angular/common/http包中包含必需的HttpClientModule。在app.module.ts文件中，您应该像下面这样更新imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SchedulerComponent } from './scheduler/scheduler.component';

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [
AppComponent,
SchedulerComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

HTMLX Scheduler组件应该使用ReservationService和CollectionsService来获取/插入/更新/删除预订和集合，为了启用这些选项，向组件添加ReservationService和CollectionsService。首先在scheduler.component.ts中导入服务所需的模块：

import { ReservationService } from '../services/reservation.service';
import { CollectionsService } from '../services/collections.service';

您还应该将@Component装饰器中指定EventService作为提供商：

providers: [ ReservationService, CollectionsService ]

现在每次初始化一个新的SchedulerComponent时，都会创建一个新的服务实例。

服务应该准备好被注入到组件中。为此，将以下构造函数添加到SchedulerComponent类中：

constructor(
private reservationService: ReservationService,
private collectionsService: CollectionsService
) { }

接下来，我们将添加updateRoom()方法来在数据库中保存room清洁状态的更改：

handleCleaningStatusChange(target: HTMLSelectElement) {
...
this.collectionsService.updateRoom(roomToUpdate);
}

您需要修改ngOnInit函数来调用服务获取该函数，然后等待响应来将数据放入调度器。

scheduler.init(this.schedulerContainer.nativeElement, new Date(), 'timeline');

const dp = scheduler.createDataProcessor({
event: {
create: (data: Reservation) => this.reservationService.insert(data),
update: (data: Reservation) => this.reservationService.update(data),
delete: (id: number) => this.reservationService.remove(id),
}
});

forkJoin({
reservations: this.reservationService.get(),
rooms: this.collectionsService.getRooms(),
roomTypes: this.collectionsService.getRoomTypes(),
cleaningStatuses: this.collectionsService.getCleaningStatuses(),
bookingStatuses: this.collectionsService.getBookingStatuses()
}).subscribe({
next: ({ reservations, rooms, roomTypes, cleaningStatuses, bookingStatuses }) => {
const data = {
events: reservations,
collections: {
rooms,
roomTypes,
cleaningStatuses,
bookingStatuses,
}
};

scheduler.parse(data);
},
error: error => {
console.error('An error occurred:', error);
}
});

scheduler.parse接受JSON格式的数据对象，为了有效地等待多个异步请求的完成并将它们的数据(保留和集合)加载到调度器中，可以利用RxJS库中的forkJoin操作符。请包括导入：

import { forkJoin } from 'rxjs';

你可以在GitHub上查看scheduler.components.ts文件的完整代码。