Add behavior to Zoom In and Zoom Out buttons

The plus and minus buttons introduced in the previous commit are decorated with data-action declarations which route click events to the seats#zoomIn and seats#zoomOut actions, respectively.

Desktop

panning-zooming-buttons


      app/javascript/controllers/seats_controller.js

diff --git a/app/javascript/controllers/seats_controller.js b/app/javascript/controllers/seats_controller.js
index 17ea6df..4d78851 100644
--- a/app/javascript/controllers/seats_controller.js
+++ b/app/javascript/controllers/seats_controller.js
@@ -20,4 +20,12 @@ export default class extends Controller {
   disconnect() {
     this.map.destroy()
   }
+
+  zoomIn() {
+    this.map.zoomIn()
+  }
+
+  zoomOut() {
+    this.map.zoomOut()
+  }
 }


      app/views/seats/index.html.erb

diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 26dfb9a..d0428cb 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -146,6 +146,7 @@
         <button
           class="syos-button syos-button--transparent syos-control-zoom__button"
           type="button"
+          data-action="click->seats#zoomIn"
         >
           <%= inline_svg_tag(
             "icons/plus.svg",
@@ -158,6 +159,7 @@
         <button
           class="syos-button syos-button--transparent syos-control-zoom__button"
           type="button"
+          data-action="click->seats#zoomOut"
         >
           <%= inline_svg_tag(
             "icons/minus.svg",