Section Management

Gain complete control over venue sections with this comprehensive management demonstration of the SeatmapBookingRenderer.

The interface features six control buttons: standard zoom controls (+ and -) for navigation, and four section management buttons that showcase different targeting methods - disable sections by IDs (di), enable sections by IDs (ei), disable sections by names (dn), and enable sections by names (en). This implementation illustrates how to handle section click events, mouse enter/leave interactions, and programmatically manage section visibility using both technical identifiers and human-readable names.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '526b78be-331e-44ea-a342-098ad7572074';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  onSectionClick: (sector) => {
12    console.log('onSectionClick', sector);
13  },
14  onSectorMouseEnter(section) {
15    console.log('onSectorMouseEnter', section);
16  },
17  onSectorMouseLeave() {
18    console.log('onSectorMouseLeave');
19  },
20};
21
22const el = document.getElementById('root');
23
24if (el) {
25  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
26
27  renderer.loadEvent(eventId);
28
29  window.disableSvgSectionsByIds = (resetAll?: boolean) => {
30    var sections = renderer?.getSvgSectionBySelection();
31    if (!sections) {
32      return;
33    }
34
35    renderer?.disableSvgSectionsByIds(
36      sections.map((section) => section.id),
37      { resetAll },
38    );
39  };
40
41  window.enableSvgSectionsByIds = () => {
42    var sections = renderer?.getSvgSectionBySelection();
43    if (!sections) {
44      return;
45    }
46
47    renderer?.enableSvgSectionsByIds(sections.map((section) => section.id));
48  };
49
50  window.disableSvgSectionsByNames = (resetAll?: boolean) => {
51    var sections = renderer?.getSvgSectionBySelection();
52    if (!sections) {
53      return;
54    }
55
56    renderer?.disableSvgSectionsByNames(
57      sections.map((section) => section.name),
58      { resetAll },
59    );
60  };
61
62  window.enableSvgSectionsByNames = () => {
63    var sections = renderer?.getSvgSectionBySelection();
64    if (!sections) {
65      return;
66    }
67
68    renderer?.enableSvgSectionsByNames(sections.map((section) => section.name));
69  };
70}

HTML

1<div id="root"></div>
2<div class="ZoomButtonList">
3  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
5  <div class="ZoomButton" onclick="disableSvgSectionsByIds()">di</div>
6  <div class="ZoomButton" onclick="enableSvgSectionsByIds()">ei</div>
7  <div class="ZoomButton" onclick="disableSvgSectionsByNames(true)">dn</div>
8  <div class="ZoomButton" onclick="enableSvgSectionsByNames()">en</div>
9</div>