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

README.md

@@ -16,3 +16,8 @@ in order to allow access to IPFS from the app.
 ```
 ipfs daemon
 ```
+
+
+## Third party tools
+
+- For the WYSIWYG editor, is used the medium-editor clone: https://github.com/yabwe/medium-editor

webapp/app.js

@@ -12,17 +12,18 @@ angular.module('app', [
   'app.login',
   'app.main',
   'app.newmodel',
-  'app.user'
+  'app.user',
+  'app.post',
+  'app.write'
 ]).
 config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
     $locationProvider.hashPrefix('!');
     /*$routeProvider.otherwise({
       redirectTo: '/main'
     });*/
-
+console.log("window", window.location.hash);
     if((localStorage.getItem('dblog_user')))
       {
-        console.log(window.location.hash);
         if((window.location.hash==='#!/login')||(window.location.hash==='#!/signup'))
         {
           window.location='#!/main';
@@ -30,7 +31,7 @@ config(['$locationProvider', '$routeProvider', function($locationProvider, $rout
 
         $routeProvider.otherwise({redirectTo: '/main'});
       }else{
-        if((window.location!=='#!/login')||(window.location!=='#!/signup')||(window.location!=='#!/main'))
+        if((window.location.hash!=='#!/login')||(window.location.hash!=='#!/signup')||(window.location.hash!=='#!/main')||(window.location.hash!=='#!/user'))
         {
           console.log('app, user no logged');
 

webapp/css/own.css

@@ -7,7 +7,10 @@
 body {
   background: #f5f8fa;
 }
-
+a, a:hover {
+  text-decoration: none;
+  color: #000000;
+}
 .o_userProfileBackground {
   min-height: 30% !important;
   width: 100%;
@@ -29,12 +32,17 @@ body {
 }
 
 .o_userImgCircular {
-  margin-top: -100px;
+  width: 60px;
-  margin-left: 25%;
   background: #ffffff;
-  width: 50%;
-  border: 4px #ffffff solid;
   border-radius: 150px;
   -webkit-border-radius: 150px;
   -moz-border-radius: 150px;
 }
+
+.o_profilePageImage {
+  border: 4px #ffffff solid;
+  margin-top: -100px;
+  margin-left: 25%;
+  width: 50%;
+  width: 50%;
+}

webapp/fake_data.js

@@ -0,0 +1,72 @@
+var 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."
+    },
+    {
+        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."
+      }
+  ]
+};
+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."
+  },
+  {
+    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."
+  }
+];
+
+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."
+  },
+  {
+    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."
+  },
+  {
+    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."
+  }
+];

webapp/index.html

@@ -20,6 +20,7 @@
     <link rel="stylesheet" href="css/own.css">
 
     <link href="bower_components/cssMaterialColors/colors.css" rel="stylesheet">
+
 </head>
 
 <body ng-app="webapp">
@@ -42,8 +43,8 @@ Works for both browser and electron with the same code -->
 
 
     <!-- Bootstrap -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 
     <!-- Angular Chart -->
@@ -54,7 +55,13 @@ Works for both browser and electron with the same code -->
     <link rel="stylesheet" type="text/css" href="bower_components/angular-toastr/dist/angular-toastr.css" />
     <script type="text/javascript" src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
 
+    <!-- medium-editor -->
+    <script src="node_modules/medium-editor/dist/js/medium-editor.js"></script>
+    <link rel="stylesheet" href="node_modules/medium-editor/dist/css/medium-editor.css">
+    <link rel="stylesheet" href="node_modules/medium-editor/dist/css/themes/default.css">
+
     <!-- app's js -->
+    <script src="fake_data.js"></script>
     <script src="app.js"></script>
     <script src="views/navbar.js"></script>
     <script src="views/signup/signup.js"></script>
@@ -62,6 +69,9 @@ Works for both browser and electron with the same code -->
     <script src="views/main/main.js"></script>
     <script src="views/newmodel/newmodel.js"></script>
     <script src="views/user/user.js"></script>
+    <script src="views/post/post.js"></script>
+    <script src="views/write/write.js"></script>
+
 
 
 <!-- ELECTRON

webapp/package.json

@@ -8,6 +8,7 @@
     "start": "http-server"
   },
   "dependencies": {
-    "bootstrap": "^4.0.0"
+    "bootstrap": "^4.0.0",
+    "medium-editor": "^5.23.3"
   }
 }

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 ng-include="'views/templates/post-thumb-template.html'"></div>
-          <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>
         <br>
       </div>
     </div>
@@ -62,21 +53,11 @@
         </div>
       </div>
       <br>
-      <div class="card">
+      <div class="">
-        <div class="card-body">
+        <h5>Featured posts</h5>
-          <b>Featured posts</b>
-        </div>
         <div ng-repeat="post in featured_posts">
-          <div class="card-body">
+            <div ng-include="'views/templates/post-thumb-template.html'"></div>
-            <h5 class="card-title">{{post.title}}</h5>
+            <br>
-            <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>
       </div>
     </div>

webapp/views/user/user.js

@@ -20,40 +20,6 @@ angular.module('app.user', ['ngRoute'])
                 console.log('no user');
             });*/
             //fake data
-          $scope.user = {
+          $scope.user = user;
-            username: "mark_zuckerberg",
+          $scope.featured_posts= featured_posts;
-            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."
-          }
-          ]
     });

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);
+          });
+
+    });