star conditional based on favorites in skill cards

acmei · Dec 23, 2015 · 9d6b42a · 9d6b42a
1 parent 9b31b48
commit 9d6b42a
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/app/assets/javascripts/custom.js b/app/assets/javascripts/custom.js
@@ -32,6 +32,7 @@ $(document).ready(function($) {
     var width = $(window).width();
     var height = $(window).height();
     var greyBox = $('.grey-box');
+    var is_favorite = $(this).data('is_favorite');
 
     event.preventDefault();
     event.stopPropagation();
@@ -42,13 +43,21 @@ $(document).ready(function($) {
     greyBox.css('height', height);
     greyBox.addClass('display');
 
+    if (is_favorite) {
+      $('.favorite i').removeClass();
+      $('.favorite i').addClass('fa fa-star');
+    } else {
+      $('.favorite i').removeClass();
+      $('.favorite i').addClass('fa fa-star-o');
+    }
+
     var that = $(this);
 
     // SKILLS FAVORITE
     $('.favorite').click(function(event) {
       event.preventDefault();
 
-      var skill_id = that.data('skill_id')
+      var skill_id = that.data('skill_id');
 
       $.ajax({
         url: "/favorite",

diff --git a/app/views/skills/index.html.erb b/app/views/skills/index.html.erb
@@ -2,54 +2,94 @@
 <div class="container col-md-6 col-md-offset-3">
   <div class="row">
 
+    <!-- Mindfulness Card -->
     <div class="panel panel-default col-lg-5 card effect-click">
       <div class="panel-body card-front mindfulness">
         <p class="card-title">MINDFULNESS</p>
       </div>
       <div class="panel-body card-back mindfulness">
         <ul>
         <% @mindfulness.each do |skill| %>
-          <li><%= link_to skill.text, "#", "data-toggle": "modal", "data-target": "#myModal", "data-desc": skill.description, "data-title": skill.text, "data-skill_id": skill.id %></li>
+          <li>
+            <%= link_to skill.text, "#", 
+              "data-toggle": "modal", 
+              "data-target": "#myModal", 
+              "data-desc": skill.description, 
+              "data-title": skill.text, 
+              "data-skill_id": skill.id,
+              "data-is_favorite": @user.skills.include?(skill)
+            %>
+          </li>
         <% end %>
         </ul>
 
       </div>
     </div>
 
+    <!-- Emotion Regulation Card -->
     <div class="panel panel-default col-lg-5 card effect-click">
       <div class="panel-body card-front ER">
         <p class="card-title">EMOTION REGULATION</p>
       </div>
       <div class="panel-body card-back ER">
         <ul>
         <% @ER.each do |skill| %>
-          <li><%= link_to skill.text, "#", "data-toggle": "modal", "data-target": "#modal", "data-desc": skill.description, "data-title": skill.text, "data-skill_id": skill.id %></li>
+          <li>
+            <%= link_to skill.text, "#", 
+              "data-toggle": "modal", 
+              "data-target": "#modal", 
+              "data-desc": skill.description, 
+              "data-title": skill.text, 
+              "data-skill_id": skill.id,
+              "data-is_favorite": @user.skills.include?(skill) 
+            %>
+          </li>
         <% end %>
         </ul>
       </div>
     </div>
 
+    <!-- Distress Tolerance Card -->
     <div class="panel panel-default col-lg-5 DT card effect-click">
       <div class="panel-body card-front DT">
         <p class="card-title">DISTRESS TOLERANCE</p>
       </div>
       <div class="panel-body card-back DT">
         <ul>
         <% @DT.each do |skill| %>
-          <li><%= link_to skill.text, "#", "data-toggle": "modal", "data-target": "#modal", "data-desc": skill.description, "data-title": skill.text, "data-skill_id": skill.id %></li>
+          <li>
+            <%= link_to skill.text, "#", 
+              "data-toggle": "modal", 
+              "data-target": "#modal", 
+              "data-desc": skill.description, 
+              "data-title": skill.text, 
+              "data-skill_id": skill.id,
+              "data-is_favorite": @user.skills.include?(skill) 
+            %>
+          </li>
         <% end %>
         </ul>
       </div>
     </div>
 
+    <!-- Interpersonal Effectiveness Card -->
     <div class="panel panel-default col-lg-5 IE card effect-click">
       <div class="panel-body card-front IE">
         <p class="card-title">INTERPERSONAL EFFECTIVENESS</p>
       </div>
       <div class="panel-body card-back IE">
         <ul>
         <% @IE.each do |skill| %>
-          <li><%= link_to skill.text, "#", "data-toggle": "modal", "data-target": "#modal", "data-title": skill.text, "data-desc": skill.description, "data-title": skill.text, "data-skill_id": skill.id %></li>
+          <li>
+            <%= link_to skill.text, "#", 
+              "data-toggle": "modal", 
+              "data-target": "#modal", 
+              "data-desc": skill.description, 
+              "data-title": skill.text, 
+              "data-skill_id": skill.id,
+              "data-is_favorite": @user.skills.include?(skill) 
+            %>
+          </li>
         <% end %>
         </ul>
       </div>
@@ -66,7 +106,9 @@
           </div>
           <div class="modal-footer">
             <%= link_to favorite_path, class: 'btn btn-default favorite' do %>
-              <i class="fa fa-star-o"></i> Favorite
+              <% if logged_in? %> 
+                <i></i> Favorite
+              <% end %>
             <% end %>
           </div>
         </div>