iticket-seatingplan-dev 1.1.5 → 1.1.7

package/dist/components/SeatingPlan.js

@@ -42,6 +42,7 @@ const SeatingPlan = _ref => {
   const [processing, setProcessing] = (0, _react.useState)(false);
   const [bookedSeats, setBookedSeats] = (0, _react.useState)([]);
   const [chosenSeat, setChosenSeat] = (0, _react.useState)(null);
+  const [area, setArea] = (0, _react.useState)(null);
   const statusColors = {
     unknown: '#95a5a6',
     available: '#00E640',
@@ -235,12 +236,12 @@ const SeatingPlan = _ref => {
         paName: s.priceAgeName
       })));
       img.onload = () => {
+        setPosition([img.height * 0.005, img.width * 0.005]);
         setHeight(img.height * 0.5);
         setWidth(img.width * 0.5);
-        setPosition([img.height * 0.005, img.width * 0.005]);
         setSeats(data);
       };
-      map && map.target.setView([height * 0.015, width * 0.015], 5);
+      map && area === areaId && map.target.setView([height * 0.015, width * 0.015], 6);
       setIsReloading(false);
     }).catch(error => {
       console.log(error);
@@ -255,10 +256,12 @@ const SeatingPlan = _ref => {
     });
   };
   (0, _react.useEffect)(() => {
-    if (!position && !error) {
+    if (!error && areaId !== area) {
+      setArea(areaId);
       initialFetch();
+      setPosition(null);
     }
-  }, [position]);
+  }, [areaId]);
   (0, _react.useEffect)(() => {
     if (bookedSeats && position && chosenSeat) {
       const event = {
@@ -285,7 +288,7 @@ const SeatingPlan = _ref => {
     }
   }, error ? /*#__PURE__*/_react.default.createElement("div", {
     className: "loading"
-  }, /*#__PURE__*/_react.default.createElement("h1", null, "OOPS!"), /*#__PURE__*/_react.default.createElement("div", null, error.response.data.message)) : position ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, {
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "OOPS!"), /*#__PURE__*/_react.default.createElement("div", null, error.response.data.message)) : position && area === areaId ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, {
     whenReady: setMap,
     center: [height * 0.015, width * 0.015],
     zoom: 6,
@@ -296,6 +299,69 @@ const SeatingPlan = _ref => {
       height: '100%'
     }
   }, /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "bottomright"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legendBox"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "legendHeader"
+  }, "LEGEND:"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '1rem',
+      height: '1rem',
+      borderRadius: '100%',
+      background: '#00E640'
+    }
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '0 0.5rem'
+    }
+  }, "available"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '1rem',
+      height: '1rem',
+      borderRadius: '100%',
+      background: '#95a5a6'
+    }
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '0 0.5rem'
+    }
+  }, "sold"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '1rem',
+      height: '1rem',
+      borderRadius: '100%',
+      background: '#e74c3c'
+    }
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '0 0.5rem'
+    }
+  }, "in cart"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: wheelchairSeat,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '0 0.5rem'
+    }
+  }, "wheelchair"))))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
     position: "topleft"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -306,7 +372,7 @@ const SeatingPlan = _ref => {
     }
   }, /*#__PURE__*/_react.default.createElement("button", {
     title: "Re-centre Seating Plan",
-    onClick: () => map.target.setView([height * 0.015, width * 0.015], 5),
+    onClick: () => map.target.setView([height * 0.015, width * 0.015], 6),
     className: "leaflet-control-zoom-in",
     style: {
       border: 'none',

package/dist/components/styles/index.css

@@ -7,6 +7,20 @@
   -moz-osx-font-smoothing: grayscale;
 } */
 
+
+
+.legendBox {
+	background: rgba(0, 0, 0, 0.03);
+	padding: 0.5rem 1rem;
+	border-radius: 3px;
+	text-align: left;
+}
+
+.legendHeader {
+	font-weight: bold;
+}
+
+
 .rotate {
   animation: rotation 2s infinite linear;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "iticket-seatingplan-dev",
   "description": "Seating plan with FLEXi pricing",
   "author": "gedwyne",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "private": false,
   "keywords": [
     "iticket",