Commit 698a74f7 authored by prumde's avatar prumde

Updated for variants


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174227 ce508802-f39f-4f6c-b175-0d175dae99d5
parent c1e3351a
...@@ -527,6 +527,7 @@ li::BEFORE { ...@@ -527,6 +527,7 @@ li::BEFORE {
} }
.product-image { .product-image {
min-height: 400px;
max-height: 600px; max-height: 600px;
position: relative; position: relative;
display: block; display: block;
...@@ -610,4 +611,5 @@ md-card { ...@@ -610,4 +611,5 @@ md-card {
top: 15px; top: 15px;
right: 50%; right: 50%;
position: absolute; position: absolute;
box-shadow: none;
} }
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
<div class="small-12 medium-6 large-6 columns head"> <div class="small-12 medium-6 large-6 columns head">
<md-card-content> <md-card-content>
<div> <div>
<div _ngcontent-c30="" class="ecm-share"> <div class="ecm-share">
<i _ngcontent-c30="" class="material-icons share-icon">&#xE80D;</i> <i class="material-icons share-icon">&#xE80D;</i>
<span _ngcontent-c30="" class="share">Share</span> <span class="share">Share</span>
</div> </div>
<span class="item-shdescr"> <span class="item-shdescr">
<a [routerLink]="['/products', itemDetail.itemSubCategory.scatCode]" class="subcat-link"> <a [routerLink]="['/products', itemDetail.itemSubCategory.scatCode]" class="subcat-link">
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<span class="item-descr"> {{itemDetail.itemHeader.itemDescr}} </span> <span class="item-descr"> {{itemDetail.itemHeader.itemDescr}} </span>
<span class="sold-by-title">Sold by</span> <span class="sold-by-title">Sold by</span>
<span class="seller-name">{{itemDetail.itemDetail1.sellerInfo.name}}</span><br> <span class="seller-name">{{itemDetail.itemDetail1?.sellerInfo.name}}</span><br>
<a class="link-reviews"> <a class="link-reviews">
<span *ngIf="itemDetail.itemRatings.AVG_RATING == 0 && itemDetail.itemRatings.NO_OF_REVIEWS == 0 " class="review-msg-title" (click)="doActivity.emit({activity:'WRITE_REVIEW', data: {'firstReview': true} });"> <span *ngIf="itemDetail.itemRatings.AVG_RATING == 0 && itemDetail.itemRatings.NO_OF_REVIEWS == 0 " class="review-msg-title" (click)="doActivity.emit({activity:'WRITE_REVIEW', data: {'firstReview': true} });">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="item-descount-rate-section"> <div class="item-descount-rate-section">
<span class="item-descount-rate"> <span class="item-descount-rate">
Rs. {{itemDetail.itemHeader.itemDiscountedRate}} Rs. {{itemDetail.itemHeader.itemDiscountedRate | number : '3.1-5'}}
</span> </span>
</div> </div>
<div> <div>
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</span> </span>
</div> </div>
<div class="offers-section"> <div class="offers-section">
<span class="discount-validity">{{itemDetail.itemDetail1.validity}}</span> <span class="discount-validity">{{itemDetail.itemDetail1?.validity}}</span>
<button type="button" onclick="()" class="md-button link_button"> <button type="button" onclick="()" class="md-button link_button">
More Offers More Offers
<i class="material-icons arrow ">&#xE313;</i> <i class="material-icons arrow ">&#xE313;</i>
...@@ -72,9 +72,9 @@ ...@@ -72,9 +72,9 @@
<div class="details-title">Details</div> <div class="details-title">Details</div>
<div class="item-detail-1"> <div class="item-detail-1">
<ul class="details-list"> <ul class="details-list">
<li>Material: {{itemDetail.itemDetail1.shortDetails.material}}</li> <li *ngFor="let attribute of itemDetail.itemAttributes | slice:0:2;">
<li>Crafted By: {{itemDetail.itemDetail1.shortDetails.craftedBy}}</li> {{attribute.label}}: {{attribute.value}}
<li>Pattern: {{itemDetail.itemDetail1.shortDetails.pattern}}</li> </li>
</ul> </ul>
<button type="button" (click)="scrollToItemDetails()" class="md-button link_button">View More</button> <button type="button" (click)="scrollToItemDetails()" class="md-button link_button">View More</button>
</div> </div>
...@@ -110,42 +110,20 @@ ...@@ -110,42 +110,20 @@
--> -->
</div> </div>
<div *ngFor="let itemVariant of itemDetail.itemVariants"> <ecm-variants [itemVariants]="itemDetail.itemVariants" [itemCode]="itemCode" (selected)="loadItem($event);"></ecm-variants>
<div *ngIf="itemVariant.variant">
<div *ngIf="itemVariant.attribCode == 'SIZE' ">
<span class="size-title">Select Size </span>
<div *ngFor="let variant of itemVariant.variants"
class="size-variant">
<a
[ngClass]="{highlight:variant.itemCode == itemDetail.itemCode}"
md-button class="attribute-button"
(click)="viewItem(variant.itemCode)"> {{variant.value}} </a>
</div>
</div>
<div *ngIf="itemVariant.attribCode == 'COLOR' ">
<span class="color-title">Select Color </span>
<div *ngFor="let variant of itemVariant.variants"
class="color-variant"
[ngClass]="{selected:variant.itemCode == itemDetail.itemCode}"
(click)="viewItem(variant.itemCode)">
<ecm-image [isThumbnail]="true" [refId]='variant.itemCode'
[refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"></ecm-image>
</div>
</div>
</div>
</div>
</div> </div>
</md-card-content> </md-card-content>
<div [ngClass]="{'buy-cart-button': ( clientWidth > 640 ) , 'mobi-buy-cart-button': ( clientWidth < 639 ) }" > <div [ngClass]="{'buy-cart-button': ( clientWidth > 640 ) , 'mobi-buy-cart-button': ( clientWidth < 639 ) }" >
<button md-button class="button medium-btn Add_to_cart" <button md-button class="button medium-btn Add_to_cart"
(click)="doActivity.emit({activity:'ADD_CART', data: {'item' : itemDetail, 'isAddToCart' : isAddToCart}}); isAddToCart= true;">{{ isAddToCart ? 'Go to Cart' : 'Add to Cart' }}</button> (click)="doActivity.emit({activity:'ADD_CART', data: {'item' : itemDetail, 'isAddToCart' : isAddToCart}}); isAddToCart= true;">{{ isAddToCart ? 'Go to Cart' : 'Add to Cart' }}</button>
<button md-button class="button medium-btn Buy_now" (click)="doActivity.emit({activity:'BUY_NOW', data: {'itemCode' : itemDetail.itemCode, 'isAddToCart' : isAddToCart} });">Buy <button md-button class="button medium-btn Buy_now" (click)="doActivity.emit({activity:'BUY_NOW', data: {'item' : itemDetail, 'isAddToCart' : isAddToCart} });">Buy
Now</button> Now</button>
</div> </div>
<div _ngcontent-c30="" class="medium-12 columns ecm-payments"> <div class="medium-12 columns ecm-payments">
<i class="material-icons secure-icon"> &#xE8E8;</i> <span <i class="material-icons secure-icon"> &#xE8E8;</i> <span
_ngcontent-c30="" class="ecm-Info">Safe and Secure Payments. class="ecm-Info">Safe and Secure Payments.
100% Authentic products</span> 100% Authentic products</span>
</div> </div>
</div> </div>
...@@ -162,8 +140,8 @@ ...@@ -162,8 +140,8 @@
<div class="extra-details-section"> <div class="extra-details-section">
<div class="ecm-Overview"> <div class="ecm-Overview">
<span class="ecm-other-title">Overview</span> <span <span class="ecm-other-title">Overview</span> <span
class="ecm-other-detail"> <ecm-readmore class="ecm-other-detail">
[text]="itemDetail.itemDetail2.productOverview" [maxLength]="60"></ecm-readmore> <ecm-readmore [text]="Overview" [maxLength]="60"></ecm-readmore>
</span> </span>
</div> </div>
...@@ -171,53 +149,13 @@ ...@@ -171,53 +149,13 @@
<span class="attraction">Description</span> <span class="attraction">Description</span>
<table style="width: 100%"> <table style="width: 100%">
<tr class="extra-details" <tr class="extra-details"
*ngIf="itemDetail.itemDetail2.productDetails.brand"> *ngFor="let attribute of itemDetail.itemAttributes">
<td class="data-title">Brand</td> <td class="data-title" *ngIf="attribute.value">
<td class="data-title-detail"> {{attribute.label}}
{{itemDetail.itemDetail2.productDetails.brand}}</td> </td>
</tr> <td class="data-title-detail" *ngIf="attribute.value">
<tr class="extra-details" {{attribute.value}}
*ngIf="itemDetail.itemDetail2.productDetails.sku"> </td>
<td class="data-title">Sku</td>
<td class="data-title-detail">{{itemDetail.itemDetail2.productDetails.sku}}</td>
</tr>
<tr class="extra-details"
*ngIf="itemDetail.itemDetail2.productDetails.type">
<td class="data-title">Type</td>
<td class="data-title-detail">
{{itemDetail.itemDetail2.productDetails.type}}</td>
</tr>
<tr class="extra-details"
*ngIf="itemDetail.itemDetail2.productDetails.size">
<td class="data-title">Size</td>
<td class="data-title-detail">{{itemDetail.itemDetail2.productDetails.size}}</td>
</tr>
<tr class="extra-details"
*ngIf="itemDetail.itemDetail2.productDetails.weight">
<td class="data-title">Weight</td>
<td class="data-title-detail">
{{itemDetail.itemDetail2.productDetails.weight}}</td>
</tr>
<tr class="extra-details"
*ngIf="itemDetail.itemDetail2.productDetails.material">
<td class="data-title">Material</td>
<td class="data-title-detail">
{{itemDetail.itemDetail2.productDetails.material}}</td>
</tr>
<tr class="extra-details"
*ngIf="itemDetail.itemDetail2.productDetails.color">
<td class="data-title">Color</td>
<td class="data-title-detail">{{itemDetail.itemDetail2.productDetails.color}}</td>
</tr>
<tr class="extra-details"
*ngIf="itemDetail.itemDetail2.productDetails.packageContent">
<td class="data-title">PackageContent</td>
<td class="data-title-detail">{{itemDetail.itemDetail2.productDetails.packageContent}}</td>
</tr>
<tr class="extra-details"
*ngIf="itemDetail.itemDetail2.productDetails.care">
<td class="data-title">Care</td>
<td class="data-title-detail">{{itemDetail.itemDetail2.productDetails.care}}</td>
</tr> </tr>
</table> </table>
</div> </div>
......
...@@ -34,9 +34,6 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface { ...@@ -34,9 +34,6 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
cartItems: Observable<Item[]>; cartItems: Observable<Item[]>;
wishlistItems: Observable<Item[]>; wishlistItems: Observable<Item[]>;
//isCartItem = false;
//@Input() itemData: Item;
userActionUrl = '/ecm/service/feeds/cart'; userActionUrl = '/ecm/service/feeds/cart';
Overview = "Champions Yacht Club specializes in offering luxury boating and yachting experiences in Goa with a large fleet of Catamarans, Boats, Cruisers & Yachts in Goa. We do Rocking birthday parties, anniversary bashes, island excursions & barbeques, fishing expeditions, snorkeling, corporate parties and more. We ensure you have a luxury experience in yachts that will leave a memory of a lifetime"; Overview = "Champions Yacht Club specializes in offering luxury boating and yachting experiences in Goa with a large fleet of Catamarans, Boats, Cruisers & Yachts in Goa. We do Rocking birthday parties, anniversary bashes, island excursions & barbeques, fishing expeditions, snorkeling, corporate parties and more. We ensure you have a luxury experience in yachts that will leave a memory of a lifetime";
...@@ -48,9 +45,9 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface { ...@@ -48,9 +45,9 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
console.log( "Item data in handicraft " + JSON.stringify(this.itemDetail) ); console.log( "Item data in handicraft " + JSON.stringify(this.itemDetail) );
console.log( "ngOnInit EcmHandicraftComponent Object Keys : " + Object.keys( this.itemDetail ) ) console.log( "ngOnInit EcmHandicraftComponent Object Keys : " + Object.keys( this.itemDetail ) )
console.log( this.itemDetail ); console.log( this.itemDetail );
this.route.params.subscribe( params => {
this.itemCode = params['key']; this.itemCode = this.itemDetail.itemCode;
});
this.clientWidth = document.documentElement.clientWidth; this.clientWidth = document.documentElement.clientWidth;
RESIZE_EVENT.subscribe(data => { RESIZE_EVENT.subscribe(data => {
this.clientWidth = data; this.clientWidth = data;
...@@ -112,4 +109,11 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface { ...@@ -112,4 +109,11 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
changeStatus() { changeStatus() {
this.inWishlist = true; this.inWishlist = true;
} }
loadItem(itemCode){
console.log('selected itemCode',itemCode);
this.router.navigate(['/detail',itemCode]);
}
} }
\ No newline at end of file
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http'; import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { ItemDetail } from '../../ecm-model/product-detail-model'; import { ItemDetail } from '../../ecm-model/product-detail-model';
import { EcmTemplateInterface } from './ecm-template.component'; import { EcmTemplateInterface } from './ecm-template.component';
import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component'; import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
import { Store } from '@ngrx/store';
import { AppState } from '../../ecm-store/reducers';
import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component'; import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
import { Item } from '../../ecm-model/product-model'; import { Item } from '../../ecm-model/product-model';
...@@ -20,6 +24,7 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface { ...@@ -20,6 +24,7 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
@Output() scrollToReviews = new EventEmitter(); @Output() scrollToReviews = new EventEmitter();
@Output() doActivity = new EventEmitter(); @Output() doActivity = new EventEmitter();
@ViewChild( 'recentView' ) recentView: EcmRecentViewComponent; @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
@Input() inWishlist: boolean = false;
counterValue = 1; counterValue = 1;
itemPrice = 1000; itemPrice = 1000;
...@@ -27,21 +32,37 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface { ...@@ -27,21 +32,37 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
userActionUrl= '/ecm/service/feeds/cart'; userActionUrl= '/ecm/service/feeds/cart';
itemCode; itemCode;
myCity; myCity;
actionPerformed wishlistItems: Observable<Item[]>;
activityPerformed ;
transPortFacility; overview = "Located near the Huda City Metro Station, Appu Ghar is nestled in the entertainment district of Gurgaon. With its adrenaline-pumping water rides, Appu Ghar is the perfect destination to level-up your Summer adventure game. You can plan to go with your family or friends and enjoy a dip or two in the clean waterparks. Indulge in a memorable mini-vacation with finest adventure activities coupled with an overwhelming dose of music, dance and fun. If you love water rides high and are prepared to go any lengths to get a much-needed rush, then you shouldn't miss some of the best rides of Appu Ghar, which are: (1) Monsoon Mania - Rejoice to the splashes of water on your head at the rain dance area and feel alive while you are dancing with your loved ones.";
thingsToCarry;
itemDetailpath; attractions: Array<string> = [];
activities: Array<string> = [];
transportation: Array<string> = [];
thingsToCarry: Array<string> = [];
advisory: Array<string> = [];
constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
constructor( private route: ActivatedRoute, private router: Router, private http: Http, private store: Store<AppState> ) { }
ngOnInit() { ngOnInit() {
console.log( "Item data in Outing " + JSON.stringify(this.itemDetail) );
console.log( "ngOnInit EcmOutingComponent Object Keys : " + Object.keys( this.itemDetail ) ) console.log( "ngOnInit EcmOutingComponent Object Keys : " + Object.keys( this.itemDetail ) )
console.log( this.itemDetail ); console.log( this.itemDetail );
this.route.params.subscribe( params => {
this.itemCode = params['key'];
});
this.myCity = localStorage.getItem('mycity') this.itemCode = this.itemDetail.itemCode;
this.fetchAttributes();
console.log('attributes-->',this.attractions,this.activities,this.transportation,this.advisory,this.thingsToCarry);
this.myCity = localStorage.getItem('mycity');
this.wishlistItems = this.store.select('wishlistItems');
this.wishlistItems.subscribe( wishlistItems => {
if(wishlistItems.find(x => x.itemCode === this.itemDetail.itemCode))
this.inWishlist = true;
else
this.inWishlist = false;
} );
} }
ngAfterViewInit(){ ngAfterViewInit(){
...@@ -78,4 +99,40 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface { ...@@ -78,4 +99,40 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
else else
return false; return false;
} }
addToWishlist() {
this.doActivity.emit( { activity: 'ADD_WISHLIST', data: { 'item': this.itemDetail }, 'caller': this, 'callBack': 'changeStatus' });
}
removeFromWishlist() {
this.inWishlist = false;
this.doActivity.emit( { activity: 'REMOVE_WISHLIST', data: { 'item': this.itemDetail } });
}
fetchAttributes(){
this.itemDetail.itemAttributes.forEach(attribute => {
if(attribute.label == 'Attractions')
this.attractions = attribute.value.split(',');
if(attribute.label == 'Activities'){
if(attribute.value){
this.activities.push(attribute.value);
}
}
if(attribute.label == 'Transportations')
this.transportation = attribute.value.split(',');
if(attribute.label == 'Things to Carry')
this.thingsToCarry = attribute.value.split(',');
if(attribute.label == 'Advisory')
this.advisory = attribute.value.split(',');
});
}
loadItem(itemCode){
console.log('selected itemCode',itemCode);
this.router.navigate(['/detail',itemCode]);
}
} }
\ No newline at end of file
.head{
margin-top: 16px;
}
.ecm-other-title {
font-size: 18px;
padding-bottom: 15px;
display: block;
}
.ecm-other-titles {
font-size: 16px;
font-weight: bold;
padding-bottom: 15px;
color: dimgrey;
}
.ecm-other-detail {
font-weight: 100;
font-size: 14px;
color: #444;
text-align: justify;
}
.ecm-other-Overview {
font-weight: 100;
font-size: 14px;
text-align: justify;
}
.ecm-other-details {
padding-top: 30px;
}
.Overview{
padding-top: 30px;
padding-left: .625rem;
padding-right: .625rem;
width: 100%;
float: left;
}
.ecm-itemCategory
{
display: block;
color: mediumvioletred;
font-size: 18px;
}
.ecm-itemShDescr
{
display: block;
padding-top: 15px;
font-size: 14px;
font-weight: bold;
color: mediumvioletred;
}
.ecm-itemDescr{
display: block;
font-size: 20px;
padding-top: 10px;
font-weight: 600;
}
.ecm-itemAvgRating{
color: rgb(36, 34, 34);
padding-left: 10px;
padding-right: 12px;
font-size: 15px;
}
.ecm-itemNumOfReviews{
color: rgb(36, 34, 34);
font-size: 15px;
}
.ecm-itemExtraInfo{
font-size: 15px;
font-weight: 600;
}
.ecm-Onwards{
font-weight: 100;
}
.ecm-itemCostRate{
font-size: 15px;
color: gray;
font-weight: 100;
}
.ecm-itemDiscount
{
padding-left: 10px;
color: forestgreen;
}
.ecm-Adult{
display: block;
padding-top: 10px;
font-size: 18px;
}
.ecm-Instruction{
padding-bottom: 10px;
color: gray;
font-weight: 100;
font-size: 14px;
}
.ecm-decre{
font-size: 35px;
color: mediumvioletred;
position: relative;
text-align: center;
cursor: pointer;
border: 9px solid transparent;
font-weight: lighter;
}
.ecm-vlaue{
color: mediumvioletred;
position: absolute;
margin-left: 6px;
margin-right: 6px;
font-size: 14px;
font-weight: 100;
}
.ecm-textBox{
width: 60px;
height: 35px;
border-radius: 2px;
text-align: center;
}
.ecm-incre{
font-size: 35px;
color: mediumvioletred;
position: relative;
text-align: center;
cursor: pointer;
border: 9px solid transparent;
font-weight: lighter;
}
.ecm-ratingStars{
color: rgb(500, 150, 50);
font-size: 25px;
margin-top: -10px;
}
.ecm-saveButton{
padding-top: 30px;
}
.ecm-extrainfo{
width: 300px;
padding-top: 20px;
}
.image
{
padding-top: 16px;
}
.savelater
{
padding-left: 30px;
padding-right: 30px;
background-color: ghostwhite;
color: mediumvioletred;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 3px;
}
.booknow
{
background-color: mediumvioletred;
padding-left: 75px;
padding-right: 75px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: -13px;
border-radius: 3px;
color: white;
font-size: 18px;
}
.ecm-Overview{
padding-top: 20px;
padding-left: 13px;
margin-left: -13px;
}
.OverViewInfo
{
padding-left: 90px;
margin-top: -21px;
width: 100%;
}
.ecm-DiscountRate
{
margin-left: -13px;
padding-bottom: 25px;
}
.ecm-payments
{
padding-top: 18px;
margin-left: -13px;
font-size: 15px;
color: dimgrey;
}
.ecm-Info{
padding-left: 8px;
vertical-align: super;
}
.ecm-share{
float: right;
cursor: pointer;
}
.share{
vertical-align: super;
color: dimgray;
}
.material-icons
{
font-size: 26px;
}
/* chitra*/
.ecm-Training-Speciality{
padding-left: 13px;
margin-left: -13px;
}
.ecm-SpecialityInfo{
padding-left: 90px;
margin-top: -21px;
width: 100%;
}
/* chitra*/
.ecm-Training-Info{
font-weight: 100;
font-size: 14px;
text-align: justify;
vertical-align: top;
}
/* chitra*/
.ecm-Trainers{
color: mediumvioletred;
padding-right: 10px;
font-weight: 600;
margin-left: -14px;
vertical-align: top;
}
.ecm-itemDiscountedRate{
font-size: 28px;
font-weight: 600;
}
/* new */
.ecm-other-title {
font-size: 18px;
padding-bottom: 15px;
display: block;
}
.ecm-other-detail {
font-weight: 100;
font-size: 14px;
color: #444;
text-align: justify;
}
.ecm-card {
/* margin-top: 20px; */
/* max-width: 75rem; */
/* margin-left: auto; */
/* margin-right: auto; */
padding-top: 25px;
}
.ecm-itemDeatils{
padding-bottom: 8px;
border-bottom: solid mediumvioletred;
border-bottom-width: 2px;
font-size: 14px;
}
.ecm-returnsPolicy{
padding-top: 30px;
}
.ecm-termsCondition{
padding-top: 30px;
}
td{
font-size: 15px;
font-weight: bold;
color: dimgrey;
height: 50px;
}
.attraction{
font-size: 18px;
padding-bottom: 15px;
display: block;
}
ul{
font-weight: 100;
font-size: 14px;
color: #444;
text-align: justify;
padding-left: 30px
}
/* Recent View */
.ecm-recent-view {
height: 300px;
}
@media screen and (max-width: 640px) {
.ecm-recent-view {
display: none;
}
.ecm-itemsDetailsInfo {
width: 100%;
}
}
<div *ngIf="itemDetail">
<md-card style="margin-top: 15px;">
<div class="row">
<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- -->
<span class="small-12 medium-6 large-6 columns image">
<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>
</span>
<!-- -----------------------ITEM-IMAGE ENDS HERE-------------------------------- ----->
<!-- ----------------------ITEM-DETAILS START HERE-------------------------------- -->
<div class="small-12 medium-6 large-6 columns head">
<span class="ecm-itemCategory">{{itemDetail.itemDetailData.itemCategory}}
<div class="ecm-share">
<i class="material-icons" style="color: dimgray;">&#xE80D;</i>
<span class="share">Share</span>
</div>
</span>
<span class="ecm-itemShDescr">{{itemDetail.itemShDescr}}</span>
<span class="ecm-itemDescr">{{itemDetail.itemDescr}}</span>
<div class="ecm-Training-Speciality">
<span class="ecm-other-titles">Training by</span>
<div class="medium-12 columns ecm-SpecialityInfo">
<span class="ecm-Training-Info"><span class="ecm-Trainers">Base</span>near {{myCity}}<i class="material-icons" style="font-size: 16px; padding-left: 4px;padding-top: 1px; color: mediumvioletred;">&#xE55F;</i></span>
</div>
</div>
<a (click)="scrollToReviews.emit();" class="link-reviews">
<span *ngIf="itemDetail.itemRatings.AVG_RATING == 0 && itemDetail.itemRatings.NO_OF_REVIEWS == 0 " style="color: gray; font-size: 18px;">
Be the first to Review this product
</span>
<span *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex;" >
<span class="ecm-ratingStars" *ngFor="let a of createRatings(itemDetail.itemRatings.AVG_RATING)">&#x2605;</span>
<span class="ecm-itemAvgRating">{{itemDetail.itemRatings.AVG_RATING}} Ratings</span>
<span class="ecm-itemNumOfReviews">|<span style="padding-left: 12px;"> {{itemDetail.itemRatings.NO_OF_REVIEWS}} Reviews</span></span>
</span>
</a>
<div style="padding-top: 9px;">
<!-- <span class="ecm-itemExtraInfo">{{itemDetail.itemDetailData.itemExtraInfo}}</span> -->
<span class="ecm-itemExtraInfo"> 15 July to 18 July 2017 </span>
<span class="ecm-itemExtraInfo" style="padding-left: 15px">|<span style="padding-left: 15px">11AM, 2PM, 4PM</span></span>
</div>
<div class="ecm-Overview">
<span class="ecm-other-titles">Overview</span>
<div class="medium-12 columns OverViewInfo">
<span class="ecm-other-Overview">{{itemDetail.itemOverview}}</span>
</div>
</div>
<div class="medium-12 columns ecm-saveButton">
<div class="ecm-DiscountRate">
<span class="ecm-itemDiscountedRate" style="font-size: 28px;">
₹ {{itemDetail.itemDiscountedRate}}
</span>
<span class="ecm-Onwards" style="font-size: 18px;"> Onwards </span>
</div>
<button md-raised-button class="button medium-btn booknow"
(click)="doActivity.emit({activity:'BOOK_NOW', data: itemDetail.itemCode });">Book Now</button>
</div>
<div class="medium-12 columns ecm-payments">
<i class="material-icons">&#xE8E8;</i>
<span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>
</div>
</div>
</div>
</md-card>
<!-- ------------------------------- ITEM-DETAILS ENDS HERE-------------------------------- -->
<div class="row ecm-card">
<!-- <div class="medium-12 col-sm-9 ecm-itemsDetailsInfo" > -->
<div class="medium-8 large-8 columns ecm-itemsDetailsInfo" id="item-detail-2">
<md-card>
<div>
<span class="ecm-itemDeatils">Items Details</span>
</div>
<hr style="margin-top: 8px;">
<div class="ecm-Overview">
<span class="ecm-other-title">Description</span>
<span class="ecm-other-detail">
<ecm-readmore [text]="itemDetailpath.productDescription" [maxLength]="50"></ecm-readmore>
</span>
</div>
<!-- <div class="Attraction" style="padding-top: 24px;">
<span class="attraction">Attraction</span>
<ul *ngFor = "let a of actionPerformed">
<li>{{a.actionPerformed}}</li>
</ul>
</div>
-->
<div class="Attraction" style="padding-top: 24px;">
<span class="attraction">Activities</span>
<ul *ngFor = "let a of activityPerformed">
<li>{{a.activity}}</li>
</ul>
</div>
<div class="Attraction" style="padding-top: 24px;">
<span class="attraction">Transporation</span>
<ul *ngFor = "let a of transPortFacility">
<li>{{a.transportFacility}}</li>
</ul>
</div>
<div class="Attraction" style="padding-top: 24px;">
<span class="attraction">Things To Carry</span>
<ul *ngFor = "let a of thingsToCarry">
<li>{{a.thingsToCarry}}</li>
</ul>
</div>
<div class="Attraction" style="padding-top: 24px;">
<span class="attraction">Advisory</span>
<ul>
<li>{{itemDetailpath.advisory}}</li>
</ul>
</div>
<div class="ecm-returnsPolicy">
<span class="ecm-other-title">Cancellation Policy</span>
<span class="ecm-other-detail">
Cancellation is a scheme provided by respective sellers directly under this policy in terms of
which the option of replacement and/or refund is offered by the respective sellers to you.All products listed under a particular
category may not have the same cancellation policy.Kindly check the respective items's applicable cancellation policy on the
product page for any exception on the table show below.
</span>
</div>
<div class="ecm-termsCondition">
<span class="ecm-other-title">Terms and Conditions</span>
<span class="ecm-other-detail">
The images represent actual product through color of the image and product may slightly differ.
For warranty-related claims,please contact the brand service center.
</span>
</div>
</md-card>
</div>
<div class="medium-4 large-4 columns ecm-recent-view">
<ecm-recent-view #recentView> </ecm-recent-view>
</div>
</div>
</div>
\ No newline at end of file
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
import { EcmTemplateInterface } from './ecm-template.component';
import { ItemDetail } from '../../ecm-model/product-detail-model';
import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
import { Item } from '../../ecm-model/product-model';
@Component( {
selector: 'ecm-training',
templateUrl: './ecm-training.component.html',
styleUrls: ['./ecm-training.component.css']
})
export class EcmTrainingComponent implements OnInit, EcmTemplateInterface {
@Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter();
@Output() doActivity = new EventEmitter();
@ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
counterValue = 1;
itemPrice = 1000;
total = this.itemPrice;
userActionUrl= '/ecm/service/feeds/cart';
itemCode;
myCity;
actionPerformed
activityPerformed ;
transPortFacility;
thingsToCarry;
itemDetailpath;
constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
ngOnInit() {
console.log( "ngOnInit EcmTrainingComponent Object Keys : " + Object.keys( this.itemDetail ) )
console.log( this.itemDetail );
this.route.params.subscribe( params => {
this.itemCode = params['key'];
});
this.myCity = localStorage.getItem('mycity')
}
ngAfterViewInit(){
this.recentView.ngOnInit();
}
ngOnDestroy() {
if( this.recentView )
this.recentView.doDestroy( this.itemDetail.itemCode );
}
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;
}
}
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