Admin Renderer

Explore the comprehensive capabilities of the SeatmapAdminRenderer through this interactive demonstration of event handling, seat management, and section control features.

The interface provides multiple control buttons: zoom controls (+ and -), mode switching buttons for pan (p), seat selection (s), and row selection (r), category management buttons for random category assignment (c) and category color setting (cc), and seat/section management buttons for disabling seats (d), enabling seats (e), disabling SVG sections (ds), and enabling SVG sections (es). A complete showcase of administrative tools for effective venue management.

Code

  1import { SeatmapAdminRenderer, IAdminRendererSettings } from '../../admin-renderer';
  2import './main.css';
  3
  4var el = document.getElementById('root');
  5
  6// const eventId = 'a7f2453a-e00a-4d3a-a62b-335d4e4b389d';
  7// const pk = '99a77be5-4680-4b5e-b9ce-962e78f9b811';
  8const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
  9
 10var settings: IAdminRendererSettings = {
 11  publicKey,
 12  env: 'stage',
 13
 14  onSeatMouseEnter: function (seat) {
 15    console.log('onSeatMouseEnter', seat);
 16  },
 17  onSeatDebouncedEnter: function (seat) {
 18    console.log('onSeatDebouncedEnter', seat);
 19  },
 20  onSeatMouseLeave: function () {
 21    console.log('onSeatMouseLeave');
 22  },
 23  onSeatsSelect: function (seats) {
 24    console.log('onSeatsSelect', seats);
 25  },
 26  onSeatsDeselect: function (seats) {
 27    console.log('onSeatsDeselect', seats);
 28  },
 29  onSeatsSelectionChange: function (seats) {
 30    console.log('onSeatsSelectionChange', seats);
 31  },
 32  onSeatSelect: function (seat) {
 33    console.log('onSeatSelect', seat);
 34  },
 35  onSeatDeselect: function (seat) {
 36    console.log('onSeatDeselect', seat);
 37  },
 38  onSeatSelectionChange: function () {
 39    console.log('onSeatSelectionChange');
 40  },
 41  onCartChange: function (cart) {
 42    console.log('onCartChange', cart);
 43  },
 44  onSectorMouseEnter: function (sector) {
 45    console.log('onSectorMouseEnter', sector);
 46  },
 47  onSectorMouseLeave: function () {
 48    console.log('onSectorMouseLeave');
 49  },
 50  onSectorClick: function (sector) {
 51    console.log('onSectorClick', sector);
 52  },
 53  onSectionClick: (sector) => {
 54    console.log('onSectionClick', sector);
 55  },
 56  onPan: function (delta, isEnd) {
 57    console.log('onPan', delta, isEnd);
 58  },
 59
 60  theme: {
 61    colorCategories: ['#0000FF', '#00FF00', '#FF0000'],
 62
 63    images: {
 64      checkmark:
 65        '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 8.5l5 5 10-10" stroke="#fff" stroke-width="2"/></svg>',
 66    },
 67
 68    seatStyles: {
 69      selected: {
 70        imageId: 'checkmark',
 71        seatName: undefined,
 72        size: 16,
 73        color: 'blue',
 74      },
 75    },
 76  },
 77};
 78
 79if (el) {
 80  var renderer = (window.seatmapRenderer = new SeatmapAdminRenderer(el, settings));
 81
 82  // 56 - Bigger
 83  // 81 - Smaller
 84  renderer.loadSchema(56).then(() => {
 85    // renderer.loadEvent(eventId).then(() => {
 86    renderer.setMode('pan');
 87  });
 88
 89  function disableSeatsByIds() {
 90    var seats = renderer.getSeatSelection();
 91    renderer.disableSeatsByIds(seats.map((seat) => seat.id!));
 92  }
 93  window.disableSeatsByIds = disableSeatsByIds;
 94
 95  function enableSeatsByIds() {
 96    var seats = renderer.getSeatSelection();
 97    renderer.enableSeatsByIds(seats.map((seat) => seat.id!));
 98  }
 99  window.enableSeatsByIds = enableSeatsByIds;
100
101  function changeMode(mode: string) {
102    renderer.setMode(mode);
103  }
104  window.changeMode = changeMode;
105
106  function setRandomCategory() {
107    var seats = renderer.getSeatSelection();
108    renderer.setSeatsCategory(seats as any, Math.round(Math.random() * 10));
109  }
110  window.setRandomCategory = setRandomCategory;
111
112  function setCategoryColor() {
113    var seats = renderer.getSeatSelection();
114    renderer.setSeatsCategory(seats as any, Math.round(Math.random() * 10), '#E50914');
115  }
116  window.setCategoryColor = setCategoryColor;
117
118  function disableSvgSectionsByIds() {
119    var sections = renderer.getSvgSectionBySelection();
120    renderer.disableSvgSectionsByIds(sections.map((section) => section.id));
121  }
122  window.disableSvgSectionsByIds = disableSvgSectionsByIds;
123
124  function enableSvgSectionsByIds() {
125    var sections = renderer.getSvgSectionBySelection();
126    renderer.enableSvgSectionsByIds(sections.map((section) => section.id));
127  }
128  window.enableSvgSectionsByIds = enableSvgSectionsByIds;
129}

HTML

 1<div id="root"></div>
 2
 3<div class="zoom-button-list">
 4  <div class="zoom-button" onclick="seatmapRenderer.zoomIn()">+</div>
 5  <div class="zoom-button" onclick="seatmapRenderer.zoomOut()">–</div>
 6  <div class="zoom-button" onclick="changeMode('pan')">p</div>
 7  <div class="zoom-button" onclick="changeMode('select')">s</div>
 8  <div class="zoom-button" onclick="changeMode('selectRows')">r</div>
 9  <div class="zoom-button" onclick="setRandomCategory()">c</div>
10  <div class="zoom-button" onclick="setCategoryColor()">cc</div>
11  <div class="zoom-button" onclick="disableSeatsByIds()">d</div>
12  <div class="zoom-button" onclick="enableSeatsByIds()">e</div>
13  <div class="zoom-button" onclick="disableSvgSectionsByIds()">ds</div>
14  <div class="zoom-button" onclick="enableSvgSectionsByIds()">es</div>
15</div>

Admin Renderer

Admin Reset All False