Skip to content

B
business-java
Commit 315a508c authored by prumde's avatar prumde
Browse files
Options

Updated for variants 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174489 ce508802-f39f-4f6c-b175-0d175dae99d5
parent a1ebc091
Hide whitespace changes
Inline Side-by-side
Showing with 1420 additions and 491 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.css
View file @ 315a508c
...@@ -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;
} }
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.html
View file @ 315a508c
...@@ -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>
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.ts
View file @ 315a508c
...@@ -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
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-outing.component.css
View file @ 315a508c
.head{ @media screen and (max-width: 640px) {
margin-top: 16px; md-card {
margin: 0px 15px;
}
.wishButton {
right: 0 !important;
}
} }
.ecm-other-title {
font-size: 18px; .ecm-product-ratings {
padding-bottom: 15px; color: rgb(500, 150, 50);
display: block; font-size: large;
display: block;
padding-right: 10px;
} }
.ecm-other-titles { .ecm-null-ratings {
font-size: 16px; color: lightgray;
font-size: large;
}
.Add_to_cart {
background: #fff;
color: mediumvioletred;
max-width: 190px;
height: 50px;
font-size: 15px;
line-height: 15px;
text-align: center;
/* border-radius: 2px; */
position: relative;
/* float: left; */
width: calc(50% - 40px);
font-weight: 700;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
}
.Buy_now {
background: mediumvioletred;
color: #fff;
max-width: 190px;
height: 50px;
font-size: 15px;
line-height: 15px;
text-align: center;
position: relative;
width: calc(50% - 40px);
margin-left: 10px;
margin-right: 10px;
font-weight: bold; font-weight: bold;
padding-bottom: 15px; box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
color: dimgrey; border-radius: 3px;
} }
.ecm-other-detail { .link_button {
font-weight: 100; color: mediumvioletred;
font-size: 14px; font-weight: bold;
color: #444; padding-left: 10px;
text-align: justify; padding-right: 10px;
} }
.ecm-other-Overview { ul {
font-weight: 100; list-style: none;
font-size: 14px; display: inline;
text-align: justify;
} }
.btn {
font-weight: bold;
color: mediumvioletred;
text-align: center;
line-height: 18px;
}
.ecm-other-details { .selected {
padding-top: 30px; font-weight: bold;
color: white;
text-align: center;
line-height: 18px;
} }
.Overview{
padding-top: 30px; .link_button_size {
padding-left: .625rem; color: mediumvioletred;
padding-right: .625rem; font-weight: bold;
width: 100%; padding-left: 15px;
float: left; font-size: 14px;
} }
.ecm-itemCategory
{ .symbol {
display: block; display: inline-block;
color: mediumvioletred; vertical-align: super;
font-size: 18px; /*
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid black;
border: black;
*/
} }
.ecm-itemShDescr .back {
{ background-color: mediumvioletred;
display: block;
padding-top: 15px;
font-size: 14px;
font-weight: bold;
color: mediumvioletred;
} }
.ecm-itemDescr{ .back_selected {
background-color: ghostwhite;
display: block;
font-size: 20px;
padding-top: 10px;
font-weight: 600;
} }
.ecm-itemAvgRating{ .ecm-Info {
color: rgb(36, 34, 34); padding-left: 8px;
padding-left: 10px; vertical-align: super;
padding-right: 12px;
font-size: 15px;
} }
.ecm-itemNumOfReviews{ .ecm-payments {
color: rgb(36, 34, 34); font-size: 13px;
font-size: 15px; color: #787878;
padding: 32px 0px 36px 5px;
} }
.ecm-itemExtraInfo{ .ecm-share {
font-size: 15px; float: right;
font-weight: 600; cursor: pointer;
font-weight: bold;
font-size: 14px;
padding-right: 25px;
padding-top: 25px;
} }
.ecm-Onwards{ .share {
font-weight: 100; vertical-align: super;
color: dimgray;
} }
.ecm-itemCostRate{ .arrow {
font-size: 15px; vertical-align: middle;
color: gray; margin-left: -2px;
font-weight: 100; font-size: 21px;
} }
.ecm-itemDiscount /* new */
{ .ecm-other-title {
padding-left: 10px; font-size: 16px;
color: forestgreen; padding-bottom: 6px;
display: block;
font-weight: bold;
} }
.ecm-Adult{
display: block; .ecm-other-detail {
padding-top: 10px; font-size: 17px;
font-size: 18px; text-align: justify;
} }
.ecm-Instruction{
padding-bottom: 10px; .short-detail {
color: gray; padding-bottom: 15px;
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; .ecm-card {
color: mediumvioletred; /* margin-top: 20px; */
position: relative; /* max-width: 75rem; */
text-align: center; /* margin-left: auto; */
cursor: pointer; /* margin-right: auto; */
border: 9px solid transparent; padding-top: 20px;
font-weight: lighter; }
}
.ecm-ratingStars{ .ecm-itemDeatils {
color: rgb(500, 150, 50); padding-bottom: 21px;
font-size: 25px; border-bottom: 2px solid #c71585;
margin-top: -10px; font-size: 16px;
} margin-left: 17px;
.ecm-saveButton{ }
.ecm-returnsPolicy {
padding-top: 30px; padding-top: 30px;
font-size: 16px;
} }
.ecm-extrainfo{
width: 300px; .ecm-termsCondition {
padding-top: 20px; padding-top: 30px;
padding-bottom: 30px;
font-size: 16px;
} }
.image
{
padding-top: 16px; .image {
border-right: 1px solid #f3f3f3;
} }
.savelater
{ .head {
padding-left: 30px; padding-left: 25px;
padding-right: 30px; /*border-left: 1px solid #f3f3f3;*/
background-color: ghostwhite; }
.link_changebutton {
color: mediumvioletred; color: mediumvioletred;
padding-top: 10px; font-weight: bold;
padding-bottom: 10px; position: absolute;
border-radius: 3px;
} }
.booknow /* new*/
{ @media screen and (min-width: 20rem) {
background-color: mediumvioletred; .Available {
padding-left: 75px; font-size: calc(0.8rem + 1.2 * (( 100vw - 20rem)/30));
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; @media screen and (min-width: 50rem) {
padding-left: 13px; .Available {
margin-left: -13px; font-size: 2rem;
}
} }
.OverViewInfo
{ .ecm-returnsPolicy {
padding-left: 90px; padding-top: 30px;
margin-top: -21px;
width: 100%;
} }
.ecm-DiscountRate .ecm-termsCondition {
{ padding-top: 30px;
margin-left: -13px;
padding-bottom: 25px;
} }
.ecm-payments
{ .attraction {
padding-top: 18px; font-size: 16px;
margin-left: -13px; padding-bottom: 6px;
font-size: 15px; display: block;
color: dimgrey; font-weight: bold;
} }
.ecm-Info{ .extra-details {
padding-left: 8px;
vertical-align: super; }
.data-title {
padding: 5px 0px 5px 0px;
color: #787878;
font-weight: 700;
} }
.ecm-share{ .data-title-detail {
color: black;
padding: 5px;
font-weight: inherit;
padding: 15px;
}
.product-detail-card {
margin-top: 5px;
padding: 0;
}
.ecm-product-details {
padding-right: 10px;
}
.ecm-recent-view {
padding-left: 10px;
}
@media screen and (max-width: 640px) {
.ecm-recent-view {
display: none;
}
float: right; .ecm-product-details {
width: 100%;
}
}
hr {
margin-top: 8px;
}
.attribute-button{
color: black;
background-color: #efecec;
width: 36px;
height: 36px;
min-width: 36px;
padding: 0;
margin: 0;
line-height: 36px;
border-radius: 100%;
box-shadow: none;
font-size: 15px;
}
.attribute-button .mat-button-ripple {
border-radius: 100% !important;
}
.highlight {
color: white;
background-color: mediumvioletred;
cursor: auto;
font-weight: bold;
}
.highlight:HOVER {
color: white !important;
}
.selected {
box-shadow: 0 0 1px 1px mediumvioletred;
cursor: auto;
}
.color-title {
color: #787878;
font-size: 14px;
position: relative;
display: inline-block;
height: 60px;
line-height: 60px;
float: left;
margin: 0;
padding: 0;
font-weight: 700;
padding-right: 30px;
}
.size-title {
color: #787878;
font-size: 14px;
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
float: left;
margin: 0;
padding: 0;
font-weight: 700;
padding-right: 30px;
}
.size-variant {
margin-right: 14px;
cursor: pointer;
display: inline-block;
}
.color-variant {
margin-right: 14px;
padding: 0;
height: 60px;
width: 60px;
position: relative;
display: inline-block;
cursor: pointer; cursor: pointer;
} }
.share{ .help-icon {
cursor: pointer;
color: black;
}
.delivery-info {
vertical-align: super; vertical-align: super;
color: dimgray;
} }
.material-icons .offers-section {
{ padding-bottom: 14px;
font-size: 26px; font-size: 14px;
} }
.ecm-Outing-Speciality{
padding-left: 13px; .seller-name {
margin-left: -13px; display: inline;
color: mediumvioletred;
font-size: 14px;
font-weight:bold;
padding-left: 2px;
padding-right: 2px;
cursor: pointer;
} }
.ecm-SpecialityInfo{
padding-left: 90px; .sold-by-title {
margin-top: -21px; display: inline;
width: 100%; color: #787878;
font-size: 14px;
font-weight: 700;
}
.item-descr {
display: block;
font-size: 18px;
font-weight: 600;
padding-right: 120px;
line-height: 24px;
color: black;
}
.item-shdescr {
display: block;
font-size: 14px;
font-weight: bold;
padding-bottom: 8px;
padding-top: 28px;
}
.subcat-link {
color: mediumvioletred;
}
.item-descount-rate {
font-size: 25px;
font-weight:bold;
line-height: 1;
} }
.ecm-Outing-Info{
.item-cost-rate {
font-size: 14px;
color: gray;
font-weight: 100; font-weight: 100;
font-size: 14px;
text-align: justify;
vertical-align: top;
} }
.ecm-Outers{
color: mediumvioletred; .details-title {
padding-right: 10px; font-size: 14px;
font-weight: 600; color: #787878;
margin-left: -14px; width: 55px;
display: inline-block;
vertical-align: top; vertical-align: top;
font-weight: 700;
}
.Available {
font-size: 14px;
color: #444;
padding-left: initial;
} }
.ecm-itemDiscountedRate{
font-size: 28px; .available-title {
font-weight: 600; display:inline;
color: forestgreen;
font-weight:bold;
} }
.service-title {
font-size: 14px;
color: #444;
padding-left: initial;
}
/* new */ .buy-cart-button {
padding-top: 8px;
}
.item-discount {
padding-left: 10px;
color: forestgreen;
font-weight:bold;
font-size: 14px;
}
.ecm-other-title { .reviews-no {
font-size: 18px; padding-left: 12px;
padding-bottom: 15px;
display: block;
} }
.ecm-other-detail {
font-weight: 100; .share-icon {
font-size: 14px; color: dimgray;
font-size: 20px;
}
.item-descount-rate-section {
padding-top: 14px;
}
.item-detail-1{
font-size: 14px;
display: inline-block;
color: #444; color: #444;
text-align: justify; padding-left: 45px;
line-height: 1.5;
} }
.ecm-card {
/* margin-top: 20px; */ .service-detail {
/* max-width: 75rem; */ font-size: 14px;
/* margin-left: auto; */
/* margin-right: auto; */
padding-top: 25px;
} }
.ecm-itemDeatils{
padding-bottom: 8px; .review-msg-title {
border-bottom: solid mediumvioletred; color: black;
border-bottom-width: 2px; font-size: 14px;
font-size: 14px; }
.discount-validity {
color: black;
}
.secure-icon {
font-size: 20px;
} }
.ecm-returnsPolicy{ .details-list {
padding-top: 30px; color: black;
line-height: 1.5;
} }
.ecm-termsCondition{ .item-details-title {
border-bottom: 1px solid #f3f3f3;
padding: 20px;
}
.extra-details-card {
padding: 0;
}
.extra-details-section {
padding: 30px;
}
.extra-detail-font{
}
.attrib-container {
padding-top: 30px; padding-top: 30px;
} }
td{ .attrib-container > ul {
font-size: 15px; font-size: 17px;
font-weight: bold; }
color: dimgrey;
li::BEFORE {
padding-right: 10px !important;
content: "•";
color: gray; /* or whatever color you prefer */
}
.product-image {
min-height: 400px;
max-height: 600px;
position: relative;
display: block;
/* height: 600px; */
width: 100%;
}
.ecm-ratingStars {
color: rgb(500, 150, 50);
}
.ecm-itemAvgRating {
color: black;
padding-right: 5px;
padding-left: 5px;
line-height: 20px;
}
.ecm-itemNumOfReviews {
padding-left: 5px;
color: black;
border-left: 1px solid #f3f3f3;
line-height: 20px;
}
md-card {
border-radius: 3px !important;
box-shadow: 0 0px 16px -3px rgba(0,0,0,.1) !important;
}
/* Mobile View*/
.mobi-buy-cart-button{
position: fixed !important;
bottom: 0 !important;
height: 65px !important;
background: #fff;
z-index: 2;
width: 100%;
right: 0%;
}
.mobi-buy-cart-button > .Add_to_cart{
background: #fff;
color: mediumvioletred;
height: 50px; height: 50px;
font-size: 15px;
line-height: 15px;
text-align: center;
position: relative;
width: calc(50% - 40px);
font-weight: 700;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
margin-left: 40px;
margin-right: 18px;
margin-top: -7px;
}
.mobi-buy-cart-button > .Buy_now{
background: mediumvioletred;
color: #fff;
max-width: 190px;
height: 50px;
font-size: 15px;
line-height: 15px;
text-align: center;
position: relative;
width: calc(50% - 40px);
font-weight: bold;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
margin-top: -7px;
margin-left: -7px;
margin-right: 29px;
}
.wishButton{
float: right;
z-index: 1;
/* padding-top: 18px; */
background: none;
color: mediumvioletred;
top: 15px;
right: 50%;
position: absolute;
box-shadow: none;
} }
.attraction{
font-size: 18px; .total-cost-container {
padding-bottom: 15px; padding: 20px 0;
}
.onwards-title {
}
.date-select-option {
width: 200px;
}
.time-slot-title {
display: block; display: block;
font-size: 14px;
padding-bottom: 10px;
color: #787878;
} }
ul{
font-weight: 100; .time-slot-chips {
padding: 0;
float: inherit;
}
.time-slot-chip {
border-radius: 5px !important;
padding: 14px 25px !important;
font-weight: 700;
background-color: #f2f2f2;
cursor: pointer !important;
font-size: 14px; font-size: 14px;
color: #444; margin-right: 15px;
text-align: justify;
padding-left: 30px
} }
/* Recent View */ .attrib-header {
.ecm-recent-view { font-size: 20px;
height: 300px; padding-bottom: 15px;
display: block;
font-weight: bold;
} }
@media screen and (max-width: 640px) { .overViewInfo {
.ecm-recent-view { padding-left: 25px;
display: none; }
}
.ecm-Overview {
.ecm-itemsDetailsInfo { display: flex;
width: 100%; padding-top: 20px;
} padding-bottom: 15px;
}
.date-selection, .time-selection {
padding-bottom: 20px;
} }
.header-attribs-title {
width: 105px;
display: inline-block;
font-size: 15px;
color: #787878;
font-weight: 800;
}
.time-select-chips {
display: inline-flex;
}
.selected {
background: mediumvioletred !important;
color: #fff !important;
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-outing.component.html
View file @ 315a508c
<div *ngIf="itemDetail">
<md-card style="margin-top: 15px;"> <md-card class="product-detail-card">
<div class="row">
<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- --> <div class="row">
<span class="small-12 medium-6 large-6 columns image"> <!-- ------------------------HANDICRAFT-IMAGE START HERE-------------------------------- -->
<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image> <div class="small-12 medium-6 large-6 columns image">
</span> <div>
<!-- -----------------------ITEM-IMAGE ENDS HERE-------------------------------- -----> <md-button-toggle class="wishButton">
<md-icon style="color: mediumvioletred; font-size: 28px;" *ngIf="!inWishlist" (click)="addToWishlist();">favorite_border</md-icon>
<md-icon style="color: mediumvioletred; font-size: 28px;" *ngIf="inWishlist" (click)="removeFromWishlist();" >favorite</md-icon>
<!-- ----------------------ITEM-DETAILS START HERE-------------------------------- --> </md-button-toggle>
<div class="small-12 medium-6 large-6 columns head"> </div>
<div class="md-card-image">
<span class="ecm-itemCategory">{{itemDetail.itemDetailData.itemCategory}} <ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" class="product-image"></ecm-image>
<div class="ecm-share"> </div>
<i class="material-icons" style="color: dimgray;">&#xE80D;</i> </div>
<span class="share">Share</span>
</div> <!-- ----------------------HANDICRAFT-DETAILS START HERE-------------------------------- -->
</span> <div class="small-12 medium-6 large-6 columns head">
<md-card-content>
<span class="ecm-itemShDescr">{{itemDetail.itemShDescr}}</span> <div>
<span class="ecm-itemDescr">{{itemDetail.itemDescr}}</span> <div class="ecm-share">
<i class="material-icons share-icon">&#xE80D;</i>
<div class="ecm-Outing-Speciality"> <span class="share">Share</span>
<span class="ecm-other-titles">Hosted by</span> </div>
<div class="medium-12 columns ecm-SpecialityInfo"> <span class="item-shdescr">
<span class="ecm-Outing-Info"><span class="ecm-Outers">Aqua Diver</span>near {{myCity}}<i class="material-icons" style="font-size: 16px; padding-left: 4px;padding-top: 1px; color: mediumvioletred;">&#xE55F;</i></span> <a [routerLink]="['/products', itemDetail.itemSubCategory.scatCode]" class="subcat-link">
</div> {{itemDetail.itemSubCategory.shDescr}}
</div> </a>
</span>
<a (click)="scrollToReviews.emit();" class="link-reviews"> <span class="item-descr"> {{itemDetail.itemHeader.itemDescr}} </span>
<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 class="sold-by-title">Hosted by</span>
</span> <span class="seller-name">{{itemDetail.itemDetail1?.sellerInfo.name}}</span><br>
<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} });">
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 (click)="scrollToReviews.emit();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex; cursor: pointer;" >
<span class="ecm-ratingStars" *ngFor="let a of createRatings(itemDetail.itemRatings.AVG_RATING)">&#x2605;</span> <rating [rate]="itemDetail.itemRatings.AVG_RATING" [isSmallRatings]=true></rating>
<span class="ecm-itemAvgRating">{{itemDetail.itemRatings.AVG_RATING}} Ratings</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 *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS != 0" class="ecm-itemNumOfReviews">{{itemDetail.itemRatings.NO_OF_REVIEWS}} Reviews</span>
</span> <span *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS == 0" class="ecm-itemNumOfReviews" (click)="doActivity.emit({activity:'WRITE_REVIEW', data: {'firstReview': true} });">Review this product</span>
</a> </span>
</a>
<div style="padding-top: 9px;">
<!-- <span class="ecm-itemExtraInfo">{{itemDetail.itemDetailData.itemExtraInfo}}</span> --> <div class="ecm-Overview">
<span class="ecm-itemExtraInfo"> 15 July to 18 July 2017 </span> <span class="header-attribs-title">Overview</span>
<span class="ecm-itemExtraInfo" style="padding-left: 15px">|<span style="padding-left: 15px">11AM, 2PM, 4PM</span></span> <div class="medium-12 columns overViewInfo">
</div> <span class="ecm-other-Overview">
<ecm-readmore [text]="overview" [maxLength]="150"></ecm-readmore>
<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>
<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> </div>
</div>
</md-card> <ecm-variants [itemVariants]="itemDetail.itemVariants" [itemCode]="itemCode" (selected)="loadItem($event);"></ecm-variants>
<!-- ------------------------------- ITEM-DETAILS ENDS HERE-------------------------------- --> <div class="total-cost-container">
<span class="item-descount-rate">
<!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS START HERE--------------- --> Rs. {{itemDetail.itemHeader.itemDiscountedRate | number : '3.1-5'}}
<!-- <div class="row"> </span>
<div class="medium-6 columns medium-5 columns ecm-other-details"> <span class="onwards-title">
<span class="ecm-other-title">Packages Include</span> Onwards
<li class="ecm-other-detail" *ngFor="let package of itemDetail.itemDetailData.itemPackages">{{package.package}}</li> </span>
</div> </div>
<div class="medium-6 medium-5 columns ecm-other-details">
<span class="ecm-other-title">Venue Details</span> <div [ngClass]="{'buy-cart-button': ( clientWidth > 640 ) , 'mobi-buy-cart-button': ( clientWidth < 639 ) }">
<span class="ecm-other-detail">{{itemDetail.itemDetailData.itemVenue}}</span> <button md-button class="button medium-btn Buy_now" (click)="doActivity.emit({activity:'BUY_NOW', data: {'item' : itemDetail, 'isAddToCart' : isAddToCart} });">
Book Now
</button>
</div> </div>
</div> -->
<!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS ENDS HERE----------------- -->
<div class="row ecm-card"> </div>
<!-- <div class="medium-12 col-sm-9 ecm-itemsDetailsInfo" > --> </md-card-content>
<div class="medium-8 large-8 columns ecm-itemsDetailsInfo" id="item-detail-2">
<md-card>
<div> <div class="medium-12 columns ecm-payments">
<span class="ecm-itemDeatils">Items Details</span> <i class="material-icons secure-icon"> &#xE8E8;</i>
</div> <span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>
<hr style="margin-top: 8px;"> </div>
<div class="ecm-Overview"> </div>
<span class="ecm-other-title">Description</span> </div>
<span class="ecm-other-detail"> </md-card>
<ecm-readmore [text]="itemDetailpath.productDescription" [maxLength]="50"></ecm-readmore> <!-- ----------------------HANDICRAFT-DETAILS ENDS HERE-------------------------------- -->
</span>
</div> <div class="row ecm-card" #itemDetails>
<div class="medium-8 large-8 columns ecm-product-details">
<div class="Attraction" style="padding-top: 24px;"> <md-card class="extra-details-card">
<span class="attraction">Attraction</span> <div class="item-details-title">
<ul *ngFor = "let a of actionPerformed"> <span class="ecm-itemDeatils">Items Details</span>
<li>{{a.actionPerformed}}</li> </div>
<div class="extra-details-section">
<!-- <li>A 4th century fort,Thala,stands in the middle of the of a forest and overlooks the hilly terrain</li> <div class="ecm-description">
<li>There are quite Few waterFalls in this region the mostpopular is of being taksehi castel</li> <span class="attrib-header">Description</span>
<li>Devi kedar janni hills</li> <span class="ecm-other-detail">
<li>Bhira Dam</li> --> <ecm-readmore [text]="overview" [maxLength]="150"></ecm-readmore>
</ul> </span>
</div>
</div>
<div class="attrib-container" *ngIf="attractions.length > 0">
<div class="Attraction" style="padding-top: 24px;"> <span class="attrib-header">Attractions</span>
<span class="attraction">Activities</span> <ul *ngFor = "let attraction of attractions">
<ul *ngFor = "let a of activityPerformed"> <li>{{attraction}}</li>
<li>{{a.activity}}</li> </ul>
</ul> </div>
</div>
<div class="attrib-container" *ngIf="activities.length > 0">
<div class="Attraction" style="padding-top: 24px;"> <span class="attrib-header">Activities</span>
<span class="attraction">Transporation</span> <ul *ngFor = "let activity of activities">
<ul *ngFor = "let a of transPortFacility"> <li>{{activity}}</li>
<li>{{a.transportFacility}}</li> </ul>
</ul> </div>
</div>
<div class="attrib-container" *ngIf="transportation.length > 0">
<div class="Attraction" style="padding-top: 24px;"> <span class="attrib-header">Transporation</span>
<span class="attraction">Things To Carry</span> <ul *ngFor = "let transport of transportation">
<ul *ngFor = "let a of thingsToCarry"> <li>{{transport}}</li>
<li>{{a.thingsToCarry}}</li> </ul>
</ul> </div>
</div>
<div class="Attraction" style="padding-top: 24px;">
<span class="attraction">Advisory</span>
<ul>
<li>{{itemDetailpath.advisory}}</li>
</ul>
</div>
<div class="ecm-returnsPolicy"> <div class="attrib-container" *ngIf="thingsToCarry.length > 0">
<span class="ecm-other-title">Cancellation Policy</span> <span class="attrib-header">Things To Carry</span>
<ul *ngFor = "let item of thingsToCarry">
<li>{{item}}</li>
</ul>
</div>
<div class="attrib-container" *ngIf="advisory.length > 0">
<span class="attrib-header">Advisory</span>
<ul *ngFor="let advise of advisory">
<li>{{advise}}</li>
</ul>
</div>
<div class="ecm-returnsPolicy">
<span class="attrib-header">Cancellation Policy</span>
<span class="ecm-other-detail"> <span class="ecm-other-detail">
Cancellation is a scheme provided by respective sellers directly under this policy in terms of Return 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 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 category may not have the same cancellation policy.Kindly check the respective items's applicable return policy on the
product page for any exception on the table show below. product page for any exception on the table show below.
</span> </span>
</div> </div>
<div class="ecm-termsCondition"> <div class="ecm-termsCondition">
<span class="ecm-other-title">Terms and Conditions</span> <span class="attrib-header">Terms and Conditions</span>
<span class="ecm-other-detail"> <span class="ecm-other-detail">
The images represent actual product through color of the image and product may slightly differ. 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. For warranty-related claims,please contact the brand service center.
</span> </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> </div>
</md-card>
</div>
<div class=" medium-4 large-4 columns ecm-recent-view">
<ecm-recent-view #recentView> </ecm-recent-view>
</div>
</div>
<!--
<div class="row">
<div class="small-12 medium-6 large-6 columns show-for-small-only mobi-buy-cart-button">
<button md-button class="button medium-btn mobi-Add_to_cart"
(click)="doActivity.emit({activity:'ADD_CART', data: itemDetail.itemCode });">Add
to cart</button>
<button md-button class="button medium-btn mobi-Buy_now"
[routerLink]="['/checkout']" (click)="doActivity.emit({activity:'ADD_CART', data: itemDetail.itemCode });">Buy
Now</button>
</div>
</div> </div>
-->
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-outing.component.ts
View file @ 315a508c
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> = [];
constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { } transportation: Array<string> = [];
thingsToCarry: Array<string> = [];
advisory: Array<string> = [];
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.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.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
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-training.component.css 0 → 100755
View file @ 315a508c
.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%;
}
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-training.component.html 0 → 100755
View file @ 315a508c
<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
ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-training.component.ts 0 → 100755
View file @ 315a508c
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