I am looking to calculate the total number of reviews for a specific recipe and display those reviews on the recipes.html page, which showcases all available recipes. Although I have attempted to utilize the countReviews helper as a global helper, it does not seem to function properly on the recipes.html page. Can someone provide assistance in accurately counting the reviews for recipes and showcasing them on the recipes.html?
For the complete source code, please visit Github.
collections.js
Recipes = new Mongo.Collection('recipes');
Reviews = new Mongo.Collection('reviews');
RecipesImages = new FS.Collection("recipesImages", {
stores: [new FS.Store.GridFS("recipesImages")]
});
reviews.js
Template.reviews.helpers({
'showReviews': function () {
return Reviews.find({recipeId: Router.current().data()._id})
},
countReviews: function(){
return Reviews.find({recipeId: Router.current().data()._id}).count();
}});
add_reviews.js
Template.add_review.events({
'submit .add-review':function(event){
event.preventDefault();
var rating = event.target.rating.value;
var review = event.target.review.value;
var recipeId = Router.current().data()._id;
addReview(rating,review,recipeId);
}
});
recipes.html
<template name="recipes">
<div class="container">
<div class="row">
{{#each showRecipes}}
{{#if showRecipes}}
<div class=" col-md-4">
<a class=".deco-none" href="{{pathFor 'show_recipe'}}">
<div class="panel panel-default mb " >
<div class="panel-image">
<img src="{{images.url storage='recipesImages'}}" class="panel-image-preview" />
</div>
<div class="panel-body pb">
<h4>{{name}}</h4>
{{shortText description 100}}
</div>
<div class=" panel-footer text-center" >
<a href="{{pathFor 'show_recipe'}}" data-toggle="tooltip" title="View Recipe"><span class="glyphicon glyphicon-open-file"></span></a>
<a href="#" data-toggle="tooltip" title="Cooking Time"><span class="glyphicon glyphicon-time" style="vertical-align:middle"></span><small> {{time}} Minutes</small></a>
<a href="#" data-toggle="tooltip" title="Like it" data-action="addLikes"><span class=" glyphicon glyphicon-heart" style="vertical-align:middle"></span> <small>{{likes}} Likes </small></a>
<a href="{{pathFor 'reviews'}}" data-toggle="tooltip" title="Reviews"><span class="glyphicon glyphicon-comment"></span></a>
</div>
</div>
</a>
</div>
{{/if}}
{{else}}
<h3>There are no recipes to show.Be the first one to add a recipe.<span class="required">(Log in required)</span></h3>
{{/each}}
</div>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</template>
methods.js
addReview = function(rating,review,recipeId){
if(review!=""){
Reviews.insert({
rating:rating,
review:review,
recipeId:recipeId
});
Router.go('reviews',{_id:recipeId});
FlashMessages.sendSuccess('Review Added',{ autoHide: true, hideDelay: 2000 });
}
else{
FlashMessages.sendError('Review field is empty',{ autoHide: true, hideDelay: 3000 });
}
return false;
};
upvote = function(currentRecipe){
var user = Meteor.user();
if(!user){
FlashMessages.sendError("You need to login to like this recipe", {hideDelay: 1000});
return false;
}
if (currentRecipe) {
if (_.contains(currentRecipe.voters, Meteor.userId())) {
FlashMessages.sendError("You already liked this recipe", {hideDelay: 1000});
return false;
}
Recipes.update(currentRecipe._id, {$addToSet: {voters:
Meteor.userId()}, $inc: {likes: 1}});
}
};