GetUsers, GetUser, NewPost, GetPosts, GetPost

webapp/app.js

@@ -12,6 +12,7 @@ angular.module('app', [
   'app.login',
   'app.main',
   'app.newmodel',
+  'app.users',
   'app.user',
   'app.post',
   'app.write'
@@ -37,7 +38,7 @@ console.log("window", window.location.hash);
 
           localStorage.removeItem('dblog_user');
           localStorage.removeItem('dblog_user');
-          window.location='#!/main';
+          //window.location='#!/main';
           $routeProvider.otherwise({redirectTo: '/main'});
         }
       }
@@ -76,6 +77,7 @@ console.log("window", window.location.hash);
   .factory('api', function($http) {
     return {
       init: function() {
+        console.log("http", $http.options);
         var dblog_user = JSON.parse(localStorage.getItem('dblog_user'));
         if (dblog_user) {
           $http.defaults.headers.common['Authorization'] = dblog_user.token;
@@ -86,4 +88,12 @@ console.log("window", window.location.hash);
   })
   .run(function(api) {
     api.init();
-  });
+  })
+  .config(function($sceDelegateProvider) {
+  $sceDelegateProvider.resourceUrlWhitelist([
+    // Allow same origin resource loads.
+    'self',
+    // Allow loading from outer templates domain.
+    'http://localhost:8080/**'
+  ]);
+});

webapp/css/own.css

@@ -32,7 +32,7 @@ a, a:hover {
 }
 
 .o_userImgCircular {
-  width: 60px;
+  width: 40px;
   background: #ffffff;
   border-radius: 150px;
   -webkit-border-radius: 150px;
@@ -46,3 +46,9 @@ a, a:hover {
   width: 50%;
   width: 50%;
 }
+
+.o_card-body {
+  padding-left:1.25rem;
+  padding-right:1.25rem;
+  padding-top:0.8rem;
+}

webapp/fake_data.js

@@ -9,25 +9,37 @@ var user = {
       title: "This is the second post",
       subtitle: "this is the subtitle of the second post",
       img: "https://cdn-images-1.medium.com/fit/t/800/240/1*4_E6m7J0112DBi1Lmdniiw.png",
-      content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+      content: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+      user: {
+        id: "5a732c952f009b384d5effb7"
+      }
     },
     {
       title: "This is the first post",
       subtitle: "this is the subtitle of the first post",
       img: "https://bootstrap-themes.github.io/application/assets/img/unsplash_1.jpg",
-      content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+      content: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+      user: {
+        id: "5a732c952f009b384d5effb7"
+      }
     },
     {
         title: "Thinking about python development",
         subtitle: "this is the subtitle of the second post",
         img: "https://cdn.static-economist.com/sites/default/files/images/2015/09/blogs/economist-explains/code2.png",
-        content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+        content: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+        user: {
+          id: "5a732c952f009b384d5effb7"
+        }
       },
       {
         title: "Thinking about G",
         subtitle: "this is the subtitle of the first post",
         img: "https://cdn-images-1.medium.com/max/1600/1*RNkyx-Zq7w61eR74nMYgnA.jpeg",
-        content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+        content: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+        user: {
+          id: "5a732c952f009b384d5effb7"
+        }
       }
   ]
 };
@@ -35,13 +47,19 @@ var featured_posts = [{
     title: "Thinking about python development",
     subtitle: "this is the subtitle of the second post",
     img: "https://cdn.static-economist.com/sites/default/files/images/2015/09/blogs/economist-explains/code2.png",
-    content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+    content: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+    user: {
+      id: "5a732c952f009b384d5effb7"
+    }
   },
   {
     title: "Thinking about G",
     subtitle: "this is the subtitle of the first post",
     img: "https://cdn-images-1.medium.com/max/1600/1*RNkyx-Zq7w61eR74nMYgnA.jpeg",
-    content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+    content: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+    user: {
+      id: "5a732c952f009b384d5effb7"
+    }
   }
 ];
 
@@ -49,13 +67,19 @@ var posts = [{
     title: "This is the second post",
     subtitle: "this is the subtitle of the second post",
     img: "https://cdn-images-1.medium.com/fit/t/800/240/1*4_E6m7J0112DBi1Lmdniiw.png",
-    content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+    content: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+    user: {
+      id: "5a732c952f009b384d5effb7"
+    }
   },
   {
     title: "This is the first post",
     subtitle: "this is the subtitle of the first post",
     img: "https://bootstrap-themes.github.io/application/assets/img/unsplash_1.jpg",
-    content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+    content: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+    user: {
+      id: "5a732c952f009b384d5effb7"
+    }
   },
   {
     title: "Thinking about python development",

webapp/index.html

@@ -68,6 +68,7 @@ Works for both browser and electron with the same code -->
     <script src="views/login/login.js"></script>
     <script src="views/main/main.js"></script>
     <script src="views/newmodel/newmodel.js"></script>
+    <script src="views/users/users.js"></script>
     <script src="views/user/user.js"></script>
     <script src="views/post/post.js"></script>
     <script src="views/write/write.js"></script>

webapp/views/login/login.html

@@ -1,4 +1,4 @@
-<div class="container" style="margin-top: -60px;">
+<div class="container">
     <div class="row">
         <div class="col-sm-3">
 

webapp/views/main/main.js

@@ -12,8 +12,14 @@ angular.module('app.main', ['ngRoute'])
     .controller('MainCtrl', function($scope, $rootScope, $http) {
 
 
-      $scope.user = user;
-      $scope.featured_posts= featured_posts;
-      $scope.posts = posts;
+      $scope.posts = {};
+      $http.get(apiurl + 'posts')
+          .then(function(data) {
+              console.log('data success');
+              console.log(data);
+              $scope.posts = data.data;
+          }, function(data) {
+              console.log('no user');
+          });
 
     });

webapp/views/navbar.html

@@ -1,5 +1,5 @@
 <div ng-controller="NavbarCtrl">
-  <nav class="navbar navbar-expand-lg navbar-dark c_blue500">
+  <nav class="navbar navbar-expand-lg navbar-dark c_blueGrey700">
     <a class="navbar-brand" href="#">
       <i title="Server" class="fa fa-cube fa-1x"></i> decentralized-blogging-platform
     </a>
@@ -13,7 +13,7 @@
           <a class="nav-link" href="#">Top Posts <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Top Writters</a>
+          <a class="nav-link" href="#!/users">Top Writters</a>
         </li>
         <form class="form-inline my-2 my-lg-0">
           <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

webapp/views/post/post.html

@@ -1,26 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col-sm-3">
-      <div class="card">
-        <div class="o_userProfileBackground">
-        </div>
-        <div class="card-body">
-          <img class="o_userImgCircular o_profilePageImage" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
-          <h4>
-                {{user.name}} {{user.lastname}}
-            </h4>
-            <h6 class="card-subtitle mb-2 text-muted">@{{user.username}}</h6>
-          <p>{{user.description}}</p>
-          <p>
-            <a ng-href="#!/userLikes/{{user._id}}">
-                14 followers
-            </a> |
-            <a ng-href="#!/userLikes/{{user._id}}">
-                20 following
-            </a>
-          </p>
-        </div>
-      </div>
+      <div ng-include="'views/templates/user-thumb-template.html'"></div>
       <br>
       <div class="card">
         <div class="card-body">
@@ -41,6 +22,9 @@
           <h6 class="card-subtitle mb-2 text-muted">{{post.subtitle}}</h6>
           <img ng-src="{{post.img}}" class="img-fluid" />
           <p class="card-text">{{post.content}}</p>
+
+          <div ng-include="'http://localhost:8080/ipfs/QmUv3dQuNREHnEFYs7JkqyxZjYfEXd4t9jej5jY2dPVaqU'"></div>
+
           <div class="pull-right">
             <i title="Server" class="fa fa-heart ct_red300 fa-1x"></i> 37
           </div>

webapp/views/post/post.js

@@ -3,23 +3,22 @@
 angular.module('app.post', ['ngRoute'])
 
     .config(['$routeProvider', function($routeProvider) {
-        $routeProvider.when('/post', {
+        $routeProvider.when('/post/:postid', {
             templateUrl: 'views/post/post.html',
             controller: 'PostCtrl'
         });
     }])
 
-    .controller('PostCtrl', function($scope, $rootScope, $http) {
-
-        /*$http.get(apiurl + 'user/' + )
+    .controller('PostCtrl', function($scope, $rootScope, $http, $routeParams) {
+        $scope.post = {};
+        $scope.user = {};
+        $http.get(apiurl + 'post/' + $routeParams.postid)
             .then(function(data) {
                 console.log('data success');
                 console.log(data);
-                $scope.user = data.data;
+                $scope.post = data.data;
+                $scope.user = $scope.post.user;
             }, function(data) {
                 console.log('no user');
-            });*/
-            //fake data
-          $scope.user = user;
-          $scope.post = user.posts[0];
+            });
     });

webapp/views/signup/signup.html

@@ -1,4 +1,4 @@
-<div class="container" style="margin-top: -80px;">
+<div class="container">
   <div class="row">
     <div class="col-sm-3">
 
@@ -9,15 +9,34 @@
           <h4 class="card-title">
               Signup
           </h4>
-          <div class="form-group">
-            <input ng-model="user.username" class="form-control" placeholder="Username">
+
+
+          <input ng-model="user.email" type="email" class="form-control" placeholder="Email">
+          <br>
+          <input ng-model="user.password" type="password" class="form-control" placeholder="Password">
+          <br>
+          <div class="row">
+            <div class="col-sm-12">
+              <div style="display:inline-block;">
+                @
+              </div>
+              <div style="display:inline-block;">
+                <input ng-model="user.username" class="form-control" placeholder="Username">
+              </div>
+            </div>
           </div>
-          <div class="form-group">
-            <input ng-model="user.email" type="email" class="form-control" placeholder="Email">
-          </div>
-          <div class="form-group">
-            <input ng-model="user.password" type="password" class="form-control" placeholder="Password">
+          <br>
+          <div class="row">
+            <div class="col-sm-6">
+              <input ng-model="user.name" class="form-control" placeholder="Name">
+            </div>
+            <div class="col-sm-6">
+              <input ng-model="user.lastname" class="form-control" placeholder="Last Name">
+            </div>
           </div>
+          <br>
+          <textarea ng-model="user.description" class="form-control" rows="3" placeholder="Description"></textarea>
+          <br>
           <div class="row">
             <div class="col-sm-6">
               <a href="#!/login" class="btn btn-raised btn-block c_o_blue300">Cancel</a>

webapp/views/templates/post-thumb-template.html

@@ -1,19 +1,22 @@
 <div class="card">
-  <div class="card-body">
-    <a ng-href="#!/user/{{user.id}}" class="row">
-      <div class="col-sm-3">
+  <div class="o_card-body">
+    <a ng-href="#!/user/{{post.user.id}}">
+      <div class="row">
+      <div style="display:block;margin-left:10px;margin-right:10px;">
         <img class="o_userImgCircular" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
       </div>
-      <div class="col-sm-8">
+      <div style="display:block; font-size:90%;">
         <b>{{user.name}} {{user.lastname}}</b>
         <div class="mb-2 text-muted">@{{user.username}}</div>
       </div>
+    </div>
     </a>
   </div>
-  <a ng-href="#!/post/{{post.id}}" class="card-body">
+  <a ng-href="#!/post/{{post.id}}" class="o_card-body">
+  <img ng-src="{{post.img}}" class="img-fluid" />
+  <br><br>
     <h5 class="card-title">{{post.title}}</h5>
     <h6 class="card-subtitle mb-2 text-muted">{{post.subtitle}}</h6>
-    <img ng-src="{{post.img}}" class="img-fluid" />
     <p class="card-text">{{post.content}}</p>
     <div class="pull-right">
       <i title="Server" class="fa fa-heart ct_red300 fa-1x"></i> 37

webapp/views/templates/user-thumb-template.html

@@ -0,0 +1,22 @@
+<div class="card">
+  <a ng-href="#!/user/{{user.id}}">
+    <div class="o_userProfileBackground">
+    </div>
+    <div class="card-body">
+      <img class="o_userImgCircular o_profilePageImage" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
+      <h4>
+              {{user.name}} {{user.lastname}}
+          </h4>
+      <h6 class="card-subtitle mb-2 text-muted">@{{user.username}}</h6>
+      <p>{{user.description}}</p>
+      <p>
+        <a ng-href="#!/userLikes/{{user._id}}">
+              14 followers
+          </a> |
+        <a ng-href="#!/userLikes/{{user._id}}">
+              20 following
+          </a>
+      </p>
+    </div>
+  </a>
+</div>

webapp/views/user/user.html

@@ -1,26 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col-sm-3">
-      <div class="card">
-        <div class="o_userProfileBackground">
-        </div>
-        <div class="card-body">
-          <img class="o_userImgCircular o_profilePageImage" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
-          <h4>
-                {{user.name}} {{user.lastname}}
-            </h4>
-            <h6 class="card-subtitle mb-2 text-muted">@{{user.username}}</h6>
-          <p>{{user.description}}</p>
-          <p>
-            <a ng-href="#!/userLikes/{{user._id}}">
-                14 followers
-            </a> |
-            <a ng-href="#!/userLikes/{{user._id}}">
-                20 following
-            </a>
-          </p>
-        </div>
-      </div>
+      <div ng-include="'views/templates/user-thumb-template.html'"></div>
       <br>
       <div class="card">
         <div class="card-body">
@@ -35,10 +16,16 @@
       </div>
     </div>
     <div class="col-sm-6">
+
       <div ng-repeat="post in user.posts">
         <div ng-include="'views/templates/post-thumb-template.html'"></div>
         <br>
       </div>
+      <div ng-show="!user.posts" class="card">
+        <div class="card-body">
+          <h5>No articles yet</h5>
+        </div>
+      </div>
     </div>
     <div class="col-sm-3">
       <div class="card">

webapp/views/user/user.js

@@ -3,23 +3,21 @@
 angular.module('app.user', ['ngRoute'])
 
     .config(['$routeProvider', function($routeProvider) {
-        $routeProvider.when('/user', {
+        $routeProvider.when('/user/:userid', {
             templateUrl: 'views/user/user.html',
             controller: 'UserCtrl'
         });
     }])
 
-    .controller('UserCtrl', function($scope, $rootScope, $http) {
-
-        /*$http.get(apiurl + 'user/' + )
+    .controller('UserCtrl', function($scope, $rootScope, $http, $routeParams) {
+        $scope.user = {};
+        $http.get(apiurl + 'user/' + $routeParams.userid)
             .then(function(data) {
                 console.log('data success');
                 console.log(data);
                 $scope.user = data.data;
             }, function(data) {
                 console.log('no user');
-            });*/
-            //fake data
-          $scope.user = user;
+            });
           $scope.featured_posts= featured_posts;
     });

webapp/views/users/users.html

@@ -0,0 +1,28 @@
+<div class="container">
+  <div class="row">
+      <div class="col-sm-4">
+          <div ng-repeat="user in users" ng-if="$index % 3 == 0">
+              <a ng-href="#!/user/{{user.id}}">
+                  <div ng-include="'views/templates/user-thumb-template.html'"></div>
+              </a>
+              <br>
+          </div>
+      </div>
+      <div class="col-sm-4">
+          <div ng-repeat="user in users" ng-if="$index % 3 == 1">
+              <a ng-href="#!/user/{{user.id}}">
+                  <div ng-include="'views/templates/user-thumb-template.html'"></div>
+              </a>
+              <br>
+          </div>
+      </div>
+      <div class="col-sm-4">
+          <div ng-repeat="user in users" ng-if="$index % 3 == 2">
+              <a ng-href="#!/user/{{user.id}}">
+                  <div ng-include="'views/templates/user-thumb-template.html'"></div>
+              </a>
+              <br>
+          </div>
+      </div>
+  </div>
+</div>

webapp/views/users/users.js

@@ -0,0 +1,23 @@
+'use strict';
+
+angular.module('app.users', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/users', {
+            templateUrl: 'views/users/users.html',
+            controller: 'UsersCtrl'
+        });
+    }])
+
+    .controller('UsersCtrl', function($scope, $rootScope, $http) {
+      $scope.users = {};
+      $http.get(apiurl + 'users')
+          .then(function(data) {
+              console.log('data success');
+              console.log(data);
+              $scope.users = data.data;
+          }, function(data) {
+              console.log('no user');
+          });
+
+    });

webapp/views/write/write.html

@@ -2,24 +2,7 @@
   <div class="row">
     <div class="col-sm-3">
       <div class="card">
-        <div class="o_userProfileBackground">
-        </div>
-        <div class="card-body">
-          <img class="o_userImgCircular o_profilePageImage" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
-          <h4>
-                {{user.name}} {{user.lastname}}
-            </h4>
-            <h6 class="card-subtitle mb-2 text-muted">@{{user.username}}</h6>
-          <p>{{user.description}}</p>
-          <p>
-            <a ng-href="#!/userLikes/{{user._id}}">
-                14 followers
-            </a> |
-            <a ng-href="#!/userLikes/{{user._id}}">
-                20 following
-            </a>
-          </p>
-        </div>
+        <div ng-include="'views/templates/user-thumb-template.html'"></div>
       </div>
       <br>
       <div class="card">
@@ -38,11 +21,18 @@
       <div class="row">
         <div class="col-sm-10">
           <div class="form-group">
-            <input type="text" class="form-control" placeholder="Title of the article..." style="font-weight:bold;">
+            <input ng-model="post.title" type="text" class="form-control" placeholder="Title of the article..." style="font-weight:bold;">
           </div>
         </div>
         <div class="col-sm-2">
-          <div ng-click="save()" class="btn btn-raised btn-block c_o_blue300 pull-right">Publicate</div>
+          <div ng-click="publicate()" class="btn btn-raised btn-block c_o_blue300 pull-right">Publicate</div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="form-group">
+            <input ng-model="post.summary" type="text" class="form-control" placeholder="Summary of the article...">
+          </div>
         </div>
       </div>
       <div class="card">

webapp/views/write/write.js

@@ -10,7 +10,11 @@ angular.module('app.write', ['ngRoute'])
     }])
 
     .controller('WriteCtrl', function($scope, $rootScope, $http) {
-          $scope.content = "";
+          $scope.post = {
+            title: "",
+            content: "",
+            summary: ""
+          };
           var editor = new MediumEditor('.editable', {
             toolbar: {
               /* These are the default options for the toolbar,
@@ -35,8 +39,29 @@ angular.module('app.write', ['ngRoute'])
             }
           }).subscribe('editableInput', function (event, editable) {
               // Do some work
-              $scope.content = editable.innerHTML;
-              console.log($scope.content);
+              $scope.post.content = editable.innerHTML;
+              console.log($scope.post.content);
           });
 
+
+          $scope.publicate = function() {
+            console.log("post", $scope.post);
+            $http({
+                url: apiurl + 'post',
+                method: "POST",
+                headers: {
+                  "Content-Type": undefined
+                },
+                data: $scope.post
+              })
+              .then(function(data) {
+                  console.log("data: ");
+                  console.log(data.data);
+                  window.location = "#!/user/" + $scope.user.id;
+                },
+                function(data) {
+                  console.log(data);
+                });
+
+          };
     });