「实用场景教程」如何用日程控件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文件中,我们将添加以下代码:

javascript 复制代码
export const environment = {
production: false,
apiBaseUrl: 'http://localhost:3000/data'
};

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

javascript 复制代码
export function HandleError(error: any): Promise<any>{
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文件中,我们将添加以下代码:

javascript 复制代码
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<Reservation[]>{
return firstValueFrom(this.http.get(this.reservationUrl))
.catch(HandleError);
}

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

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

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

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

javascript 复制代码
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<Room[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/rooms`))
.catch(HandleError);
}

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

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

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

getBookingStatuses(): Promise<BookingStatus[]>{
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通信已经启用:

javascript 复制代码
import { HttpClient } from "@angular/common/http";

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

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

javascript 复制代码
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中导入服务所需的模块:

javascript 复制代码
import { ReservationService } from '../services/reservation.service';
import { CollectionsService } from '../services/collections.service';

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

javascript 复制代码
providers: [ ReservationService, CollectionsService ]

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

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

javascript 复制代码
constructor(
private reservationService: ReservationService,
private collectionsService: CollectionsService
) { }

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

javascript 复制代码
handleCleaningStatusChange(target: HTMLSelectElement) {
...
this.collectionsService.updateRoom(roomToUpdate);
}

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

javascript 复制代码
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操作符。请包括导入:

javascript 复制代码
import { forkJoin } from 'rxjs';

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

相关推荐
阿伟来咯~17 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端22 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱25 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai34 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨35 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js