add react version.

1 files changed, 29 insertions, 33 deletions

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 %>