This is a simple prototype of a room booking app for managing room booking in a given space.
Check out a Demo
In the project directory, you can run:
npm install
This command will install all the dependencies needed for the project to run locally.
To run the app we'll need to set some environment variables first.
You'll need an API key https://developers.archilogic.com/api-keys.html.
Once you have these keys, please create a .env file (you can copy it from .env.example) and fill in the values for
cp .env.example .env
Update .env variables:
REACT_APP_ARCHILOGIC_PUBLISHABLE_API_KEY=YOUR_TOKEN
REACT_APP_ARCHILOGIC_API_URL=https://api.archilogic.com
To run the application execute:
npm start
The project loads a default scene but you can change it by a different one by specifing ?sceneId=THIS_IS_ANOTHER_SCENE_ID in the browser url.
http://localhost:3001/?sceneId=0246512e-973c-4e52-a1f2-5f0008e9ee9c
This project was bootstrapped with Create React App.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
Index file public\index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Book rooms using Archilogic Floor Plan Engine" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<script src="https://code.archilogic.com/fpe-preview/v2.0.x/fpe.js?key=%REACT_APP_ARCHILOGIC_PUBLISHABLE_API_KEY%"></script>In file src\components\Floorplan\FloorPlan.tsx when the sceneId value is available trough props, we initialize the floor-plan and attach it to the DOM element #floorplan
useEffect(() => {
const container = document.getElementById('floorplan')
const fp = new FloorPlanEngine(container, floorPlanStartupSettings)
fp.loadScene(props.sceneId).then(() => {
props.setSpaces(fp.state.computed.spaces)
onSpacesLoaded(fp.state.computed.spaces)
})
}, [props.sceneId]);All the bookings are managed in a collection on the client side, and when there is any change to that collection, we push the new updated data to the corresponding space.
In order to keep business logic clean we decoupled it into a reducer: src\reducers\bookings.ts
export const saveBooking = (newBooking: Booking, bookings: Booking[]) => (dispatch: any) => {
dispatch(startSaveBooking());
let newBookingsList = bookings;
newBookingsList.push(newBooking);
axios.put(`/v1/space/${newBooking.spaceId}/custom-field/properties.customFields.bookings`, { bookings: newBookingsList }).then((response: any) => {
dispatch(endSaveBooking(newBookingsList));
});
}Axios - Promise based HTTP client for the browser and node.js.
Ant Design - A UI Design language and React UI library.
Typescript - Optional static type-checking along with the latest ECMAScript features.
lodash - A JavaScript utility library delivering consistency, modularity, performance, & extras.
Redux - A Predictable State Container for JS Apps.
Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
uuidjs -
Generate RFC-compliant UUIDs in JavaScript.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent