Render Seats for a Venue with SVG elements

For comparison [see this commit][commit]

There's nothing exciting to show off in this commit, but that's also the
point.

Superglue is really a multi-page application. We include all the content
together on the same `index.json.props` just as we would when we're
working with just a single `index.html.erb`. Then we modify the JSX markup to
account for the new incoming props.

Of note! The very next commit is a cherry-pick of the test on the original
select-your-own-seat branch. There were no additional changes to make the
tests work!

[commit]: seanpdoyle@216b59c

app/controllers/seats_controller.rb

@@ -1,2 +1,13 @@
 class SeatsController < ApplicationController
+  def index
+    venue = Venue.find_by!(slug: params[:venue_id])
+    floor = venue.floors.find_by!(slug: params[:floor_id])
+    sections = floor.sections.includes(:seats)
+
+    render(locals: {
+      venue: venue,
+      floor: floor,
+      sections: sections,
+    })
+  end
 end

app/views/seats/index.js

@@ -1,7 +1,26 @@
 import React from 'react'
 import Layout from '../../components/Layout'
 
+const buildSectionElements = (sections) => {
+  return sections.map((section) => {
+    const seatElements = section.seats.map(({x, y}) => (
+      <svg width="12px" height="12px" viewBox="0 0 24 24" x={x} y={y}>
+        <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
+        <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
+      </svg>
+    ))
+
+    return <g>{seatElements}</g>
+  })
+}
+
 export default (props) => {
+  const {
+    sections
+  } = props
+
+  const sectionElements = buildSectionElements(sections)
+
   return (
     <Layout {...props}>
       <header className="syos-site-frame__header syos-site-header">
@@ -24,6 +43,7 @@ export default (props) => {
               viewBox="0 0 1600 1600"
             >
               <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
+              { sectionElements }
             </svg>
           </div>
 

app/views/seats/index.json.props

@@ -0,0 +1,12 @@
+json.venue_name venue.name
+
+json.sections do
+  json.array! sections do |section|
+    json.seats do
+      json.array! section.seats do |seat|
+        json.x seat.x
+        json.y seat.y
+      end
+    end
+  end
+end