Basic AJAX requests and handlebars template for each review. Still static page #4
|
|
@ -164,94 +164,9 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-7">
|
<div class="col-sm-7">
|
||||||
<hr/>
|
<hr/>
|
||||||
<div class="review-block">
|
<div id="review_container" class="review-block">
|
||||||
<div class="row">
|
<!-- All reviews go in this block. -->
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -265,7 +180,36 @@
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
<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>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/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/main.js"></script>
|
||||||
<script src="js/load_reviews.js"></script>
|
<script src="js/load_reviews.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,23 @@
|
||||||
var $ = jQuery;
|
var $ = jQuery;
|
||||||
|
|
||||||
|
// Load the handlebars template and use it to append all reviews.
|
||||||
function displayReviews(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 () {
|
function loadReviews () {
|
||||||
|
|
@ -11,7 +27,7 @@ function loadReviews () {
|
||||||
}).done(function (response) {
|
}).done(function (response) {
|
||||||
displayReviews(response);
|
displayReviews(response);
|
||||||
}).fail(function (response) {
|
}).fail(function (response) {
|
||||||
console.log(response);
|
console.log("Could not get postings.");
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue