Add <symbol> for a selected seat

For comparison [see this commit] Nothing exciting here. The ergonomics is similar to the Stimulus version. [commit]: seanpdoyle@de0bd45
thoughtbot · Oct 8, 2023 · a2f6723 · a2f6723
1 parent f35b288
commit a2f6723
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/app/views/seats/_sections.json.props b/app/views/seats/_sections.json.props
@@ -5,6 +5,12 @@ json.array! sections do |section|
       json.y seat.y
       json.venue_floor_seat_path venue_floor_seat_path(venue, floor, seat.row_number)
       json.aria_label seat.row_number
+
+      if Current.cart.include?(seat)
+        json.href "#seat-icon-selected"
+      else
+        json.href "#seat-icon-unselected"
+      end
     end
   end
 end
diff --git a/app/views/seats/index.js b/app/views/seats/index.js
@@ -14,7 +14,7 @@ const buildSectionElements = (sections) => {
         <use
           width="12px"
           height="12px"
-          xlinkHref="#seat-icon-unselected"
+          xlinkHref={seat.href}
           x={seat.x}
           y={seat.y}
         />
@@ -68,6 +68,15 @@ export default (props) => {
                   <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
                   <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
                 </symbol>
+
+                <symbol
+                  id="seat-icon-selected"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                >
+                  <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
+                </symbol>
               </svg>
               { sectionElements }
             </svg>