Commit d68f78b

@@ -1,29 +1,33 @@
+<form on-submit="search">
   <fieldset>
     <legend>City</legend>
     <input type="text" name="city" value='{{city}}' />
   </fieldset>
   <fieldset>
     <legend>Gym</legend>
-    <input type="text" name="q" value='{{gym}}' />
+    <input on-submit="search" type="text" name="q" value='{{gym}}' />
   </fieldset>
-
-  <button on-click='search' class="button">Search</button>
+  <button on-click='search' class="button" disabled='{{search.button.disabled}}'>Search</button>
+  {{#if searching}}
+  <p><i class="fa fa-spinner fa-pulse"></i></p>
+  {{/if}}
+<form>
 
 <div id="results">
-<table>
-  <tbody>
+  <table>
+    <tbody>
 {{#each gyms}}
-    <tr>
-      <td>{{name}}</td>
-      <td>
-        {{full_address}}
-        <a href={{map_url}}><i class="fa fa-map-marker" aria-hidden=true></i></a>
-      </td>
-      <td>
-        <button on-click="choose" class="button tiny">My Home Gym</button>
-      </td>
-    </tr>
+      <tr>
+        <td>{{name}}</td>
+        <td>
+          {{full_address}}
+          <a href={{map_url}}><i class="fa fa-map-marker" aria-hidden=true></i></a>
+        </td>
+        <td>
+          <button on-click="choose" class="button tiny">My Home Gym</button>
+        </td>
+      </tr>
 {{/each}}
-  </tbody>
-</table>
+    </tbody>
+  </table>
 </div>

@@ -1,14 +1,27 @@
 Stronglifters.HomeGym = Ractive.extend
   template: RactiveTemplates["templates/home_gym"]
+  data:
+    city: 'Calgary'
+    gyms: []
+    search:
+      button:
+        disabled: true
+    searching: false
+
   oninit: ->
-    @set(city: 'Calgary')
-    @set(gyms: [])
-    @on 'search', (event) -> @search()
+    @on 'search', (event) -> @search(event)
     @on 'choose', (event) -> @choose(event.context)
+    @observe 'gym', -> @nameChanged()
 
-  search: ->
+  search: (event) ->
+    event.original.preventDefault()
+    @disableSearchButton()
+    @clearResults()
+    @set(searching: true)
     $.getJSON @buildSearchUrl(), (data) =>
+      @set(searching: false)
       @displayResults(data)
+      @enableSearchButton()
 
   choose: (gym) ->
     $.ajax
@@ -39,3 +52,21 @@ Stronglifters.HomeGym = Ractive.extend
 
   closeModal: ->
     $('#homeGymModal').foundation('reveal', 'close')
+
+  enableSearchButton: ->
+    @set('search.button.disabled': false)
+
+  disableSearchButton: ->
+    @set('search.button.disabled': true)
+
+  nameChanged: ->
+    if @valid()
+      @enableSearchButton()
+    else
+      @disableSearchButton()
+
+  valid: ->
+    @get('gym').trim().length >= 2
+
+  clearResults: ->
+    @set(gyms: [])

@@ -11,6 +11,7 @@
 // about supported directives.
 //
 //= require clipboard
+//= require lodash
 //= require jquery
 //= require jquery.turbolinks
 //= require jquery_ujs

@@ -0,0 +1,6 @@
+<div id="<%= id %>" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
+  <h2 id="modalTitle"><%= t('.title') %></h2>
+  <p class="lead"><%= t('.lead') %></p>
+  <div id="gym-search"></div>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
+</div>

@@ -32,12 +32,7 @@
   </div>
 </div>
 
-<div id="homeGymModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
-  <h2 id="modalTitle"><%= t('.title') %></h2>
-  <p class="lead"><%= t('.lead') %></p>
-  <div id="gym-search"></div>
-  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
-</div>
+<%= render partial: "home_gym_modal", locals: { id: 'homeGymModal' } %>
 
 <script type="text/javascript" charset="utf-8">
   new Stronglifters.HomeGym({ el: 'gym-search' })

@@ -73,6 +73,9 @@ en:
     edit:
       save: Save Profile
       profile_update_success: "Profile updated. This is how your public profile appears."
+    home_gym_modal:
+      title: Home Gym
+      lead: Search for your regular gym.
     show:
       exercise_header: Exercise
       maximum_achieved: Maximum Achieved

@@ -73,5 +73,6 @@ end
 
 source 'https://rails-assets.org' do
   gem 'rails-assets-clipboard'
+  gem 'rails-assets-lodash'
   gem 'rails-assets-ractive'
 end

@@ -275,6 +275,7 @@ GEM
       railties (= 4.2.6)
       sprockets-rails
     rails-assets-clipboard (1.5.10)
+    rails-assets-lodash (4.13.1)
     rails-assets-ractive (0.7.3)
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
@@ -474,6 +475,7 @@ DEPENDENCIES
   ractive-rails!
   rails (~> 4.2)!
   rails-assets-clipboard!
+  rails-assets-lodash!
   rails-assets-ractive!
   rails-erd!
   rails-i18n (~> 4.0.0)!