public/the_bridge_templates/product/show.html
<div ng-controller="ProductController as productCtrl" class="product">
<div class="container">
<div class="card">
<form ng-submit="searchAgain()">
<input type:"text" class="form-control research" placeholder="Type a search term and press enter to search again..." ng-model="searchText">
</form>
</div>
<div class="card pcard">
<div class="card-block">
<span tooltip-trigger="mouseenter" class="pull-right title"><b>{{product.rating | number: 1 }} </b></span>
<img class="card-img-top show-logo" src="{{product.logo_url}}" alt="">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="btn btn-default" style="cursor: default;">{{product.name}}</a>
</li>
<li class="nav-item">
<a class="btn btn-default" ng-click="editProduct(product)">Edit</a>
</li>
<li class="nav-item">
<a ng-click="checkLogin()" data-toggle="modal" data-target="#review_modal" target="_blank" class="btn btn-default">Rate & Review ({{product.reviews_count}})</a>
</li>
<li class="nav-item">
<a ng-href="{{product.website}}" class="btn btn-default" target="_blank">Link</a>
</li>
<li class="nav-item">
<!-- TODO, fix integration link. -->
<a ng-click="integratedProduct('/mappings'); $event.stopPropagation()" class="btn btn-default" ng-show="product.integrated && !(product.integration_type)">Jobs</a>
<a class="btn btn-default" ng-show="product.integration_type=='beta'" data-toggle="modal" data-target="#beta_modal">Automate <i class="fa fa-flash"></i></a>
<a ng-click="changeVoteFor(product)" ng-show="!product.integrated" class="btn btn-default">
<i ng-class="{'fa fa-lg ' : true, 'fa-thumbs-down' : product.hasVoteForUser, 'fa-thumbs-up' : !product.hasVoteForUser}"></i> Vote <sup>(+{{product.votes_count}})</sup></a>
</li>
</ul>
<br><br><br><br>
<p class="col-md-10 lead" ng-repeat="tab in tabs" ng-show="tab.active" ng-hide="tab.disabled" ng-bind-html="tab.content"></p>
<p class="col-md-2 lead">
<tabset class="tabs-right center">
<tab class="btn btn-base m1em" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
</tab>
</tabset>
</p>
<div class="row">
<div class="card-block">
<!-- THIS SHOULD BE IT'S OWN RESOURCE, USED HERE AND ON THE PRODUCT/#/EDIT PAGE -->
<div class="col-md-10">
<div class="tags">
<div ng-hide="editTags" ng-repeat="tag in product.deep_tag_list track by $index" class="tag label">
{{tag.name}} <span class="badge">{{tag.taggings_count}}</span>
</div>
<a class="xxx tag label" ng-hide="editTags" ng-click="showEditTagsBox()">Edit Tags <span class="badge">+/-</span></a>
<div ng-show="editTags">
<div class="tag-editor">
<span ng-repeat="n in product.deep_tag_list track by $index" class="on tag label" ng-click="deleteTag(n,product)" title="Remove this tag.">
{{n.name}} <span class="badge">{{n.taggings_count}}</span>
</span>
<input type="text" class="search-tags" placeholder="Type here to tag..." ng-model="searchTagText" ng-change="searchTags(searchTagText,product)">
</div>
<div class="tag-suggestions">
<div ng-repeat="tag in tag_match | orderBy:'name' | orderBy:'-tag_count'" >
<a ng-click="addTag(tag,product)" title="Add this tag" class="off tag label">
{{tag.name}} <span class="badge">{{tag.taggings_count}}</span>
</a>
</div>
<a class="off tag label" ng-show="new_tag" ng-click="addNewTag(product)">
<i class="fa fa-plus"></i> Create new tag... <span class="badge">+</span>
</a>
</div>
<br><br>
<div class="text-center">
<button ng-click="updateProduct(product)" class="btn btn-default" type="submit">Submit</button>
</div>
</div>
</div>
<!-- END OF "TAGS.HTML" RESOURCE -->
</div>
</div>
</div>
</div>
</div>
<div class="card pcard">
<div class="card-block">
<h4 class="card-title">Reviews</h4>
<div ng-show="product.reviews_count == 0">Nobody has review this product yet. Be the first! <a ng-click="checkLogin()" data-toggle="modal" data-target="#review_modal" target="_blank" class="review-link"><strong>Click to rate & review {{product.name}}.</strong></a></div>
<div ng-repeat="n in product.reviews | orderBy:'-review_score'" ng-init="checkVote(n)">
<div class="row">
<div class="col-xs-1 center">
<a ng-click="vote(n, true)" ng-disabled="checked" data-toggle="tooltip" title="This review shows effort. It is useful and clear."><i class="fa fa-thumbs-up fa-lg"></i></a>
<span class="rscore" ng-init="reviewScore(n,product)" data-toggle="tooltip" title="The review score is a measure of how many people find this review to be useful and clear."><strong>{{n.review_score}}</strong></span>
<a ng-click="vote(n, false)" ng-disabled="checked" data-toggle="tooltip" title="This review does not show effort. It is not useful or unclear."><i class="fa fa-thumbs-down fa-lg"></i></a>
<span ng-show = "n.duplicate_upvote" class="submitStatus">*You have already marked this review as helpful.</span>
<span ng-show = "n.duplicate_downvote" class="submitStatus">*You have already marked this review as unhelpful.</span>
</div>
<div class="col-xs-11">
<span class='live little'>
<i class="fa fa-star-o" ng-show="!product.rating"></i><i class="fa fa-star-half-o" ng-show="n.rating>0 && n.rating<=0.5"></i><i class="fa fa-star" ng-show="n.rating>0.5"></i><i class="fa fa-star-o" ng-show="n.rating<=1"></i><i class="fa fa-star-half-o" ng-show="n.rating>1 && n.rating<=1.5"></i><i class="fa fa-star" ng-show="n.rating>1.5"></i><i class="fa fa-star-o" ng-show="n.rating<=2"></i>
<i class="fa fa-star-half-o" ng-show="n.rating>2 && n.rating<=2.5"></i><i class="fa fa-star" ng-show="n.rating>2.5"></i><i class="fa fa-star-o" ng-show="n.rating<=3"></i><i class="fa fa-star-half-o" ng-show="n.rating>3 && n.rating<=3.5"></i><i class="fa fa-star" ng-show="n.rating>3.5"></i><i class="fa fa-star-o" ng-show="n.rating<=4"></i><i class="fa fa-star-half-o" ng-show="n.rating>4 && n.rating<=4.5"></i><i class="fa fa-star" ng-show="n.rating>4.5"></i>
</span>
by user "{{n.user_id}}" on {{n.date | date}}
<br><br>
{{n.review}}
</div>
</div>
<br><br>
</div>
</div>
</div>
<div class="modal fade" ng-show="loggedIn" id="review_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="card rev">
<div class="card-block">
<h4 class="modal-title" id="myModalLabel">Submit a review for {{product.name}}.</h4>
<p class="lead">Your reviews are what drive the community forward. Thanks for taking the time to open-source your knowledge of {{product.name}}. Your fellow users will vote your review up or down based on its usefulness.</p>
<form method="post">
<span><strong>Review (1000 chars)</strong></span><br><br>
<textarea class="form-control" ng-model="post.review" rows="10" name="review" placeholder="Write your review here..."></textarea>
<br>
<br>
<span><strong>Rating (0-5)</strong></span><br><br>
<input type="number" class="form-control" ng-model="post.rating" name="rating" placeholder="2.5"></textarea>
<br><br>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button ng-click = "submitReview(product)" class="btn btn-success" type="submit">Submit</button>
<div ng-show = "duplicate_status" class = "submitStatus">*You have already submitted review for this product.</div>
<div ng-show = "success_status" class = "submitStatus">*Your review has been successfully submitted.</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="beta_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h2>OpenFn 2.0</h2>
</div>
<div class="modal-body">
<p>This product is connected through our new platform. We have a handful of high-volume users and the connections are stable, but we are still asking that new clients connect by contacting us first as we polish up the user interface.
If you want to connect, email OpenFn at:</p>
<p class="center"><a href="mailto:beta@openfn.org" target="_blank"><i class="fa fa-envelope"></i> beta@openfn.org</a></p>
<p>We look forward to hearing from you.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>