Archilogic Seat Assignment App Example

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.

Other Libraries Used In This Project

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.

Install and Run

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 a publishable API key for the Floor Plan Engine SDK and a secret API key for the Space API.
Once you have these keys, please create a .env file (you can copy it from .env.example) and fill in the values for REACT_APP_ARCHILOGIC_PUBLISHABLE_API_KEY and SERVER_ARCHILOGIC_SECRET_API_KEY.

`npm start`

Runs the app in the development mode.
An express app that proxies Archilogic's Space API will run on http://localhost:3000.
Open http://localhost:3001 to view it in the browser.

The project loads a default scene. You can set a different scene by adding ?scene=THIS_IS_ANOTHER_SCENE_ID.

http://localhost:3001/?scene=0246512e-973c-4e52-a1f2-5f0008e9ee9c

Archilogic library setup

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-sdk/v2.0.x/fpe.js?key=%REACT_APP_ARCHILOGIC_PUBLISHABLE_API_KEY%"></script>

The App

We need the ability to assign a desk to a user so that we can see which desks are free and which are taken.

Highlighting available desks in a floor

in components/FloorPlan.tsx

const highlightDesks = (spaces: Array<any>, furniture: Array<any>, floorPlan: any) => {
    const desks: any[] = []
    spaces.forEach((space: any) => {
        if (space.usage === "Work") {
            space.furniture.forEach((furnitureItemId: string) => {
                const furnitureItem = findById(furniture, furnitureItemId)
                // to identify a desk we look into the furniture item's productData.tags value
                if (furnitureItem && isDesk(furnitureItem)) {
                    highlightDesk(furnitureItem, floorPlan)
                }
            })
        }
    })
}

Highlight available desks

in components/FloorPlan.tsx

const highlightDesk = (furnitureItem: any) => {
    furnitureItem.node.setHighlight({fill: colors.assignable})
}

Assigning a desk (drag and drop)

in components/FloorPlan.tsx

const onDrop = (archilogicEvent: any, floorPlan: any) => {
        const event = archilogicEvent.sourceEvent;

        event.preventDefault();

        const position = [event.offsetX, event.offsetY];
        const { assets } = floorPlan.getResourcesFromPosition(floorPlan.getPlanPosition(position));
        
        if (assets.length === 0 || !isDesk(assets[0])) return;
        const furnitureItem = assets[0];

        const userId = event?.dataTransfer?.getData('text')
  
        if (!userId) return;        
        
        const user = UserService.findById(parseInt(userId))

        if (!furnitureItem || !user) return

        addDeskAssignment({
            userId: parseInt(userId), 
            deskId: furnitureItem.id
        })

        highlightAssignedDesk(furnitureItem)
    }

const highlightAssignedDesk = (furnitureItem: any, user: IUser) => {
    furnitureItem.node.setHighlight({fill: colors.assigned})
}

Displaying an asset's assigned user with Info Window

in components/FloorPlan.tsx

const onDeskClick = (event: any, floorPlan: any) => {
    const { assets } = floorPlan.getResourcesFromPosition(event.pos);
    if (assets.length === 0 || !isDesk(assets[0])) return;
    const furnitureItem = assets[0];

    setClickedDesk(furnitureItem);
}

useEffect(() => {
    if (!clickedDesk || !floorPlan) return

    const assignment = _.find(deskAssignments, (item) => {
        return String(item.deskId) === String(clickedDesk.id)
    });

    if(!assignment) return;
    const user = UserService.findById(assignment.userId)

    clickedDesk.infoWindow = floorPlan.addInfoWindow({
        pos: [clickedDesk.position.x, clickedDesk.position.z],
        width: 150,
        height: 80,
        html: '<div>' +
                '<div class="user-photo"><img src="'+user.photoUrl+'"/></div>' +
                '<div class="user-name">'+user.firstName+' '+user.lastName+'</div>' +
            '</div>',
        closeButton: true
    })

    return () => { clickedDesk.infoWindow.remove(); }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [clickedDesk, deskAssignments, floorPlan])

Saving the user id in an asset's custom field via the Space API

in shared/services/AssetService.tsx

export const assignedToPath = 'properties.customFields.assignedTo'
const resourceType = 'asset'

const assignUser = (deskAssignment: IDeskAssignment) => {
    return axios.put(`${PROXY_URL}/v1/${resourceType}/${deskAssignment.deskId}/custom-field/${assignedToPath}`, {userId: deskAssignment.userId})
}

Notes

Why do we need to have a proxy app to hit Archilogic's Space API?
This is a Secret API key and we don't want to expose it in the client app.

How does the HTML drag and drop API work?
Very nice article here from Jess Mitchell

brainedcode / seat-assignment

Archilogic Seat Assignment App Example

Other Libraries Used In This Project

Install and Run

`npm install`

`npm start`

Archilogic library setup

The App

Highlighting available desks in a floor

Highlight available desks

Assigning a desk (drag and drop)

Displaying an asset's assigned user with Info Window

Saving the user id in an asset's custom field via the Space API

Notes

About

Languages