sprinkle some usability on the modal.

1 files changed, 35 insertions, 4 deletions

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: [])