sprinkle some usability on the modal.

3 files changed, 57 insertions, 21 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 0a8f42c..a632e5d 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -11,6 +11,7 @@
 // about supported directives.
 //
 //= require clipboard
+//= require lodash
 //= require jquery
 //= require jquery.turbolinks
 //= require jquery_ujs
diff --git a/app/assets/javascripts/templates/home_gym.ractive b/app/assets/javascripts/templates/home_gym.ractive
index 367f6ba..a5231a7 100644
--- a/app/assets/javascripts/templates/home_gym.ractive
+++ b/app/assets/javascripts/templates/home_gym.ractive
@@ -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>
diff --git a/app/assets/javascripts/views/home_gym.js.coffee b/app/assets/javascripts/views/home_gym.js.coffee
index 2eceec2..ec02c7a 100644
--- a/app/assets/javascripts/views/home_gym.js.coffee
+++ b/app/assets/javascripts/views/home_gym.js.coffee
@@ -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: [])