Added micro-blog app

dtamburr · Nov 7, 2012 · b0a6ef4 · b0a6ef4
1 parent 1815df3
commit b0a6ef4
Show file tree

Hide file tree

Showing 23 changed files with 24,308 additions and 0 deletions.
diff --git a/users/micro-blog/app.dpd b/users/micro-blog/app.dpd
@@ -0,0 +1 @@
+{}
diff --git a/users/micro-blog/public/css/bootstrap.min.css b/users/micro-blog/public/css/bootstrap.min.css
diff --git a/users/micro-blog/public/css/style.css b/users/micro-blog/public/css/style.css
@@ -0,0 +1,16 @@
+.header .welcome {
+  margin-top: 18px;
+}
+
+.feed-list .post {
+  border-bottom: 1px #ccc solid;
+  padding: 20px 0;
+}
+
+.feed-list .post .author {
+  font-weight: bold;
+}
+
+.feed .load-more-btn {
+  padding: 10px 0;
+}
diff --git a/users/micro-blog/public/img/glyphicons-halflings-white.png b/users/micro-blog/public/img/glyphicons-halflings-white.png
diff --git a/users/micro-blog/public/img/glyphicons-halflings.png b/users/micro-blog/public/img/glyphicons-halflings.png
diff --git a/users/micro-blog/public/index.html b/users/micro-blog/public/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html ng-app="microblogApp">
+<head>
+	<title>Deployd Microblogging</title>
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <!-- Angular does some things with CSS so it's good to load this in the head -->
+  <script type="text/javascript" src="/js/lib/angular.js"></script>
+</head>
+<body>
+  <div class="container">
+    <ng-include src="'partials/header.html'"></ng-include>
+    <div class="feed" ng-controller="FeedCtrl">
+      <div class="span8">
+        <p ng-hide="currentUser" class="muted">
+          Log in to post a message
+        </p>
+        <form class="well" ng-show="currentUser">
+          <textarea class="input-xxlarge" placeholder="What's up?" ng-model="newPost"></textarea>
+          <div>
+            <button class="btn btn-primary" ng-click="submit(newPost)">Post</button>
+          </div>
+        </form>
+        <ng-include src="'partials/feed.html'"></ng-include>
+      </div>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="/js/lib/jquery.js"></script>
+  <script type="text/javascript" src="/dpd.js"></script>
+  <script type="text/javascript" src="/js/global.js"></script>
+  <script type="text/javascript" src="/js/index.js"></script>
+</body>
+</html>
diff --git a/users/micro-blog/public/js/global.js b/users/micro-blog/public/js/global.js
@@ -0,0 +1,104 @@
+var app = angular.module('microblogApp', []);
+
+app.factory('Feed', function($rootScope) {
+  var PAGE_SIZE = 5;
+
+  var Feed = function Feed(query) {
+    this.query = query || {};
+    this.posts = [];
+    this.lastTime = 0;
+    this.moreToLoad = false;
+  };
+
+  Feed.prototype.loadPosts = function() {
+    var feed = this;
+
+    var query = angular.copy(this.query);
+    query.$limit = PAGE_SIZE + 1;
+    query.postedTime = {$lt: this.lastTime};
+    query.$sort = {postedTime: -1};
+
+    dpd.posts.get(query, function(result) {
+      if (result.length > PAGE_SIZE) {
+        result.pop();
+        feed.moreToLoad = true;
+      } else {
+        feed.moreToLoad = false;
+      }
+      if (result.length) feed.lastTime = result[result.length - 1].postedTime;
+
+      Array.prototype.push.apply(feed.posts, result);
+
+      $rootScope.$apply();
+    });
+  };
+
+  Feed.prototype.refresh = function() {
+    this.lastTime = new Date().getTime();
+    this.posts.length = 0;
+    this.loadPosts();
+    this.moreToLoad = false;
+  };
+
+  return Feed;
+});
+
+app.directive('dpdMessageFor', function() {
+  return function(scope, element, attrs) {
+    var post = scope.$eval(attrs.dpdMessageFor);
+    var message = post.message;
+    var mentions = post.mentions;
+    if (mentions) {
+      mentions.forEach(function(m) {
+        message = message.replace('@' + m, '<a href="/user.html?user=' + m + '">@' + m + '</a>');
+      });
+    }
+
+    element.html(message);
+  };
+});
+
+app.controller('LoginCtrl', function($scope, $rootScope) {
+  $rootScope.userLoaded = false;
+
+  function getMe() {
+    dpd.users.me(function(user) {
+      $rootScope.currentUser = user;
+      $rootScope.userLoaded = true;
+      $scope.$apply();
+    });
+  }
+  getMe();
+
+
+  $scope.showLogin = function(val) {
+    $scope.loginVisible = val;
+    if (val) {
+      $scope.username = '';
+      $scope.password = '';
+    }
+  };
+
+  $scope.login = function() {
+    dpd.users.login({
+      username: $scope.username,
+      password: $scope.password
+    }, function(session, error) {
+      if (error) {
+        alert(error.message);
+      } else {
+        $scope.showLogin(false);
+        getMe();
+
+        $scope.$apply();
+      }
+    });
+  };
+
+  $scope.logout = function() {
+    dpd.users.logout(function() {
+      $rootScope.currentUser = null;
+      $scope.$apply();
+    });
+  };
+});
diff --git a/users/micro-blog/public/js/index.js b/users/micro-blog/public/js/index.js
@@ -0,0 +1,30 @@
+app.controller('FeedCtrl', function($scope, Feed) {
+
+  var PAGE_SIZE = 5;
+
+  var feed = new Feed();
+  $scope.feed = feed;
+
+  $scope.submit = function(newPost) {
+    dpd.posts.post({
+      message: newPost
+    }, function(result, error) {
+      if (error) {
+        if (error.message) {
+          alert(error.message);
+        } else if (error.errors && error.errors.message) {
+          alert("Message " + error.errors.message);
+        } else {
+          alert("An error occurred");
+        }
+      } else {
+        feed.posts.unshift(result);
+        $scope.newPost = '';
+        $scope.$apply();
+      }
+    }); 
+  };
+
+  feed.refresh();
+
+});