Zorg ervoor dat u een API-sleutel hebt en dat u een token hebt verkregen met behulp van de clientreferenties van het type OAuth 2.0. (Zie de handleiding Aan de slag voor meer informatie).
Haal de lijst met gebouwen op met behulp van het eindpunt v1/public/buildings .

bijv.

GET <https://api.onkadence.co/v1/public/buildings

>

{ "@context": "/v1/contexts/Building", "@id": "/v1/public/buildings", "@type": "hydra:Collection", "hydra:totalItems": 1, "hydra:member": [ { "@id": "/v1/public/buildings/01EMPPAER4FWYN1MSBW0NAZSBK", "@type": "Building", "id": "01EMPPAER4FWYN1MSBW0NAZSBK", "name": "Bell Yard Coffee - Bell Yard", "timeZone": "Europe/London", "latitude": "51.51459200", "longitude": "-0.11192900", "addressLine1": "1 Quality Court", "addressLine2": "Holborn", "city": "London", "county": "Greater London", "countryCode": "GB", "createdAt": "2023-06-29T08:40:31+00:00", "modifiedAt": "2023-07-07T10:27:00+00:00", "countryName": "United Kingdom" } ], "hydra:view": { "@id": "/v1/public/buildings?countryCode=GB&city=London&name=Bell%20Yard", "@type": "hydra:PartialCollectionView" }, "hydra:search": { "@type": "hydra:IriTemplate", "hydra:template": "/v1/public/buildings{?}", "hydra:variableRepresentation": "BasicRepresentation", "hydra:mapping": [] } }

Haal voor elk gebouw de verdiepingen op met behulp van het v1/public/floors -eindpunt. Deze API ondersteunt filteren met de queryparameter buildingId.

bijv.

GET <https://api.onkadence.co/v1/public/floors?buildingId=01EMPPAER4FWYN1MSBW0NAZSBK

>

{ "@context": "/v1/contexts/Floor", "@id": "/v1/public/floors", "@type": "hydra:Collection", "hydra:totalItems": 2, "hydra:member": [ { "@id": "/v1/public/floors/01F01JHXDZCKNP4J9N9PA878Q1", "@type": "Floor", "id": "01F01JHXDZCKNP4J9N9PA878Q1", "name": "Floor 1", "floorplanUrl": "<https://static.onkadence.co/a/floorplan.svg>" }, { "@id": "/v1/public/floors/01FXSN478SSJAEEWJ26F9MHK4W", "@type": "Floor", "id": "01FXSN478SSJAEEWJ26F9MHK4W", "name": "Floor 2", "floorplanUrl": "<https://static.onkadence.co/another/floorplan.svg>" } ], "hydra:view": { "@id": "/v1/public/floors?buildingId=01EMPPAER4FWYN1MSBW0NAZSBK", "@type": "hydra:PartialCollectionView" } }

Laad de SVG van de floorplanUrl . Elke ruimte op de vloer wordt weergegeven als een SVG-element met een ID in de volgende notatie:

space::{space_type}::{spaceId}
Haal boekingen op voor een specifieke verdieping met behulp van het v1/public/bookings -eindpunt. U kunt filteren op verdieping-ID en datumbereik om boekingen voor een bepaalde dag of periode op te halen.
bijv.

GET <https://api.onkadence.co/v1/public/bookings?floorId=01F01JHXDZCKNP4J9N9PA878Q1&order[startDateTime]=asc&startDateTime[local_after]=2023-01-01T00:00:00Z&startDateTime[local_before]=2023-01-01T23:59:59Z

>

{ "hydra:member": [ { ... "id": "01GTBV1CT3BM8A42SEJ2J5F4EG", "startDate": "2023-01-01T09:00:00+00:00", "endDate": "2023-01-01T17:00:00+00:00", "status": "booked", "type": "desk", "building": "/v1/public/buildings/01EMPPAER4FWYN1MSBW0NAZSBK" } ], "hydra:totalItems": 1 }
Koppel de space-ID van elk boekingsresultaat aan het bijbehorende SVG-element met behulp van de hierboven beschreven ID-indeling. U kunt het SVG-element vervolgens stylen op basis van de boekingsstatus. Bijvoorbeeld:

vulling: #60D27B (groen) voor beschikbare
vulling: #FF9B53 (oranje) voor geboekt

Om de plattegrond actueel te houden, moet u het boekingseindpunt periodiek (bijvoorbeeld elke 5 minuten) raadplegen om realtime wijzigingen in de beschikbaarheid weer te geven.

Bezoek onze GitHub-repository voor voorbeeld-apps voor een werkend voorbeeld en de volledige broncode.

Overzicht