allow adding images to post

.gitignore

@@ -4,4 +4,5 @@ dump.rdb
 data/*.db
 data/problems/
 public/data/problems/
+public/data/images/
 .DS_Store

api/index.js

@@ -12,6 +12,7 @@ router.use('/getScoreboard', require('./get-scoreboard'));
 router.use('/getProblems', require('./get-problems'));
 router.use('/getProblemFiles', require('./get-problem-files'));
 router.use('/uploadProblem', require('./upload-problem'));
+router.use('/uploadImage', require('./upload-image'));
 router.use('/posts', require('./posts'));
 router.use('/users', require('./users'));
 

api/posts.js

@@ -32,14 +32,15 @@ router.post('/getPost', [ensureAuthorized], function(req, res) {
 
 // Name: Add new post.
 // Type: POST.
-// Data: title, author, content.
+// Data: title, author, shorttext, content, images.
 router.post('/add', [ensureAdmin], function(req, res) {
 	var title = req.body.title;
 	var author = req.body.author;
 	var shorttext = req.body.shorttext;
 	var content = req.body.content;
+	var images = req.body.images;
 
-	Posts.addPost({ title: title, author: author, date: Date.now(), shorttext: shorttext, content: content }).then(function successCallback() {
+	Posts.addPost({ title: title, author: author, date: Date.now(), shorttext: shorttext, content: content, images: images }).then(function successCallback() {
 		res.send({ status: 'SUCCESS' });
 	}, function errorCallback(err) {
 		res.status(500).send(err.toString());
@@ -48,14 +49,15 @@ router.post('/add', [ensureAdmin], function(req, res) {
 
 // Name: Edit post.
 // Type: POST.
-// Data: id.
+// Data: id, title, shorttext, content, images.
 router.post('/edit', [ensureAdmin], function(req, res) {
 	var id = req.body.id;
 	var title = req.body.title;
 	var shorttext = req.body.shorttext;
 	var content = req.body.content;
+	var images = req.body.images;
 
-	Posts.editPost({ _id: id, title: title, lastModified: Date.now(), shorttext: shorttext, content: content }).then(function successCallback() {
+	Posts.editPost({ _id: id, title: title, lastModified: Date.now(), shorttext: shorttext, content: content, images: images }).then(function successCallback() {
 		res.send({ status: 'SUCCESS' });
 	}, function errorCallback(err) {
 		res.status(500).send(err.toString());

api/upload-image.js

@@ -0,0 +1,32 @@
+var express 			= require('express');
+var router 				= express.Router();
+var path				= require('path');
+var multer				= require('multer');
+var ensureAuthorized 	= require('../helpers/ensure-authorized');
+
+// Specify directory to store images.
+var storage = multer.diskStorage({
+	destination: function(req, file, cb) {
+		cb(null, './public/data/images');
+	},
+	filename: function(req, file, cb) {
+		var originalName = file.originalname;
+		cb(null, Date.now() + '-' + originalName);
+	}
+});
+
+var upload = multer({ storage: storage }).single('file');
+
+// Name: Upload problem.
+// Type: POST.
+router.post('/', [ensureAuthorized, upload], function(req, res) {
+	upload(req, res, function(err) {
+		if (err) {
+			res.status(500).send('FAILED');
+			return;
+		}
+		res.send({ imageName: req.file.filename });
+	});
+});
+
+module.exports = router;

helpers/posts.js

@@ -8,6 +8,7 @@ var	Posts		= new DataStore({ filename: path.join(process.cwd(), 'data', 'posts.d
 // 4. content
 // 5. date
 // 6. lastModified
+// 7. images
 
 // Function to get all posts.
 function getAllPosts(noContent) {
@@ -27,7 +28,8 @@ function getAllPosts(noContent) {
 							_id: posts[i]._id,
 							title: posts[i].title,
 							author: posts[i].author,
-							date: posts[i].date
+							date: posts[i].date,
+							images: posts[i].images
 						});
 					}
 					resolve(res);
@@ -62,7 +64,8 @@ function addPost(post) {
 			date: post.date,
 			shorttext: post.shorttext,
 			content: post.content,
-			lastModified: post.date
+			lastModified: post.date,
+			images: post.images
 		}, function(err, user) {
 			if (err) {
 				reject(Error('Could not add new post'));
@@ -88,7 +91,7 @@ function editPost(post) {
 			}
 			else {
 				Posts.update({ _id: oldPost._id }, {
-					$set: { title: post.title, lastModified: post.lastModified, shorttext: post.shorttext, content: post.content }
+					$set: { title: post.title, lastModified: post.lastModified, shorttext: post.shorttext, content: post.content, images: post.images }
 				}, {}, function(err, numAffected) {
 					if (err) {
 						reject(Error('Could not update post with new info'));

public/controllers/post-add-edit-controller.js

@@ -1,4 +1,4 @@
-themisApp.controller('PostAddEditController', ['$state', '$scope', '$http', 'Session', function($state, $scope, $http, Session) {
+themisApp.controller('PostAddEditController', ['$state', '$scope', '$http', 'Session', 'Upload', function($state, $scope, $http, Session, Upload) {
 	var vm = this;
 
 	vm.pageName = "";
@@ -9,6 +9,9 @@ themisApp.controller('PostAddEditController', ['$state', '$scope', '$http', 'Ses
 	vm.content = "";
 	vm.author = "";
 
+	vm.images = [];
+	// vm.images = [{ src: "https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/212/212/4183252/1.0-9/4183252.jpg" }, {src: "https://s-media-cache-ak0.pinimg.com/736x/0a/ff/28/0aff28930a87f7274bf8b57fdb30a6f3.jpg"}, { src: "https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/212/212/4183252/1.0-9/4183252.jpg" }, {src: "https://s-media-cache-ak0.pinimg.com/736x/0a/ff/28/0aff28930a87f7274bf8b57fdb30a6f3.jpg"}, { src: "https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/212/212/4183252/1.0-9/4183252.jpg" }, {src: "https://s-media-cache-ak0.pinimg.com/736x/0a/ff/28/0aff28930a87f7274bf8b57fdb30a6f3.jpg"}, { src: "https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/212/212/4183252/1.0-9/4183252.jpg" }, {src: "https://s-media-cache-ak0.pinimg.com/736x/0a/ff/28/0aff28930a87f7274bf8b57fdb30a6f3.jpg"}];
+
 	var isAdd = true;
 	var titleLostFocus = false;
 
@@ -27,6 +30,9 @@ themisApp.controller('PostAddEditController', ['$state', '$scope', '$http', 'Ses
 				vm.shorttext = res.data.shorttext;
 				vm.content = res.data.content;
 				vm.author = res.data.author;
+				vm.images = res.data.images;
+				if (!vm.images)
+					vm.images = [];
 			}, function errorCallback(err) {
 				swal({
 					title: "Lỗi!",
@@ -63,7 +69,7 @@ themisApp.controller('PostAddEditController', ['$state', '$scope', '$http', 'Ses
 			});
 		}
 		else if (isAdd) {
-			$http.post('/api/posts/add', { title: vm.title, author: Session.username, shorttext: vm.shorttext, content: vm.content }).then(function successCallback(res) {
+			$http.post('/api/posts/add', { title: vm.title, author: Session.username, shorttext: vm.shorttext, content: vm.content, images: vm.images }).then(function successCallback(res) {
 				swal({
 					title: "Thành công!",
 					text: "Bài mới đã được thêm vào!",
@@ -81,7 +87,7 @@ themisApp.controller('PostAddEditController', ['$state', '$scope', '$http', 'Ses
 			});
 		}
 		else {
-			$http.post('/api/posts/edit', { id: $state.params.id, title: vm.title, shorttext: vm.shorttext, content: vm.content }).then(function successCallback(res) {
+			$http.post('/api/posts/edit', { id: $state.params.id, title: vm.title, shorttext: vm.shorttext, content: vm.content, images: vm.images }).then(function successCallback(res) {
 				swal({
 					title: "Thành công!",
 					text: "Bài viết đã được chỉnh sửa!",
@@ -99,4 +105,32 @@ themisApp.controller('PostAddEditController', ['$state', '$scope', '$http', 'Ses
 			});
 		}
 	}
+
+	function getImage(file) {
+		var type = getType(file.type);
+		if (type == "image")
+			return file.url;
+		return '/images/no-thumbnail.gif';
+	}
+
+	vm.uploadFiles = function(files, idx) {
+		var numFiles = 0;
+		if (files && files.length) {
+    		// NProgress.start();
+			for (var i = 0; i < files.length; i++) {
+				Upload.upload({
+					url: '/api/uploadImage', 
+					data: { file: files[i] }
+				}).then(function (resp) {
+					console.log(resp);
+					vm.images.push({ src: resp.data.imageName });
+				}, function (resp) {
+				    console.log('Error status: ' + resp.status);
+				    // NProgress.done();
+				}, function (evt) {
+					console.log('uploading');
+				});
+			}
+		}
+	}
 }]);

public/core.js

@@ -151,7 +151,7 @@ themisApp.config(function($stateProvider, $locationProvider, $urlRouterProvider,
 	$httpProvider.interceptors.push('AuthInterceptor');
 
 	$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions) { 
-        taOptions.toolbar = [['h1', 'h2', 'h3', 'h4', 'p'], ['bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo'], ['justifyLeft', 'justifyCenter', 'justifyRight']];
+        taOptions.toolbar = [['h1', 'h2', 'h3', 'h4', 'p'], ['bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo'], ['justifyLeft', 'justifyCenter', 'justifyRight'], ['insertImage']];
         return taOptions;
     }]);
 });

public/css/posts.css

@@ -43,6 +43,27 @@
 	padding-top: 2rem;
 	border-top: 1px solid #dddddd;
 }
+#posts-add .drop-box {
+	background: #F8F8F8;
+    border: 5px dashed #DDD;
+    height: 12.5rem;
+    text-align: center;
+    padding-top: 1.5625rem;
+}
+#posts-add .drop-box i {
+	font-size: 2rem;
+	padding: 3.5rem;
+}
+#posts-add .image-thumbnail {
+	background-size: cover;
+	width: 15.625rem;
+	height: 12.5rem;
+	margin: auto;
+	margin-top: 1.25rem;
+}
+#posts-add .btn-upload-image {
+	margin-top: 1.25rem;
+}
 #post-content div.ta-editor {
 	height: 25rem;
 }

public/html/contest.html

@@ -2,7 +2,7 @@
 	<div class="container">
 		<div class="row">
 			<ul class="navigation-bar">
-				<li ng-class="{active: ContestCtrl.isTabActive('home.contest.admin')}" ng-click="ContestCtrl.selectTab(0)" ng-show="ContestCtrl.isAdmin()">TẠO KÌ THI</li>
+				<li ng-class="{active: ContestCtrl.isTabActive('home.contest.admin')}" ng-click="ContestCtrl.selectTab(0)" ng-show="ContestCtrl.isAdmin()">QUẢN LÝ KÌ THI</li>
 				<li ng-class="{active: ContestCtrl.isTabActive('home.contest.problems')}" ng-click="ContestCtrl.selectTab(1)">ĐỀ BÀI</li>
 				<li ng-class="{active: ContestCtrl.isTabActive('home.contest.scoreboard')}" ng-click="ContestCtrl.selectTab(2)">BẢNG ĐIỂM</li>
 				<li ng-class="{active: ContestCtrl.isTabActive('home.contest.submission')}" ng-click="ContestCtrl.selectTab(3)">NỘP BÀI</li>

public/html/post-add-edit.html

@@ -11,16 +11,27 @@
 		<h3>{{ PostAddEditCtrl.pageName }}</h3>
 	</div>
 	<div class="form-group" ng-class="{'has-danger': PostAddEditCtrl.isTitleEmpty() }">
-	    <label for="post-name">Tên bài</label>
+	    <label for="post-name"><strong>Tên bài</strong></label>
     	<input type="text" class="form-control form-control-danger" id="post-name" ng-model="PostAddEditCtrl.title" required ng-blur="PostAddEditCtrl.titleLostFocus()">
     	<div class="form-control-feedback" ng-show="PostAddEditCtrl.isTitleEmpty()">Tên bài không được rỗng.</div>
   	</div>
   	<div class="form-group">
-	    <label for="post-short-text">Nội dung giới thiệu (vắn tắt)</label>
-	    <textarea id="post-short-text" class="form-control" rows="3" ng-model="PostAddEditCtrl.shorttext"></textarea>
+	    <label for="post-short-text"><strong>Nội dung giới thiệu (vắn tắt)</strong></label>
+	    <textarea id="post-short-text" class="form-control" rows="4" ng-model="PostAddEditCtrl.shorttext"></textarea>
   	</div>
   	<div class="form-group">
-	    <label for="post-content">Nội dung đầy đủ</label>
+  		<label><strong>Thêm hình ảnh đính kèm vào bài viết</strong></label>
+	  	<div class="row">
+	  		<div class="col-sm-3" ng-repeat="image in PostAddEditCtrl.images">
+	  			<div class="image-thumbnail" style="background-image: url({{ '/data/images/' + image.src }})"></div>
+	  		</div>
+	  		<div class="col-sm-3 btn-upload-image">
+	  			<div ngf-select="PostAddEditCtrl.uploadFiles($files, 0)" class="drop-box" ngf-multiple="true" ngf-accept="'image/*'" ngf-max-size="8MB"><i class="fa fa-plus"></i></div>
+	  		</div>
+	  	</div>
+	</div>
+  	<div class="form-group">
+	    <label for="post-content"><strong>Nội dung đầy đủ</strong></label>
 		<div text-angular id="post-content" spellcheck="false" ng-model="PostAddEditCtrl.content"></div>
   	</div>
   	<button type="button" class="btn btn-primary" ng-click="PostAddEditCtrl.addEditPost()">{{ PostAddEditCtrl.addEditBtnName }}</button>