render workouts#edit with vue.js.

4 files changed, 76 insertions, 2 deletions

diff --git a/app/controllers/workouts_controller.rb b/app/controllers/workouts_controller.rb
index 793f56d..8c2803e 100644
--- a/app/controllers/workouts_controller.rb
+++ b/app/controllers/workouts_controller.rb
@@ -39,6 +39,7 @@ class WorkoutsController < ApplicationController
 
   def edit
     @workout = current_user.workouts.find(params[:id])
+    gon.workout = @workout.to_hash
   end
 
   private
diff --git a/app/models/exercise_set.rb b/app/models/exercise_set.rb
index 5f1ebfe..a204e97 100644
--- a/app/models/exercise_set.rb
+++ b/app/models/exercise_set.rb
@@ -31,4 +31,17 @@ class ExerciseSet < ApplicationRecord
   def failed?
     !success?
   end
+
+  def to_hash
+    {
+      id: id,
+      exercise_id: exercise.id,
+      type: type,
+      target_weight: target_weight.to_h,
+      target_repetitions: target_repetitions,
+      actual_repetitions: actual_repetitions,
+      actual_duration: actual_duration,
+      target_duration: target_duration,
+    }
+  end
 end
diff --git a/app/models/workout.rb b/app/models/workout.rb
index e8f6549..5ff9ff2 100644
--- a/app/models/workout.rb
+++ b/app/models/workout.rb
@@ -54,4 +54,20 @@ class Workout < ApplicationRecord
   def display_status_for(exercise)
     progress_for(exercise).status
   end
+
+  def to_hash
+    exercises_hash = sets.includes(:exercise).order(:created_at).group_by(&:exercise).map do |exercise, sets|
+      {
+        id: exercise.id,
+        name: exercise.name,
+        sets: sets.sort_by(&:created_at).map(&:to_hash)
+      }
+    end
+
+    {
+      id: id,
+      body_weight: body_weight,
+      exercises: exercises_hash
+    }
+  end
 end
diff --git a/app/views/workouts/edit.html.erb b/app/views/workouts/edit.html.erb
index 6bee97a..4e49459 100644
--- a/app/views/workouts/edit.html.erb
+++ b/app/views/workouts/edit.html.erb
@@ -1,10 +1,53 @@
-<div class="container">
-  <div id="workout-view"></div>
+<div class="container" data-autovue="workout-view">
+  <div class="columns content is-small has-text-centered" v-for="exercise in exercises">
+    <div class="column is-12">
+      <h2 class="subtitle">{{ exercise.name }}</h2>
+        <div class="level">
+          <div class="level-item has-text-centered" v-for="set in workout.sets">
+            <div>
+              <p class="heading">
+                {{ set.target_repetitions }} x {{ set.target_weight }}
+              </p>
+              <button on-click="updateProgress" class="button is-large">
+                {{ set.actual_repetitions }}
+              </button>
+              <p> {{ set.weight_per_side }} &nbsp; </p>
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+
+<% @workout.exercises.primary.order_by_name.distinct.find_each do |exercise| %>
+  <div class="columns content is-small has-text-centered">
+    <div class="column is-12">
+      <h2 class="subtitle"><%= exercise.name %></h2>
+        <div class="level">
+        <% @workout.sets.for(exercise).each do |set| %>
+          <div class="level-item has-text-centered">
+            <div>
+              <p class="heading">
+                <%= set.target_repetitions %> x <%= set.target_weight %>
+              </p>
+              <button on-click="updateProgress" class="button is-large">
+                <%= set.actual_repetitions %>
+              </button>
+              <p> <%= set.weight_per_side %> &nbsp; </p>
+            </div>
+          </div>
+        <% end %>
+        </div>
+    </div>
+  </div>
+<% end %>
+
   <div class="columns">
     <div class="column is-6 is-offset-3">
       <%= link_to t(:done), workouts_path, class: 'button is-large is-fullwidth is-primary' %>
     </div>
   </div>
+
+  <div id="workout-view"></div>
 </div>
 
 <% content_for :javascript do %>
@@ -14,4 +57,5 @@ window.currentView = new Stronglifters.WorkoutView({
     return <%= raw render partial: 'edit.json.jbuilder', locals: { workout: @workout } %>;
   }
 })
+new Stronglifters.Autovue().execute();
 <% end %>