You can see this demo running here
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.
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.
Redux - A Predictable State Container for JS Apps.
Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
In the project directory, you can run:
npm install
Installs all the dependencies needed for the project to run locally.
To run the app we'll need to set some environment variables first.
We'll need an API key for the 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
Start Backend and Frontend with:
npm start
The project loads a default scene. You can set a different scene by adding ?sceneId=THIS_IS_ANOTHER_SCENE_ID.
http://localhost:3000/?sceneId=0246512e-973c-4e52-a1f2-5f0008e9ee9cSimple prototype of a support ticket management app implementing the Floor Plan Engine SDK and the Space API.
check 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-sdk/v2.2.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]);Tickets are stored 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\tickets.ts
export const resolveTicket = (ticket: Ticket, tickets: Ticket[]) => (dispatch: any) => {
let spaceTickets = tickets.filter((t) => t.spaceId === ticket.spaceId)
spaceTickets = updateTicketStatus(spaceTickets, ticket.key, 'Resolved')
axios.put(`/v1/space/${ticket.spaceId}/custom-field/properties.customFields.tickets`, {
tickets: spaceTickets
}).then((response: any) => {
dispatch(flagTicketAsResolved(ticket))
})
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent