added post page, and added write page, with text editor

webapp/views/main/main.html

@@ -1,4 +1,30 @@
 <div class="container">
+  <div class="row">
+      <div class="col-sm-4">
+          <div ng-repeat="post in posts" ng-if="$index % 3 == 0">
+              <a ng-href="#!/post/{{post.id}}">
+                  <div ng-include="'views/templates/post-thumb-template.html'"></div>
+              </a>
+              <br>
+          </div>
+      </div>
+      <div class="col-sm-4">
+          <div ng-repeat="post in posts" ng-if="$index % 3 == 1">
+              <a ng-href="#!/post/{{post.id}}">
+                  <div ng-include="'views/templates/post-thumb-template.html'"></div>
+              </a>
+              <br>
+          </div>
+      </div>
+      <div class="col-sm-4">
+          <div ng-repeat="post in posts" ng-if="$index % 3 == 2">
+              <a ng-href="#!/post/{{post.id}}">
+                  <div ng-include="'views/templates/post-thumb-template.html'"></div>
+              </a>
+              <br>
+          </div>
+      </div>
+  </div>
   <div class="row">
     <div class="col-sm-3">
       <div class="card" style="width: 18rem;">

webapp/views/main/main.js

@@ -12,5 +12,8 @@ angular.module('app.main', ['ngRoute'])
     .controller('MainCtrl', function($scope, $rootScope, $http) {
 
 
-        
+      $scope.user = user;
+      $scope.featured_posts= featured_posts;
+      $scope.posts = posts;
+
     });

webapp/views/navbar.html

@@ -15,13 +15,18 @@
         <li class="nav-item">
           <a class="nav-link" href="#">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">
+        </form>
       </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-      </form>
       <ul class="navbar-nav" ng-show="user">
         <li class="nav-item">
-          <a href="#!/profile" class="nav-link">
+          <a href="#!/write" class="nav-link">
+            <i title="New article" class="fa fa-plus fa-1x"></i>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#!/user/{{user.id}}" class="nav-link">
             <i title="Profile" class="fa fa-user fa-1x"></i> {{user.username}}
           </a>
         </li>
@@ -34,7 +39,7 @@
       <ul class="navbar-nav" ng-show="!user">
         <li class="nav-item">
           <a href="#!/signup" class="nav-link">
-            <i title="Signup" class="fa fa-sign-in fa-1x"></i> Signup
+            <i title="Signup" class="fa fa-user-plus fa-1x"></i> Signup
           </a>
         </li>
         <li class="nav-item">

webapp/views/post/post.html

@@ -0,0 +1,52 @@
+<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>
+      <br>
+      <div class="card">
+        <div class="card-body">
+          <b>About</b>
+          <p>
+            Twitter <a ng-href="https://twitter.com/{{user.twitter}}" target="_blank">{{user.twitter}}</a>
+          </p>
+          <p>
+            Github <a ng-href="https://github.com/{{user.github}}" target="_blank">{{user.github}}</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9">
+      <div class="card">
+        <div class="card-body">
+          <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
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>

webapp/views/post/post.js

@@ -0,0 +1,25 @@
+'use strict';
+
+angular.module('app.post', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/post', {
+            templateUrl: 'views/post/post.html',
+            controller: 'PostCtrl'
+        });
+    }])
+
+    .controller('PostCtrl', function($scope, $rootScope, $http) {
+
+        /*$http.get(apiurl + 'user/' + )
+            .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.post = user.posts[0];
+    });

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

@@ -0,0 +1,22 @@
+<div class="card">
+  <div class="card-body">
+    <a ng-href="#!/user/{{user.id}}" class="row">
+      <div class="col-sm-3">
+        <img class="o_userImgCircular" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
+      </div>
+      <div class="col-sm-8">
+        <b>{{user.name}} {{user.lastname}}</b>
+        <div class="mb-2 text-muted">@{{user.username}}</div>
+      </div>
+    </a>
+  </div>
+  <a ng-href="#!/post/{{post.id}}" class="card-body">
+    <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
+    </div>
+  </a>
+</div>

webapp/views/user/user.html

@@ -5,10 +5,11 @@
         <div class="o_userProfileBackground">
         </div>
         <div class="card-body">
-          <img class="o_userImgCircular" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
+          <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}}">
@@ -35,17 +36,7 @@
     </div>
     <div class="col-sm-6">
       <div ng-repeat="post in user.posts">
-        <div class="card">
-          <div class="card-body">
-            <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
-            </div>
-          </div>
-        </div>
+        <div ng-include="'views/templates/post-thumb-template.html'"></div>
         <br>
       </div>
     </div>
@@ -62,21 +53,11 @@
         </div>
       </div>
       <br>
-      <div class="card">
-        <div class="card-body">
-          <b>Featured posts</b>
-        </div>
+      <div class="">
+        <h5>Featured posts</h5>
         <div ng-repeat="post in featured_posts">
-          <div class="card-body">
-            <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
-            </div>
-          </div>
-          <hr>
+            <div ng-include="'views/templates/post-thumb-template.html'"></div>
+            <br>
         </div>
       </div>
     </div>

webapp/views/user/user.js

@@ -20,40 +20,6 @@ angular.module('app.user', ['ngRoute'])
                 console.log('no user');
             });*/
             //fake data
-          $scope.user = {
-            username: "mark_zuckerberg",
-            name: "Mark",
-            lastname: "Zuckerberg",
-            description: "Hi all, I'm here to write decentralized blog posts.",
-            twitter: "arnaucode",
-            github: "arnaucode",
-            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."
-              },
-              {
-              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."
-            }
-            ]
-          };
-          $scope.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."
-            },
-            {
-            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."
-          }
-          ]
+          $scope.user = user;
+          $scope.featured_posts= featured_posts;
     });

webapp/views/write/write.html

@@ -0,0 +1,55 @@
+<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>
+      <br>
+      <div class="card">
+        <div class="card-body">
+          <b>About</b>
+          <p>
+            Twitter <a ng-href="https://twitter.com/{{user.twitter}}" target="_blank">{{user.twitter}}</a>
+          </p>
+          <p>
+            Github <a ng-href="https://github.com/{{user.github}}" target="_blank">{{user.github}}</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9">
+      <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;">
+          </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>
+      </div>
+      <div class="card">
+        <div class="card-body">
+          <div class="editable" style="min-height: 500px; padding: 10px;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

webapp/views/write/write.js

@@ -0,0 +1,42 @@
+'use strict';
+
+angular.module('app.write', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/write', {
+            templateUrl: 'views/write/write.html',
+            controller: 'WriteCtrl'
+        });
+    }])
+
+    .controller('WriteCtrl', function($scope, $rootScope, $http) {
+          $scope.content = "";
+          var editor = new MediumEditor('.editable', {
+            toolbar: {
+              /* These are the default options for the toolbar,
+                 if nothing is passed this is what is used */
+              allowMultiParagraphSelection: true,
+              buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
+              diffLeft: 0,
+              diffTop: -10,
+              firstButtonClass: 'medium-editor-button-first',
+              lastButtonClass: 'medium-editor-button-last',
+              relativeContainer: null,
+              standardizeSelectionStart: false,
+              static: false,
+              /* options which only apply when static is true */
+              align: 'center',
+              sticky: false,
+              updateOnEmptySelection: false
+            },
+            autoLink: true,
+            placeholder: {
+              text: 'Start to writting your decentralized blog post...'
+            }
+          }).subscribe('editableInput', function (event, editable) {
+              // Do some work
+              $scope.content = editable.innerHTML;
+              console.log($scope.content);
+          });
+
+    });