Commit e701d9b7 authored by prumde's avatar prumde

Removed ecm-category, ecm-trend, ecm-view and ecm-item-caption

Add following items :
ecm-model
ecm-product-details
ecm-template -> ecm-product-details
ecm-outing  >> ecm-template
ecm-handicraft  >> ecm-template
ecm-food  >> ecm-template
ecm-celebration  >> ecm-template
ecm-cart -> ecm-view
ecm-category  -> ecm-view
ecm-subcategory  -> ecm-view
ecm-product  -> ecm-view
ecm-recent-view  -> ecm-view
ecm-trend-product  -> ecm-view


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174375 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 72d611b6
......@@ -150,3 +150,134 @@ p {
top: 5px;
line-height: 12px;
}
/* ECM Reviews */
.circle {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 100%;
font-size: 35px;
color: white;
text-align: center;
background: mediumturquoise;
position: absolute;
}
.ecm-result-header{
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
}
.ecm-select {
float: right;
padding-left: 25px;
font-size: 12px;
}
.ecm-options {
line-height: 32px;
height: 35px;
font-size: 14px;
padding: 0px 10px 0px 10px;
}
.ecm-result-info{
font-size: 18px
}
.ecm-review-tab {
padding: 20px;
}
.ecm-product-ratings{
color: rgb(500, 150, 50);
font-size: large;
display: block;
}
.ecm-null-ratings {
color: lightgray;
}
.review-section {
margin-left: 115px;
padding-right: 35px;
}
.ecm-review-title {
display: block;
font-size: 18px;
}
.ecm-user-comments {
font-size: 14px;
color: #444;
padding-top: 15px;
display: block;
text-align: justify;
}
.ecm-customer-details {
display: block;
color: #444;
font-size: 12px;
padding-top: 5px;
}
.user-img {
border-radius: 50%;
height: 50px;
width: 50px;
background: lightgrey;
}
.ecm-img {
padding-left: 35px;
position: absolute;
}
.ecm-reviews {
position: relative;
padding-top: 15px;
padding-bottom: 30px;
}
.ecm-result-count {
font-size: 10px;
padding-left: 15px;
color: #444;
}
.mat-select-trigger {
height: 20px !important;
}
.ecm-select-options {
display: inline-flex;
float: right;
}
.ecm-thumbsup-icon {
padding-top: 20px;
padding-left: 10px;
height: 15px;
width: 15px;
opacity: 0.4;
}
.likes-count {
font-size: 15px;
color: #444;
opacity: 0.8;
padding-left: 5px;
padding-right: 15px;
}
.ecm-verified-icon {
padding: 0px 3px 0px 3px;
vertical-align: sub;
height: 15px;
width: 15px;
}
.ecm-seperator {
padding-left: 5px;
font-size: 20px;
}
\ No newline at end of file
......@@ -6,7 +6,6 @@
<span class="ecm-card-info-title">{{card.info_title}}</span>
<span class="ecm-card-info-subhead">{{card.info_subhead}}</span>
</div>
<a *ngIf="card.info_link" class="ecm-card-action"[routerLink]="['link', card.info_title]">Open</a>
<a md-raised-button *ngIf="!card.info_link" class="ecm-card-action">Open</a>
<a *ngIf="!card.info_link" class="ecm-card-action top share"></a>
</div>
......@@ -21,9 +20,8 @@
<span class="ecm-card-info-title">{{category.shDescr}}</span>
<span class="ecm-card-info-subhead">{{category.descr}}</span>
</div>
<a *ngIf="category.catLink" class="ecm-card-action" [routerLink]="['link', category.shDescr]">Open</a>
<a md-raised-button *ngIf="!category.catLink" class="ecm-card-action" (click)="storeCategory()">View</a>
<a *ngIf="!category.catLink" class="ecm-card-action top share" [routerLink]="[ '/share','SUB_CATEGORY',category.catCode]"></a>
<a *ngIf="!category.catLink" class="ecm-card-action top share" [routerLink]="[ '/share',category.catCode]"></a>
</div>
</div>
......@@ -36,13 +34,12 @@
<span class="ecm-card-info-title">{{subcategory.shDescr}}</span>
<span class="ecm-card-info-subhead">{{subcategory.descr}}</span>
</div>
<a *ngIf="subcategory.catLink" class="ecm-card-action" [routerLink]="['link', subcategory.shDescr]">Open</a>
<a md-raised-button *ngIf="!subcategory.catLink" class="ecm-card-action" (click)="storeSubCategory()">View</a>
<a *ngIf="!subcategory.catLink" class="ecm-card-action top share" [routerLink]="[ '/share','ITEMS',subcategory.scatCode]"></a>
<a *ngIf="!subcategory.catLink" class="ecm-card-action top share" [routerLink]="[ '/share',subcategory.scatCode]"></a>
</div>
</div>
<div *ngIf="itemData" class="ecm-card" id="ecm-item" (click)="openItem()">
<div *ngIf="itemData" class="ecm-card" id="ecm-item" (click)="storeItem()">
<ecm-image [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" ></ecm-image>
<div class="ecm-card-footer" id="ecm-item-footer">
<div class="ecm-card-info" id="ecm-item-info">
......@@ -56,3 +53,22 @@
<div class="ecm-card-price"><span class="ecm-rupee"></span>{{itemData.costRate}}</div>
</div>
</div>
<div *ngIf="reviewsData" class="ecm-reviews">
<div class="ecm-img"> <span class="circle"> {{reviewsData.reviewBy.charAt(0).toUpperCase()}} </span> </div>
<div class="review-section">
<span class="ecm-product-ratings">
<span *ngFor="let a of createRatings(reviewsData.productRating);" >
&#x2605;
</span>
<span *ngFor="let a of createRatings(5 - reviewsData.productRating);" class="ecm-null-ratings">
&#x2605;
</span>
</span>
<span class="ecm-review-title">{{reviewsData.productRemarks}}</span>
<span class="ecm-customer-details"> By {{reviewsData.reviewBy}} on {{reviewsData.reviewDate | date :'longDate'}} <span class="ecm-seperator">|</span> <md-icon class="ecm-verified-icon" svgIcon="verified"></md-icon> Verified Customer</span>
<span class="ecm-user-comments">{{reviewsData.productComments}}</span>
<md-icon class="ecm-thumbsup-icon" svgIcon="thumbs-up"></md-icon><span class="likes-count"> {{reviewsData.productUsfulCnt}} </span>
<md-icon class="ecm-thumbsup-icon" svgIcon="thumbs-down"></md-icon><span class="likes-count"> {{reviewsData.productNotUsfulCnt}} </span>
</div>
</div>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ECMCard } from './card-model';
import { Category, SubCategory, Item } from '../ecm-category/category-model';
import { Router } from '@angular/router';
import {DomSanitizer} from '@angular/platform-browser';
import {MdIconRegistry} from '@angular/material';
import { ECMCard } from '../ecm-model/card-model';
import { Category } from '../ecm-model/category-model';
import { SubCategory } from '../ecm-model/subcategory-model';
import { Item } from '../ecm-model/product-model';
import { Reviews } from '../ecm-model/product-review.model';
@Component({
selector: 'ecm-card',
templateUrl: './ecm-card.component.html',
styleUrls: ['./ecm-card.component.css']
})
export class ECMCardComponent implements OnInit {
@Input() card: ECMCard;
@Input() category: Category;
@Input() subcategory: SubCategory;
@Input() itemData: Item;
@Input() extraParam: any;
@Input() reviewsData: Reviews;
@Output() storeData = new EventEmitter();
constructor(private router: Router) { }
constructor(private router: Router, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'thumbs-up',
sanitizer.bypassSecurityTrustResourceUrl('/assets/images/thumbup-icon.svg'));
iconRegistry.addSvgIcon(
'thumbs-down',
sanitizer.bypassSecurityTrustResourceUrl('/assets/images/thumbdown-icon.svg'));
iconRegistry.addSvgIcon(
'verified',
sanitizer.bypassSecurityTrustResourceUrl('/assets/images/verified-icon.svg'));
}
ngOnInit() {
}
openItem() {
alert(this.itemData.itemCode);
storeItem(){
// this.recentviewService.storeRecentViewItem(this.itemData.itemCode);
this.storeData.emit(this.itemData);
this.router.navigate(['/detail',this.itemData.itemCode]);
}
createRatings(ratings){
......@@ -36,11 +60,11 @@ export class ECMCardComponent implements OnInit {
storeCategory(){
this.storeData.emit(this.category);
this.router.navigate([ '/list','SUB_CATEGORY',this.category.catCode]);
this.router.navigate([ '/categories', this.category.catCode]);
}
storeSubCategory(){
this.storeData.emit(this.subcategory);
this.router.navigate([ '/list', 'ITEMS',this.subcategory.scatCode]);
this.router.navigate([ '/products', this.subcategory.scatCode]);
}
}
import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, NavigationEnd, Params, PRIMARY_OUTLET } from "@angular/router";
import "rxjs/add/operator/filter";
interface IBreadcrumb {
label: string;
params: Params;
url: string;
}
@Component({
selector: "breadcrumb",
template: `
<style>
.breadcrumbs li:not(:last-child)::after {
color: #cacaca;
content: "/";
margin: 0 0.75rem;
position: relative;
top: 1px;
opacity: 1;
}
</style>
<ul class="breadcrumbs">
<li *ngFor="let breadcrumb of breadcrumbs">
<a [routerLink]="[breadcrumb.url, breadcrumb.params]">{{breadcrumb.label}}</a>
</li>
</ul>
`
})
export class ECMBreadcrumbComponent implements OnInit {
public breadcrumbs: IBreadcrumb[];
/**
* @class DetailComponent
* @constructor
*/
constructor(
private activatedRoute: ActivatedRoute,
private router: Router
) {
this.breadcrumbs = [];
}
/**
* Let's go!
*
* @class DetailComponent
* @method ngOnInit
*/
ngOnInit() {
const ROUTE_DATA_BREADCRUMB: string = "breadcrumb";
//subscribe to the NavigationEnd event
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
//set breadcrumbs
console.log( "ECMBreadcrumbComponent > this.activatedRoute> " + this.activatedRoute );
this.breadcrumbs = this.getBreadcrumbs(this.activatedRoute);
console.log( "ECMBreadcrumbComponent > breadcrumbs> " + this.breadcrumbs );
});
}
/**
* Returns array of IBreadcrumb objects that represent the breadcrumb
*
* @class DetailComponent
* @method getBreadcrumbs
* @param {ActivateRoute} route
* @param {string} url
* @param {IBreadcrumb[]} breadcrumbs
*/
private getBreadcrumbs(route: ActivatedRoute): IBreadcrumb[] {
const ROUTE_DATA_BREADCRUMB: string = "breadcrumb";
let breadcrumbs: IBreadcrumb[] = [];
console.log( "ECMBreadcrumbComponent > route> " + route );
//iterate over each children
do
{
console.log( "ECMBreadcrumbComponent route.parent >>>"+route.parent+">>route>" + route);
//get the route's URL segment
let routeURL: string = route.snapshot.url.map(segment => segment.path).join("/");
//add breadcrumb
let breadcrumb: IBreadcrumb = {
label: route.snapshot.data[ROUTE_DATA_BREADCRUMB],
params: route.snapshot.params,
url: routeURL
};
console.log( "ECMBreadcrumbComponent >breadcrumb> " + breadcrumb );
breadcrumbs.push(breadcrumb);
route = route.parent;
}while ( route.parent );
return breadcrumbs;
}
}
\ No newline at end of file
/**
* Card Model
*/
export class ECMCard {
constructor(
public img: string,
public info_img: string,
public info_title: string,
public info_subhead: string,
public info_link: any) {
}
}
/**
* Category Model
* {catCode, curRank, descr, shDescr, ecmTemplate}
*/
export class Category {
constructor(
public catCode: string = '',
public descr: string = '',
public shDescr: string = '',
public curRank: string = '',
public catLink: string = '',
public ecmTemplate: string = '') {
console.log('comp this.ecmTemplate[' + this.ecmTemplate + ']');
}
}
\ No newline at end of file
/**
* ItemDetail Model
* {catCode, curRank, descr, shDescr, ecmTemplate}
*/
export class ItemDetail {
public itemCategory: any;
public itemSubCategory: any;
public itemCode: string = '';
public itemShDescr: string = '';
public itemDescr: string = '';
public itemOverview: string = '';
public itemCostRate: number;
public itemDiscount: number;
public itemDiscountedRate: number;
public itemNumOfReviews: number;
public itemAvgRating: number;
public itemRatings: any; //any = [{ 1 : 10 },{ 2 : 15 },{ 3 : 30 },{ 4 : 25 },{ 5 : 50 }];
public itemDetailData: any;
/*
any = { "itemPackages": [{"package": "Experienced Instructor"},{"package":"Meal(option)"}, {"package":"Large group concession"}],
"itemExtraInfo" : "Discount valid till 31st July 2017 ",
"itemVenue" : "Mumbai"
};
*/
// public getItemDetailData() : any {
// console.log( 'this.itemDetailData >> ' + this.itemDetailData );
// return JSON.parse(this.itemDetailData)
// }
// public getItemRatings() : any {
// console.log( 'this.itemRatings >> ' + this.itemRatings );
// return JSON.parse(this.itemRatings)
// }
}
/**
* Item Model
* {catCode, curRank, descr, shDescr, ecmTemplate}
*/
export class Item {
public itemCode: string = '';
public descr: string = '';
public costRate: number;
public rating: number;
public scat_sh_descr: string = '';
public scat_descr: string = '';
public cat_sh_descr: string = '';
public cat_descr: string = '';
}
export class Reviews {
constructor(
public item_code: string = '',
public productComments: string = '',
public productNotUsfulCnt: number,
public productRating: number,
public productRemarks: string = '',
public productUsfulCnt: number,
public reviewBy: string = '',
public reviewDate: string = '',
public site_code: string = ''
) { }
}
/**
* SubCategory Model
* {catCode, scatCode, curRank, descr, shDescr, ecmTemplate}
*/
export class SubCategory {
constructor(
public scatCode: string = '',
public catCode: string = '',
public descr: string = '',
public shDescr: string = '',
public curRank: string = '',
public catLink: string = '',
public ecmTemplate: string = '') {
console.log('comp this.ecmTemplate[' + this.ecmTemplate + ']');
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Store } from '@ngrx/store';
import { ItemDetail } from '../ecm-model/product-detail-model';
@Injectable()
export class EcmProductDetailService {
private SERVICE_URL = '/ecm/service/category/detail/'; // URL to web service
constructor (private http: Http,) {}
getItemDetail (itemCode : string): Observable<ItemDetail> {
let itemsUrl = this.SERVICE_URL + itemCode ;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.get(itemsUrl, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let respJson = res.json();
for( let key of Object.keys( respJson ) )
{
console.log( "getItemDetail itemDetail ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "getItemDetail itemDetail try : " + respJson[key] );
}
catch(e)
{
respJson[key] = data;
console.log( "getItemDetail itemDetail catch : " + respJson[key] );
}
}
console.log('extractData[' + JSON.stringify(respJson) + ']');
return respJson || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
}
.md-tab-link {
color: black;
opacity: 1;
}
.md-tab-link:focus {
color: mediumvioletred;
}
.ecm-nav {
margin-left: 35px;
margin-top: 45px;
}
* {
font-family: "Roboto-Regular", sans-serif !important;
}
.ecm-tab {
margin-top: 30px;
margin-right: 110px;
padding-left: 15px;
}
.row {
max-width: 72rem;
min-height: 600px;
}
/* Imprtant Tab*/
.ecm-terms-header {
padding-top: 20px;
padding-left: 35px;
}
.ecm-terms-points {
color: #444;
font-size: 12px;
padding-left: 20px;
padding-top: 10px;
}
li {
padding-bottom: 10px;
}
.ecm-important {
padding-left: 35px;
}
ecm-template{
position: relative;
display: block;
margin: 0;
padding: 0;
top: 60px;
min-height: 400px;
}
\ No newline at end of file
<ecm-header [isFixedHeader]=false> </ecm-header>
<ecm-breadcrumbs *ngIf="itemDetail" [pageName]="'DETAIL'" [itemDetail]='itemDetail'></ecm-breadcrumbs>
<ecm-template *ngIf="ecmTemplate" [ecmTemplate] = "ecmTemplate" (scrollToReviews) = "scrollToReviews();" ></ecm-template>
<ecm-recent-view #recentView> </ecm-recent-view>
<div *ngIf="itemCode" #reviewsAndRating class="row" >
<md-tab-group class="ecm-tab medium-12 col-sm-9">
<md-tab label="Reviews">
<ecm-product-review [itemCode] = "itemCode"></ecm-product-review>
</md-tab>
<md-tab label="Important">
<div class="ecm-important">
<div class="ecm-terms-header"> Terms & Conditions: </div>
<div class="ecm-terms-points">
<ul>
<li>Please carry the printout of this E-Ticket along with Photo ID proof (Drivers Licence / PAN Card / Passport etc) and exchange it for a valid ticket(s) at the parks.</li>
<li>In case of Credit / Debit Card payments, it is also MANDATORY to carry the same card from which booking was made in original along with a photo-copy.Tickets once booked cannot be exchanged, cancelled or refunded</li>
<li>Sr. Citizens need to carry valid age proof photo ID card to avail the benefit</li>
<li>All bookings and confirmations are subject to availability.</li>
<li>There will be no refund on cancellations. Re-scheduling subject to prior 48 hours intimation.</li>
<li>No two promotions/ offers can be clubbed or combined.</li>
<li>No refunds on purchased ticket is possible, even in case of any rescheduling.</li>
<li>Prices are inclusive of entry ticket to EsselWorld OR Water Kingdom (single entry visit).</li>
<li>Prices are inclusive of transfer from single pick-up point to our parks and back along with driver allowance, toll & car park charges wherever applicable basis package / ticket type bought.</li>
<li>Prices are standard for Child, Adult or Sr. Citizens.</li>
<li>Rates & terms are subject to change, without prior notice.</li>
</ul>
</div>
<div class="ecm-terms-header"> Instructions </div>
<div class="ecm-terms-points">
<ul>
<li>Show Order ID - Email Confirmation Printout to the ticket counter at the entrance to avail physical tickets/ wristbands/passes.</li>
</ul>
</div>
</div>
</md-tab>
</md-tab-group>
</div>
\ No newline at end of file
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { EcmProductDetailService } from './ecm-product-detail.service';
import { ScrollService } from '../scroll.service';
import { ItemDetail } from '../ecm-model/product-detail-model';
import { EcmTemplateItem } from './ecm-template/ecm-template.component';
import { EcmOutingComponent } from './ecm-template/ecm-outing.component';
import { EcmFoodComponent } from './ecm-template/ecm-food.component';
import { EcmCelebrationComponent } from './ecm-template/ecm-celebration.component';
import { EcmHandicraftComponent } from './ecm-template/ecm-handicraft.component';
import { EcmRecentViewComponent } from '../ecm-view/ecm-recent-view/ecm-recent-view.component';
export const ECM_TEMPLATES: any = {
'ecm-outing' : new EcmTemplateItem(EcmOutingComponent),
'ecm-food' : new EcmTemplateItem(EcmFoodComponent),
'ecm-celebration' : new EcmTemplateItem(EcmCelebrationComponent),
'ecm-handicraft' : new EcmTemplateItem(EcmHandicraftComponent)
};
@Component({
selector: 'ecm-product-details',
templateUrl: './ecm-product-details.component.html',
styleUrls: ['./ecm-product-details.component.css'],
providers: [EcmProductDetailService]
})
export class EcmProductDetailsComponent implements OnInit,OnDestroy {
@ViewChild('recentView') recentView: EcmRecentViewComponent;
@ViewChild('reviewsAndRating') reviewsAndRating: ElementRef;
itemCode:string;
ecmTemplate : EcmTemplateItem;
itemDetail: ItemDetail;
constructor(private route: ActivatedRoute, private router:Router, public subcategoryService: EcmProductDetailService) { }
ngOnInit() {
console.log(this.recentView +'Product Detail Onit');
this.recentView.ngOnInit();
this.route.params.subscribe( params => {
//let id: number = +params['id']; // (+) converts string 'id' to a number
// In a real app: dispatch action to load the details here.
this.itemCode = params['itemCode'];
console.log( 'ngOnInit itemCode[' + this.itemCode + ']' );
window.scrollTo(0,0);
this.getItemDetail(this.itemCode);
});
}
getItemDetail( itemCode: string ) {
this.subcategoryService.getItemDetail( itemCode ).subscribe(
itemDetail => {
console.log( 'comp itemCode[' + itemCode + '] itemDetail[' + itemDetail + '] \n this.itemDetail[' + JSON.stringify( itemDetail ) + ']' );
this.itemDetail = itemDetail;
let ecmTemplateName = itemDetail.itemCategory.ecmTemplate;
console.log( "getItemDetail ecmTemplateName: " + ecmTemplateName )
this.ecmTemplate = ECM_TEMPLATES[ecmTemplateName];
if( this.ecmTemplate )
{
this.ecmTemplate.setItemDetail(itemDetail);
}
else
{
alert( "Sorry, the " + ecmTemplateName + " is not in the system yet!" );
}
console.log( 'comp ecmTemplate[' + this.ecmTemplate + ']' );
},
);
}
ngOnDestroy() {
this.recentView.doDestroy(this.itemCode);
}
scrollToReviews() {
let offsetTop = this.reviewsAndRating.nativeElement.offsetTop;
console.log(' scrollToReviews:: offsetTop >>' + offsetTop);
window.scrollTo(0, offsetTop - 80);
}
}
.ecm-result-header{
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
}
.ecm-select {
float: right;
padding-left: 25px;
font-size: 12px;
}
.ecm-options {
line-height: 32px;
height: 35px;
font-size: 14px;
padding: 0px 10px 0px 10px;
}
.ecm-result-info{
font-size: 18px
}
.ecm-review-tab {
padding: 20px 20px 20px 0px;
min-height: 400px;
}
.ecm-ratings{
color: rgb(500, 150, 50);
font-size: large;
display: block;
}
.ecm-null-ratings {
color: lightgray;
}
.review-section {
margin-left: 115px;
padding-right: 35px;
}
.ecm-review-title {
display: block;
font-size: 18px;
}
.ecm-user-comments {
font-size: 14px;
color: #444;
padding-top: 15px;
display: block;
text-align: justify;
}
.ecm-customer-details {
display: block;
color: #444;
font-size: 12px;
padding-top: 5px;
}
.user-img {
border-radius: 50%;
height: 50px;
width: 50px;
background: lightgrey;
}
.ecm-img {
padding-left: 35px;
position: absolute;
}
.ecm-reviews {
position: relative;
padding-top: 10px;
padding-bottom: 30px;
}
.ecm-result-count {
font-size: 10px;
padding-left: 15px;
color: #444;
}
.mat-select-trigger {
height: 20px !important;
}
.ecm-select-options {
display: inline-flex;
float: right;
}
.ecm-pagination-section {
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
width:100%;
padding-left: 15px;
padding-bottom: 50px;
overflow: hidden;
text-align: center;
}
.arrow_logo{
height: 30px;
}
.ecm-page {
width: 25px;
height: 25px;
font-size: 15px;
line-height: 15px;
padding: 5px;
margin: 5px;
text-align: center;
border-radius: 100%;
color: mediumvioletred;
cursor: pointer;
position: relative;
display: inline-block;
}
.ecm-page:HOVER, .active {
background-color: mediumvioletred;
color: #fff;
}
.next-button, .prev-button{
color: mediumvioletred;
cursor: pointer;
padding: 5px;
border-radius: 10%;
margin-left: 30px;
margin-right: 30px;
}
.disabled {
cursor: not-allowed;
}
.disabled:hover {
color: mediumvioletred ;
background-color: white;
}
.ecm-null-data-descr {
text-align: center;
padding-top: 50px;
}
\ No newline at end of file
<div class="ecm-review-tab">
<div *ngIf="reviews && numFound!=0" class="ecm-result-count"> 1-4 of {{reviews.length}} Reviews </div>
<div class="ecm-result-header">
<span class="ecm-result-info">Customer Reviews</span>
<div class="ecm-select-options">
<md-select class="ecm-select" placeholder="Filter By" [(ngModel)]="filterBy" (change)="filter()" name="filter">
<md-option class="ecm-options" *ngFor="let type of filterTypes" [value]="type.value">
{{type.viewValue}}
</md-option>
</md-select>
<md-select class="ecm-select" placeholder="Sort By" [(ngModel)]="sortBy" (change)="sort()" name="sort">
<md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
{{type.viewValue}}
</md-option>
</md-select>
</div>
</div>
<div *ngIf="numFound==0" class="ecm-null-data-descr"> No Reviews Found </div>
<div *ngIf="reviews && numFound!=0" class="reviews-content">
<ecm-card *ngFor="let review of reviews" [reviewsData]="review"> </ecm-card>
</div>
<div *ngIf="reviews && numFound!=0" class="ecm-pagination-section">
<span class="prev-button" [ngClass]="{disabled:currentPage === 1}" (click)="prevPage()"><img class="arrow_logo" src="v_left_arrow_38_38.png"></span>
<!-- <span class="prev-button" (click)="prevPage()" [ngClass]="{disabled:currentPage === 1}"> Prev </span> -->
<span *ngFor="let a of createPages(); let i = index" class="ecm-page" [ngClass]="{active:(i+1) === currentPage}" (click)="goToPage(i+1)">
<span>{{i+1}}</span>
</span>
<span class="next-button" [ngClass]="{disabled:currentPage === pageCount}" (click)="nextPage()"><img class="arrow_logo" src="v_right_arrow_38_38.png"></span>
<!-- <span class="next-button" [ngClass]="{disabled:currentPage === reviews.length}" (click)="nextPage()"> Next </span> -->
</div>
</div>
\ No newline at end of file
import { Component, OnInit, Input } from '@angular/core';
import { Reviews } from '../ecm-model/product-review.model';
import { EcmProductReviewService } from './ecm-product-review.service';
@Component( {
selector: 'ecm-product-review',
templateUrl: './ecm-product-review.component.html',
styleUrls: ['./ecm-product-review.component.css']
})
export class EcmProductReviewComponent implements OnInit {
@Input() itemCode;
solrUrl = '/ecm/service/solr/local2do/';
reviews: Reviews[];
sortBy: string = "productRating desc";
filterBy: string = "item_code:[* TO *]";
pageCount;
currentPage: number = 1;
start = 0;
searchResponse;
numFound;
sortTypes = [
{ value: 'reviewDate desc', viewValue: 'Most Recent' },
{ value: 'productRating desc', viewValue: 'Positive' },
{ value: 'productRating asc', viewValue: 'Negative' },
{ value: 'productUsfulCnt desc', viewValue: 'Most Helpful' }
];
filterTypes = [
{ value: 'productRating:[5 TO 5]', viewValue: '5 Stars' },
{ value: 'productRating:[4 TO 4]', viewValue: '4 Stars' },
{ value: 'productRating:[3 TO 3]', viewValue: '3 Stars' },
{ value: 'productRating:[2 TO 2]', viewValue: '2 Stars' },
{ value: 'productRating:[1 TO 1]', viewValue: '1 Star' }
];
constructor( private productreviewService: EcmProductReviewService ) { }
ngOnInit() {
this.fetchReviews();
}
fetchReviews() {
var solrUrl = this.solrUrl + this.itemCode + '/json/' + this.start + '/' + this.sortBy + '/' + this.filterBy;
this.productreviewService.getReviews( solrUrl )
.subscribe( data => {
this.searchResponse = data;
if ( data.response ) {
this.reviews = data.response.docs;
this.numFound = data.response.numFound;
this.pageCount = Math.ceil(( this.numFound / 10 ) );
}
console.log( this.searchResponse );
});
}
sort() {
this.fetchReviews();
}
filter() {
this.fetchReviews();
}
createPages() {
var pages: number[] = [];
for ( var i = 1; i <= this.pageCount; i++ ) {
pages.push( i );
}
return pages;
}
nextPage() {
if ( this.currentPage < this.pageCount ) {
window.scrollTo( 0, 0 );
this.start += 10;
this.currentPage++;
this.fetchReviews();
}
}
prevPage() {
if ( this.currentPage >= 2 ) {
window.scrollTo( 0, 0 );
this.start += 10;
this.currentPage--;
this.fetchReviews();
}
}
goToPage( page ) {
if ( !( this.currentPage == page ) ) {
window.scrollTo( 0, 0 );
this.currentPage = page;
this.start = ( ( page + 1 ) * 10 ) - 10;
this.fetchReviews();
}
}
onLastPage() {
if ( this.currentPage == this.pageCount )
return true;
else
return false;
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
@Injectable()
export class EcmProductReviewService {
solrUrl = '/ecm/service/solr/local2do/';
constructor(private http: Http) { }
getReviews(solrUrl) {
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( solrUrl, options )
.map( this.extractData )
.catch( this.handleError );
}
private extractData(res: Response) {
let body = res.json();
console.log('extractData[' + JSON.stringify(body) + ']');
return body || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
}
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { EcmTemplateInterface } from './ecm-template.component';
import { ItemDetail } from '../../ecm-model/product-detail-model';
@Component({
selector: 'ecm-celebration',
templateUrl: './ecm-celebration.component.html',
styleUrls: ['./ecm-celebration.component.css']
})
export class EcmCelebrationComponent implements OnInit, EcmTemplateInterface {
@Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter();
constructor() { }
ngOnInit() {
}
}
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { EcmTemplateInterface } from './ecm-template.component';
import { ItemDetail } from '../../ecm-model/product-detail-model';
@Component({
selector: 'ecm-food',
templateUrl: './ecm-food.component.html',
styleUrls: ['./ecm-food.component.css']
})
export class EcmFoodComponent implements OnInit, EcmTemplateInterface {
@Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter();
constructor() { }
ngOnInit() {
}
}
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { EcmTemplateInterface } from './ecm-template.component';
import { ItemDetail } from '../../ecm-model/product-detail-model';
@Component({
selector: 'ecm-handicraft',
templateUrl: './ecm-handicraft.component.html',
styleUrls: ['./ecm-handicraft.component.css']
})
export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface{
@Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter();
constructor() { }
ngOnInit() {
}
}
.row
{
max-width: 72rem;
}
.row-image
{
margin-left: inherit;
padding-left: 35px;
}
.thumbnail
{
height: 333px;
width: 352px;
border-radius: 9px;
box-shadow: none;
}
.image {
padding-top: 70px;
}
.stars
{
color: coral;
font-size: 18px;
}
.button
{
border: 9px solid transparent;
margin-right: 15px;
}
.ratings
{
margin-left: 100px;
margin-top: -35px;
font-size: 13px;
padding: 8px;
color: darkgrey;
font-weight: bold;
}
.off
{
margin-left: 49px;
margin-top: -35px;
font-size: 14px;
padding: 8px;
color:#1f881f;
font-weight: 700;
}
.adult
{
padding-right: 275px;
padding-bottom: 20px;
padding-top: 21px;
}
.child
{
margin-left: 200px;
margin-top: -64px;
padding-bottom: 48px;
}
.subheader
{
margin-top: -17px;
margin-bottom: -31px;
margin-top: -31px;
margin-left: 10px;
}
.counterButton
{
width: 13%;
margin-left: 215px;
margin-top: -132px;
text-align: center
}
.totalPrice
{
margin-left: 195px;
margin-bottom: -25px;
}
.inc
{
margin-left: 300px;
margin-top: -126px;
font-size: x-large;
cursor: pointer;
color: mediumvioletred;
}
.dec
{
margin-left: 158px;
margin-top: -129px;
font-size: x-large;
cursor: pointer;
color: mediumvioletred;
}
.overview
{
font-weight:bold;
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
}
.savelater
{
padding-left: 30px;
padding-right: 30px;
background-color: ghostwhite;
color: mediumvioletred;
border-radius: 3px;
}
.booknow
{
background-color: mediumvioletred;
padding-left: 42px;
padding-right: 42px;
border-radius: 4px;
}
.discountRate
{
font-size: x-large;
}
.itemCategory
{
font-size: small;
color: mediumvioletred;
font-weight: bold;
padding-bottom: 25px;
display:block;
}
.itemShDescr
{
margin: 0;
font-weight: bold;
font-size: large;
display:block;
}
.itemDescr
{
margin-bottom: -5px;
color: rgba(68, 68, 68, 0.6);
display:block;
}
.itemAvgRating
{
margin-left: -40px;
padding-top: 4px;
color: rgba(68, 68, 68, 0.6);
}
.itemNumOfReviews
{
margin-left: 35px;
margin-top: -53px;
color:rgba(68, 68, 68, 0.6);
}
.Onwards
{
padding-left: 71px;
margin-top: -25px;
color: #444;
}
.itemCostRate
{
margin-top: -17px;
color: #444;
}
.itemExtraInfo
{
font-family:serif;
font-size: small;
font-size: small;
margin-top: -14px;
color:rgba(255, 0, 0, 0.62);
}
.total
{
margin-left: 217px;
margin-bottom: -25px;
margin-top: -6px;
}
.Height
{
color: #444;
margin-top: -31px;
padding-bottom: 66px;
}
.package
{
font-weight: 100;
}
.itemVenue
{
font-weight: 100;
}
/* New */
.ecm-other-title {
font-size: 18px;
font-weight: 500;
display: block;
padding-bottom: 15px;
}
.ecm-other-detail {
font-weight: 100;
font-size: 14px;
color: #444;
text-align: justify;
}
.ecm-other-details {
padding-top: 30px;
}
.link-reviews{
}
<!--
<div *ngIf="itemDetail">
<div class="row">
<span class="medium-6 columns medium-5 columns image">
<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" ></ecm-image>
</span>
<div class="medium-6 medium-5 columns head" style="margin-top: 70px;">
<span style="display: block; color: mediumvioletred; font-size: 18px;" >{{itemDetail.itemCategory.shDescr}}</span>
<span style="display: block; padding-top: 15px; font-size: 20px; font-weight:bold;">{{itemDetail.itemShDescr}}</span>
<span style="display: block; font-weight: 100; font-size: 16px;">{{itemDetail.itemDescr}}</span>
<span *ngFor="let a of createRatings(itemDetail.itemAvgRating)" style="color: rgb(500, 150, 50); font-size: 20px;">
&#x2605;
</span>
<span style="color: gray; padding-left: 10px; font-size: 18px;">{{itemDetail.itemAvgRating}} Ratings</span>
<span style="color: gray; font-size: 18px;">| {{itemDetail.itemNumOfReviews}} Reviews</span>
<div style="padding-top: 20px;">
<span style="font-size: 25px; font-weight:bold;"> ₹ {{itemDetail.itemDiscountedRate}}</span>
<span style="font-weight: 100;"> Onwards </span>
</div>
<span style="font-size: 15px; color: gray; font-weight: 100;"><s>₹ {{itemDetail.itemCostRate}}</s></span>
<span style="padding-left: 10px; color: forestgreen;">{{itemDetail.itemDiscount}}% off</span>
<span style="display: block; font-size: 16px; font-weight: 100; color: indianred;">{{itemDetail.itemDetailData.itemExtraInfo}}</span>
<div style="width: 300px; padding-top: 20px;">
<div style="float: left;">
<span _ngcontent-c16="" style="display: block; padding-top: 10px; font-size: 18px;">Adult</span>
<span _ngcontent-c16="" style="padding-bottom: 10px; color: gray; font-weight: 100; font-size: 14px;">Height Above 4'6</span>
</div>
<div style="float: right;">
<button style="font-size: 35px; color: mediumvioletred; position: relative; text-align: center; cursor: pointer; border: 9px solid transparent; font-weight: lighter;" [disabled]="disable()" (click)="decrement()">-</button>
<span style="color: mediumvioletred; position: absolute; margin-left: 6px; margin-right: 6px; font-size: 14px; font-weight: 100;">₹ {{total}}</span>
<span>
<input style="width: 60px; height: 35px; border:none; border-radius: 2px; text-align: center;" type="text" [value]="counterValue">
</span>
<button style="font-size: 35px; color: mediumvioletred; position: relative; text-align: center; cursor: pointer; border: 9px solid transparent; font-weight: lighter;" (click)="increment()">+</button>
</div>
</div>
<div class="medium-12 columns" style="padding-top: 30px; padding-left: 0px;">
<button class="button medium-btn savelater">Save For Later</button>
<button class="button medium-btn booknow">Book Now</button>
</div>
</div>
</div>
<div class="row">
<div class="medium-12 col-sm-9 overview">
<span class="ecm-other-title">Overview</span>
<span class="ecm-other-detail">{{itemDetail.itemOverview}}</span>
</div>
</div>
<div class="row">
<div class="medium-6 columns medium-5 columns ecm-other-details">
<span class="ecm-other-title">Packages Include</span>
<li class="ecm-other-detail" *ngFor="let package of itemDetail.itemDetailData.itemPackages">{{package.package}}</li>
</div>
<div class="medium-6 medium-5 columns ecm-other-details">
<span class="ecm-other-title">Venue Details</span>
<span class="ecm-other-detail">{{itemDetail.itemDetailData.itemVenue}}</span>
</div>
</div>
</div>
-->
<div *ngIf="itemDetail">
<div class="row">
<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- -->
<span class="medium-6 columns medium-5 columns image">
<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" ></ecm-image>
</span>
<!-- -----------------------ITEM-IMAGE ENDS HERE-------------------------------- ----->
<!-- ----------------------ITEM-DETAILS START HERE-------------------------------- -->
<div class="medium-6 medium-5 columns head" style="margin-top: 70px;">
<span style="display: block; color: mediumvioletred; font-size: 18px;" > {{itemDetail.itemCategory.shDescr}} </span>
<span style="display: block; padding-top: 15px; font-size: 20px; font-weight:bold;"> {{itemDetail.itemShDescr}} </span>
<span style="display: block; font-weight: 100; font-size: 16px;">{{itemDetail.itemDescr}}</span>
<a (click)="scrollToReviews.emit();" class="link-reviews">
<span *ngIf="itemDetail.itemAvgRating == 0 && itemDetail.itemNumOfReviews == 0 " style="color: gray; padding-left: 10px; font-size: 18px;">
Be the first to Review this product
</span>
<span *ngIf="itemDetail.itemAvgRating > 0 || itemDetail.itemNumOfReviews > 0 " >
<span *ngFor="let a of createRatings(itemDetail.itemAvgRating)" style="color: rgb(500, 150, 50); font-size: 20px;"> &#x2605; </span>
<span style="color: gray; padding-left: 10px; font-size: 18px;"> {{itemDetail.itemAvgRating}} Ratings | {{itemDetail.itemNumOfReviews}} Reviews </span>
</span>
</a>
<div style="padding-top: 20px;">
<span style="font-size: 25px; font-weight:bold;">
₹ {{itemDetail.itemDiscountedRate}}
</span>
<span style="font-weight: 100;"> Onwards </span>
</div>
<span style="font-size: 15px; color: gray; font-weight: 100;">
<s>₹ {{itemDetail.itemCostRate}}</s>
</span>
<span style="padding-left: 10px; color: forestgreen;">
{{itemDetail.itemDiscount}}% off
</span>
<span style="display: block; font-size: 16px; font-weight: 100; color: indianred;">
{{itemDetail.itemExtraInfo}}
</span>
<div style="width: 300px; padding-top: 20px;">
<div style="float: left;">
<span _ngcontent-c16="" style="display: block; padding-top: 10px; font-size: 18px;">Adult</span>
<span _ngcontent-c16="" style="padding-bottom: 10px; color: gray; font-weight: 100; font-size: 14px;">Height Above 4'6</span>
</div>
<div style="float: right;">
<button style="font-size: 35px; color: mediumvioletred; position: relative; text-align: center; cursor: pointer; border: 9px solid transparent; font-weight: lighter;" [disabled]="disable()" (click)="decrement()">-</button>
<span style="color: mediumvioletred; position: absolute; margin-left: 6px; margin-right: 6px; font-size: 14px; font-weight: 100;">₹ {{total}}</span>
<span>
<input style="width: 60px; height: 35px; border-radius: 2px; text-align: center;" type="text" [value]="counterValue">
</span>
<button style="font-size: 35px; color: mediumvioletred; position: relative; text-align: center; cursor: pointer; border: 9px solid transparent; font-weight: lighter;" (click)="increment()">+</button>
</div>
</div>
<div class="medium-12 columns" style="padding-top: 30px; padding-left: 0px;">
<button class="button medium-btn savelater">Save For Later</button>
<button class="button medium-btn booknow" (click)="addItemInCart(itemDetail.itemCode)">Book Now</button>
</div>
</div>
<!-- ------------------------------- ITEM-DETAILS ENDS HERE-------------------------------- -->
</div> <!-- ------------------------------- ITEM-OVERVIEW START HERE-------------------------------- -->
<div class="row">
<div class="medium-12 col-sm-9 overview">
<span class="ecm-other-title">Overview</span>
<span class="ecm-other-detail">{{itemDetail.itemOverview}}</span>
</div>
</div> <!-- ------------------------------- ITEM-OVERVIEW ENDS HERE-------------------------------- -->
<!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS START HERE--------------- -->
<div class="row">
<div class="medium-6 columns medium-5 columns ecm-other-details">
<span class="ecm-other-title">Packages Include</span>
<li class="ecm-other-detail" *ngFor="let package of itemDetail.itemDetailData.itemPackages">{{package.package}}</li>
</div>
<div class="medium-6 medium-5 columns ecm-other-details">
<span class="ecm-other-title">Venue Details</span>
<span class="ecm-other-detail">{{itemDetail.itemDetailData.itemVenue}}</span>
</div>
</div> <!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS ENDS HERE----------------- -->
</div>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
import { ItemDetail } from '../../ecm-model/product-detail-model';
import { EcmTemplateInterface } from './ecm-template.component';
@Component( {
selector: 'ecm-outing',
templateUrl: './ecm-outing.component.html',
styleUrls: ['./ecm-outing.component.css']
})
export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
@Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter();
counterValue = 1;
itemPrice = 1000;
total = this.itemPrice;
userActionUrl= '/ecm/service/feeds/cart';
itemCode;
constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
ngOnInit() {
console.log( "ngOnInit EcmOutingComponent Object Keys : " + Object.keys( this.itemDetail ) )
console.log( this.itemDetail );
this.route.params.subscribe( params => {
this.itemCode = params['key'];
});
}
createRatings( ratings ) {
var rating: number[] = [];
for ( var i = 1; i <= ratings; i++ ) {
rating.push( i );
}
return rating;
}
increment() {
this.counterValue += 1;
this.total = this.counterValue * this.itemPrice;
}
decrement() {
this.counterValue -= 1;
this.total = this.total - this.itemPrice;
}
disable() {
console.log( this.counterValue );
if ( this.counterValue == 1 )
return true;
else
return false;
}
addItemInCart(itemCode)
{
console.log("StoreInCart Called");
this.http.post(this.userActionUrl+'/'+itemCode, {})
.subscribe(data => {
console.log("Inserted in Cart");
}, error => {
console.log(error.json());
});
}
}
<ng-template ecm-template></ng-template>
\ No newline at end of file
import { Component, AfterViewInit, ComponentFactoryResolver, Input, Output, ViewChild, Type, Directive, ViewContainerRef, EventEmitter } from '@angular/core';
import { ItemDetail } from '../../ecm-model/product-detail-model';
@Directive({
selector: '[ecm-template]',
})
export class EcmTemplateDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
export class EcmTemplateItem {
public itemDetail: any
constructor(public component: Type<any>) {}
public setItemDetail(itemDetail: any){
this.itemDetail = itemDetail;
}
}
export interface EcmTemplateInterface {
itemDetail: ItemDetail;
scrollToReviews: any;
}
@Component({
selector: 'ecm-template',
templateUrl: './ecm-template.component.html',
styleUrls: ['./ecm-template.component.css']
})
export class EcmTemplateComponent implements AfterViewInit {
@Output() scrollToReviews = new EventEmitter();
@Input() ecmTemplate: EcmTemplateItem;
@ViewChild(EcmTemplateDirective) ecmTemplateDir: EcmTemplateDirective;
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
ngAfterViewInit() {
this.loadComponent();
}
loadComponent(){
let ecmTemplateItem = this.ecmTemplate;
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ecmTemplateItem.component);
let viewContainerRef = this.ecmTemplateDir.viewContainerRef;
viewContainerRef.clear();
let componentRef = viewContainerRef.createComponent(componentFactory);
(<EcmTemplateInterface>componentRef.instance).itemDetail = ecmTemplateItem.itemDetail;
(<EcmTemplateInterface>componentRef.instance).scrollToReviews = this.scrollToReviews;
}
}
/* neew*/
.desc{
padding-left: 14px;
padding-right: 14px;
}
.itemImage
{
height: 55px;
width: 55px;
border-radius: 2px;
}
.ecm-cancel-buttton
{
cursor: pointer;
padding-left: 13px;
padding-right: 13px;
}
.table {
width: 100%;
}
.itemdescription
{
padding-left: 10px;
width : 140px;
}
\ No newline at end of file
<div *ngIf="cartItemsDetail">
<div class="cartItemsDetail" *ngFor="let item of cartItemsDetail">
<body>
<table style="border: 2px solid ghostwhite; width: 100%;">
<tr>
<td class="itemImage"><img style="height: inherit;" src="../assets/images/items/{{item.itemCode}}.png"></td>
<td class="itemdescription">{{item.descr}}</td>
<td style="padding: 10px;">₹ {{item.costRate}}</td>
<td (click)="deleteCartItem(item.itemCode)" style="cursor: pointer;">x</td>
</tr>
</table>
</body>
{{item.scat_sh_descr}} {{item.rating}}
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'
import { Item } from '../../ecm-model/product-model';
import { EcmCartService } from './ecm-cart.service';
@Component({
selector: 'ecm-cart',
templateUrl: './ecm-cart.component.html',
styleUrls: ['./ecm-cart.component.css']
})
export class EcmCartComponent implements OnInit {
cartItemsDetail: Item[];
cartItems = 0;
constructor(public cartService: EcmCartService, private http: Http) { }
ngOnInit() {
this.getCartItem();
}
getCartItem() {
this.cartService.getCartItems().subscribe(
cartItemsDetail => {
this.cartItemsDetail = cartItemsDetail;
this.cartItems = this.cartItemsDetail.length;
console.log( 'comp cartItemsDetail[' + JSON.stringify( cartItemsDetail ) + '] \n this.cartItemsDetail[' + this.cartItemsDetail.length + ']' );
},
error => {
let errorMessage = <any>error;
console.log( 'comp errorMessage[' + errorMessage + ']' );
});
}
userActionUrl = '/ecm/service/feeds/cart';
deleteCartItem( itemCode ) {
console.log( "deleteCartItem Called" );
this.http.delete( this.userActionUrl + '/' + itemCode, {})
.subscribe( data => {
console.log( "deleted item in Cart" );
}, error => {
console.log( error.json() );
});
this.getCartItem();
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Item } from '../../ecm-model/product-model';
@Injectable()
export class EcmCartService {
private userActionUrl = '/ecm/service/feeds/cart';
itemNo;
constructor(private http: Http) { }
getCartItems(): Observable<Item[]> {
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( this.userActionUrl, options )
.map( this.extractData )
.catch( this.handleError );
}
private extractData(res: Response) {
let body = res.json();
console.log('extractData[' + JSON.stringify(body) + ']');
return body || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
getItemNo () {
return this.itemNo;
}
setItemNo(value) {
this.itemNo = value;
}
}
.categories-section {
padding: 0;
margin: 0;
padding-top: 100px;
padding-top: 70px;
background-color: #FFF;
}
.ecm-section-info {
padding: 10px;
}
.ecm-section-info-title {
font-size: 26px;
color: #444;
display: block;
}
.ecm-section-info-subhead {
font-size: 16px;
color: #888;
display: block;
}
.end {
padding-top: 15px;
padding-bottom: 50px;
}
.row.row-category {
max-width: 72rem;
}
\ No newline at end of file
<div *ngIf="categories">
<section class="categories-section">
<div class="row row-category">
<div class="ecm-section-info">
<span class="ecm-section-info-title">Categories</span>
<span class="ecm-section-info-subhead">Explore top Authentic Regional Foods, Outings, Celebrations around {{selectedPlace}}</span>
</div>
<div class="small-12 medium-6 large-4 column end "*ngFor="let _category of categories">
<ecm-card (storeData)="storeCategory(_category)" [category]="_category"></ecm-card>
</div>
<div></div>
</div>
</section>
</div>
import { Component, OnInit, HostListener } from '@angular/core';
import { Store } from '@ngrx/store';
import { EcmCategoryService } from './ecm-category.service';
import { ScrollService } from '../../scroll.service';
import { EcmStoreModel } from '../../ecm-store/ecm-store.model';
import { Category } from '../../ecm-model/category-model';
@Component({
selector: 'ecm-category',
templateUrl: './ecm-category.component.html',
styleUrls: ['./ecm-category.component.css'],
providers: [EcmCategoryService]
})
export class EcmCategoryComponent implements OnInit {
errorMessage: string;
selectedPlace = 'Mumbai';
categories: Category[];
position: any;;
@HostListener("window:scroll", [])
onWindowScroll() {
this.position=window.pageYOffset;
}
constructor(public categoryService: EcmCategoryService, private scroll_service: ScrollService, private store: Store<EcmStoreModel>) { }
ngOnInit() {
this.getCategories();
}
ngOnDestroy(){
this.scroll_service.setCatPos(this.position);
}
ngAfterViewInit(){
var pos=this.scroll_service.getCatPos();
window.scrollTo(0,pos);
console.log("AfterContenet Init of Category");
}
getCategories() {
this.categoryService.getCategories().subscribe(
categories => {
this.categories = categories;
console.log('comp categories[' + JSON.stringify( categories ) + '] \n this.categories[' + JSON.stringify( this.categories ) + ']');
},
error => {
this.errorMessage = <any>error;
console.log('comp errorMessage[' + this.errorMessage + ']');
});
}
storeCategory(selectedCategory){
console.log(selectedCategory);
this.store.dispatch({type: 'CLEAR_CATEGORY', payload: selectedCategory});
this.store.dispatch({type: 'CATEGORY', payload: selectedCategory});
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Store } from '@ngrx/store';
import { Category } from '../../ecm-model/category-model';
@Injectable()
export class EcmCategoryService {
private SERVICE_URL = '/ecm/service/category'; // URL to web service
constructor (private http: Http,) {}
getCategories(): Observable<Category[]> {
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( this.SERVICE_URL, options )
.map( this.extractData )
.catch( this.handleError );
}
getCategory (catCode : string): Observable<Category> {
let categoryUrl = this.SERVICE_URL + '/' + catCode;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.get(categoryUrl, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
console.log('extractData[' + JSON.stringify(body) + ']');
return body || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
}
.subcategories-section {
padding: 0;
margin: 0;
padding-top: 100px;
padding-top: 70px;
background-color: #FFF;
}
.ecm-section-info {
padding: 10px;
}
.ecm-section-info-title {
font-size: 26px;
color: #444;
display: block;
}
.ecm-section-info-subhead {
font-size: 16px;
color: #888;
display: block;
}
.end {
padding-top: 15px;
padding-bottom: 50px;
}
.row.row-subcategory {
max-width: 72rem;
}
/*Breadcrumbs*/
.ecm-breadcrumbs {
/* font-size: .85em; */
color: #000;
line-height: 1.5;
/* margin: 20px; */
padding-left: 0;
margin: 0;
list-style-type: none;
}
.ecm-breadcrumbs li {
display: inline;
list-style-type: none;
margin-left: 0;
}
.ecm-breadcrumbs li:before {
content: "/";
padding-left: 5px;
padding-right: 5px;
color: mediumvioletred;
}
.ecm-breadcrumbs li:first-child:before {
content: "";
padding-right: 5px;
}
.ecm-breadcrumbs li a {
background-color: transparent;
color: mediumvioletred;
text-decoration: none;
cursor: pointer;
}
.ecm-breadcrumbs li a:hover {
color: rgba(199, 21, 133, 0.45);
}
.row.sub-heading {
top: 60px;
position: relative;
background: #ffffff;
max-width: 100rem;
padding-left: 3rem;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.img-back-32 {
/*content: url(../../assets/images/w_user_32_32.png);*/
content: url(../../../assets/images/svg/back_32_32.svg);
}
.fixed-header-back {
position: absolute;
padding: 0;
height: 20px !important;
width: 20px !important;
/* box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1); */
cursor: pointer;
border-radius: 100%;
margin-left: -2rem !important;
}
.fixed-header-back:hover {
box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1);
}
\ No newline at end of file
<ecm-header [isFixedHeader]=false> </ecm-header>
<span *ngIf="items">
<ecm-breadcrumbs [pageName]="'ITEMS'"> </ecm-breadcrumbs>
</span>
<div *ngIf="items">
<section class="subcategories-section">
<div class="row row-subcategory">
<div class="ecm-section-info">
<span class="ecm-section-info-title">{{subcategory.shDescr}}</span>
<span class="ecm-section-info-subhead">{{subcategory.descr}}</span>
</div>
<div class="small-12 medium-6 large-4 column end "*ngFor="let _item of items">
<!--<ecm-item-caption [itemData]="_item"></ecm-item-caption> -->
<ecm-card [itemData]="_item" [extraParam]="extra_param"></ecm-card>
</div>
</div>
</section>
</div>
<ecm-footer> </ecm-footer>
import { Component, OnInit,HostListener } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store';
import { EcmProductService } from './ecm-product.service';
import { ScrollService } from '../../scroll.service';
import { EcmStoreModel } from '../../ecm-store/ecm-store.model';
import { Category } from '../../ecm-model/category-model';
import { SubCategory } from '../../ecm-model/subcategory-model';
import { Item } from '../../ecm-model/product-model';
@Component({
selector: 'ecm-product',
templateUrl: './ecm-product.component.html',
styleUrls: ['./ecm-product.component.css'],
providers: [EcmProductService]
})
export class EcmProductComponent implements OnInit {
position=0;
isCatItems = 'false';
@HostListener("window:scroll", [])
onWindowScroll() {
this.position=window.pageYOffset;
}
private items: Item[];
private extra_param= { "catCode":'', "catShDesc":'',scatDesc:'' };
private category : Category;
private subcategory : SubCategory;
constructor(private route: ActivatedRoute, private router:Router,public subcategoryService: EcmProductService, private scroll_service: ScrollService, private store: Store<EcmStoreModel>) { }
ngOnInit() {
window.scrollTo(0,0);
this.route.params.subscribe( params => {
//let id: number = +params['id']; // (+) converts string 'id' to a number
// In a real app: dispatch action to load the details here.
let scatCode = params['scatCode'];
console.log( 'ngOnInit scatCode[' + scatCode + ']' );
console.log("Viewtype OpenView");
window.scrollTo(0,0);
//this.getSubCategory( viewKey );
this.fetchStore('SubCategory');
this.getItems(scatCode);
});
}
getItems( scatCode: string ) {
this.subcategoryService.getItems( scatCode ).subscribe(
items => {
this.items = items;
console.log( 'comp scatCode[' + scatCode + '] \n this.items[' + JSON.stringify( this.items ) + ']' );
},
);
}
storeCategory(selectedSubCategory){
console.log(selectedSubCategory);
this.store.dispatch({type: 'CLEAR_SUB_CATEGORY', payload: selectedSubCategory});
this.store.dispatch({type: 'SUB_CATEGORY', payload: selectedSubCategory});
}
fetchStore( viewType: string){
if(viewType == 'Category')
{
let storeCategory;
this.store.select('CATEGORY').forEach(
value => storeCategory=value
);
this.category = storeCategory;
}
if(viewType == 'SubCategory')
{
let storeSubCategory;
this.store.select('SUBCATEGORY').forEach(
value => { storeSubCategory=value; console.log(value);}
);
this.subcategory = storeSubCategory;
}
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Store } from '@ngrx/store';
import { Item } from '../../ecm-model/product-model';
@Injectable()
export class EcmProductService {
private SERVICE_URL = '/ecm/service/category/itemlist/'; // URL to web service
constructor (private http: Http,) {}
getItems (scatCode : string): Observable<Item[]> {
let itemsUrl = this.SERVICE_URL + scatCode ;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.get(itemsUrl, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
console.log('extractData[' + JSON.stringify(body) + ']');
return body || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
}
.recentView-section {
margin-top: 50px;
height: 600px;
background-color: #F2F2F2;
}
.row.row-category {
max-width: 72rem;
}
.ecm-section-info {
padding: 10px;
max-width: 72rem;
margin-left: auto;
margin-right: auto;
}
.ecm-section-info-title {
font-size: 26px;
color: #444;
display: block;
}
.ecm-section-info-subhead {
font-size: 16px;
color: #888;
display: block;
}
.end {
padding-top: 15px;
padding-bottom: 50px;
}
<div *ngIf="recentViewItems">
<section class="recentView-section">
<div class="row row-category">
<div class="ecm-section-info">
<span class="ecm-section-info-title">Recently Viewed</span>
</div>
<ecm-carousel [cardItems]="recentViewItems" ></ecm-carousel>
</div>
</section>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { EcmRecentViewService } from './ecm-recent-view.service';
import { Item } from '../../ecm-model/product-model';
declare var reinitFlickity: any;
@Component( {
selector: 'ecm-recent-view',
templateUrl: './ecm-recent-view.component.html',
styleUrls: ['./ecm-recent-view.component.css'],
providers: [EcmRecentViewService]
})
export class EcmRecentViewComponent implements OnInit {
recentViewItems: Item[];
errorMessage: string;
constructor( public recentviewService: EcmRecentViewService ) { }
ngOnInit() {
this.getRecentViewItems();
}
getRecentViewItems() {
this.recentviewService.getRecentViewItems().subscribe(
reviewItems => {
this.recentViewItems = reviewItems;
reinitFlickity();
console.log( 'comp trendingItems[' + JSON.stringify( reviewItems ) + '] \n this.trendingItems[' + JSON.stringify( this.recentViewItems ) + ']' );
},
error => {
this.errorMessage = <any>error;
console.log( 'comp errorMessage[' + this.errorMessage + ']' );
});
}
public doDestroy(itemCode: string) {
this.recentviewService.storeRecentViewItem(itemCode);
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Item } from '../../ecm-model/product-model';
@Injectable()
export class EcmRecentViewService {
private recentViewUrl = '/ecm/service/feeds/recentview'; // URL to web service
constructor (private http: Http) {}
getRecentViewItems(): Observable<Item[]> {
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( this.recentViewUrl, options )
.map( this.extractData )
.catch( this.handleError );
}
storeRecentViewItem(itemCode) {
this.http.post(this.recentViewUrl+'/'+itemCode, {})
.subscribe(data => {
console.log("Inserted in RecentView");
}, error => {
console.log(error.json());
});
}
private extractData(res: Response) {
let body = res.json();
console.log('extractData[' + JSON.stringify(body) + ']');
return body || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
}
.subcategories-section {
padding: 0;
margin: 0;
padding-top: 100px;
padding-top: 70px;
background-color: #FFF;
}
.ecm-section-info {
padding: 10px;
}
.ecm-section-info-title {
font-size: 26px;
color: #444;
display: block;
}
.ecm-section-info-subhead {
font-size: 16px;
color: #888;
display: block;
}
.end {
padding-top: 15px;
padding-bottom: 50px;
}
.row.row-subcategory {
max-width: 72rem;
}
/*Breadcrumbs*/
.ecm-breadcrumbs {
/* font-size: .85em; */
color: #000;
line-height: 1.5;
/* margin: 20px; */
padding-left: 0;
margin: 0;
list-style-type: none;
}
.ecm-breadcrumbs li {
display: inline;
list-style-type: none;
margin-left: 0;
}
.ecm-breadcrumbs li:before {
content: "/";
padding-left: 5px;
padding-right: 5px;
color: mediumvioletred;
}
.ecm-breadcrumbs li:first-child:before {
content: "";
padding-right: 5px;
}
.ecm-breadcrumbs li a {
background-color: transparent;
color: mediumvioletred;
text-decoration: none;
cursor: pointer;
}
.ecm-breadcrumbs li a:hover {
color: rgba(199, 21, 133, 0.45);
}
.row.sub-heading {
top: 60px;
position: relative;
background: #ffffff;
max-width: 100rem;
padding-left: 3rem;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.img-back-32 {
/*content: url(../../assets/images/w_user_32_32.png);*/
content: url(../../../assets/images/svg/back_32_32.svg);
}
.fixed-header-back {
position: absolute;
padding: 0;
height: 20px !important;
width: 20px !important;
/* box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1); */
cursor: pointer;
border-radius: 100%;
margin-left: -2rem !important;
}
.fixed-header-back:hover {
box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1);
}
\ No newline at end of file
<ecm-header [isFixedHeader]=false> </ecm-header>
<span *ngIf="subcategories">
<ecm-breadcrumbs [pageName]="'SUB_CATEGORY'"></ecm-breadcrumbs>
</span>
<div *ngIf="subcategories">
<section class="subcategories-section">
<div class="row row-subcategory">
<div class="ecm-section-info">
<span *ngIf="category" class="ecm-section-info-title">{{category.shDescr}}</span>
<span *ngIf="category" class="ecm-section-info-subhead">{{category.descr}}</span>
</div>
<div class="small-12 medium-6 large-4 column end " *ngFor="let _subcategory of subcategories">
<ecm-card (storeData)="storeCategory(_subcategory)" [subcategory]="_subcategory"></ecm-card>
</div>
</div>
</section>
</div>
<ecm-footer></ecm-footer>
import { Component, OnInit,HostListener } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store';
import { EcmSubCategoryService } from './ecm-sub-category.service';
import { ScrollService } from '../../scroll.service';
import { EcmStoreModel } from '../../ecm-store/ecm-store.model';
import { Category } from '../../ecm-model/category-model';
import { SubCategory } from '../../ecm-model/subcategory-model';
import { Item } from '../../ecm-model/product-model';
@Component({
selector: 'ecm-sub-category',
templateUrl: './ecm-sub-category.component.html',
styleUrls: ['./ecm-sub-category.component.css'],
providers: [EcmSubCategoryService]
})
export class EcmSubCategoryComponent implements OnInit {
position=0;
isCatItems = 'false';
@HostListener("window:scroll", [])
onWindowScroll() {
this.position=window.pageYOffset;
}
private subcategories: SubCategory[];
private extra_param= { "catCode":'', "catShDesc":'',scatDesc:'' };
private category : Category;
private subcategory : SubCategory;
//private category: Observable<Array<Category>>;
constructor(private route: ActivatedRoute, private router:Router,public subcategoryService: EcmSubCategoryService, private scroll_service: ScrollService, private store: Store<EcmStoreModel>) { }
ngOnInit() {
window.scrollTo(0,0);
this.route.params.subscribe( params => {
//let id: number = +params['id']; // (+) converts string 'id' to a number
// In a real app: dispatch action to load the details here.
let catCode = params['catCode'];
console.log( 'ngOnInit catCode[' + catCode + ']' );
console.log("Subcat Listing...");
console.log(window.location.pathname);
this.fetchStore(catCode,'Category');
this.getSubCategories(catCode);
});
}
getSubCategories( catCode: string ) {
this.subcategoryService.getSubCategories( catCode ).subscribe(
subcategories => {
this.subcategories = subcategories;
console.log( 'comp catCode[' + catCode + '] \n this.subcategories[' + JSON.stringify( this.subcategories ) + ']' );
/* let subCatLen = subcategories.length ? subcategories.length : 0;
console.log( 'SubCatLen:: ' + subCatLen );
if( subCatLen == 0 )
{
this.isCatItems = 'true';
this.subcategories = null;
console.log( 'Calling items of Category ::: ' + catCode );
this.store.dispatch({type: 'CLEAR_SUB_CATEGORY', payload: null}); //Just Remove Previous Data
this.getItems(catCode);
}
else
{
this.subcategories = subcategories;
this.items = null;
console.log( 'comp catCode[' + catCode + '] \n this.subcategories[' + JSON.stringify( this.subcategories ) + ']' );
}*/
},
);
}
storeCategory(selectedSubCategory){
console.log(selectedSubCategory);
this.store.dispatch({type: 'CLEAR_SUB_CATEGORY', payload: selectedSubCategory});
this.store.dispatch({type: 'SUB_CATEGORY', payload: selectedSubCategory});
}
fetchStore(viewKey: string, viewType: string){
if(viewType == 'Category')
{
let storeCategory;
this.store.select('CATEGORY').forEach(
value => storeCategory=value
);
this.category = storeCategory;
}
if(viewType == 'SubCategory')
{
let storeSubCategory;
this.store.select('SUBCATEGORY').forEach(
value => { storeSubCategory=value; console.log(value);}
);
this.subcategory = storeSubCategory;
}
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import {Store} from '@ngrx/store';
import { SubCategory } from '../../ecm-model/subcategory-model';
@Injectable()
export class EcmSubCategoryService {
private SERVICE_URL = '/ecm/service/category'; // URL to web service
constructor (private http: Http,) {}
getSubCategories( catCode: string ): Observable<SubCategory[]> {
let subCategoriesUrl = this.SERVICE_URL + '/' + catCode + '/list';
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( subCategoriesUrl, options )
.map( this.extractData )
.catch( this.handleError );
}
getSubCategory (scatCode : string): Observable<SubCategory> {
let subCategoryUrl = this.SERVICE_URL + '/list/' + scatCode;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.get(subCategoryUrl, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
console.log('extractData[' + JSON.stringify(body) + ']');
return body || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
}
.trending-section {
padding-top: 50px;
height: 650px;
background-color: #F2F2F2;
}
.row.row-category {
max-width: 72rem;
}
.ecm-section-info {
padding: 10px;
max-width: 72rem;
margin-left: auto;
margin-right: auto;
}
.ecm-section-info-title {
font-size: 26px;
color: #444;
display: block;
}
.ecm-section-info-subhead {
font-size: 16px;
color: #888;
display: block;
}
.end {
padding-top: 15px;
padding-bottom: 50px;
}
<div *ngIf="trendingItems">
<section class="trending-section">
<div class="row row-category">
<div class="ecm-section-info">
<span class="ecm-section-info-title">Currently Trending</span>
<span class="ecm-section-info-subhead">Explore top Authentic Regional Foods, Outings, Celebrations around {{selectedPlace}},based on trends.</span>
</div>
<ecm-carousel [cardItems]="trendingItems" ></ecm-carousel>
</div>
</section>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { EcmTrendProductService } from './ecm-trend-product.service';
import { Item } from '../../ecm-model/product-model';
declare var reinitFlickity: any;
@Component({
selector: 'ecm-trend-product',
templateUrl: './ecm-trend-product.component.html',
styleUrls: ['./ecm-trend-product.component.css'],
providers: [EcmTrendProductService]
})
export class EcmTrendProductComponent implements OnInit {
trendingItems: Item[];
errorMessage: string;
constructor(public trendingService: EcmTrendProductService) { }
getTrends() {
this.trendingService.getTrending().subscribe(
trendingItems => {
this.trendingItems = trendingItems;
reinitFlickity();
console.log('comp trendingItems[' + JSON.stringify( trendingItems ) + '] \n this.trendingItems[' + JSON.stringify( this.trendingItems ) + ']');
},
error => {
this.errorMessage = <any>error;
console.log('comp errorMessage[' + this.errorMessage + ']');
});
}
ngOnInit() {
this.getTrends();
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Item } from '../../ecm-model/product-model';
@Injectable()
export class EcmTrendProductService {
private trendsUrl = '/ecm/service/category/current-trends'; // URL to web service
constructor (private http: Http) {}
getTrending(): Observable<Item[]> {
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( this.trendsUrl, options )
.map( this.extractData )
.catch( this.handleError );
}
private extractData(res: Response) {
let body = res.json();
console.log('extractData[' + JSON.stringify(body) + ']');
return body || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
}
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