Merge pull request #2 from NguyenKhoa2014/feature/likeButton

Feature/like button
NguyenKhoa2014 · Jun 29, 2018 · 63e4228 · 63e4228
2 parents 42b1e05 + d5422a0
commit 63e4228
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 13 deletions.
diff --git a/newResource_template.html b/newResource_template.html
@@ -45,7 +45,7 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
     integrity="sha256-wTcu2ZVTDMsVW8yIi4MAEPKsX04ZNW4Ahr0xZtFaBOA= sha384-jeQsPA9S1co5+XspMVKVhtst1k8mzjk63i2h2rtMEpZBOVE5i22Gdjj8IF7x8e1R sha512-th5Nh7lAgv9W5pWVbKvGpb5o0NUA/ozLF7f9uxboNqVyn5DG/azSVE8k0lKR2w7Ww648/Wnb4CsgPO4SZ7OdTw==" crossorigin="anonymous"></script>
     <script>$(document).foundation();</script>
-
+    
 
 </body>
 </html>
diff --git a/public/scripts/ajax.js b/public/scripts/ajax.js
@@ -0,0 +1,15 @@
+$(document).ready(function() {
+  $('.like-button').on('click', function(ev) {
+      //console.log(ev.delegateTarget.dataset.res_id);
+      let data = {
+        resourceid: ev.delegateTarget.dataset.res_id,
+        userid: 1
+      };
+
+      $.post(`/resources/${data.resourceid}/likes`, data);
+
+      $(ev.delegateTarget).children('i').toggleClass('far');
+      $(ev.delegateTarget).children('i').toggleClass('fas');
+
+  });
+})
diff --git a/routes/resources.js b/routes/resources.js
@@ -40,7 +40,7 @@ module.exports = (knex) => {
       .where("resource_id", resource_id )
       .then((results) => {
         res.json(results);
-       // res.render("index", {resources: results}) -what is the page for comment
+       // res.render("index", {resources: results})
     });
   });
 
@@ -63,7 +63,7 @@ module.exports = (knex) => {
     const {conment_text, created_on, updated_on, resource_id, user_id} = req.body;
     knex('comment')
     .insert({
-      comment_tex,
+      comment_text,
       created_on,
       updated_on,
       resource_id,
@@ -76,5 +76,19 @@ module.exports = (knex) => {
 
   });
 
+  router.post("/:resourceid/likes", (req, res) => {
+
+    const resId = req.params.resourceid;
+    const userId = req.body.userid;
+    console.log('Posting resourceId: ', resId);
+    console.log('Posting userId: ', userId);
+    knex('likes')
+      .insert({
+        resource_id: resId,
+        user_id: userId
+      })
+      .then();
+  });
+
   return router;
 }
diff --git a/routes/users.js b/routes/users.js
@@ -47,7 +47,7 @@ module.exports = (knex) => {
       return res.redirect('/');
     })
   })
- 
+
 
 
 

diff --git a/server.js b/server.js
@@ -46,13 +46,17 @@ app.get("/", (req, res) => {
   knex
   .select("*")
   .from("resources")
-  .then((results) => {
+  .then((resources) => {
     knex
     .select("*")
     .from("categories")
-    .then((results2) => {
+    .then((categories) => {
       //return res.json({results, results2});
-      res.render("index", {resources: results})
+      res.render("index",
+      {
+        resources: resources,
+        categories: categories
+      });
     });
   });
 });

diff --git a/views/index.ejs b/views/index.ejs
@@ -9,12 +9,15 @@
       <div class="grid-container" >
         <div class="grid-x grid-margin-x grid-padding-x grid-padding-y" >
         <% for (let res of resources){ %>
-          <%console.log(res.resource_id);%>
+
           <div class="card cell small-4" style="width: 300px;">
-            <img class="thumbnail" alt="Resource image" src="<%=res.imageURL%>">
+            <div class="card-divider">
+              This is a header
+            </div>
+            <img class="thumbnail" alt="Resource image" src="http://via.placeholder.com/150x150" /> 
             <div class="card-section">
               <h4><%= res.title %></h4>
-              <a class="float-right">
+              <a data-res_id="<%=res.resource_id%>" class="like-button float-right">
                 <i class="far fa-thumbs-up"></i>
               </a>
               <p><%= res.description %></p>

diff --git a/views/partials/_footerScripts.ejs b/views/partials/_footerScripts.ejs
@@ -2,3 +2,4 @@
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
 integrity="sha256-wTcu2ZVTDMsVW8yIi4MAEPKsX04ZNW4Ahr0xZtFaBOA= sha384-jeQsPA9S1co5+XspMVKVhtst1k8mzjk63i2h2rtMEpZBOVE5i22Gdjj8IF7x8e1R sha512-th5Nh7lAgv9W5pWVbKvGpb5o0NUA/ozLF7f9uxboNqVyn5DG/azSVE8k0lKR2w7Ww648/Wnb4CsgPO4SZ7OdTw==" crossorigin="anonymous"></script>
 <script>$(document).foundation();</script>
+<script type="text/javascript" src="/scripts/ajax.js"></script>
diff --git a/views/partials/_head.ejs b/views/partials/_head.ejs
@@ -6,4 +6,5 @@
   <!-- Compressed CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-5B4hbMU9OJUxbUEvafv7D53WeubxzKZBqPfQNMh6Iw8= sha384-n7bC26QCtUZ5T9AHXtZrl7FcPQL5BkGi/JXbs6FVnUexlfniI0xH42VZxa4OxPD1 sha512-AnfTqiknRiK8BIwGSIegiguDX0838ShwXn8bEmTGPb31OPyYMzBbtnuekO6qSFzP/J8a0bMe4V6FcfM7n/YONQ==" crossorigin="anonymous">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+
 </head>
diff --git a/views/partials/_top-bar.ejs b/views/partials/_top-bar.ejs
@@ -6,9 +6,9 @@
       <li class="has-submenu">
         <a href="#0">Categories</a>
         <ul class="submenu menu vertical" data-submenu>
-          <li><a href="#0">Cat1</a></li>
-          <li><a href="#0">Cat2</a></li>
-          <li><a href="#0">Cat3</a></li>
+          <% for (cat of categories){ %>
+          <li><a href="#0"><%=cat.category%></a></li>
+          <% } %>
         </ul>
       </li>
       <li><a href="/resources/">My Resources</a></li>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -47,7 +47,7 @@ module.exports = (knex) => {
		return res.redirect('/');
		})
		})





Expand Down