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