Tuesday, September 8, 2015

View basket

<%@ Page Title="" Language="C#" MasterPageFile="~/Common/PaymentMaster.Master" AutoEventWireup="true" CodeBehind="ViewProductBasket.aspx.cs" Inherits="CGA.CPSMS.ReceiptPortal.ViewProductBasket" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="Scripts/angular.js"></script>
    <style>
        .input {
            width: 45px;
        }
    </style>

    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(-1); }
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div id="content" class="content">
        <div class="brdcrumb"><a href='<% =Page.ResolveUrl("~/Product")%>'>Product</a> > Your Basket</div>
        <div class="btmbrd">
            <span class="head">
                <asp:Label ID="lblcaption" Text="Your Basket" runat="server"></asp:Label>
            </span>
            <span class="fright">&nbsp;&nbsp;</span>
        </div>
        <div class="pad10">

            <script>
                var appProd = angular.module("appProd", []);
                appProd.directive('focus', function ($timeout, $parse) {
                    return {
                        link: function (scope, element, attrs) {
                            var model = $parse(attrs.focus);
                            scope.$watch(model, function (value) {
                                if (value === true) {
                                    $timeout(function () {
                                        element[0].focus();
                                    });
                                }
                            });
                        }
                    };
                });

                appProd.directive('onlyNum', function () {
                    return function (scope, element, attrs) {
                        var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110];
                        element.bind("keydown", function (event) {
                            $('#ctl00_ContentPlaceHolder1_imgLoad').show();
                            var vv = event.which;
                            var cc = this.value.length + 1;
                            if ($.inArray(event.which, keyCode) == -1) {
                                scope.$apply(function () {
                                    scope.$eval(attrs.onlyNum);
                                    $('#ctl00_ContentPlaceHolder1_imgLoad').hide();
                                    event.preventDefault();
                                });
                                event.preventDefault();
                            } else if ((vv != 8 && cc > 6)) {
                                $('#ctl00_ContentPlaceHolder1_imgLoad').hide()
                                event.preventDefault();
                            }
                            $('#ctl00_ContentPlaceHolder1_imgLoad').hide();

                        });
                    };
                });

                appProd.controller("cntProduct", function ($scope, $http) {
                    var dataObj = { value: '1' };

                    var res1 = $http.post('PublicationCartWebService.asmx/getBasketItem', dataObj);
                    res1.success(function (data, status, headers, config) {
                        $('#ctl00_ContentPlaceHolder1_imgLoad').show();
                        $scope.basket = eval(data.d);
                        $scope.isBasketEmpty = $scope.basket.length;
                        $scope.FocusIndex = 100;
                        $scope.number = 5;
                        $('#ctl00_ContentPlaceHolder1_imgLoad').hide();
                     
                    });
                    $scope.processed = 0;
                    var resTotalCount = $http.post('PublicationCartWebService.asmx/GetTotalCount', dataObj);
                    resTotalCount.success(function (data, status, headers, config) {
                        $scope.ShowItem = eval(data.d);

                    });
                    var resGrandTotalPrice = $http.post('PublicationCartWebService.asmx/getTotalPrice', dataObj);
                    resGrandTotalPrice.success(function (data, status, headers, config) {
                        $scope.GrandTotalPrice = eval(data.d);
                    });
                    $scope.TotalShowing = function () {
                        var resTotalCount = $http.post('PublicationCartWebService.asmx/GetTotalCount', dataObj);
                        resTotalCount.success(function (data, status, headers, config) {
                            $scope.ShowItem = eval(data.d);

                        });

                    };
                    $scope.TotalPrice = function () {
                        $scope.processed = 0;
                        var resTotalCount = $http.post('PublicationCartWebService.asmx/getTotalPrice', dataObj);
                        resTotalCount.success(function (data, status, headers, config) {
                            $scope.GrandTotalPrice = eval(data.d);


                        });


                    };

                    $scope.getNumber = function (num) {
                        return new Array(num);
                    };

                    $scope.saveItems = function (ProductAttributeMappingId, ProductItemPrice, qty) {
                        $scope.FocusIndex = qty.$index;
                        $scope.processed = 0;
                        $('#ctl00_ContentPlaceHolder1_imgLoad').show();
                        var qtyProd = qty.item.TotalQty;
                        var qtyProd1 = qty.item.Stock;
                        if (qtyProd <= qtyProd1 && qtyProd > 0 && qtyProd1 > 0) {
                         
                            var dataObj = { ProductAttributeMappingId: ProductAttributeMappingId, ProductItemPrice: ProductItemPrice, Quantity: qtyProd };
                            var res1 = $http.post('PublicationCartWebService.asmx/AddItem', dataObj);
                            res1.success(function (data, status, headers, config) {
                                $scope.basket = eval(data.d);
                                $scope.TotalPrice();
                                $scope.TotalShowing();
                                $('#ctl00_ContentPlaceHolder1_imgBtnCheckOut').show();
                                $('#ctl00_ContentPlaceHolder1_imgLoad').hide();


                            });
                        }
                        else {

                            if (qtyProd > 0) {

                                window.alert('Quantity entered must be less than or equal to stock available');
                                var dataObj11 = { value: '1' };
                                qty.item.TotalQty = '';
                                var res11 = $http.post('PublicationCartWebService.asmx/getBasketItem', dataObj11);
                                res11.success(function (data, status, headers, config) {
                                    $scope.basket = eval(data.d);
                                    $scope.isBasketEmpty = $scope.basket.length;
                                    $('#ctl00_ContentPlaceHolder1_imgBtnCheckOut').show();
                                    $('#ctl00_ContentPlaceHolder1_imgLoad').hide();
                                });
                            } else {

                                if (qty.item.TotalQty == 0) { qty.item.TotalQty = ''; } else {

                                    window.alert('Quantity must be greater than 0');
                                }
                                $('#ctl00_ContentPlaceHolder1_imgLoad').hide();
                                $('#ctl00_ContentPlaceHolder1_imgBtnCheckOut').hide();
                                $scope.processed = 1;

                            }
                        };

                    };

                    $scope.Remove = function (ProductAttributeMappingId) {
                        $scope.processed = -1;
                        if (window.confirm("Are you sure to remove product from basket?")) {
                            var dataObj = { ProductAttributeMappingId: ProductAttributeMappingId };
                            var res1 = $http.post('PublicationCartWebService.asmx/RemoveItem', dataObj);
                            res1.success(function (data, status, headers, config) {
                                $scope.basket = eval(data.d);
                                $scope.isBasketEmpty = $scope.basket.length;
                                $scope.TotalShowing();
                                $scope.TotalPrice();
                                $('#ctl00_ContentPlaceHolder1_imgBtnCheckOut').show();

                            });
                        }
                    }
                    $scope.ImageExist = function (url) {
                        var img = new Image();
                        img.src = url;
                        if (img.height == 0) { return 'ProductImages/' + url; } else {
                            return '/ProductImages/1.jpg'
                        }
                    };

                });

            </script>
            <div ng-app="appProd" ng-controller="cntProduct">

                <div class="col-mid-10" align="center" id="imgLoad" runat="server" style="position: absolute; height: 150px; width: 1000px; z-index: 999; margin: auto 0;">
                    <img src='<% =Page.ResolveUrl("~/App_Themes/Receipt/images/loading-x.gif")%>' style="height: 150px; width: 200px;" />
                </div>

                <div ng-show="isBasketEmpty >0" class="gd-row">
                    <table class="data1" cellpadding="0" cellspacing="0" ng-show="isBasketEmpty > 0">
                        <tr class="data1-head">
                            <td class="col-mid-2">&nbsp;</td>
                            <td class="col-mid-2">Product Description</td>
                            <td class="col-mid-2">Unit Price</td>
                            <td class="col-mid-1">Qty.</td>
                            <td class="col-mid-1">Sub Total</td>
                            <td class="col-mid-1"></td>
                        </tr>
                        <tr ng-repeat="item in basket">
                            <td>
                                <img style="width: 65px; height: 83px;" ng-src="{{ImageExist(item.ProductImage)}}"></td>
                            <td>
                                <span>{{item.ProductName}}</span><br />
                                <span>Subscription: {{item.ProductIssues}}</span><br />
                                <span>Language: {{item.ProductLanguage}}</span><br />
                                <span>Country: {{item.ProductCountry}} </span>

                            </td>
                            <td>Rs.{{item.ItemPrice.toFixed(2)}}</td>
                            <td>
                               <%-- <input  class="input" type="text" only-num name='{{$index}}' id='{{$index}}' ng-model="item.TotalQty"
                                    ng-change="saveItems(item.ProductAttributeMappingId,item.ItemPrice,this)" focus="{{FocusIndex==$index? true:false}}" />--%>
                             
                                <select ng-model="item.TotalQty"  class="input" ng-change="saveItems(item.ProductAttributeMappingId,item.ItemPrice,this)">                                    
                                    <option ng-repeat="i in getNumber(item.Stock) track by $index"" >{{$index+1}}</option>                                  
                                </select>
                            </td>
                            <td>Rs. {{(item.ItemPrice*item.TotalQty).toFixed(2) }}</td>
                            <td title="remove from cart">
                                <span>
                                    <a href="" ng-click="Remove(item.ProductAttributeMappingId)">
                                        <img src='<% =Page.ResolveUrl("~/App_Themes/Receipt/images/delete-icon.jpg")%>' alt="" /></a>
                                </span></td>
                        </tr>



                    </table>

                    <div class="grandtotal">
                        <div class="fleft col-mid-6">
                            Cart Summary: You have <strong>{{ShowItem}}</strong>  in your shopping cart.
                        </div>
                        <div class="fright col-mid-3">
                            <table class="fright">
                                <tr>
                                    <td class="col-mid-7"></td>
                                    <td class="col-mid-3"><strong></strong>
                                    </td>
                                </tr>
                                <tr>

                                    <td><strong>Grand Total: &nbsp;&nbsp; Rs. {{GrandTotalPrice}}</strong>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="pad10 margT8">
                        <span class="fleft" style="width: 70%;"><a href="Product">
                            <img src='<% =Page.ResolveUrl("~/App_Themes/Receipt/images/continue-shipping.jpg")%>' title="Continue Shopping" width="206" height="33" alt="" /></a> </span>
                        <span class="fleft" style="width: 30%">
                            <div id="divShow" ng-show="processed >0" style="color: red; font-weight: bold;" runat="server">Quantity required to proceed further</div>
                            <div id="divShow1" ng-show="processed<1" runat="server">
                                <asp:ImageButton ID="imgBtnCheckOut" ImageUrl="~/App_Themes/Receipt/images/sml-place-order.jpg" ToolTip="Place  Order" runat="server" OnClick="imgBtnCheckOut_Click" />
                            </div>
                        </span>
                    </div>
                </div>
                <div ng-show="isBasketEmpty ==0" class="gd-row">
                    <b style="padding-left: 16px;">No product added in your basket.</b>
                    <div class="clearfix"></div>

                    <div class="pad10 margT8">
                        <span class="fleft" style="width: 70%;"><a href="Product">
                            <img src='<% =Page.ResolveUrl("~/App_Themes/Receipt/images/continue-shipping.jpg")%>' title="Continue Shopping" width="206" height="33" alt="" /></a> </span>

                    </div>
                </div>
            </div>
            <div class="clr"></div>
        </div>
        <div class="disclm">
            <strong>Disclaimer</strong>:- All Magazines listed at this site belongs to Publication Division, Ministry of Info. & Broadcasting, for any product related queries or issues customers will have to contact the ministry at 011-2436 7453, email-id pdjucir@gmail.com  for any product non-delivery / refund / quality or other issues related to the magazines listed here. Office of CGA (BharatKosh Portal Owner) will complete financial transaction related activity only.
        </div>
        <br />
    </div>
</asp:Content>

No comments:

Post a Comment