Cloud Code setup for view counting and initial work on gallery sortin…

…g per #64
processing · Nov 25, 2014 · d2e3ee3 · d2e3ee3
1 parent 99bc483
commit d2e3ee3
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 _site
+_cloudcode/config/global.json
 .DS_Store
diff --git a/_cloudcode/cloud/main.js b/_cloudcode/cloud/main.js
@@ -0,0 +1,25 @@
+
+// Use Parse.Cloud.define to define as many cloud functions as you want.
+// For example:
+Parse.Cloud.define("hello", function(request, response) {
+  response.success("Hello world!");
+});
+
+Parse.Cloud.define("incrementViewCount", function(request, response) {
+  Parse.Cloud.useMasterKey();
+
+  var Gallery = Parse.Object.extend("Gallery");
+  var gallery = new Gallery();
+
+  gallery.id = request.params.id;
+
+  gallery.increment("viewCount", 1);
+  gallery.save(null, {
+      success: function(item) {
+        response.success(true);
+      },
+      error: function(item, error) {
+        response.error("Could not increment view count.");
+      }
+  });
+});
diff --git a/_cloudcode/public/index.html b/_cloudcode/public/index.html
@@ -0,0 +1,21 @@
+
+<html>
+  <head>
+    <title>My ParseApp site</title>
+    <style>
+    body { font-family: Helvetica, Arial, sans-serif; }
+    div { width: 800px; height: 400px; margin: 40px auto; padding: 20px; border: 2px solid #5298fc; }
+    h1 { font-size: 30px; margin: 0; }
+    p { margin: 40px 0; }
+    em { font-family: monospace; }
+    a { color: #5298fc; text-decoration: none; }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h1>Congratulations! You're already hosting with Parse.</h1>
+      <p>To get started, edit this file at <em>public/index.html</em> and start adding static content.</p>
+      <p>If you want something a bit more dynamic, delete this file and check out <a href="https://parse.com/docs/hosting_guide#webapp">our hosting docs</a>.</p>
+    </div>
+  </body>
+</html>
diff --git a/css/main.scss b/css/main.scss
@@ -624,6 +624,11 @@ div#displayEditor {
 	width: 250px;
 	height: 200px;		
 	margin-bottom: 12px;
+	box-shadow: 4px 4px 1px rgba(0,0,0,.25);
+}
+
+#galleryFilter {
+	margin-top: 12px;
 }
 
 #galleryControls {

diff --git a/display/index.html b/display/index.html
@@ -12,9 +12,8 @@ <h1 id="displayTitle">Look What I Made!</h1>
     <hr/>
 
     <p>
-      This image was created with the Drawing with Code tutorial. 
-      To learn more and explore the tutorial, click the Visit Tutorial button. 
-      You can also use the buttons below to view or download the code used to create this image.</p>
+      This image was created with the Hello Processing tutorial. 
+      To learn more and explore the tutorial, click the Visit Tutorial button. You can also view or download the code used to create this image.</p>
     <hr/>
 
     <div id="displayCommands" class="btn-group-vertical btn-block">
@@ -30,6 +29,10 @@ <h1 id="displayTitle">Look What I Made!</h1>
       <a id="downloadCode" class="btn btn-default btn-primary" href="#">
        <span class="glyphicon glyphicon-download"></span> Download Code
       </a> 
+
+      <a id="downloadCode" class="btn btn-default btn-primary" href="/gallery/">
+       <span class="glyphicon glyphicon-th-large"></span> View Gallery
+      </a>       
     </div>
 
 

diff --git a/gallery/index.html b/gallery/index.html
@@ -16,10 +16,26 @@
 
 	{% include header.html %}
 
+	<div id="galleryFilter" class="text-center">
+		<div class="btn-group">
+	      <button class="filter btn btn-default btn-sm active" data-mode="0">
+	        <span class="glyphicon glyphicon-star"></span> Featured
+	      </button>
+
+	      <button class="filter btn btn-default btn-sm" data-mode="1">
+	        <span class="glyphicon glyphicon-heart"></span> Popular
+	      </a>
+
+	      <button class="filter btn btn-default btn-sm" data-mode="2">
+	        <span class="glyphicon glyphicon-time"></span> Recent
+	      </button>
+	    </div>
+    </div>
+
 	<div id="galleryView"></div>
 
 	<div id="galleryControls">
-		<button id="loadMore" class="btn btn-default" data-loading-text="Loading...">
+		<button id="loadMore" class="btn btn-default btn-sm" data-loading-text="Loading...">
 			<span class="glyphicon glyphicon-plus"></span> Load More
 		</button>
 	</div>

diff --git a/js/display.js b/js/display.js
@@ -86,13 +86,24 @@ var helloDisplay = {
 
         var GalleryObject = Parse.Object.extend("Gallery");
         var query = new Parse.Query(GalleryObject);
+        console.log("Query start.");
         query.get(parseID, {
           success: function(gallery) {
+            console.log("Query complete.");
             helloDisplay.showSketch(gallery.get("source"));
+
+            Parse.Cloud.run('incrementViewCount', {id: gallery.id}, {
+              success: function(result) {
+                // Success
+              },
+              error: function(error) {
+                console.log("View increment failed.")
+              }
+            });
+
           },
           error: function(object, error) {
-            // The object was not retrieved successfully.
-            // error is a Parse.Error with an error code and message.
+            console.log("Object retrieval failed.")
           }
         });
 

diff --git a/js/gallery.js b/js/gallery.js
@@ -5,43 +5,49 @@
  */
 var helloGallery = {
     pageNumber: 0,
-    itemsPerPage: 10,
+    sortMode: 0,
+    itemsPerPage: 12,
     totalItems: null,
     /**
      * Initialize gallery page
      */
     init: function () {
 
+        $(".filter").click(function(e) {
+          var newMode = $(e.target).attr('data-mode');
 
-        $("#loadMore").click(function() {
+          if (newMode != helloGallery.sortMode) {
 
-          helloGallery.loadElements(function(elements){
+            helloGallery.sortMode = parseInt(newMode);
 
-            for (var element in elements) {
-              var item = $(elements[element]);
-
-              $('#galleryView').append(item);
-              $('#galleryView').isotope('appended', item);
-            }
-          });
+            $(".filter").removeClass("active");
+            $(e.target).addClass("active");
+
+            helloGallery.pageNumber = 0;
+            $('#galleryView').isotope('destroy');            
+            $('#galleryView').html("");
+            $("#loadMore").show();
+
+            helloGallery.loadInitial();
+          }
 
         });
 
-        // Get the gistID from the URL and display it
+        $("#loadMore").click(function() {
 
-        Parse.initialize("x8FmMInL8BbVeBqonPzgvS8WNKbPro65Li5DzTI0", "Y7PPNnhLPhCdFMAKgw7amBxGerz67gAnG3UKb53s");
+          helloGallery.loadMore();
 
-        var GalleryObject = Parse.Object.extend("Gallery");
-        var query = new Parse.Query(GalleryObject);
-        query.count({
-          success: function(number) {
-            helloGallery.totalItems = number;
-          },
-          error: function(error) {
-            // error is an instance of Parse.Error.
-          }
         });
 
+        // Get the ID from the URL and display it
+
+        Parse.initialize("x8FmMInL8BbVeBqonPzgvS8WNKbPro65Li5DzTI0", "Y7PPNnhLPhCdFMAKgw7amBxGerz67gAnG3UKb53s");
+
+        helloGallery.loadInitial();
+    },
+
+    loadInitial: function() {
+
         helloGallery.loadElements( function(elements){
 
           var container = $('#galleryView'); 
@@ -54,9 +60,20 @@ var helloGallery = {
                 isFitWidth: true
               }
           });  
-
        });
+    },
+
+    loadMore: function() {
+
+      helloGallery.loadElements(function(elements){
 
+        for (var element in elements) {
+          var item = $(elements[element]);
+
+          $('#galleryView').append(item);
+          $('#galleryView').isotope('appended', item);
+        }
+      });
 
     },
 
@@ -68,7 +85,32 @@ var helloGallery = {
         var query = new Parse.Query(GalleryObject);
         query.limit(helloGallery.itemsPerPage);
         query.skip(helloGallery.pageNumber * helloGallery.itemsPerPage);
-        query.descending("createdAt");
+
+        switch (helloGallery.sortMode) {
+          case 0:
+            console.log("Featured");
+            query.descending("featureScore");
+            query.addDescending("createdAt");
+            break;
+          case 1:
+            console.log("Popular");
+            query.descending("viewCount");
+            query.addDescending("createdAt");
+            break;
+          case 2:
+            console.log("Recent");
+            query.descending("createdAt");
+            break;
+        }
+
+        query.count({
+          success: function(number) {
+            helloGallery.totalItems = number;
+          },
+          error: function(error) {
+            // error is an instance of Parse.Error.
+          }
+        });        
 
         query.find({
           success: function(results) {