upload thumb image of the article, some stuff fixed

RESTfunctions.go

@@ -138,6 +138,13 @@ func GetUser(w http.ResponseWriter, r *http.Request) {
 	err = postCollection.Find(bson.M{"user._id": bson.ObjectIdHex(userid)}).Limit(50).All(&user.Posts)
 	check(err)
 
+	//for each post, get the user
+	for i, _ := range user.Posts {
+		err = userCollection.Find(bson.M{"_id": user.Posts[i].User.ID}).One(&user.Posts[i].User)
+		check(err)
+		//TODO don't return the user.Token, password, etc only the Name, LastName, Username, img
+	}
+
 	jResp, err := json.Marshal(user)
 	check(err)
 	fmt.Fprintln(w, string(jResp))
@@ -198,6 +205,13 @@ func GetPosts(w http.ResponseWriter, r *http.Request) {
 	err := postCollection.Find(bson.M{}).Limit(50).All(&posts)
 	check(err)
 
+	//for each post, get the user
+	for i, _ := range posts {
+		fmt.Println(posts[i].User.ID)
+		err = userCollection.Find(bson.M{"_id": posts[i].User.ID}).One(&posts[i].User)
+		check(err)
+		//TODO don't return the user.Token, password, etc only the Name, LastName, Username, img
+	}
 	jResp, err := json.Marshal(posts)
 	check(err)
 	fmt.Fprintln(w, string(jResp))

webapp/app.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var apiurl = "http://127.0.0.1:3000/";
+var ipfsurl = "http://127.0.0.1:5001/api/v0/";
 
 angular.module('app', [
   'ngRoute',
@@ -77,12 +78,12 @@ console.log("window", window.location.hash);
   .factory('api', function($http) {
     return {
       init: function() {
-        console.log("http", $http.options);
+        /*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;
           $http.defaults.headers.post['Authorization'] = dblog_user.token;
-        }
+        }*/
       }
     };
   })

webapp/views/main/main.html

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

webapp/views/main/main.js

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

webapp/views/post/post.html

@@ -30,9 +30,13 @@
               </div>
             </span>
           </div>
-          <h5 class="card-title">{{post.title}}</h5>
-          <h6 class="card-subtitle mb-2 text-muted">{{post.summary}}</h6>
-          <img ng-src="{{post.img}}" class="img-fluid" />
+          <div class="col-sm-10">
+            <h5 class="card-title">{{post.title}}</h5>
+            <h6 class="card-subtitle mb-2 text-muted">{{post.summary}}</h6>
+          </div>
+          
+          <br>
+          <img ng-show="post.thumbimg" ng-src="http://localhost:8080/ipfs/{{post.thumbimg}}" class="img-fluid" />
 
           <div ng-include="'http://localhost:8080/ipfs/'+post.content"></div>
 

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

@@ -1,23 +1,34 @@
 <div class="card">
   <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 class="pull-right text-secondary">
+        <span class="row">
+          <div class="text-right">
+            {{post.date | date: "MMM d, y"}}
+          </div>
+          </span>
+        <span class="row">
+          <div class="text-right">
+            {{post.date | date: "HH:mm"}}h
+          </div>
+        </span>
       </div>
-      <div style="display:block; font-size:90%;">
-        <b>{{user.name}} {{user.lastname}}</b>
-        <div class="mb-2 text-muted">@{{user.username}}</div>
+      <div class="row">
+        <div style="display:block;margin-left:10px;margin-right:10px;">
+          <img class="o_userImgCircular" ng-src="img/z.png" />
+        </div>
+        <div style="display:block; font-size:90%;">
+          <b>{{post.user.name}} {{post.user.lastname}}</b>
+          <div class="mb-2 text-muted">@{{post.user.username}}</div>
+        </div>
       </div>
-    </div>
     </a>
   </div>
   <a ng-href="#!/post/{{post.id}}" class="o_card-body">
-  <img ng-src="{{post.img}}" class="img-fluid" />
+  <img ng-show="post.thumbimg" ng-src="http://localhost:8080/ipfs/{{post.thumbimg}}" class="img-fluid" />
   <br><br>
     <h5 class="card-title">{{post.title}}</h5>
-    <h6 class="card-subtitle mb-2 text-muted">{{post.subtitle}}</h6>
-    <p class="card-text">{{post.content}}</p>
+    <h6 class="card-subtitle mb-2 text-muted">{{post.summary}}</h6>
     <div class="pull-right">
       <i title="Server" class="fa fa-heart ct_red300 fa-1x"></i> 37
     </div>

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

@@ -3,7 +3,7 @@
     <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" />
+      <img class="o_userImgCircular o_profilePageImage" ng-src="img/z.png" />
       <h4>
               {{user.name}} {{user.lastname}}
           </h4>

webapp/views/user/user.html

@@ -17,7 +17,7 @@
     </div>
     <div class="col-sm-6">
 
-      <div ng-repeat="post in user.posts">
+      <div ng-repeat="post in user.posts | orderBy: '-date'">
         <div ng-include="'views/templates/post-thumb-template.html'"></div>
         <br>
       </div>
@@ -42,10 +42,10 @@
       <br>
       <div class="">
         <h5>Featured posts</h5>
-        <div ng-repeat="post in featured_posts">
+        <!--<div ng-repeat="post in featured_posts">
             <div ng-include="'views/templates/post-thumb-template.html'"></div>
             <br>
-        </div>
+        </div>-->
       </div>
     </div>
   </div>

webapp/views/write/write.html

@@ -35,6 +35,11 @@
           </div>
         </div>
       </div>
+      <div class="row">
+        <div class="col-sm-12">
+          <input type="file" file-model="file"/>
+        </div>
+      </div>
       <div class="card">
         <div class="card-body">
           <div class="editable" style="min-height: 500px; padding: 10px;"></div>

webapp/views/write/write.js

@@ -2,66 +2,105 @@
 
 angular.module('app.write', ['ngRoute'])
 
-    .config(['$routeProvider', function($routeProvider) {
-        $routeProvider.when('/write', {
-            templateUrl: 'views/write/write.html',
-            controller: 'WriteCtrl'
-        });
-    }])
+  .config(['$routeProvider', function($routeProvider) {
+    $routeProvider.when('/write', {
+      templateUrl: 'views/write/write.html',
+      controller: 'WriteCtrl'
+    });
+  }])
 
-    .controller('WriteCtrl', function($scope, $rootScope, $http) {
-          $scope.post = {
-            title: "",
-            content: "",
-            summary: ""
-          };
-          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.post.content = editable.innerHTML;
-              console.log($scope.post.content);
-          });
+  .controller('WriteCtrl', function($scope, $rootScope, $http, toastr) {
+    $scope.post = {
+      title: "",
+      content: "",
+      summary: ""
+    };
+    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.post.content = editable.innerHTML;
+    });
 
 
-          $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);
-                });
+    $scope.publicate = function() {
+      //add the thumbimg to ipfs
+      var formdata = new FormData();
+      formdata.append("file", $scope.file);
+      $http({
+          url: ipfsurl + 'add',
+          method: "POST",
+          headers: {
+            "Content-Type": undefined
+          },
+          data: formdata
+        })
+        .then(function(data) {
+            console.log("data: ");
+            console.log(data.data);
+            $scope.post.thumbimg = data.data.Hash;
+            toastr.success("Thumb image added to IPFS");
+            $scope.publicate2();
+          },
+          function(data) {
+            console.log(data);
+            toastr.error("Error adding Model to IPFS");
+          });
+    };
+    $scope.publicate2 = function() {
+      //$scope.post.thumbimg = hash;
+      //send the post content to the Go api, that will add the html content to ipfs
+      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 = "#!/main";
+          },
+          function(data) {
+            console.log(data);
+          });
 
-          };
-    });
+    };
+  }).directive('fileModel', ['$parse', function($parse) {
+    //directive code from https://www.tutorialspoint.com/angularjs/angularjs_upload_file.htm
+    return {
+      restrict: 'A',
+      link: function(scope, element, attrs) {
+        var model = $parse(attrs.fileModel);
+        var modelSetter = model.assign;
+        element.bind('change', function() {
+          scope.$apply(function() {
+            modelSetter(scope, element[0].files[0]);
+          });
+        });
+      }
+    };
+  }]);