Commit e92a03b

mo khan <mo@mokhan.ca>
2017-03-12 20:52:06
prefer vue.js over backbone.
1 parent 2522f4e
Changed files (4)
app
app/assets/javascripts/lib/autoview.js.coffee
@@ -9,6 +9,7 @@ class MyView extends Stronglifters.Autoview
     @$el.html(@template(message: 'hello'))
 
 <div data-autoview-name="my-view"></div>
+<div data-autoview-name="my-view" data-model="user" data-model-attributes="<%= user.to_json %>">
 ###
 class Stronglifters.Autoview extends Backbone.View
   @views: {}
@@ -33,5 +34,4 @@ class Stronglifters.Autoview extends Backbone.View
   @createModel: (name, attributes) ->
     Stronglifters.AutoModel.createModel(name, attributes)
 
-  render: ->
-    console.log(@$el.html())
+  render: -> { }
app/assets/javascripts/views/workouts/edit.js.coffee
@@ -1,36 +1,18 @@
 Vue.component "exercise-set",
   props: ['set']
+  data: ->
+    model: new Stronglifters.Set(@set)
   methods:
-    updateProgress: ->
-      @actual_repetitions = 1
-      console.log(@set)
-      console.log('update')
-
-class ExerciseSetView extends Stronglifters.Autoview
-  @viewName "exercise-set-view"
-  events:
-    'click button': 'updateProgress'
-
-  updateProgress: ->
-    if !@model.started()
-      @model.complete()
-    else
-      @model.decrement()
-    @model.save()
-    @$('button').html(@model.get('actual_repetitions'))
-
-    if @model.successful()
-      @$('button').addClass('is-success')
-      @$('button').removeClass('is-danger')
-      if @model.workSet()
-        message = "If it was easy break for 1:30, otherwise rest for 3:00."
+    updateProgress: (set) ->
+      if !@model.started()
+        @model.complete()
       else
-        message = "No rest for the wicked. Let's do this!"
-      @displayMessage message, 'is-success'
-    else
-      @$('button').removeClass('is-success')
-      @$('button').addClass('is-danger')
-      @displayMessage "Take a 5:00 break.", 'is-danger'
-
-  displayMessage: (message) ->
-    console.log(message)
+        @model.decrement()
+      @model.save()
+      set.actual_repetitions = @model.get('actual_repetitions')
+  computed:
+    isCompleted: () ->
+      @set.actual_repetitions == @set.target_repetitions
+    classObject: () ->
+      "is-success": @set.actual_repetitions == @set.target_repetitions,
+      'is-danger': @set.actual_repetitions && (@set.actual_repetitions != @set.target_repetitions),
app/assets/javascripts/views/workouts/exercise_set_view.js.coffee
@@ -0,0 +1,28 @@
+class ExerciseSetView extends Stronglifters.Autoview
+  @viewName "exercise-set-view"
+  events:
+    'click button': 'updateProgress'
+
+  updateProgress: ->
+    if !@model.started()
+      @model.complete()
+    else
+      @model.decrement()
+    @model.save()
+    @$('button').html(@model.get('actual_repetitions'))
+
+    if @model.successful()
+      @$('button').addClass('is-success')
+      @$('button').removeClass('is-danger')
+      if @model.workSet()
+        message = "If it was easy break for 1:30, otherwise rest for 3:00."
+      else
+        message = "No rest for the wicked. Let's do this!"
+      @displayMessage message, 'is-success'
+    else
+      @$('button').removeClass('is-success')
+      @$('button').addClass('is-danger')
+      @displayMessage "Take a 5:00 break.", 'is-danger'
+
+  displayMessage: (message) ->
+    console.log(message)
app/views/workouts/edit.html.erb
@@ -9,7 +9,7 @@
               <p class="heading">
                 {{ set.target_repetitions }} x {{ set.target_weight }}
               </p>
-                <button v-on:click="updateProgress" class="button is-large">
+                <button v-on:click="updateProgress(set)" class="button is-large" v-bind:class="classObject">
                   {{ set.actual_repetitions }}
                 </button>
               <p> {{ set.weight_per_side }} &nbsp; </p>
@@ -25,29 +25,6 @@
       <%= link_to t(:done), workouts_path, class: 'button is-large is-fullwidth is-primary' %>
     </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 data-autoview-name="exercise-set-view" data-model="set" data-model-attributes="<%= set.to_json %>">
-              <p class="heading">
-                <%= set.target_repetitions %> x <%= set.target_weight %>
-              </p>
-              <button class="button is-large <%= set.success? ? "is-success" : set.started? ? "is-danger" : '' %>">
-                <%= set.actual_repetitions %>
-              </button>
-              <p> <%= set.weight_per_side %> &nbsp; </p>
-            </div>
-          </div>
-        <% end %>
-        </div>
-    </div>
-  </div>
-<% end %>
 </div>
 
 <% content_for :javascript do %>