iticket-seatingplan-dev 1.7.8 → 1.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/Controls.js +230 -0
  2. package/dist/components/HoverPopup.js +6 -5
  3. package/dist/components/Map.js +248 -401
  4. package/dist/components/PricingPopup.js +1 -1
  5. package/dist/components/SeatingPlan.js +80 -154
  6. package/dist/utils/enums.js +9 -1
  7. package/dist/utils/helpers.js +28 -2
  8. package/package.json +1 -1
  9. package/dist/components/Control.js +0 -75
package/dist/components/Controls.js ADDED
@@ -0,0 +1,230 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = Controls;
7
+ var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
8
+ var _reactLeafletDraw = require("react-leaflet-draw");
9
+ var _reactLeaflet = require("react-leaflet");
10
+ var _react = _interopRequireWildcard(require("react"));
11
+ var _encodedSvgs = require("./assets/encodedSvgs");
12
+ var _EditIcon = _interopRequireDefault(require("./icons/EditIcon"));
13
+ var _utils = require("../utils");
14
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
15
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
+ function Controls(_ref) {
18
+ let {
19
+ preventOrphanedSeats,
20
+ bounds,
21
+ setSelectQuantityPopupOpen,
22
+ isFullScreen,
23
+ setIsFullScreen,
24
+ mode,
25
+ setMode,
26
+ drawRef,
27
+ drawLayersRef,
28
+ handleDrawBox,
29
+ canMultiSelect,
30
+ desiredSeatQuantity = 0,
31
+ hasMembershipSeats,
32
+ hasBookedSeats,
33
+ isReloading,
34
+ onReload
35
+ } = _ref;
36
+ const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
37
+ const map = (0, _reactLeaflet.useMap)();
38
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, preventOrphanedSeats && /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
39
+ position: "topright"
40
+ }, /*#__PURE__*/_react.default.createElement("div", {
41
+ className: "extra-controls seat-quantity-control"
42
+ }, /*#__PURE__*/_react.default.createElement("button", {
43
+ title: "Quantity of seats to book",
44
+ onClick: () => {
45
+ setSelectQuantityPopupOpen(prev => !prev);
46
+ },
47
+ className: "leaflet-control-seat-quantity"
48
+ }, /*#__PURE__*/_react.default.createElement("span", null, "Selecting ", desiredSeatQuantity, " ", desiredSeatQuantity === 1 ? "seat" : "seats"), /*#__PURE__*/_react.default.createElement(_EditIcon.default, {
49
+ height: "16px",
50
+ width: "16px",
51
+ strokeWidth: "2"
52
+ })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
53
+ position: "bottomright"
54
+ }, /*#__PURE__*/_react.default.createElement("div", {
55
+ className: "legendBox"
56
+ }, /*#__PURE__*/_react.default.createElement("div", {
57
+ className: "legend-header"
58
+ }, /*#__PURE__*/_react.default.createElement("button", {
59
+ className: "legend-button ".concat(isLegendOpen ? "expanded" : ""),
60
+ onClick: () => setIsLegendOpen(!isLegendOpen)
61
+ }, /*#__PURE__*/_react.default.createElement("p", null, isLegendOpen ? "LEGEND:" : "VIEW LEGEND")), isLegendOpen && /*#__PURE__*/_react.default.createElement("button", {
62
+ className: "close-button",
63
+ onClick: () => setIsLegendOpen(false)
64
+ }, /*#__PURE__*/_react.default.createElement("img", {
65
+ src: _encodedSvgs.closeIcon,
66
+ alt: "close"
67
+ }))), /*#__PURE__*/_react.default.createElement("div", {
68
+ className: "legend-contents ".concat(isLegendOpen ? "expanded" : "")
69
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
70
+ className: "legend-item"
71
+ }, /*#__PURE__*/_react.default.createElement("div", {
72
+ className: "legend-symbol legend-available"
73
+ }), /*#__PURE__*/_react.default.createElement("p", null, "available"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
74
+ className: "legend-item"
75
+ }, /*#__PURE__*/_react.default.createElement("div", {
76
+ className: "legend-symbol legend-sold"
77
+ }), /*#__PURE__*/_react.default.createElement("p", null, "sold"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
78
+ className: "legend-item"
79
+ }, /*#__PURE__*/_react.default.createElement("div", {
80
+ className: "legend-symbol legend-in-cart"
81
+ }), /*#__PURE__*/_react.default.createElement("p", null, "in cart"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
82
+ className: "legend-item"
83
+ }, /*#__PURE__*/_react.default.createElement("img", {
84
+ src: _encodedSvgs.wheelchairIcon,
85
+ width: 15,
86
+ height: 15
87
+ }), /*#__PURE__*/_react.default.createElement("p", null, "wheelchair"))), hasMembershipSeats ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
88
+ className: "legend-item"
89
+ }, /*#__PURE__*/_react.default.createElement("img", {
90
+ src: _encodedSvgs.userIcon,
91
+ width: 15,
92
+ height: 15
93
+ }), /*#__PURE__*/_react.default.createElement("p", null, "membership seats"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
94
+ position: "topleft"
95
+ }, /*#__PURE__*/_react.default.createElement("div", {
96
+ className: "extra-controls"
97
+ }, /*#__PURE__*/_react.default.createElement("button", {
98
+ title: "Re-centre Seating Plan",
99
+ onClick: () => map.fitBounds(bounds),
100
+ className: "leaflet-control-zoom-in"
101
+ }, /*#__PURE__*/_react.default.createElement("img", {
102
+ src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/fit-icon.jpg",
103
+ style: {
104
+ height: "17px"
105
+ }
106
+ })), /*#__PURE__*/_react.default.createElement("button", {
107
+ title: "Reload Seating Plan",
108
+ disabled: isReloading,
109
+ onClick: () => {
110
+ onReload(true);
111
+ map.fitBounds(bounds);
112
+ },
113
+ className: "leaflet-control-zoom-in reload-seating-plan",
114
+ style: {
115
+ background: isReloading ? "rgb(0, 230, 64)" : undefined
116
+ }
117
+ }, /*#__PURE__*/_react.default.createElement("img", {
118
+ className: isReloading ? "rotate" : "",
119
+ src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/refresh.png",
120
+ style: {
121
+ height: "17px"
122
+ }
123
+ })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
124
+ position: "topleft"
125
+ }, /*#__PURE__*/_react.default.createElement("div", {
126
+ className: "extra-controls full-screen-control"
127
+ }, /*#__PURE__*/_react.default.createElement("button", {
128
+ title: isFullScreen ? "Collapse Seating Plan" : "Expand Seating Plan",
129
+ onClick: () => {
130
+ setIsFullScreen(prev => !prev);
131
+ },
132
+ className: "leaflet-control-zoom-in"
133
+ }, /*#__PURE__*/_react.default.createElement("img", {
134
+ src: isFullScreen ? _encodedSvgs.collapseIcon : _encodedSvgs.expandIcon,
135
+ style: {
136
+ height: "24px"
137
+ }
138
+ })))), canMultiSelect && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
139
+ position: "bottomleft"
140
+ }, /*#__PURE__*/_react.default.createElement("div", {
141
+ className: "extra-controls multi-select-control"
142
+ }, /*#__PURE__*/_react.default.createElement("div", {
143
+ className: "drag-select"
144
+ }, /*#__PURE__*/_react.default.createElement("button", {
145
+ title: "Drag select",
146
+ onClick: () => {
147
+ var _drawRef$current;
148
+ (_drawRef$current = drawRef.current) === null || _drawRef$current === void 0 || _drawRef$current._toolbars.draw.disable();
149
+ setMode(prev => prev === _utils.modes.DRAG ? _utils.modes.SINGLE : _utils.modes.DRAG);
150
+ },
151
+ className: "leaflet-control-zoom-in drag-button"
152
+ }, /*#__PURE__*/_react.default.createElement("span", null)), /*#__PURE__*/_react.default.createElement("ul", {
153
+ className: "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom cancel-button",
154
+ style: {
155
+ display: mode === _utils.modes.DRAG ? "block" : "none"
156
+ }
157
+ }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
158
+ href: "#",
159
+ onClick: e => {
160
+ e.preventDefault();
161
+ setMode(_utils.modes.SINGLE);
162
+ }
163
+ }, "Cancel")))), (hasBookedSeats || mode === _utils.modes.REMOVE) && /*#__PURE__*/_react.default.createElement("div", {
164
+ className: "remove-seats"
165
+ }, /*#__PURE__*/_react.default.createElement("button", {
166
+ title: "Remove seats",
167
+ onClick: () => {
168
+ var _drawRef$current2;
169
+ (_drawRef$current2 = drawRef.current) === null || _drawRef$current2 === void 0 || _drawRef$current2._toolbars.draw.disable();
170
+ setMode(_utils.modes.REMOVE);
171
+ },
172
+ className: "leaflet-control-zoom-in remove-button"
173
+ }, /*#__PURE__*/_react.default.createElement("span", null)), /*#__PURE__*/_react.default.createElement("ul", {
174
+ className: "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom cancel-button",
175
+ style: {
176
+ display: mode === _utils.modes.REMOVE ? "block" : "none"
177
+ }
178
+ }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
179
+ href: "#",
180
+ onClick: e => {
181
+ e.preventDefault();
182
+ setMode(_utils.modes.SINGLE);
183
+ }
184
+ }, "Cancel")))), /*#__PURE__*/_react.default.createElement("button", {
185
+ title: "Single select",
186
+ onClick: () => {
187
+ var _drawRef$current3;
188
+ (_drawRef$current3 = drawRef.current) === null || _drawRef$current3 === void 0 || _drawRef$current3._toolbars.draw.disable();
189
+ setMode(_utils.modes.SINGLE);
190
+ },
191
+ className: "leaflet-control-zoom-in single-button"
192
+ }, /*#__PURE__*/_react.default.createElement("span", null)))), /*#__PURE__*/_react.default.createElement(_reactLeaflet.FeatureGroup, {
193
+ ref: drawLayersRef
194
+ }, /*#__PURE__*/_react.default.createElement(_reactLeafletDraw.EditControl, {
195
+ position: "bottomleft",
196
+ onCreated: handleDrawBox,
197
+ onDrawStart: () => {
198
+ setMode(_utils.modes.DRAW);
199
+ },
200
+ onDrawStop: () => {
201
+ setMode(prev => prev === _utils.modes.DRAW ? _utils.modes.SINGLE : prev);
202
+ },
203
+ draw: {
204
+ rectangle: true,
205
+ circle: false,
206
+ polyline: false,
207
+ polygon: false,
208
+ marker: false,
209
+ circlemarker: false
210
+ },
211
+ edit: {
212
+ edit: false,
213
+ remove: false
214
+ },
215
+ onMounted: drawInstance => {
216
+ drawRef.current = drawInstance;
217
+ }
218
+ }))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
219
+ position: "topright"
220
+ }, /*#__PURE__*/_react.default.createElement("button", {
221
+ title: "Close full screen",
222
+ onClick: () => setIsFullScreen(false),
223
+ className: "full-screen-close-button ".concat(isFullScreen ? "show" : "")
224
+ }, /*#__PURE__*/_react.default.createElement("img", {
225
+ src: _encodedSvgs.closeIcon,
226
+ style: {
227
+ height: "24px"
228
+ }
229
+ }))));
230
+ }
package/dist/components/HoverPopup.js CHANGED
@@ -19,7 +19,8 @@ function HoverPopup(_ref) {
19
19
  mousePos,
20
20
  show,
21
21
  availablePrices,
22
- prevHovered
22
+ prevHovered,
23
+ isTouchScreen
23
24
  } = _ref;
24
25
  const map = (0, _reactLeaflet.useMap)();
25
26
  const ref = (0, _react.useRef)(null);
@@ -46,9 +47,9 @@ function HoverPopup(_ref) {
46
47
  x,
47
48
  y
48
49
  };
49
- }, [mousePos]);
50
+ }, [mousePos, map]);
50
51
  const minPrice = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? Math.min(...availablePrices.map(price => price.pMin || price.p)) : 0;
51
- const maxPrice = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? Math.max(...(availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.map(price => price.pMax || price.p))) : 0;
52
+ const maxPrice = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? Math.max(...availablePrices.map(price => price.pMax || price.p)) : 0;
52
53
  const priceText = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? availablePrices.length === 1 || maxPrice === minPrice ? _utils.NZDollar.format(availablePrices[0].p) : "".concat(_utils.NZDollar.format(minPrice), " - ").concat(_utils.NZDollar.format(maxPrice)) : "";
53
54
  const rowName = (highlightedSeats === null || highlightedSeats === void 0 || (_highlightedSeats$ = highlightedSeats[0]) === null || _highlightedSeats$ === void 0 ? void 0 : _highlightedSeats$.r) || (hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.r);
54
55
  const seatNames = (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.map(seat => seat.c)) || [hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.c];
@@ -70,9 +71,9 @@ function HoverPopup(_ref) {
70
71
  top: "".concat(tooltipPos.y, "px"),
71
72
  left: "".concat(tooltipPos.x, "px"),
72
73
  opacity: show ? 1 : 0,
73
- transitionDelay: show ? "50ms, 0ms, 0ms" : "250ms, 0ms, 0ms",
74
+ transitionDelay: isTouchScreen ? undefined : show ? "50ms, 0ms, 0ms" : "250ms, 0ms, 0ms",
74
75
  // a way to have smooth animation when hovering over the same row
75
- transitionDuration: prevHovered !== null && prevHovered !== void 0 && prevHovered.infoVisible && prevHovered !== null && prevHovered !== void 0 && prevHovered.r && prevHovered.r === (hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.r) ? "100ms, 150ms, 150ms" : "100ms, 50ms, 50ms"
76
+ transitionDuration: prevHovered !== null && prevHovered !== void 0 && prevHovered.infoVisible && prevHovered !== null && prevHovered !== void 0 && prevHovered.r && prevHovered.r === (hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.r) ? "100ms, 150ms, 150ms" : "100ms, 0ms, 0ms"
76
77
  }
77
78
  }, /*#__PURE__*/_react.default.createElement("div", {
78
79
  className: "hover-popup-content"