iticket-seatingplan-dev 1.7.7 → 1.7.9

package/dist/components/Controls.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Controls;
+var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
+var _reactLeafletDraw = require("react-leaflet-draw");
+var _reactLeaflet = require("react-leaflet");
+var _react = _interopRequireWildcard(require("react"));
+var _encodedSvgs = require("./assets/encodedSvgs");
+var _EditIcon = _interopRequireDefault(require("./icons/EditIcon"));
+var _utils = require("../utils");
+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); }
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Controls(_ref) {
+  let {
+    preventOrphanedSeats,
+    bounds,
+    setSelectQuantityPopupOpen,
+    isFullScreen,
+    setIsFullScreen,
+    mode,
+    setMode,
+    drawRef,
+    drawLayersRef,
+    handleDrawBox,
+    canMultiSelect,
+    desiredSeatQuantity = 0,
+    hasMembershipSeats,
+    hasBookedSeats,
+    isReloading,
+    onReload
+  } = _ref;
+  const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
+  const map = (0, _reactLeaflet.useMap)();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, preventOrphanedSeats && /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topright"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "extra-controls seat-quantity-control"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Quantity of seats to book",
+    onClick: () => {
+      setSelectQuantityPopupOpen(prev => !prev);
+    },
+    className: "leaflet-control-seat-quantity"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Selecting ", desiredSeatQuantity, " ", desiredSeatQuantity === 1 ? "seat" : "seats"), /*#__PURE__*/_react.default.createElement(_EditIcon.default, {
+    height: "16px",
+    width: "16px",
+    strokeWidth: "2"
+  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "bottomright"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legendBox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-header"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "legend-button ".concat(isLegendOpen ? "expanded" : ""),
+    onClick: () => setIsLegendOpen(!isLegendOpen)
+  }, /*#__PURE__*/_react.default.createElement("p", null, isLegendOpen ? "LEGEND:" : "VIEW LEGEND")), isLegendOpen && /*#__PURE__*/_react.default.createElement("button", {
+    className: "close-button",
+    onClick: () => setIsLegendOpen(false)
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    alt: "close"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-contents ".concat(isLegendOpen ? "expanded" : "")
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-symbol legend-available"
+  }), /*#__PURE__*/_react.default.createElement("p", null, "available"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-symbol legend-sold"
+  }), /*#__PURE__*/_react.default.createElement("p", null, "sold"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-symbol legend-in-cart"
+  }), /*#__PURE__*/_react.default.createElement("p", null, "in cart"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.wheelchairIcon,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/_react.default.createElement("p", null, "wheelchair"))), hasMembershipSeats ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.userIcon,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/_react.default.createElement("p", null, "membership seats"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "extra-controls"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Re-centre Seating Plan",
+    onClick: () => map.fitBounds(bounds),
+    className: "leaflet-control-zoom-in"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/fit-icon.jpg",
+    style: {
+      height: "17px"
+    }
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    title: "Reload Seating Plan",
+    disabled: isReloading,
+    onClick: () => {
+      onReload(true);
+      map.fitBounds(bounds);
+    },
+    className: "leaflet-control-zoom-in reload-seating-plan",
+    style: {
+      background: isReloading ? "rgb(0, 230, 64)" : undefined
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: isReloading ? "rotate" : "",
+    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/refresh.png",
+    style: {
+      height: "17px"
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "extra-controls full-screen-control"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: isFullScreen ? "Collapse Seating Plan" : "Expand Seating Plan",
+    onClick: () => {
+      setIsFullScreen(prev => !prev);
+    },
+    className: "leaflet-control-zoom-in"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: isFullScreen ? _encodedSvgs.collapseIcon : _encodedSvgs.expandIcon,
+    style: {
+      height: "24px"
+    }
+  })))), canMultiSelect && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "bottomleft"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "extra-controls multi-select-control"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-select"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Drag select",
+    onClick: () => {
+      var _drawRef$current;
+      (_drawRef$current = drawRef.current) === null || _drawRef$current === void 0 || _drawRef$current._toolbars.draw.disable();
+      setMode(prev => prev === _utils.modes.DRAG ? _utils.modes.SINGLE : _utils.modes.DRAG);
+    },
+    className: "leaflet-control-zoom-in drag-button"
+  }, /*#__PURE__*/_react.default.createElement("span", null)), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom cancel-button",
+    style: {
+      display: mode === _utils.modes.DRAG ? "block" : "none"
+    }
+  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#",
+    onClick: e => {
+      e.preventDefault();
+      setMode(_utils.modes.SINGLE);
+    }
+  }, "Cancel")))), (hasBookedSeats || mode === _utils.modes.REMOVE) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "remove-seats"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Remove seats",
+    onClick: () => {
+      var _drawRef$current2;
+      (_drawRef$current2 = drawRef.current) === null || _drawRef$current2 === void 0 || _drawRef$current2._toolbars.draw.disable();
+      setMode(_utils.modes.REMOVE);
+    },
+    className: "leaflet-control-zoom-in remove-button"
+  }, /*#__PURE__*/_react.default.createElement("span", null)), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom cancel-button",
+    style: {
+      display: mode === _utils.modes.REMOVE ? "block" : "none"
+    }
+  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#",
+    onClick: e => {
+      e.preventDefault();
+      setMode(_utils.modes.SINGLE);
+    }
+  }, "Cancel")))), /*#__PURE__*/_react.default.createElement("button", {
+    title: "Single select",
+    onClick: () => {
+      var _drawRef$current3;
+      (_drawRef$current3 = drawRef.current) === null || _drawRef$current3 === void 0 || _drawRef$current3._toolbars.draw.disable();
+      setMode(_utils.modes.SINGLE);
+    },
+    className: "leaflet-control-zoom-in single-button"
+  }, /*#__PURE__*/_react.default.createElement("span", null)))), /*#__PURE__*/_react.default.createElement(_reactLeaflet.FeatureGroup, {
+    ref: drawLayersRef
+  }, /*#__PURE__*/_react.default.createElement(_reactLeafletDraw.EditControl, {
+    position: "bottomleft",
+    onCreated: handleDrawBox,
+    onDrawStart: () => {
+      setMode(_utils.modes.DRAW);
+    },
+    onDrawStop: () => {
+      setMode(prev => prev === _utils.modes.DRAW ? _utils.modes.SINGLE : prev);
+    },
+    draw: {
+      rectangle: true,
+      circle: false,
+      polyline: false,
+      polygon: false,
+      marker: false,
+      circlemarker: false
+    },
+    edit: {
+      edit: false,
+      remove: false
+    },
+    onMounted: drawInstance => {
+      drawRef.current = drawInstance;
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topright"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Close full screen",
+    onClick: () => setIsFullScreen(false),
+    className: "full-screen-close-button ".concat(isFullScreen ? "show" : "")
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    style: {
+      height: "24px"
+    }
+  }))));
+}

package/dist/components/HoverPopup.js

@@ -19,7 +19,8 @@ function HoverPopup(_ref) {
     mousePos,
     show,
     availablePrices,
-    prevHovered
+    prevHovered,
+    isTouchScreen
   } = _ref;
   const map = (0, _reactLeaflet.useMap)();
   const ref = (0, _react.useRef)(null);
@@ -46,9 +47,9 @@ function HoverPopup(_ref) {
       x,
       y
     };
-  }, [mousePos]);
+  }, [mousePos, map]);
   const minPrice = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? Math.min(...availablePrices.map(price => price.pMin || price.p)) : 0;
-  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;
+  const maxPrice = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? Math.max(...availablePrices.map(price => price.pMax || price.p)) : 0;
   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)) : "";
   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);
   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) {
       top: "".concat(tooltipPos.y, "px"),
       left: "".concat(tooltipPos.x, "px"),
       opacity: show ? 1 : 0,
-      transitionDelay: show ? "50ms, 0ms, 0ms" : "250ms, 0ms, 0ms",
+      transitionDelay: isTouchScreen ? undefined : show ? "50ms, 0ms, 0ms" : "250ms, 0ms, 0ms",
       // a way to have smooth animation when hovering over the same row
-      transitionDuration: prevHovered !== null && prevHovered !== void 0 && prevHovered.r && prevHovered.r === (hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.r) ? "100ms, 150ms, 150ms" : "100ms, 50ms, 50ms"
+      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"
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "hover-popup-content"