Commit 97b6774
Changed files (8)
app
assets
javascripts
views
programs
app/assets/javascripts/components/.gitkeep
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);
+ }
+});
app/assets/javascripts/application.js
@@ -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();
-});
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()
app/assets/javascripts/components.js
@@ -0,0 +1,1 @@
+//= require_tree ./components
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 %>
Gemfile
@@ -50,6 +50,7 @@ source "https://rubygems.org" do
gem "rails-erd", group: :development
gem "rails-i18n", "~> 4.0.0"
gem "rails_12factor", group: :production
+ gem "react-rails"
gem "redis", "~> 3.0"
gem "rspec-rails", group: :test
gem "rubyzip", require: "zip"
Gemfile.lock
@@ -48,6 +48,10 @@ GEM
descendants_tracker (~> 0.0.4)
ice_nine (~> 0.11.0)
thread_safe (~> 0.3, >= 0.3.1)
+ babel-source (5.8.35)
+ babel-transpiler (0.7.0)
+ babel-source (>= 4.0, < 6)
+ execjs (~> 2.0)
bcrypt (3.1.11)
brakeman (3.3.2)
builder (3.2.3)
@@ -317,6 +321,13 @@ GEM
ffi (>= 0.5.0)
rdoc (4.2.2)
json (~> 1.4)
+ react-rails (1.10.0)
+ babel-transpiler (>= 0.7.0)
+ coffee-script-source (~> 1.8)
+ connection_pool
+ execjs
+ railties (>= 3.2)
+ tilt
redis (3.3.0)
ref (2.0.0)
rspec-core (3.5.1)
@@ -495,6 +506,7 @@ DEPENDENCIES
rails-erd!
rails-i18n (~> 4.0.0)!
rails_12factor!
+ react-rails!
redis (~> 3.0)!
rspec-rails!
rubyzip!