WIP

app/javascript/controllers/seats_controller.js

@@ -5,15 +5,27 @@ export default class extends Controller {
   static targets = [ "map", "seat", "selection" ]
 
   connect() {
-    this.selectSeats()
+    let { x, y, zoom } = this.mapTarget.dataset
+
     this.map = svgPanZoom(this.mapTarget, {
       center: true,
       fit: true,
       zoomEnabled: false,
       zoomScaleSensitivity: 0.75,
       minZoom: 1.0,
       maxZoom: 8,
+      beforePan: this.updatePan.bind(this),
+      beforeZoom: this.updateZoom.bind(this),
     })
+
+    if (zoom && x && y) {
+      zoom = parseFloat(zoom)
+      x = parseFloat(x)
+      y = parseFloat(y)
+      this.map.zoom(zoom)
+      this.map.pan({ x, y })
+    }
+    this.selectSeats()
   }
 
   disconnect() {
@@ -42,14 +54,14 @@ export default class extends Controller {
     const price = Number(currentTarget.value || Infinity)
 
     this.seatTargets.
-      filter(seat => Number(seat.dataset.price) > price).
+      filter(seat => parseInt(seat.dataset.price) > price).
       forEach(seat => {
         seat.setAttribute("opacity", 0.35)
         seat.setAttribute("aria-hidden", true)
       })
 
     this.seatTargets.
-      filter(seat => Number(seat.dataset.price) <= price).
+      filter(seat => parseInt(seat.dataset.price) <= price).
       forEach(seat => {
         seat.setAttribute("opacity", 1.0)
         seat.setAttribute("aria-hidden", false)
@@ -63,4 +75,15 @@ export default class extends Controller {
   zoomOut() {
     this.map.zoomOut()
   }
+
+  updateZoom(_, zoom) {
+    this.mapTarget.dataset.zoom = zoom
+  }
+
+  updatePan(_, { x, y }) {
+    const { dataset } = this.mapTarget
+
+    dataset.x = x
+    dataset.y = y
+  }
 }