TP1 Detail Slide 47

1-TP1-DetailContoiller

 $scope.getImage = function (id) {
                if (!id) {
                    return "";
                } else {
                    return "/img/catalog/" + id + ".jpg";
                }
            };


                /** Returns rating for a given product. */
                var getProductRating = function(comments) {
                    if (comments) {
                        var sumRatings = 0;
                        for ( var index = 0; index < comments.length; index++) {
                            var comment = comments[index];
                            sumRatings += comment.rate;
                        }
                        return (sumRatings / comments.length |0);  // like Math... but better :)
                    }
                    return 0;
                };

                /** Returns the CSS class for the average rating of a given product. */
                $scope.getCSSRating = function(pItem) {
                    var css = ['rating'];

                    if (pItem !== undefined) {
                        switch (getProductRating(pItem)) {
                            case 1:
                                css.push('one');
                                break;
                            case 2:
                                css.push('two');
                                break;
                            case 3:
                                css.push('three');
                                break;
                            case 4:
                                css.push('four');
                                break;
                            case 5:
                                css.push('five');
                                break;
                            default :
                                css.push('zero');
                        }
                    }
                    return css;
                };

2-TP1-detail.html

<article class="k-product-sheet">
    <div class="hproduct k-product">
        <div class="photo-data">
            <!-- 
                TODO: 
                load the image in data/img/ based on the product id... 
            -->
            <img class="photo" ng-src="{{getImage(product.id)}}" />
        </div>
        <div class="product-data">
            <h3 class="fn name">{{product.name}}</h3>
            <h4 class="category">
                <a href="#">{{product.category}}</a>
            </h4>
            <!-- 
                TODO: 
                return correct CSS class on <p>: rating and zero/one/two/three/four/five 
            -->
            <!-- TODO: return correct CSS class: rating and zero/one/two/three/four/five -->
            <p ng-class="getCSSRating(product.comments)">
                <a href="#comments">{{product.comments.length}} comment(s)</a>
            </p>
            <p class="description">{{product.description}}</p>
            Quantity: <input type="number" class="product-qty" min="1" ng-model="quantity" />
            <br />
            <div class="price-data">
                <strong class="price sale">
                    {{product.price * quantity |currency}}
                </strong>
            </div>
            <div class="buyZone">
                <div class="availability">
                    <p>
                        <strong>Availability :</strong> immediate delivery
                    </p>
                </div>
                <p class="buy">
                    <a>Add to basket</a>
                </p>
            </div>
        </div>
    </div>
</article>