add react version.

6 files changed, 111 insertions, 65 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
deleted file mode 100644
index 6e8bec4..0000000
--- a/app/assets/javascripts/application.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file.
-//
-// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
-// about supported directives.
-//
-//= require clipboard
-//= require lodash
-//= require moment
-//= require jquery
-//= require jquery_ujs
-//= require ractive
-//= require backbone
-//= require ractive-backbone
-//= require Chart.bundle
-//= require chartkick
-//= require fullcalendar
-//= require vue
-//= require_self
-//= require_tree .
-//= require turbolinks
-
-var Stronglifters = Stronglifters || {};
-$(document).on('turbolinks:load', function(){
-  new Stronglifters.Startup().start();
-});
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
new file mode 100644
index 0000000..f8269ba
--- /dev/null
+++ b/app/assets/javascripts/application.js.coffee
@@ -0,0 +1,36 @@
+# This is a manifest file that'll be compiled into application.js, which will include all the files
+# listed below.
+#
+# Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+# or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+#
+# It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+# compiled file.
+#
+# Read Sprockets README (https:#github.com/sstephenson/sprockets#sprockets-directives) for details
+# about supported directives.
+#
+#= require clipboard
+#= require lodash
+#= require moment
+#= require jquery
+#= require jquery_ujs
+#= require ractive
+#= require backbone
+#= require ractive-backbone
+#= require Chart.bundle
+#= require chartkick
+#= require fullcalendar
+#= require vue
+#= require react
+#= require react_ujs
+#= require components
+
+#= require_self
+#= require_tree .
+#= require turbolinks
+
+window.Stronglifters ?= {}
+
+$(document).on 'turbolinks:load', () =>
+  new Stronglifters.Startup().start()
diff --git a/app/assets/javascripts/components.js b/app/assets/javascripts/components.js
new file mode 100644
index 0000000..9ce7a4f
--- /dev/null
+++ b/app/assets/javascripts/components.js
@@ -0,0 +1 @@
+//= require_tree ./components
diff --git a/app/assets/javascripts/components/.gitkeep b/app/assets/javascripts/components/.gitkeep
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/assets/javascripts/components/.gitkeep
diff --git a/app/assets/javascripts/components/recovery_day.js.jsx b/app/assets/javascripts/components/recovery_day.js.jsx
new file mode 100644
index 0000000..688c326
--- /dev/null
+++ b/app/assets/javascripts/components/recovery_day.js.jsx
@@ -0,0 +1,45 @@
+var RecoveryDay = React.createClass({
+  propTypes: {
+    squat: React.PropTypes.number,
+    benchPress: React.PropTypes.number,
+    overheadPress: React.PropTypes.number
+  },
+
+  render: function() {
+    return (
+      <div>
+        <h1 className="title">Wednesday</h1>
+        <h2 className="subtitle">Recovery Day</h2>
+        <table className="table">
+          <tbody>
+            <tr>
+              <td><strong>Squat</strong> 2x5 @ 80% of Monday's work weight</td>
+              <td>{this.rounded(this.rounded(this.props.squat * 0.9) * 0.8)}lbs</td>
+            </tr>
+            <tr>
+              <td><strong>*Bench Press</strong> (3x5 @ 90% 5RM)</td>
+              <td>{this.props.bench_press * 0.9}lbs</td>
+            </tr>
+            <tr>
+              <td>*<strong>Overhead Press</strong> 3x5 @ 90% 5RM</td>
+              <td>{this.props.overhead_press * 0.9}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 className="content is-small">*Bench press if you overhead pressed on Monday.</p>
+      </div>
+    );
+  },
+
+  rounded: function(n) {
+    return n - (n % 5);
+  }
+});
diff --git a/app/views/programs/texas_method.html.erb b/app/views/programs/texas_method.html.erb
index 7134848..d27a0b2 100644
--- a/app/views/programs/texas_method.html.erb
+++ b/app/views/programs/texas_method.html.erb
@@ -7,60 +7,34 @@
   </div>
 
   <div class="columns">
-    <div class="column is-4">
+    <div id="volume" class="column is-4">
       <h1 class="title">Monday</h1>
       <h2 class="subtitle">Volume Day</h2>
       <table class="table">
         <tbody>
           <tr>
             <td><strong>Squat</strong> (5x5 @ 90% 5RM)</td>
-            <td><%= rounded(@squat * 0.9) %>lbs</td>
+            <td>{{squat}}lbs</td>
           </tr>
           <tr>
             <td>*<strong>Bench Press</strong> (5x5 @ 90% 5RM)</td>
-            <td><%= rounded(@bench_press * 0.9) %>lbs</td>
+            <td>{{bench_press}}lbs</td>
           </tr>
           <tr>
             <td>*<strong>Overhead Press</strong> (5x5 @ 90% 5RM)</td>
-            <td><%= rounded(@overhead_press * 0.9) %>lbs</td>
+            <td>{{overhead_press}}lbs</td>
           </tr>
           <tr>
             <td><strong>Barbell Row</strong> (5x3 or 6x2)</td>
-            <td></td>
+            <td>{{barbell_row}}</td>
           </tr>
         </tbody>
       </table>
       <p class="content is-small">*Complete either Bench Press or Overhead Press.</p>
     </div>
 
-    <div class="column is-4">
-      <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><%= rounded(rounded(@squat * 0.9) * 0.8) %>lbs</td>
-          </tr>
-          <tr>
-            <td><strong>*Bench Press</strong> (3x5 @ 90% 5RM)</td>
-            <td><%= rounded(@bench_press * 0.9) %>lbs</td>
-          </tr>
-          <tr>
-            <td>*<strong>Overhead Press</strong> 3x5 @ 90% 5RM</td>
-            <td><%= rounded(@overhead_press * 0.9) %>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 className="column is-4">
+      <%= react_component('RecoveryDay', squat: @squat, bench_press: @bench_press, overhead_press: @overhead_press) %>
     </div>
 
     <div class="column is-4">
@@ -108,3 +82,25 @@
     </div>
   </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 %>