iticket-seatingplan-dev 1.1.4 → 1.1.6

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',
@@ -74,9 +75,9 @@ const SeatingPlan = _ref => {
     }).then(response => {
       if ((response === null || response === void 0 ? void 0 : response.status) === 403) {
         ;
-        (chosenSeat || cs).circle.target.setStyle({
+        (cs || chosenSeat).circle.target.setStyle({
           fillColor: statusColors.sold
-        })(chosenSeat || cs).seat.s = 2;
+        })(cs || chosenSeat).seat.s = 2;
         const event = {
           type: 'error',
           details: {
@@ -90,7 +91,7 @@ const SeatingPlan = _ref => {
         setProcessing(false);
       } else if ((response === null || response === void 0 ? void 0 : response.status) === 429) {
         ;
-        (chosenSeat || cs).circle.target.setStyle({
+        (cs || chosenSeat).circle.target.setStyle({
           fillColor: statusColors.available
         });
         const event = {
@@ -105,13 +106,13 @@ const SeatingPlan = _ref => {
         callbackFunction(event);
         setProcessing(false);
       } else {
+        // console.log(chosenSeat.seat.ssId, cs?.seat.ssId)
         s.s = 4;
         s.bookedPrice = price;
-        (chosenSeat || cs).circle.target.setStyle({
+        (cs || chosenSeat).circle.target.setStyle({
           fillColor: statusColors.booked
         });
         setProcessing(false);
-        setChosenSeat(null);
         setBookedSeats([...bookedSeats, {
           ssId: s.ssId,
           r: s.r,
@@ -123,7 +124,7 @@ const SeatingPlan = _ref => {
       }
     }).catch(error => {
       ;
-      (chosenSeat || cs).circle.target.setStyle({
+      (cs || chosenSeat).circle.target.setStyle({
         fillColor: statusColors.available
       });
       const event = {
@@ -142,7 +143,6 @@ const SeatingPlan = _ref => {
       };
       callbackFunction(event);
       setProcessing(false);
-      setChosenSeat(null);
     });
   };
   const removeTicketFromCart = (s, e) => {
@@ -160,7 +160,6 @@ const SeatingPlan = _ref => {
       });
       setBookedSeats(bookedSeats.filter(bs => bs.ssId !== s.ssId));
       setProcessing(false);
-      setChosenSeat(null);
     }).catch(error => {
       e.target.setStyle({
         fillColor: statusColors.booked
@@ -176,7 +175,6 @@ const SeatingPlan = _ref => {
       };
       callbackFunction(event);
       setProcessing(false);
-      setChosenSeat(null);
     });
   };
   const handleClick = (e, s) => {
@@ -258,10 +256,11 @@ const SeatingPlan = _ref => {
     });
   };
   (0, _react.useEffect)(() => {
-    if (!position && !error) {
+    if (!error && areaId !== area) {
+      setArea(areaId);
       initialFetch();
     }
-  }, [position]);
+  }, [areaId]);
   (0, _react.useEffect)(() => {
     if (bookedSeats && position && chosenSeat) {
       const event = {
@@ -299,6 +298,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: {

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.4",
+  "version": "1.1.6",
   "private": false,
   "keywords": [
     "iticket",