try gon, autoview and vue.js

9 files changed, 158 insertions, 56 deletions

diff --git a/Gemfile b/Gemfile
index c355872..de83f90 100644
--- a/Gemfile
+++ b/Gemfile
@@ -16,6 +16,7 @@ source "https://rubygems.org" do
   gem "dalli"
   gem "database_cleaner", group: :test
   gem "dotenv-rails"
+  gem "eco"
   gem "email_validator"
   gem "exception_notification"
   gem "factory_girl_rails", group: :test
@@ -28,6 +29,7 @@ source "https://rubygems.org" do
   gem "gaffe"
   gem "geocoder"
   gem "geokit-rails"
+  gem "gon"
   gem "griddler"
   gem "griddler-sendgrid"
   gem "groupdate"
diff --git a/Gemfile.lock b/Gemfile.lock
index 4f944b2..da1e578 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -140,6 +140,11 @@ GEM
       json
       thread
       thread_safe
+    eco (1.0.0)
+      coffee-script
+      eco-source
+      execjs
+    eco-source (1.1.0.rc.1)
     email_validator (1.6.0)
       activemodel
     equalizer (0.0.11)
@@ -178,6 +183,11 @@ GEM
     gherkin (4.0.0)
     globalid (0.3.7)
       activesupport (>= 4.1.0)
+    gon (6.1.0)
+      actionpack (>= 3.0)
+      json
+      multi_json
+      request_store (>= 1.0)
     griddler (1.3.1)
       htmlentities
       rails (>= 3.2.0)
@@ -330,6 +340,7 @@ GEM
       tilt
     redis (3.3.0)
     ref (2.0.0)
+    request_store (1.3.2)
     rspec-core (3.5.1)
       rspec-support (~> 3.5.0)
     rspec-expectations (3.5.0)
@@ -464,6 +475,7 @@ DEPENDENCIES
   dalli!
   database_cleaner!
   dotenv-rails!
+  eco!
   email_validator!
   exception_notification!
   factory_girl_rails!
@@ -476,6 +488,7 @@ DEPENDENCIES
   gaffe!
   geocoder!
   geokit-rails!
+  gon!
   griddler!
   griddler-sendgrid!
   groupdate!
diff --git a/app/assets/javascripts/lib/autoview.js.coffee b/app/assets/javascripts/lib/autoview.js.coffee
new file mode 100644
index 0000000..59e5594
--- /dev/null
+++ b/app/assets/javascripts/lib/autoview.js.coffee
@@ -0,0 +1,19 @@
+class Stronglifters.Autoview extends Backbone.View
+  @views: {}
+  @constructors: {}
+
+  @viewName: (name) ->
+    @constructors[name] = this
+    @::name = name
+
+  @install: (element) ->
+    $element = $(element)
+    name = $element.data("autoview-name")
+    view = new @constructors[name]
+      el: element
+      $el: $element
+    view.render()
+
+document.addEventListener "turbolinks:load", ->
+  for element in $("[data-autoview-name]")
+    Stronglifters.Autoview.install(element)
diff --git a/app/assets/javascripts/views/programs/texas_method.jst.eco b/app/assets/javascripts/views/programs/texas_method.jst.eco
new file mode 100644
index 0000000..6e7c1e6
--- /dev/null
+++ b/app/assets/javascripts/views/programs/texas_method.jst.eco
@@ -0,0 +1 @@
+<h1>hello</h1>
diff --git a/app/assets/javascripts/views/programs/texas_method/volume_display.js.coffee b/app/assets/javascripts/views/programs/texas_method/volume_display.js.coffee
new file mode 100644
index 0000000..d0bdf6c
--- /dev/null
+++ b/app/assets/javascripts/views/programs/texas_method/volume_display.js.coffee
@@ -0,0 +1,48 @@
+Vue.component "personal-records",
+  props: ['personal_records']
+
+Vue.component "volume-day",
+  props: ['personal_records']
+  methods:
+    rounded: (n) ->
+      n - (n % 5)
+  computed:
+    squat: ->
+      @rounded(@personal_records.squat * 0.9)
+    bench_press: ->
+      @rounded(@personal_records.bench_press * 0.9)
+    overhead_press: ->
+      @rounded(@personal_records.overhead_press * 0.9)
+    barbell_row: ->
+      0
+
+Vue.component "recovery-day",
+  props: ['personal_records']
+  methods:
+    rounded: (n) ->
+      n - (n % 5)
+  computed:
+    squat: ->
+      @rounded(@rounded(@personal_records.squat * 0.9) * 0.8)
+    bench_press: ->
+      @rounded(@personal_records.bench_press * 0.9)
+    overhead_press: ->
+      @rounded(@personal_records.overhead_press * 0.9)
+
+Vue.component "intensity-day",
+  props: ['personal_records']
+  computed:
+    squat: ->
+      @personal_records.squat + 5
+    bench_press: ->
+      @personal_records.bench_press + 5
+    overhead_press: ->
+      @personal_records.overhead_press + 5
+    deadlift: ->
+      @personal_records.deadlift + 5
+
+document.addEventListener "turbolinks:load", ->
+  for element in $("[data-autovue]")
+    window.app = new Vue
+      el: element
+      data: gon
diff --git a/app/assets/javascripts/views/programs/texas_method_view.js.coffee b/app/assets/javascripts/views/programs/texas_method_view.js.coffee
new file mode 100644
index 0000000..b58e105
--- /dev/null
+++ b/app/assets/javascripts/views/programs/texas_method_view.js.coffee
@@ -0,0 +1,7 @@
+class TexasMethodView extends Stronglifters.Autoview
+  @viewName "texas-method-view"
+  template: JST['views/programs/texas_method']
+
+  render: () ->
+    html = @template(message: 'hello')
+    @$el.html(html)
diff --git a/app/controllers/programs_controller.rb b/app/controllers/programs_controller.rb
index fc21f39..89b780e 100644
--- a/app/controllers/programs_controller.rb
+++ b/app/controllers/programs_controller.rb
@@ -4,11 +4,13 @@ class ProgramsController < ApplicationController
   end
 
   def texas_method
-    @barbell_row = personal_record_for(:barbell_row)
-    @bench_press = personal_record_for(:bench_press)
-    @deadlift = personal_record_for(:deadlift)
-    @overhead_press = personal_record_for(:overhead_press)
-    @squat = personal_record_for(:squat)
+    gon.personal_records = {
+      barbell_row: personal_record_for(:barbell_row),
+      bench_press: personal_record_for(:bench_press),
+      deadlift: personal_record_for(:deadlift),
+      overhead_press: personal_record_for(:overhead_press),
+      squat: personal_record_for(:squat),
+    }
   end
 
   private
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index c5eb5ea..dd554f4 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -8,7 +8,7 @@
     <title><%= t('.title') %> <%= content_for?(:title) ? "| #{yield(:title)}" : "" %></title>
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=#{ENV['GOOGLE_MAPS_API_KEY']}" %>
+    <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=#{ENV['GOOGLE_MAPS_API_KEY']}" if ENV['GOOGLE_MAPS_API_KEY'].present? %>
     <%= yield(:head) %>
   </head>
   <body class="<%= current_layout %> <%= controller_name %> <%= action_name %>">
@@ -20,5 +20,6 @@
     <script type="text/javascript" charset="utf-8">
       <%= content_for :javascript %>
     </script>
+    <%= include_gon %>
   </body>
 </html>
diff --git a/app/views/programs/texas_method.html.erb b/app/views/programs/texas_method.html.erb
index d27a0b2..84a6494 100644
--- a/app/views/programs/texas_method.html.erb
+++ b/app/views/programs/texas_method.html.erb
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container" data-autovue="texas-method">
   <div class="columns">
     <div class="column is-12">
       <h1 class="title">Texas Method</h1>
@@ -6,8 +6,26 @@
     </div>
   </div>
 
-  <div class="columns">
-    <div id="volume" class="column is-4">
+  <div class="columns" >
+    <div class="column is-3">
+      <personal-records v-bind:personal_records="personal_records" inline-template>
+      <%= form_tag texas_method_programs_path, method: :get do %>
+        <%= label_tag :bench_press, nil, class: 'label' %>
+        <%= number_field_tag :bench_press, nil, placeholder: 'Bench Press', class: 'input', 'v-model': 'personal_records.bench_press' %>
+        <%= label_tag :barbell_row, nil, class: 'label' %>
+        <%= number_field_tag :barbell_row, nil, placeholder: 'Barbell Row', class: 'input', 'v-model': 'personal_records.barbell_row' %>
+        <%= label_tag :deadlift, nil, class: 'label' %>
+        <%= number_field_tag :deadlift, nil, placeholder: 'Deadlift', class: 'input', 'v-model': 'personal_records.deadlift' %>
+        <%= label_tag :overhead_press, nil, class: 'label' %>
+        <%= number_field_tag :overhead_press, nil, placeholder: 'Overhead Press', class: 'input', 'v-model': 'personal_records.overhead_press' %>
+        <%= label_tag :squat, nil, class: 'label' %>
+        <%= number_field_tag :squat, nil, placeholder: 'Squat', class: 'input', 'v-model': 'personal_records.squat' %>
+      <% end %>
+      </personal-records>
+    </div>
+
+    <volume-day v-bind:personal_records="personal_records" inline-template>
+    <div class="column is-3">
       <h1 class="title">Monday</h1>
       <h2 class="subtitle">Volume Day</h2>
       <table class="table">
@@ -32,75 +50,66 @@
       </table>
       <p class="content is-small">*Complete either Bench Press or Overhead Press.</p>
     </div>
+    </volume-day>
 
-    <div className="column is-4">
-      <%= react_component('RecoveryDay', squat: @squat, bench_press: @bench_press, overhead_press: @overhead_press) %>
+    <recovery-day v-bind:personal_records="personal_records" inline-template>
+    <div class="column is-3">
+      <h1 class="title">Wednesday</h1>
+      <h2 class="subtitle">Recovery Day</h2>
+      <table class="table">
+        <tbody>
+          <tr>
+            <td><strong>Squat</strong> 2x5 @ 80% of Monday's work weight</td>
+            <td>{{squat}}lbs</td>
+          </tr>
+          <tr>
+            <td><strong>*Bench Press</strong> (3x5 @ 90% 5RM)</td>
+            <td>{{bench_press}}lbs</td>
+          </tr>
+          <tr>
+            <td>*<strong>Overhead Press</strong> 3x5 @ 90% 5RM</td>
+            <td>{{overhead_press}}lbs</td>
+          </tr>
+          <tr>
+            <td><strong>Chin-up</strong> 3 x body weight</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><strong>Back Extension</strong> or <strong>Glute Ham Raise</strong> 5x10</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+      <p class="content is-small">*Bench press if you overhead pressed on Monday.</p>
     </div>
+    </recovery-day>
 
-    <div class="column is-4">
+    <intensity-day v-bind:personal_records="personal_records" inline-template>
+    <div class="column is-3">
       <h1 class="title">Friday</h1>
       <h2 class="subtitle">Intensity Day</h2>
       <table class="table">
         <tbody>
           <tr>
             <td><strong>Squat</strong> (1x5 @ new 5RM)</td>
-            <td><%= @squat + 5 %>lbs</td>
+            <td>{{squat}}lbs</td>
           </tr>
           <tr>
             <td>*<strong>Bench Press</strong> (1x5 @ new 5RM)</td>
-            <td><%= @bench_press + 5 %>lbs</td>
+            <td>{{bench_press}}lbs</td>
           </tr>
           <tr>
             <td>*<strong>Overhead Press</strong> (1x5 @ new 5RM)</td>
-            <td><%= @overhead_press + 5 %>lbs</td>
+            <td>{{overhead_press}}lbs</td>
           </tr>
           <tr>
             <td><strong>Deadlift</strong> (1x5 @ new 5RM)</td>
-            <td><%= rounded(@deadlift + 5) %>lbs</td>
+            <td>{{deadlift}}lbs</td>
           </tr>
         </tbody>
       </table>
       <p class="content is-small">*Complete either Bench Press or Overhead Press. Match the exercise from Monday.</p>
     </div>
-  </div>
-
-  <div class="columns">
-    <div class="column is-6 is-offset-3">
-      <%= form_tag texas_method_programs_path, method: :get do %>
-        <%= label_tag :bench_press, nil, class: 'label' %>
-        <%= number_field_tag :bench_press, @bench_press, placeholder: 'Bench Press', class: 'input' %>
-        <%= label_tag :barbell_row, nil, class: 'label' %>
-        <%= number_field_tag :barbell_row, @barbell_row, placeholder: 'Barbell Row', class: 'input' %>
-        <%= label_tag :deadlift, nil, class: 'label' %>
-        <%= number_field_tag :deadlift, @deadlift, placeholder: 'Deadlift', class: 'input' %>
-        <%= label_tag :overhead_press, nil, class: 'label' %>
-        <%= number_field_tag :overhead_press, @overhead_press, placeholder: 'Overhead Press', class: 'input' %>
-        <%= label_tag :squat, nil, class: 'label' %>
-        <%= number_field_tag :squat, @squat, placeholder: 'Squat', class: 'input' %>
-        <%= submit_tag "Submit", class: 'button is-primary is-fullwidth' %>
-      <% end %>
-    </div>
+    </volume-day>
   </div>
 </div>
-
-<% content_for :javascript do %>
-  $(function(){
-    window.volume = new Vue({
-      el: '#volume',
-      data: {
-        squat_pr: <%= @squat %>,
-        bench_press_pr: <%= @bench_press %>,
-        overhead_press_pr: <%= @overhead_press %>,
-        barbell_row: 0,
-      },
-      computed: {
-        squat: function() { return this.rounded(this.squat_pr * 0.9); },
-        bench_press: function() { return this.rounded(this.bench_press_pr * 0.9); },
-        overhead_press: function() { return this.rounded(this.overhead_press_pr * 0.9); },
-      },
-      methods: {
-        rounded: function(n) { return n - n % 5; }
-      }
-    });
-  });
-<% end %>