Admin Reset All False

Preserve selection states during seat management with this specialized configuration of the SeatmapAdminRenderer.

The implementation demonstrates how setting the resetAll option to false allows for selective seat disabling without affecting other selections in the admin interface. The control panel offers multiple interaction options: 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). This approach is particularly valuable for complex administrative workflows that require maintaining multiple selection states simultaneously.

Code

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

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