Skip to content

D
dcarfixers_angular
Commit 2b1a4830 by Jansa Jose
Options

pagination

parent 3ed7b574
Showing with 449 additions and 624 deletions
package-lock.json
......@@ -400,14 +400,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -422,20 +420,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -552,8 +547,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -565,7 +559,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -580,7 +573,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -588,14 +580,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -614,7 +604,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -695,8 +684,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -708,7 +696,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -830,7 +817,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -2590,7 +2576,7 @@
},
"camelcase-keys": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
"resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
"integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
"requires": {
"camelcase": "^2.0.0",
......@@ -4322,14 +4308,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -4344,20 +4328,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -4474,8 +4455,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -4487,7 +4467,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -4502,7 +4481,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -4510,14 +4488,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -4536,7 +4512,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -4617,8 +4592,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -4630,7 +4604,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -4752,7 +4725,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -4976,14 +4948,12 @@
},
"handlebars": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.1.tgz",
"integrity": "sha512-3Zhi6C0euYZL5sM0Zcy7lInLXKQ+YLcF/olbN010mzGQ4XVm50JeyBnMqofHh696GrciGruC7kCcApPDJvVgwA==",
"resolved": "",
"dev": true,
"requires": {
"neo-async": "^2.6.0",
"optimist": "^0.6.1",
"source-map": "^0.6.1",
"uglify-js": "^3.1.4"
"source-map": "^0.6.1"
},
"dependencies": {
"source-map": {
......@@ -6409,7 +6379,7 @@
},
"load-json-file": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"requires": {
"graceful-fs": "^4.1.2",
......@@ -6421,7 +6391,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
}
}
......@@ -6759,7 +6729,7 @@
},
"meow": {
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
"resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
"integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
"requires": {
"camelcase-keys": "^2.0.0",
......@@ -6776,7 +6746,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
}
}
......@@ -7118,6 +7088,14 @@
"resolved": "https://registry.npmjs.org/ngx-google-places-autocomplete/-/ngx-google-places-autocomplete-2.0.3.tgz",
"integrity": "sha512-AFwgwQeHPW16l7TWE/8qpOlQ4zbQ9uvApqb3zCIWyENc2kaD+xkuMO+OOORO2DvFmjQJz5maOQxlH5JQiOlrAg=="
},
"ngx-infinite-scroll": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-7.1.0.tgz",
"integrity": "sha512-uytsKxUgGcPQjYMcf7FObcducQHkEsilPHZGJ3AMhOM4mtxP+YramnXXdyp2thEcuMgfNr9fBJjYnP0YcJciEQ==",
"requires": {
"opencollective-postinstall": "^2.0.2"
}
},
"ngx-malihu-scrollbar": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/ngx-malihu-scrollbar/-/ngx-malihu-scrollbar-7.0.0.tgz",
......@@ -7178,7 +7156,7 @@
"dependencies": {
"semver": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
}
}
......@@ -7262,7 +7240,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"requires": {
"ansi-styles": "^2.2.1",
......@@ -7279,7 +7257,7 @@
},
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
}
}
......@@ -7520,6 +7498,11 @@
"is-wsl": "^1.1.0"
}
},
"opencollective-postinstall": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
"integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
},
"opn": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
......@@ -7569,7 +7552,7 @@
},
"os-locale": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
"requires": {
"lcid": "^1.0.0"
......@@ -8435,7 +8418,7 @@
},
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
}
}
......@@ -8859,7 +8842,7 @@
"dependencies": {
"source-map": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
"resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
"integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
"requires": {
"amdefine": ">=0.0.4"
......@@ -9834,12 +9817,12 @@
"dev": true
},
"tar": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
"integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
"requires": {
"block-stream": "*",
"fstream": "^1.0.2",
"fstream": "^1.0.12",
"inherits": "2"
}
},
......@@ -10312,33 +10295,6 @@
"integrity": "sha1-tlQ6g8/Iwr77P0yPumiW9bDJvmg=",
"dev": true
},
"uglify-js": {
"version": "3.5.15",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.15.tgz",
"integrity": "sha512-fe7aYFotptIddkwcm6YuA0HmknBZ52ZzOsUxZEdhhkSsz7RfjHDX2QDxwKTiv4JQ5t5NhfmpgAK+J7LiDhKSqg==",
"dev": true,
"optional": true,
"requires": {
"commander": "~2.20.0",
"source-map": "~0.6.1"
},
"dependencies": {
"commander": {
"version": "2.20.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
"integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
"dev": true,
"optional": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"optional": true
}
}
},
"ultron": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
......
package.json
......@@ -41,6 +41,7 @@
"ngx-carousel": "^1.3.5",
"ngx-gallery": "^5.9.1",
"ngx-google-places-autocomplete": "^2.0.3",
"ngx-infinite-scroll": "^7.1.0",
"ngx-malihu-scrollbar": "^7.0.0",
"ngx-slick": "^0.2.1",
"node-sass": "^4.12.0",
......
src/app/purchase/orders/orders.component.html
......@@ -2,100 +2,44 @@
<div class="container-fluid">
<app-searchbar>
</app-searchbar>
<div class="loader_overlay" *ngIf="loader"></div>
<div class="myorder_wrapper">
<ul>
<li>
<ul *ngIf="bookedData" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
<li *ngFor="let book of bookedData">
<div class="row">
<div class="col-md-6">
<div class="auto_part_container">
<img src="/assets/images/asset_product.png">
<img src="{{imageServer + book.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
<div class="auto_part_detail">
<h2>Apollo Amazer 4G Tubeless 4 Wheeler</h2>
<h3>Audi Q7</h3>
<h2>{{book.product_name}}</h2>
<h3>{{book.short_description}}</h3>
<div class="others">
<h4><div>Color</div><span>Black</span></h4>
<h4><div>Quantity</div><span>1</span></h4>
<!-- <h4><div>Color</div><span>Black</span></h4> -->
<h4><div>Quantity</div><span>{{book.quantity}}</span></h4>
</div>
<h4><span>ORID102154896541</span><strong (click)="goToPage('track')">Track Order</strong></h4>
<h4><div style="width:auto !important;">Ordered On</div><span>Mon, Jan 14th 2019</span></h4>
<h4><span>{{book.format_order_id}}</span><strong (click)="trackOrder(book.transId)" *ngIf="(book.status == '2' || book.status == '3' || book.status == '4' || book.status == '5')">Track Order</strong></h4>
<h4><div style="width:auto !important;">Ordered On</div><span>{{book.datetime | date: "EEE, MMMM dd, yyyy"}}</span></h4>
</div>
<div class="clear"></div>
</div>
<div class="col-md-6">
<div class="price_details">
<h5>$ 3,200</h5>
<h4>Delivery expected by Thu, Apr 25th 2019<br>
<div>Your item has been Shipped</div>
<h5>$ {{book.amount}}</h5>
<h4 *ngIf="( book.status == '2' || book.status == '3' || book.status == '4')">{{book.expected_delivery == null || book.expected_delivery == '' ? 'Your Expected Delivery date will Update soon': 'Delivery expected by '+ (book.expected_delivery | date: "EEE, MMMM dd, yyyy") }}<br>
<div *ngIf="book.status == '2'">Your Order is Placed</div>
<div *ngIf="book.status == '3'">Your item is Packed</div>
<div *ngIf="book.status == '4'">Your item has been Shipped</div>
</h4>
<div class="cancel">Cancel Item</div>
<div class="clear"></div>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-6">
<div class="auto_part_container">
<img src="/assets/images/asset_product.png">
</div>
<div class="auto_part_detail">
<h2>Apollo Amazer 4G Tubeless 4 Wheeler</h2>
<h3>Audi Q7</h3>
<div class="others">
<h4><div>Color</div><span>Black</span></h4>
<h4><div>Quantity</div><span>1</span></h4>
</div>
<h4><span>ORID102154896541</span><strong (click)="goToPage('track')">Track Order</strong></h4>
<h4><div style="width:auto !important;">Ordered On</div><span>Mon, Jan 14th 2019</span></h4>
</div>
<div class="clear"></div>
</div>
<div class="col-md-6">
<div class="price_details">
<h5>$ 3,200</h5>
<h4>Delivery expected by Thu, Apr 25th 2019<br>
<div>Your item has been Shipped</div>
<h4 *ngIf="( book.status == '5' || book.status == '6')">{{book.delivered == null || book.delivered == '' ? 'Order Delivered date will Update soon' : 'Delivered on '+ (book.delivered | date: "EEE, MMMM dd, yyyy") }}<br>
<div *ngIf="book.status == '5'">Your Order is Delivered</div>
<div *ngIf="book.status == '6'">Your item is Returned</div>
</h4>
<div class="review">Write Review</div>
<div class="clear"></div>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-6">
<div class="auto_part_container">
<img src="/assets/images/asset_product.png">
</div>
<div class="auto_part_detail">
<h2>Apollo Amazer 4G Tubeless 4 Wheeler</h2>
<h3>Audi Q7</h3>
<div class="others">
<h4><div>Color</div><span>Black</span></h4>
<h4><div>Quantity</div><span>1</span></h4>
</div>
<h4><span>ORID102154896541</span><strong (click)="goToPage('track')">Track Order</strong></h4>
<h4><div style="width:auto !important;">Ordered On</div><span>Mon, Jan 14th 2019</span></h4>
</div>
<div class="clear"></div>
</div>
<div class="col-md-6">
<div class="price_details">
<h5>$ 3,200</h5>
<h4>Delivery expected by Thu, Apr 25th 2019<br>
<div>Your item has been Shipped</div>
<h4 *ngIf = "book.status == '7'">
<div *ngIf="book.status == '7'">This item is Canceled</div>
</h4>
<div class="cancelled">Cancelled</div>
<div class="cancel" *ngIf="(book.status == '2' || book.status == '3'|| book.status == '4')" (click)="cancelOrder(book.order_id)">Cancel Item</div>
<div class="clear"></div>
</div>
</div>
</div>
......@@ -104,396 +48,33 @@
</div>
</div>
<div class="bottom_product_list">
<h4>Audi Q7 <span>( Similar Results )</span></h4>
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="floatRight">$320</span>
<div class="clear"></div>
<p>21 Reviews</p>
</div>
</div>
</li>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<li (click)="goToPage('productdetails')">
<!-- <h4>Audi Q7 <span>( Similar Results )</span></h4> -->
<div class="loader_overlay" *ngIf="trend_loader"></div>
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="trendingProductData">
<ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData">
<li (click)="latestPrdtDtls(prdt.product_id)">
<div class="inner_div_product">
<div class="product_wrapper">
<img src="/assets/images/asset_product.png">
<img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
<h5>JK Victory Wheelers type</h5>
<p>265/65 R17, Tubeless</p>
<h5>{{prdt.product_name}}</h5>
<p>{{prdt.short_description}}</p>
<div class="star_ratting">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
<fieldset class="rating" *ngIf="prdt.rating > 0">
<input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_5'" [attr.name]="'thirdStarName_'+prdt.product_id" value="5" /><label class = "full" for="thirdStar5"></label>
<input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4.5" /><label class="half" for="thirdStar4half"></label>
<input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4" /><label class = "full" for="thirdStar4"></label>
<input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3.5" /><label class="half" for="thirdStar3half"></label>
<input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3" /><label class = "full" for="thirdStar3"></label>
<input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2.5" /><label class="half" for="thirdStar2half"></label>
<input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2" /><label class = "full" for="thirdStar2"></label>
<input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1.5" /><label class="half" for="thirdStar1half"></label>
<input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1" /><label class = "full" for="thirdStar1"></label>
<input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="0.5" /><label class="half" for="thirdStarhalf"></label>
</fieldset>
<span class="floatRight">$320</span>
<span class="floatRight">$ {{prdt.amount}}</span>
<div class="clear"></div>
<p>21 Reviews</p>
<p>{{prdt.reviews}} Reviews</p>
</div>
</div>
</li>
......
src/app/purchase/orders/orders.component.scss
......@@ -3,6 +3,9 @@
width:100%;
ul{
padding:0px;
&::-webkit-scrollbar {
display: none;
}
li{
list-style: none;
background: #fff;
......
src/app/purchase/orders/orders.component.ts
import { Component, OnInit } from '@angular/core';
import { NgxCarousel } from 'ngx-carousel';
import { WebService } from '../../provider/web.service';
import { ImageStorage } from '../../../environments/server.config';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
......@@ -8,20 +10,105 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./orders.component.scss']
})
export class OrdersComponent implements OnInit {
page: number = 1;
total_page: number = 1;
loader:boolean;
loginDetails:any;
bookedData: any;
imageServer: string;
trend_loader:boolean;
trendingProductData:any;
public carouselTile: NgxCarousel;
constructor(
private router : Router,
private route : ActivatedRoute
private route : ActivatedRoute,
public webService: WebService,
) {
this.loader = true;
this.trend_loader = true;
this.imageServer = ImageStorage;
}
ngOnInit() {
this.checkUserLogin();
this.getMyOrders();
this.trendingProducts();
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
}
checkUserLogin(){
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
}
getMyOrders(){
this.loader = true;
this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
if(response.status == 'success'){
this.total_page = response.meta.total_pages;
this.bookedData = response.data;
} else {
this.bookedData = false;
}
this.loader = false;
})
}
trackOrder(transId){
this.goToPage('track',{"ref":transId});
}
onScroll(){
if(this.total_page < this.page){
return false;
}
this.page += 1;
this.trend_loader = true;
this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
if(response.status == 'success'){
let thisObj = this;
response.data.forEach(function(orderData,key) {
thisObj.bookedData.push(orderData);
});
}
this.trend_loader = false;
});
}
cancelOrder(odrId){
if(odrId < 0){
return false;
}
this.loader = true;
this.webService.post_data('cancelOrder',{"order_id":odrId}).subscribe(response => {
if(response.status == 'success'){
this.getMyOrders();
}
this.loader = false;
})
}
trendingProducts(){
this.trend_loader = true;
this.webService.get_data('getTrendingPrdts').subscribe(response => {
if(response.status == 'success'){
this.trendingProductData = response.data;
} else {
this.trendingProductData = false;
}
this.trend_loader = false;
});
}
latestPrdtDtls(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
......
src/app/purchase/productdetails/productdetails.component.html
......@@ -70,8 +70,9 @@
<div class="clear"></div>
</div>
<div class="rate_review" *ngIf="productDetails.reviews">
<ul>
<li *ngFor="let revws of productDetails.reviews">
<div class="loader_overlay" *ngIf="review_loader"></div>
<ul infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
<li *ngFor="let revws of reviewArray">
<div class="row">
<div class="col-md-9">
<h4 class="pt0">{{revws.title}}</h4>
......@@ -108,7 +109,7 @@
<div class="bottom_product_list">
<div class="loader_overlay" *ngIf="loader2"></div>
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="trendingProductData">
<ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData"> <!-- LOOP THIS -->
<ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData" >
<li (click)="latestPrdtDtls(prdt.product_id)">
<div class="inner_div_product">
<div class="product_wrapper">
......
src/app/purchase/productdetails/productdetails.component.scss
......@@ -59,6 +59,9 @@
ul{
margin:0px;
padding: 0px;
&::-webkit-scrollbar {
display: none;
}
li{
list-style: none;
border-bottom: 1px solid #eeeeee;
......
src/app/purchase/productdetails/productdetails.component.ts
......@@ -16,6 +16,7 @@ export class ProductdetailsComponent implements OnInit {
loader: boolean;
loader2:boolean;
review_loader:boolean;
count:any;
product_id: number;
imageServer: string;
......@@ -25,6 +26,9 @@ export class ProductdetailsComponent implements OnInit {
galleryOptions: NgxGalleryOptions[];
loginDetails:any;
trendingProductData:any;
page: number = 1;
reviewArray:any = new Array();
total_page: number = 1;
@ViewChild("indexLoginModal") loginModalRef: ElementRef;
......@@ -75,12 +79,15 @@ export class ProductdetailsComponent implements OnInit {
}
getProductDetails(){
this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
this.loader = true;
this.webService.post_data('SingleProductSearch',{"product_id":this.product_id,'page':this.page}).subscribe(response => {
if(response.status == 'success'){
let image: string = '';
let imageArr: any[] = new Array();
const thisObj = this;
this.productDetails = response.data;
this.reviewArray = response.data.reviews.data;
this.total_page = response.data.reviews.meta.total_pages;
console.log(response.data)
if(this.productDetails.images.length > 0){
thisObj.productDetails.images.forEach(function (data) {
......@@ -99,9 +106,27 @@ export class ProductdetailsComponent implements OnInit {
});
}
onScroll(){
if(this.total_page < this.page){
return false;
}
this.page += 1;
this.review_loader = true;
this.webService.post_data('SingleProductSearch',{"product_id":this.product_id,'page':this.page}).subscribe(response => {
if(response.status == 'success'){
let thisObj = this;
response.data.reviews.data.forEach(function(reviewData,key) {
thisObj.reviewArray.push(reviewData);
});
}
this.review_loader = false;
});
}
trendingProducts(){
this.loader2 = true;
this.webService.get_data('getTrendingPrdts').subscribe(response => {
this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
if(response.status == 'success'){
this.trendingProductData = response.data;
} else {
......@@ -121,6 +146,10 @@ export class ProductdetailsComponent implements OnInit {
this.goToPage('address','');
}
latestPrdtDtls(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
goToPage(path,data=null){
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
......
src/app/purchase/productlist/productlist.component.html
......@@ -67,7 +67,7 @@
</div>
<div class="loader_overlay" *ngIf="loader"></div>
<div class="search_listing_content" *ngIf="productArray && productArray.length > 0;else noProductData">
<ul>
<ul infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
<li *ngFor="let prdt of productArray">
<div class="inner_div_product cpoint" (click)="getSingleProductDetails(prdt.product_id)">
<div class="product_wrapper">
......
src/app/purchase/productlist/productlist.component.scss
......@@ -233,6 +233,9 @@
ul{
margin:0px;
padding:0px;
&::-webkit-scrollbar {
display: none;
}
li{
list-style: none;
padding:10px;
......
src/app/purchase/productlist/productlist.component.ts
......@@ -13,12 +13,15 @@ export class ProductlistComponent implements OnInit {
loader: boolean;
searchKey:string;
imageServer: any;
productArray: any;
productArray: any[] = new Array();
productBrand: any;
brandArr: any[] = new Array();
sliderMinvalue: number;
sliderhighValue: number;
slideroptions: Options;
page: number = 1;
total_page: number = 1;
filterParam: any = new Array();
constructor(
private router : Router,
......@@ -26,13 +29,16 @@ export class ProductlistComponent implements OnInit {
public webService : WebService
){
this.loader = true;
this.productArray = true;
this.productArray = [];
this.filterParam = {"key":'',"brand_id":Array(),"minPrice":'',"maxPrice":'','page':1};
this.imageServer = ImageStorage;
route.params.subscribe(val => {
this.route.queryParams.subscribe(params => {
this.searchKey = params['key'];
this.getProductDetails({"key":this.searchKey});
this.filterParam.key = this.searchKey;
this.filterParam.page = this.page;
this.getProductDetails(this.filterParam);
});
});
if(this.searchKey == ''){
......@@ -51,14 +57,22 @@ export class ProductlistComponent implements OnInit {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
getProductDetails(params:any = ''){
getProductDetails(params:any = Array()){
this.loader = true;
this.webService.post_data('productSearch',params).subscribe(response => {
if(response.status == 'success'){
console.log(response.data);
this.total_page = response.meta.total_pages;
if(params.page == 1){
this.productArray = response.data;
} else {
this.productArray = false;
let thisObj = this;
response.data.forEach(function(product,key) {
thisObj.productArray.push(product);
});
}
} else {
this.productArray = [];
}
this.loader = false;
});
......@@ -75,6 +89,15 @@ export class ProductlistComponent implements OnInit {
});
}
onScroll(){
if(this.total_page == this.page){
return false;
}
this.page += 1;
this.filterParam.page = this.page;
this.getProductDetails(this.filterParam);
}
getSingleProductDetails(prdt_id){
this.goToPage('productdetails',{"product_id":prdt_id});
}
......@@ -88,10 +111,17 @@ export class ProductlistComponent implements OnInit {
this.brandArr.splice(id, 1);
}
}
this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr});
this.page = 1;
this.filterParam.page = this.page;
this.filterParam.brand_id = this.brandArr;
this.getProductDetails(this.filterParam);
}
getPrice(low,top){
this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr,"minPrice":low,"maxPrice":top});
this.page = 1;
this.filterParam.page = this.page;
this.filterParam.minPrice = low;
this.filterParam.maxPrice = top;
this.getProductDetails(this.filterParam);
}
}
src/app/purchase/purchase-home/purchase-home.component.html
......@@ -31,16 +31,16 @@
<p>{{prdt.short_description}}</p>
<div class="star_ratting">
<fieldset class="rating" *ngIf="prdt.rating > 0">
<input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_5'" [attr.name]="'usrReviewName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
<input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
<input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
<input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
<input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
<input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
<input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
<input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
<input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
<input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
<input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_5'" [attr.name]="'usrStarName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
<input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_4half'" [attr.name]="'usrStarName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
<input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_4'" [attr.name]="'usrStarName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
<input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_3half'" [attr.name]="'usrStarName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
<input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_3'" [attr.name]="'usrStarName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
<input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_2half'" [attr.name]="'usrStarName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
<input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_2'" [attr.name]="'usrStarName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
<input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_1half'" [attr.name]="'usrStarName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
<input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_1'" [attr.name]="'usrStarName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
<input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_half'" [attr.name]="'usrStarName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
</fieldset>
<span class="floatRight">$ {{prdt.amount}}</span>
<div class="clear"></div>
......@@ -55,14 +55,15 @@
</div>
<div class="search_listing_content">
<div class="loader_overlay" *ngIf="loader2"></div>
<div class="loader_overlay" *ngIf="trend_loader"></div>
<div class="row">
<div class="col-md-8">
<p>Trending Products</p>
</div>
</div>
<ul *ngIf="trendingProductData">
<li (click)="latestPrdtDtls(prdt.product_id)" *ngFor="let prdt of trendingProductData">
<ul *ngIf="trendingProductData"
infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
<li (click)="latestPrdtDtls(prdt.product_id)" *ngFor="let prdt of trendingProductData" >
<div class="inner_div_product">
<div class="product_wrapper">
<img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
......@@ -100,9 +101,12 @@
<button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>
<div class="modal" id="failure">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal"> × </div>
<div class="modal-dialog modal-sm">
<div class="modal-content login_modal_wrapper status_modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body quote_modal">
<div class="login_modal_content">
<div class="login_modal_inner">
......@@ -112,8 +116,8 @@
</div>
<div class="row">
<div class="col-md-12 textCenter" style="padding-top:40px;">
<button class="log_btn" data-dismiss="modal">Close</button>
<div class="col-md-12 textCenter">
<button class="btn log_btn btn-block" data-dismiss="modal">Close</button>
</div>
</div>
</div>
......
src/app/purchase/purchase-home/purchase-home.component.scss
......@@ -233,6 +233,9 @@
ul{
margin:0px;
padding:0px;
&::-webkit-scrollbar {
display: none;
}
li{
list-style: none;
padding:10px;
......@@ -471,3 +474,25 @@
}
}
}
.status_modal{
border-radius: 0px;
.modal-header{
border:none;
}
.login_modal_inner{
img{
width:75px;
}
h4{
font-size:18px;
}
.log_btn{
background: #2655bf;
color: #fff;
border:none;
border-radius: 0px;
}
}
}
\ No newline at end of file
src/app/purchase/purchase-home/purchase-home.component.ts
......@@ -13,10 +13,12 @@ import { NgxCarousel } from 'ngx-carousel';
export class PurchaseHomeComponent implements OnInit {
public carouselTile: NgxCarousel;
page: number = 1;
loader:boolean;
loader2:boolean;
latestProductData:any;
total_page: number = 1;
imageServer: any;
trend_loader:boolean;
latestProductData:any;
trendingProductData:any;
@ViewChild("failureModel") public failureModelRef: ElementRef;
......@@ -27,7 +29,7 @@ export class PurchaseHomeComponent implements OnInit {
public webService : WebService
) {
this.loader = true;
this.loader2 = true;
this.trend_loader = true;
this.imageServer = ImageStorage;
}
......@@ -50,7 +52,7 @@ export class PurchaseHomeComponent implements OnInit {
this.unsetProdDetails();
this.getLatestProducts();
this.trendingProducts();
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
this.carouselTile = {grid: {xs: 1, sm: 2, md: 4, lg: 8, all: 0},slide: 1, speed: 400, point: { visible: false }, load: 2, touch: true, loop: true}
}
unsetProdDetails(){
......@@ -70,15 +72,15 @@ export class PurchaseHomeComponent implements OnInit {
}
trendingProducts(){
this.loader2 = true;
this.webService.get_data('getTrendingPrdts').subscribe(response => {
this.trend_loader = true;
this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
if(response.status == 'success'){
console.log(response.data)
this.total_page = response.meta.total_pages;
this.trendingProductData = response.data;
} else {
this.trendingProductData = false;
}
this.loader2 = false;
this.trend_loader = false;
});
}
......@@ -86,6 +88,24 @@ export class PurchaseHomeComponent implements OnInit {
this.goToPage('productdetails',{"product_id":prdt_id});
}
onScroll(){
if(this.total_page < this.page){
return false;
}
this.page += 1;
this.trend_loader = true;
this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
if(response.status == 'success'){
let thisObj = this;
response.data.forEach(function(trendData,key) {
thisObj.trendingProductData.push(trendData);
});
}
this.trend_loader = false;
});
}
goToPage(path,data=null){
this.router.navigate([path],{queryParams: data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
......
src/app/purchase/purchase.module.ts
......@@ -5,6 +5,7 @@ import { ProductlistComponent } from './productlist/productlist.component';
import { ProductdetailsComponent } from './productdetails/productdetails.component';
import { moduleRouting } from './purchase.routing';
import { SearchbarComponent } from './searchbar/searchbar.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { Ng5SliderModule } from 'ng5-slider';
import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
import { NgxGalleryModule } from 'ngx-gallery';
......@@ -30,6 +31,7 @@ import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
NgxGalleryModule,
NgxCarouselModule,
ReactiveFormsModule,
InfiniteScrollModule,
TooltipModule,
MalihuScrollbarModule.forRoot()
]
......
src/app/purchase/rating/rating.component.html
......@@ -74,7 +74,7 @@
</div>
</div>
</div>
<div class="bottom_product_list">
<!-- <div class="bottom_product_list">
<h4>Audi Q7 <span>( Similar Results )</span></h4>
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
<ngx-tile NgxCarouselItem>
......@@ -472,5 +472,5 @@
<button NgxCarouselPrev class='leftRs'>&lt;</button>
<button NgxCarouselNext class='rightRs'>&gt;</button>
</ngx-carousel>
</div>
</div> -->
</div>
\ No newline at end of file
src/app/purchase/searchbar/searchbar.component.html
......@@ -12,9 +12,11 @@
</ul>
</div>
<div *ngIf="productArray && productArray.length > 0" class="nav_bar_search_list">
<ul class="filter-select">
<ul class="filter-select" malihu-scrollbar [scrollbarOptions]="scrollbarOptions" style="max-height: 350px; overflow: scroll">
<li class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">
<div class="search_list_image"></div>
<div class="search_list_image">
<img src="{{imageServer + prdt.image}}" onerror="this.src='assets/images/user_avatar.jpg'">
</div>
<p>{{prdt.product_name}}</p>
<div class="clear"></div>
</li>
......
src/app/purchase/searchbar/searchbar.component.ts
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { ImageStorage } from '../../../environments/server.config';
@Component({
selector: 'app-searchbar',
......@@ -11,10 +12,15 @@ export class SearchbarComponent implements OnInit {
productArray: any;
SingleProductData:any;
imageServer: string;
public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
@ViewChild("productSearch") public productSearchRef: ElementRef;
constructor(private router : Router, private route: ActivatedRoute, public webService: WebService) {
this.productArray = true;
this.imageServer = ImageStorage;
}
ngOnInit() {
......@@ -32,6 +38,7 @@ export class SearchbarComponent implements OnInit {
}
this.webService.post_data('productSearch',{"key":product}).subscribe(response => {
if(response.status == 'success'){
console.log(response.data)
this.productArray = response.data;
} else {
this.productArray = false;
......
src/app/purchase/summary/summary.component.ts
......@@ -91,9 +91,9 @@ export class SummaryComponent implements OnInit {
if(response.status == 'success'){
document.location.href = this.serverUrl+'orderPayNow/'+response.data;
}else{
this.loader = false;
this.failureModelRef.nativeElement.click();
}
this.loader = false;
})
}
......
src/app/purchase/track/track.component.html
......@@ -17,7 +17,7 @@
<div class="product_details" *ngIf="orderDetails">
<h1>{{orderDetails.product_name}}</h1>
<!-- <div class="review" (click)="reviewBtn()">Write review</div> -->
<div class="review" data-toggle="modal" data-target="#review">Write review</div>
<div class="review" data-toggle="modal" data-target="#review" *ngIf="!userReviewed">Write review</div>
<div class="clear"></div>
<h2>{{orderDetails.short_description}}</h2>
<div class="others">
......@@ -26,7 +26,7 @@
</div>
<div class="row">
<div class="col-md-5">
<div class="order_range">
<div class="order_range prevent-click">
<ng5-slider [(value)]="verticalSlider2.minValue" [(highValue)]="verticalSlider2.maxValue" [options]="verticalSlider2.options"></ng5-slider>
</div>
<div class="order_range_details">
......@@ -84,7 +84,7 @@
</div>
</div>
</div>
</div>
</div>
......@@ -95,10 +95,17 @@
<!-- START-RATTING-DIV -->
<div class="modal" id="review">
<div class="modal-dialog modal-lg">
<div class="modal" id="review">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header" #ratingModal>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="ratting_inner">
<div class="loader_overlay" *ngIf="loader_review"></div>
<form [formGroup]="rateForm" (ngSubmit)="rateFormSubmit(rateForm.value)">
<div class="">
<p>Rate this Product</p>
<div class="ratting_star">
......@@ -130,19 +137,33 @@
<hr>
<div class="">
<p>Give a Title</p>
<input class="title_input" placeholder="Type Here">
<input class="title_input" placeholder="Type Here" formControlName="title"
[ngClass]="{'input_error': !rateForm.controls['title'].valid && (rateForm.controls['title'].dirty || rateForm.controls['title'].touched || rateFormClick),
'input_success': rateForm.controls['title'].valid}" (click)="rateFormClick = false">
<div class="s_error" *ngIf="(!rateForm.controls['title'].valid && rateForm.controls['title'].touched) || (!rateForm.controls['title'].valid && rateFormClick)">
<div class="s_validation" *ngIf="rateForm.controls['title'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
</div>
<hr>
<div class="">
<p>Write a Review</p>
<input class="title_input" placeholder="Type Here">
<input class="title_input" placeholder="Type Here" formControlName="description"
[ngClass]="{'input_error': !rateForm.controls['description'].valid && (rateForm.controls['description'].dirty || rateForm.controls['description'].touched || rateFormClick),
'input_success': rateForm.controls['description'].valid}" (click)="rateFormClick = false">
<div class="s_error" *ngIf="(!rateForm.controls['description'].valid && rateForm.controls['description'].touched) || (!rateForm.controls['description'].valid && rateFormClick)">
<div class="s_validation" *ngIf="rateForm.controls['description'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
<hr>
<button class="submit_btn">Submit</button>
</div>
<div *ngIf="rateFormResponse" class="s_alert" [ngClass]="(rateFormResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
<strong>{{rateFormResponse.message}}<br></strong>
</div>
<hr>
<button class="submit_btn" (click)="rateFormClick = true">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- END-RATTING-DIV -->
\ No newline at end of file
<!-- END-RATTING-DIV -->
\ No newline at end of file
src/app/purchase/track/track.component.ts
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery';
import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
import { ValidationService } from '../../provider/validation.service';
import { NgxCarousel } from 'ngx-carousel';
import { ImageStorage } from '../../../environments/server.config';
import { Options } from 'ng5-slider';
import * as $ from 'jquery';
interface RangeSliderModel {
minValue: number;
......@@ -23,37 +25,50 @@ export class TrackComponent implements OnInit {
count:any;
loginDetails:any;
loader:boolean;
loader_review:boolean;
imageServer: string;
orderDetails:any;
userReviewed:boolean;
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
verticalSlider2:any;
rateFormClick:boolean;
rateFormResponse:any;
@ViewChild('ratingModal') ratingModal: ElementRef;
public carouselTile: NgxCarousel;
constructor(private router : Router,
private route : ActivatedRoute,
public errorMsg : ValidationService,
public webService : WebService){
this.count = 0;
this.loader =true;
this.loader = true;
this.userReviewed = true;
this.loader_review = false;
this.imageServer = ImageStorage;
this.rateFormClick = false;
}
rateForm;
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
let payStatus = params['status'];
this.ref_id = params['ref'];
if(payStatus && payStatus !=''){
if(payStatus == 'success'){
if(this.ref_id > 0){
this.getOrderDetail();
}
}
if(!this.ref_id || this.ref_id < 0){
this.goToPage('purchaseHome','');
}
});
this.designModule();
this.getOrderDetail();
this.checkUserLogin();
this.unsetProdDetails();
this.rateForm = new FormGroup({
rating: new FormControl('5'),
title: new FormControl('',[Validators.required]),
description: new FormControl('',[Validators.required])
});
}
checkUserLogin(){
......@@ -67,10 +82,42 @@ export class TrackComponent implements OnInit {
this.webService.removeLocalItem('productDetails');
}
getOrderDetail(){
if(this.ref_id <= 0){
this.goToPage('purchaseHome','');
rateFormSubmit(data){
if(this.rateForm.invalid){
return false;
}
data.product_id = this.orderDetails.product_id;
data.customer_id = this.loginDetails.customer_id;
this.loader_review = true;
const This = this;
this.webService.post_data('rateProduct',data).subscribe(response => {
if(response.status == 'success'){
this.rateFormResponse = response;
this.userReviewed = true;
setTimeout( function() {
This.rateFormResponse = false;
This.ratingModal.nativeElement.click();
}, 3000);
}else{
response.status = 'error';
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.rateFormResponse = response;
setTimeout( function() {
This.rateFormResponse = false;
}, 3000);
}
this.loader_review = false;
},error => {
this.rateFormResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
setTimeout( function() {
This.rateFormResponse = false;
}, 3000);
this.loader_review = false;
});
}
getOrderDetail(){
this.loader = true;
this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
if(response.status == 'success'){
......@@ -78,6 +125,8 @@ export class TrackComponent implements OnInit {
let imageArr: any[] = new Array();
const thisObj = this;
this.orderDetails = response.data;
this.userReviewed = (this.orderDetails.review_id <= 0 && (this.orderDetails.odr_status == '5' || this.orderDetails.odr_status == '6' || this.orderDetails.odr_status == '7'))?false:true;
console.log(this.userReviewed);
if(this.orderDetails.images.length > 0){
thisObj.orderDetails.images.forEach(function (data) {
image = thisObj.imageServer + data.image;
......@@ -124,7 +173,6 @@ export class TrackComponent implements OnInit {
carouselTileLoad(){ return ''; }
add(){this.count = this.count + 1;}
minus(){ this.count = this.count - 1; if(this.count < 0){ this.count = 0; }}
// verticalSlider2: RangeSliderModel = { minValue: this.verticalMinValue, maxValue: this.verticalMaxValue, options: { floor: 0, ceil: this.verticalMaxValue, vertical: true } };
designModule(){
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment