From 9de533b95030029337eaceaf773486963697907b Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Tue, 25 Sep 2018 15:12:45 +0200
Subject: [PATCH] Added handlebars template.

---
 frontpage/index2.html                         | 122 +++++-------------
 frontpage/js/load_reviews.js                  |  20 ++-
 frontpage/js/templates/review_item.handlebars |  34 +++++
 3 files changed, 85 insertions(+), 91 deletions(-)
 create mode 100644 frontpage/js/templates/review_item.handlebars

diff --git a/frontpage/index2.html b/frontpage/index2.html
index 0b6a5f5..2c47647 100644
--- a/frontpage/index2.html
+++ b/frontpage/index2.html
@@ -164,94 +164,9 @@
     <div class="row">
         <div class="col-sm-7">
             <hr/>
-            <div class="review-block">
-                <div class="row">
-                    <div class="col-sm-3">
-                        <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
-                        <div class="review-block-name"><a href="#">Student</a></div>
-                        <div class="review-block-date">January 29, 2016<br/>1 day ago</div>
-                    </div>
-                    <div class="col-sm-9">
-                        <div class="review-block-rate">
-                            <div class="clearfix"></div>
-                            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-warning btn-grey btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                        <div class="review-block-title">Course review 3</div>
-                        <div class="review-block-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</div>
-                    </div>
-                </div>
-                <hr/>
-                <div class="row">
-                    <div class="col-sm-3">
-                        <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
-                        <div class="review-block-name"><a href="#">Student</a></div>
-                        <div class="review-block-date">January 29, 2016<br/>1 day ago</div>
-                    </div>
-                    <div class="col-sm-9">
-                        <div class="review-block-rate">
-                            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                        <div class="review-block-title">Course review 2</div>
-                        <div class="review-block-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</div>
-                    </div>
-                </div>
-                <hr/>
-                <div class="row">
-                    <div class="col-sm-3">
-                        <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
-                        <div class="review-block-name"><a href="#">Student</a></div>
-                        <div class="review-block-date">January 29, 2016<br/>1 day ago</div>
-                    </div>
-                    <div class="col-sm-9">
-                        <div class="review-block-rate">
-                            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
-                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                        <div class="review-block-title">Course review 1</div>
-                        <div class="review-block-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</div>
-                    </div>
-                </div>
+            <div id="review_container" class="review-block">
+                <!-- All reviews go in this block. -->
+
             </div>
         </div>
     </div>
@@ -265,7 +180,36 @@
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
 <script src="js/vendor/bootstrap.min.js"></script>
-<script src="js/handlebars-v4.0.12.js"></script>
+<script src="js/vendor/handlebars-v4.0.12.js"></script>
+<!-- Handlebars templates -->
+<!-- TODO: Use a templating engine to automatically include all handlebars templates required for a certain page. -->
+<script id="review_item_handlebars" type="text/x-handlebars-template">
+    <div class="row" id="{{id}}">
+        <div class="col-sm-3">
+            <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
+            <div class="review-block-name"><a href="#">{{username}}</a></div>
+            <div class="review-block-date">
+                {{date_published}}
+            </div>
+        </div>
+        <div class="col-sm-9">
+            <div class="review-block-rate">
+                <span class="glyphicon glyphicon-star js_review_rating" aria-hidden="true"></span>
+                <span class="glyphicon glyphicon-star js_review_rating" aria-hidden="true"></span>
+                <span class="glyphicon glyphicon-star js_review_rating" aria-hidden="true"></span>
+                <span class="glyphicon glyphicon-star js_review_rating" aria-hidden="true"></span>
+                <span class="glyphicon glyphicon-star js_review_rating" aria-hidden="true"></span>
+            </div>
+            <div class="review-block-title">
+                {{title}}
+            </div>
+            <div class="review-block-description">
+                {{content}}
+            </div>
+        </div>
+    </div>
+</script>
+<!-- Custom scripts -->
 <script src="js/main.js"></script>
 <script src="js/load_reviews.js"></script>
 </body>
diff --git a/frontpage/js/load_reviews.js b/frontpage/js/load_reviews.js
index 3d10447..3902ad8 100644
--- a/frontpage/js/load_reviews.js
+++ b/frontpage/js/load_reviews.js
@@ -1,7 +1,23 @@
 var $ = jQuery;
 
+// Load the handlebars template and use it to append all reviews.
 function displayReviews(reviews) {
-	
+	var template = Handlebars.compile($("#review_item_handlebars").html());
+	var container = $("#review_container");
+	reviews.forEach(function (review) {
+		var review_html = template(review);
+		container.append(review_html);
+		// If a rating is defined, then hide only those rating stars which are higher than the current rating.
+		// TODO: remove this check once this is added to the database.
+		if (typeof(review.rating) !== "undefined") {
+			$(".js_review_rating").each(function (index) {
+				if ((index + 1) > review.rating) {
+					this.hide();
+				}
+			});
+		}
+		container.append("<hr><br />");
+	});
 }
 
 function loadReviews () {
@@ -11,7 +27,7 @@ function loadReviews () {
 	}).done(function (response) {
 		displayReviews(response);
 	}).fail(function (response) {
-		console.log(response);
+		console.log("Could not get postings.");
 	})
 }
 
diff --git a/frontpage/js/templates/review_item.handlebars b/frontpage/js/templates/review_item.handlebars
new file mode 100644
index 0000000..3ec7b29
--- /dev/null
+++ b/frontpage/js/templates/review_item.handlebars
@@ -0,0 +1,34 @@
+<div class="row">
+    <div class="col-sm-3">
+        <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
+        <div class="review-block-name"><a href="#">{{username}}</a></div>
+        <div class="review-block-date">
+            {{date_published}}
+        </div>
+    </div>
+    <div class="col-sm-9">
+        <div class="review-block-rate">
+            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
+                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
+                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
+                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
+                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
+                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
+            </button>
+        </div>
+        <div class="review-block-title">
+            {{title}}
+        </div>
+        <div class="review-block-description">
+            {{content}}
+        </div>
+    </div>
+</div>
\ No newline at end of file