select-your-own-seat

Expand History Expand History
Collapse History Collapse History

Implement Server-Side Price Filtering

This commit modifies the seats#index HTML to take the ?maximum query parameter into account when deciding which Seat records are emphasized or de-emphasized based on their section’s price.

First, extend the price filtering <form> element to declare the [action attribute] to the current page, and the method attribute to GET. To declare these methods, and to integrate with Rails’ CSRF protection, declare the <form> using the form_with helper.

Unfortunately, Turbolinks does not support <form> submission redirects for GET requests:

The Turbolinks Rails engine performs this optimization automatically for non-GET XHR requests that redirect with the redirect_to helper.

To counteract that constraint, this commit passes the local: true option to the form_with call, opting-out of remote form submission through unobtrusive JavaScript and (transitively) Turbolinks.

Next, determine which <input type="radio"> element to denote as checked based on whether or not its value attribute matches the value of the maximum query parameter. If no query parameter is provided, ensure that the last <input type="radio"> element is checked.

Render the Section records as a <g> element to group them together. When rendering the <g> element, declare its opacity based on whether its price is within the bounds of the price filter.

Additionally, set aria-hidden="true" for <g> elements that do not match the filter criteria, so that we can exclude them from the accessibility tree.

Desktop

price filtering from the server