Added styling, source filtering

awwest · May 20, 2014 · 5a3e76d · 5a3e76d
1 parent 0577c2b
commit 5a3e76d
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 36 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 node_modules/
-client/lib
 _DS_Store
-DS_Store
+DS_Store
+client/lib/
diff --git a/client/index.html b/client/index.html
@@ -26,7 +26,55 @@
         </div>
       </nav>
     </header>
-    <div ng-view></div>
+    <div class="view" ng-view></div>
+
+
+    <script type="text/ng-template" id="text.html">
+      <h1 class="title">{{post.title}}</h1>
+      <p class="body" ng-bind-html="post.body">{{post.body}}</p>
+      <div class="date">{{post.date}}</div>
+    </script>
+
+    <script type="text/ng-template" id="photo.html">
+      <div ng-bind-html="post.photos">{{post.photos}}</div>
+      <p ng-bind-html="post.caption">{{post.caption}}</p>
+      <div>{{post.date}}</div>
+    </script>
+
+    <script type="text/ng-template" id="quote.html">
+      <blockquote ng-bind-html="post.text">{{post.text}}</blockquote>
+      <p ng-bind-html="post.source">{{post.source}}</p>
+      <p>{{post.date}}</p>
+    </script>
+
+    <script type="text/ng-template" id="link.html">
+      <a href={{post.url}}>{{post.title}}</a>
+      <div ng-bind-html="post.description">post.description</div>
+      <div>{{post.date}}</div>
+    </script>
+
+    <script type="text/ng-template" id="chat.html">
+      <div>{{post.title}}</div>
+      <div ng-bind-html="post.body">{{post.body}}</div>
+      <div>{{post.date}}</div>
+    </script>
+
+    <script type="text/ng-template" id="audio.html">
+      <div ng-bind-html="post.player">{{post.player}}</div>
+      <div ng-bind-html="post.caption">{{post.caption}}</div>
+      <div>{{post.date}}</div>
+    </script>
+
+    <script type="text/ng-template" id="video.html">
+      <div ng-bind-html="post.player">{{post.player}}</div>
+      <div ng-bind-html="post.caption">{{post.caption}}</div>
+    </script>
+
+    <script type="text/ng-template" id="answer.html">
+      <div ng-bind-html="post.question">{{post.question}}</div>
+      <a href={{post.askingUrl}}>{{post.askingName}}</a>
+      <div ng-bind-html="post.answer">{{post.answer}}</div>
+    </script>
 
     <script src="lib/angular/angular.js"></script>
     <script src="lib/angular-route/angular-route.js"></script>

diff --git a/client/main/main.js b/client/main/main.js
@@ -14,41 +14,44 @@
 
   })
   .controller('MainController', function ($scope, $http, $sce) {
-    $scope.things = [];
     $scope.showNext = false;
+    $scope.showLoading = false;
     $scope.postNum = 0;
     $scope.contentType = '/';
     $scope.targetBlog = 'newyorker.tumblr.com';
     $scope.page = 1;
 
+    if ($scope.original) $scope.contentSource = $scope.targetBlog;
+
     $scope.postPhoto = function(post){
       var photos = [];
       for(var y = 0; y < post.photos.length; y++){
-        photos.push('<img src=' + post.photos[y].original_size.url + '></img>');
+        photos.push('<img src=' + post.photos[y].original_size.url + ' class="img-responsive"></img>');
       }
       photos = photos.join('');
-      $scope.things.push({html: $sce.trustAsHtml(photos)});
+      $scope.things.push({type: 'photo', photos: $sce.trustAsHtml(photos), caption: $sce.trustAsHtml(post.caption), date: post.date});
     };
     $scope.postText = function(post){
-      $scope.things.push({html: $sce.trustAsHtml(post.body)});
+      $scope.things.push({body: $sce.trustAsHtml(post.body), title: post.title, date: post.date, type: post.type}); //{html: $sce.trustAsHtml(post.body + post.date)});
     };
     $scope.postQuote = function(post){
-      $scope.things.push({html: $sce.trustAsHtml('<div>' + post.text + '</div>' + post.source)});
+      $scope.things.push({type: 'quote', text: post.text, source: $sce.trustAsHtml(post.source), date: post.date});//html: $sce.trustAsHtml('<div>' + post.text + '</div>' + post.source + post.date)});
     };
     $scope.postLink = function(post){
-      $scope.things.push({html: $sce.trustAsHtml('<a href=' + post.url + '>' + post.title + '</a><div>' + post.description + '</div>')});
+      $scope.things.push({type: 'link', title: post.title, url: $sce.trustAsHtml(post.url), description: post.description, date: post.date}); //html: $sce.trustAsHtml('<a href=' + post.url + '>' + post.title + '</a><div>' + post.description + '</div>')});
     };
     $scope.postChat = function(post){
-      post.title ? $scope.things.push({html: $sce.trustAsHtml('<div>' + post.title + '</div>' + post.body)}) : $scope.things.push({html: $sce.trustAsHtml(post.body)});
+      $scope.things.push({type: 'chat', title: post.title, body: post.body, date: post.date});//post.title ? $scope.things.push({html: $sce.trustAsHtml('<div>' + post.title + '</div>' + post.body)}) : $scope.things.push({html: $sce.trustAsHtml(post.body)});
     };
     $scope.postAudio = function(post){
-      $scope.things.push({html: $sce.trustAsHtml(post.player + '<div>' + post.caption + '</div>')});
+      $scope.things.push({type: 'audio', player: $sce.trustAsHtml(post.player), caption: $sce.trustAsHtml(post.caption), date: post.date});//html: $sce.trustAsHtml(post.player + '<div>' + post.caption + '</div>')});
     };
     $scope.postVideo = function(post){
-      $scope.things.push({html: $sce.trustAsHtml(post.player.embed_code)});
+
+      $scope.things.push({type: 'video', player: $sce.trustAsHtml(post.player[post.player.length-1].embed_code), caption: $sce.trustAsHtml(post.caption), date: post.date});//html: $sce.trustAsHtml(post.player.embed_code)});
     };
     $scope.postAnswer = function(post){
-      $scope.things.push({html: $sce.trustAsHtml('<div>' + post.question + '</div><a href=' + post.asking_url + '>' + post.asking_name + '</a><div>' + post.answer + '</div>')});
+      $scope.things.push({type: 'answer', question: post.question, answer: post.answer, askingName: post.asking_name, askingUrl: post.asking_url});//html: $sce.trustAsHtml('<div>' + post.question + '</div><a href=' + post.asking_url + '>' + post.asking_name + '</a><div>' + post.answer + '</div>')});
     };
 
 
@@ -79,7 +82,8 @@
     };
 
     $scope.searchFor = function(url){
-      //console.log(valid);
+      $scope.things = [];
+      $scope.postNum = 0;
       $scope.lastRequest = {
           blog: url,
           contentType: $scope.contentType,
@@ -91,28 +95,37 @@
     };
 
     $scope.loadRequest = function(){
-      $http({method: 'POST', url: '/load',
+      var reqUrl;
+      $scope.showLoading = true;
+      reqUrl = $scope.lastRequest.source ? '/load-from-source' : '/load';
+      $http({method: 'POST', url: reqUrl,
         data: $scope.lastRequest})
       .success(function(data, status, headers, config) {
-          $scope.postNum += data.posts.length;
-          for(var i = 0; i < data.posts.length; i++){
-            var post = data.posts[i];
-            if($scope.contentSource){
-              console.log(post.source_url, post.source_title);
-              if(post.source_title === $scope.contentSource){
-                $scope.parsePost(post);
-              }
-            }else{
+        console.log(data);
+        $scope.postNum += data.posts.length;
+        for(var i = 0; i < data.posts.length; i++){
+          var post = data.posts[i];
+          if($scope.contentSource){
+            var pSource = post.source_title || post.reblogged_root_name || post.blog_name;
+            if(pSource === $scope.contentSource){
               $scope.parsePost(post);
             }
+          }else{
+            $scope.parsePost(post);
           }
-        })
-        .error(function(data, status, headers, config) {
-          console.log(data);
-          console.log(status);
-          console.log(headers);
-          console.log(config);
-        });
+        }
+        if($scope.things.length < 19 && data.total_posts > $scope.postNum){
+          setTimeout($scope.loadNext($scope.postNum),10000);
+        }
+        $scope.showLoading = false;
+      })
+      .error(function(data, status, headers, config) {
+        console.log(data);
+        console.log(status);
+        console.log(headers);
+        console.log(config);
+      });
+
     };
   });
 }(angular));
diff --git a/client/main/main.tpl.html b/client/main/main.tpl.html
@@ -1,6 +1,6 @@
 <div class="container-fluid" ng-model='things'>
   <h1></h1>
-  <form name='findForm'>
+  <form name='findForm' class='form-horizontal'>
     <input ng-model='targetBlog' name='url' placeholder='Enter Blog URL'>
     <select ng-model='contentType'>
       <option value='/'>All</option>
@@ -17,8 +17,9 @@ <h1></h1>
     <input ng-model='contentSource' placeholder='(Optional) Source'>
     <button type='submit' ng-model='search' ng-click='searchFor(targetBlog)'>Find</button>
   </form>
-  <div ng-repeat='thing in things'>
-    <div class='post' ng-bind-html='thing.html'>{{thing}}</div>
+  <div ng-model='loading' ng-show='showLoading'>Loading...</div>
+  <div class="repeat" ng-repeat='post in things'>
+    <div class='post' ng-include="post.type + '.html'">{{post}}</div>
   </div>
   <a ng-model='nextButton' ng-click='loadNext(postNum)' ng-show='showNext'>Next Page</a>
 </div>
diff --git a/client/styles/css/app.css b/client/styles/css/app.css
@@ -1,2 +1,30 @@
 #messages {
   color: lightgrey; }
+
+.post {
+  padding: 20px;
+  display: block;
+  margin: 30px;
+  margin-left: 20%;
+  margin-right: 20%;
+  background-color: white;
+  border-radius: 10px 10px 10px 10px;
+}
+.view {
+  background-color: #336699;
+}
+.repeat {
+  background-color: #336699;
+}
+.form-horizontal {
+  background-color: white;
+}
+/*.navbar-header {
+  background-color: white;
+}
+.navbar-brand {
+  background-color: white;
+}
+.navbar-nav {
+  background-color: white;
+}*/
diff --git a/server/main/config.js b/server/main/config.js
@@ -25,4 +25,5 @@ module.exports = exports = function (app, express, routers) {
   app.use(middle.handleError);
 
   app.post('/load', middle.loadPosts);
+  app.post('/load-from-source', middle.loadFromSource);
 };
diff --git a/server/main/middleware.js b/server/main/middleware.js
@@ -37,8 +37,8 @@ module.exports = exports = {
     }
   },
   loadPosts: function (req, res, next){
-    console.log(req.body);
-    client.posts(req.body.blog, {type: req.body.contentType, limit: 20, offset: req.body.offset}, function(err, data){
+
+    client.posts(req.body.blog, {type: req.body.contentType, limit: 20, offset: req.body.offset, reblog_info: 'true'}, function(err, data){
       if(err){
         res.send(err, 404);
       }
@@ -48,5 +48,28 @@ module.exports = exports = {
     //   //console.log('Data received', data);
     //   res.send(data);
     // });
+  },
+  loadFromSource: function(req, res, next){
+    // var foundPosts = 0;
+    // var postList = [];
+    // var totalPosts = 0;
+    client.posts(req.body.blog, {type: req.body.contentType, limit: 20, offset: req.body.offset, reblog_info: 'true'}, function(err, data){
+      if(err){
+        res.send(err, 404);
+      }
+      res.send(data);
+      // foundPosts += 20;
+      // console.log('Making request');
+      // totalPosts = req.body.offset;
+      // for(var i=0; i<data.posts.length; i++){
+      //   if(data.posts[i].source_title === req.body.source){
+      //     postList.push(data.posts[i]);
+      //     foundPosts++;
+      //     console.log(foundPosts);
+      //   }
+      // }
+      // console.log(req.body.offset);
+    });
+
   }
 };