Commit 5049d57b authored by prumde's avatar prumde

Some Changes Has Done in ecm-template


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174377 ce508802-f39f-4f6c-b175-0d175dae99d5
parent c64991dc
.head{
margin-top: 16px;
}
.ecm-other-title {
font-size: 18px;
padding-bottom: 15px;
display: block;
}
.ecm-other-titles {
font-size: 15px;
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;
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;
}
.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: 18px;
}
.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;
}
.ecm-Chef{
color: mediumvioletred;
padding-right: 10px;
font-weight: 600;
margin-left: -14px;
vertical-align: top;
}
.ecm-Chef-Speciality{
padding-left: 13px;
margin-left: -13px;
}
.ecm-SpecialityInfo{
padding-left: 90px;
margin-top: -21px;
width: 100%;
}
.ecm-Chef-Info{
font-weight: 100;
font-size: 14px;
text-align: justify;
vertical-align: top;
}
<p> <div *ngIf="itemDetail">
ecm-celebration works!
</p> <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">
<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}} 2017</span>
<div class="ecm-Chef-Speciality">
<span class="ecm-other-titles">Hosted by</span>
<div class="medium-12 columns ecm-SpecialityInfo">
<span class="ecm-Chef-Info"><span class="ecm-Chef"> MCC College of Arts </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.itemAvgRating == 0 && itemDetail.itemNumOfReviews == 0 " style="color: gray; font-size: 18px;">
Be the first to Review this product
</span>
<span *ngIf="itemDetail.itemAvgRating > 0 || itemDetail.itemNumOfReviews > 0 " >
<span class="ecm-ratingStars" *ngFor="let a of createRatings(itemDetail.itemAvgRating)">&#x2605;</span>
<span class="ecm-itemAvgRating">{{itemDetail.itemAvgRating}} Ratings</span>
<span class="ecm-itemNumOfReviews">| {{itemDetail.itemNumOfReviews}} Reviews</span>
</span>
</a>
<div style="padding-top: 9px;">
<span class="ecm-itemExtraInfo">{{itemDetail.itemDetailData.itemExtraInfo}}</span>
<span class="ecm-itemExtraInfo">| 11AM, 2PM, 4PM</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)="addItemInCart(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>
<!-- ------------------------------- ITEM-DETAILS ENDS HERE-------------------------------- -->
</div>
\ No newline at end of file
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
import { EcmTemplateInterface } from './ecm-template.component'; import { EcmTemplateInterface } from './ecm-template.component';
import { ItemDetail } from '../../ecm-model/product-detail-model'; import { ItemDetail } from '../../ecm-model/product-detail-model';
...@@ -12,9 +13,44 @@ export class EcmCelebrationComponent implements OnInit, EcmTemplateInterface { ...@@ -12,9 +13,44 @@ export class EcmCelebrationComponent implements OnInit, EcmTemplateInterface {
@Input() itemDetail: ItemDetail; @Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter(); @Output() scrollToReviews = new EventEmitter();
constructor() { }
userActionUrl= '/ecm/service/feeds/cart';
itemCode;
myCity;
constructor(private route: ActivatedRoute, private router: Router, private http: Http ) { }
ngOnInit() { ngOnInit() {
console.log( "ngOnInit EcmCelebrationComponent Object Keys : " + Object.keys( this.itemDetail ) )
console.log( this.itemDetail );
this.route.params.subscribe( params => {
this.itemCode = params['key'];
});
this.myCity = localStorage.getItem('mycity');
} }
createRatings( ratings ) {
var rating: number[] = [];
for ( var i = 1; i <= ratings; i++ )
{
rating.push( i );
}
return rating;
}
addItemInCart(itemCode)
{
console.log("StoreInCart Called");
this.http.post(this.userActionUrl+'/'+itemCode, {})
.subscribe(data => {
console.log("Inserted in Cart");
}, error => {
console.log(error.json());
});
}
} }
.head{
margin-top: 16px;
}
.ecm-other-title {
font-size: 18px;
padding-bottom: 15px;
display: block;
}
.ecm-other-titles {
font-size: 15px;
font-weight: bold;
padding-bottom: 15px;
color: dimgrey;
}
.ecm-other-detail {
font-weight: 100;
font-size: 14px;
color: #444;
text-align: justify;
}
.ecm-other-Speciality {
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-Speciality{
padding-top: 20px;
padding-left: 13px;
margin-left: -13px;
}
.SpecialityInfo
{
padding-left: 90px;
margin-top: -21px;
width: 100%;
}
.ecm-DiscountRate
{
margin-left: -13px;
padding-bottom: 18px;
}
.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;
}
.ecm-Chef{
color: mediumvioletred;
padding-right: 10px;
font-weight: 600;
margin-left: -14px;
vertical-align: top;
}
.ecm-Chef-Speciality{
padding-left: 13px;
margin-left: -13px;
}
.ecm-SpecialityInfo{
padding-left: 90px;
margin-top: -21px;
width: 100%;
}
.ecm-Chef-Info{
font-weight: 100;
font-size: 14px;
text-align: justify;
vertical-align: top;
}
.ecm-itemDiscountedRate{
font-size: 28px;
font-weight: 600;
}
.md-dialog-title{
font-weight: 100;
font-size: 24px;
padding-left: 5px
}
.md-dialog-content{
display: block;
margin: 0 -24px;
padding: 0 58px;
max-height: 65vh;
overflow: auto;
padding-bottom: 45px;
padding-top: 12px;
font-weight: 100;
font-size: 18px;
}
.ecm-Butoons-Checkout{
background-color: mediumvioletred;
padding-left: 65px;
padding-right: 65px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 44px;
border-radius: 3px;
color: white;
font-size: 18px;
}
.ecm-Butoons-Shopping{
background-color: white;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 3px;
color: mediumvioletred;
font-size: 18px;
border: groove;
}
.ecm-itemsDetailsInfo{
padding-top: 15px;
}
.ecm-returnsPolicy{
padding-top: 30px;
}
.ecm-termsCondition{
padding-top: 30px;
}
.ecm-card{
margin-top: 20px;
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.ecm-itemDeatils{
padding-bottom: 8px;
border-bottom: solid mediumvioletred;
border-bottom-width: 2px;
font-size: 14px;
}
td{
font-size: 15px;
font-weight: bold;
color: dimgrey;
height: 50px;
}
\ No newline at end of file
<p> <div *ngIf="itemDetail">
ecm-food works!
</p> <md-card class="row" style="margin-top: 15px;">
<!-- ------------------------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">
<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-Chef-Speciality">
<span class="ecm-other-titles">Cooked By</span>
<div class="medium-12 columns ecm-SpecialityInfo">
<span class="ecm-Chef-Info"><span class="ecm-Chef">Chef Sunil Gurg</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.itemAvgRating == 0 && itemDetail.itemNumOfReviews == 0 " style="color: gray; font-size: 18px;">
Be the first to Review this product
</span>
<span *ngIf="itemDetail.itemAvgRating > 0 || itemDetail.itemNumOfReviews > 0 " style="display: inline-flex;" >
<span class="ecm-ratingStars" *ngFor="let a of createRatings(itemDetail.itemAvgRating)">&#x2605;</span>
<span class="ecm-itemAvgRating">{{itemDetail.itemAvgRating}} Ratings</span>
<span class="ecm-itemNumOfReviews">|<span style="padding-left: 12px;"> {{itemDetail.itemNumOfReviews}} Reviews</span></span>
</span>
</a>
<div style="padding-top: 9px;">
<span class="ecm-itemExtraInfo">Mon to Fri</span>
<span class="ecm-itemExtraInfo" style="padding-left: 15px">|<span style="padding-left: 15px">11AM to 4PM</span></span>
</div>
<div class="ecm-Speciality">
<span class="ecm-other-titles">Speciality</span>
<div class="medium-12 columns SpecialityInfo">
<span class="ecm-other-Speciality">{{itemDetail.itemOverview}}</span>
</div>
</div>
<div class="medium-12 columns ecm-saveButton">
<div class="ecm-DiscountRate">
<span class="ecm-itemDiscountedRate">
₹ {{itemDetail.itemDiscountedRate}}
</span>
<span class="ecm-Onwards" style="font-size: 18px;"> Onwards </span>
</div>
<button md-raised-button class="button medium-btn booknow" (click)="addItemInCart(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>
</md-card>
<div class="row ecm-card">
<!-- <div class="medium-12 col-sm-9 ecm-itemsDetailsInfo" > -->
<md-card class="medium-6 columns medium-8 columns ecm-itemsDetailsInfo" >
<div>
<span class="ecm-itemDeatils">Items Details</span>
</div>
<hr style="margin-top: 8px;">
<div class="ecm-Overview">
<span class="ecm-other-title">Overview</span>
<span class="ecm-other-detail">
<app-view-more [text]="Overview" [maxLength]="120"></app-view-more>
</span>
</div>
<h6 style="padding-top: 25px;font-size: 18px;">Description</h6>
<table style="width:80%;padding-top: 10px;">
<tr>
<td>Brand</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Artifacts India Ltd.</td>
</tr>
<tr>
<td>SKU</td>
<td style="font-size: 15px;color: black;font-weight: normal;">JFHDND989088</td>
</tr>
<tr>
<td>Type</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Chef Made Food</td>
</tr>
<tr>
<td>Size</td>
<td style="font-size: 15px;color: black;font-weight: normal;">20x20cm Large</td>
</tr>
<tr>
<td>Weight</td>
<td style="font-size: 15px;color: black;font-weight: normal;">678gms</td>
</tr>
<tr>
<td>Material</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Gazar and Acharr</td>
</tr>
<tr>
<td>Color</td>
<td style="font-size: 15px;color: black;font-weight: normal;">White</td>
</tr>
<tr>
<td>Package Content</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Gazar ka Achar</td>
</tr>
<tr>
<td>Care</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Dont keep For two weeks</td>
</tr>
</table>
<div class="ecm-returnsPolicy">
<span class="ecm-other-title">Return Policy</span>
<span class="ecm-other-detail">Returns is a scheme provided by respective sellers directly under this policy in trms of which 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</span>
</div>
<div class="ecm-termsCondition">
<span class="ecm-other-title">Terms and Conditions</span>
<span class="ecm-other-detail">Returns is a scheme provided by respective sellers directly under this policy in trms of which Champions Yacht Club specializes in offering luxury boating and yachting experiences in Goa with a large fleet of Catamarans, Boats, Cruisers & Yachts in Goa.</span>
</div>
</md-card>
</div>
</div>
<!-- ------------------------------- ITEM-DETAILS ENDS HERE-------------------------------- -->
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { EcmTemplateInterface } from './ecm-template.component'; import { EcmTemplateInterface } from './ecm-template.component';
import { ItemDetail } from '../../ecm-model/product-detail-model'; import { ItemDetail } from '../../ecm-model/product-detail-model';
import { Router,ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
import { Item } from '../../ecm-model/product-model';
@Component({ @Component({
selector: 'ecm-food', selector: 'ecm-food',
...@@ -11,9 +16,55 @@ export class EcmFoodComponent implements OnInit, EcmTemplateInterface { ...@@ -11,9 +16,55 @@ export class EcmFoodComponent implements OnInit, EcmTemplateInterface {
@Input() itemDetail: ItemDetail; @Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter(); @Output() scrollToReviews = new EventEmitter();
constructor() { } @Input() itemData: Item;
userActionUrl= '/ecm/service/feeds/cart';
itemCode;
myCity;
Item;
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";
constructor(private route: ActivatedRoute, private router: Router, private http: Http ) { }
ngOnInit() { ngOnInit() {
console.log( "ngOnInit EcmFoodComponent Object Keys : " + Object.keys( this.itemDetail ) )
console.log( this.itemDetail );
this.route.params.subscribe( params => {
this.itemCode = params['key'];
});
this.myCity = localStorage.getItem('mycity');
} }
createRatings( ratings ) {
var rating: number[] = [];
for ( var i = 1; i <= ratings; i++ ) {
rating.push( i );
}
return rating;
}
addItemInCart(itemCode)
{
console.log("StoreInCart Called");
this.http.post(this.userActionUrl+'/'+itemCode, {})
.subscribe(data => {
console.log("Inserted in Cart");
}, error => {
console.log(error.json());
});
// this.openDialog();
this.router.navigate(['/cart']);
}
} }
.ecm-product-ratings{
color: rgb(500, 150, 50);
font-size: large;
display: block;
}
.ecm-null-ratings {
color: lightgray;
font-size: large;
}
.button
{
border: 9px solid transparent;
margin-right: 15px;
}
.Add_to_cart
{
padding-left: 30px;
padding-right: 30px;
background-color: ghostwhite;
color: mediumvioletred;
border-radius: 3px;
}
.Buy_now
{
background-color: mediumvioletred;
padding-left: 42px;
padding-right: 42px;
border-radius: 4px;
}
.link_button
{
color: mediumvioletred;
font-weight: bold;
}
ul {
list-style: none;
display:inline;
}
li::before {
content: "• ";
color: gray; /* or whatever color you prefer */
}
.btn
{
font-weight:bold;
color:mediumvioletred;
text-align: center;
line-height: 18px;
}
.selected
{
font-weight:bold;
color:white;
text-align: center;
line-height: 18px;
}
.link_button_size
{
color: mediumvioletred;
font-weight: bold;
padding-left: 15px;
font-size: 14px;
}
.symbol
{
display: inline;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid black;
border:black;
}
.back
{
background-color: mediumvioletred;
}
.back_selected
{
background-color: ghostwhite;
}
.ecm-Info {
padding-left: 8px;
vertical-align: super;
}
.ecm-payments {
margin-left: -13px;
font-size: 15px;
color: dimgrey;
padding-left: 0px;
}
.ecm-share {
float: right;
cursor: pointer;
font-weight: bold;
font-size: 15px
}
.share{
vertical-align: super;
color: dimgray;
}
.arrow{
vertical-align: middle;
margin-left: -2px;
font-size: 21px;
}
.ecm-card{
padding-top: 15px;
}
/* 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;
}
.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;
}
.image
{
padding-top: 16px;
}
.head{
margin-top: 16px;
}
.link_changebutton {
color: mediumvioletred;
font-weight: bold;
position: absolute;
}
/* new*/
@media screen and (min-width: 20rem) {
.Available {
font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));
}
}
@media screen and (min-width: 50rem) {
.Available {
font-size: 2rem;
}
}
<p>
ecm-handicraft works! <md-card class="row" style="margin-top: 15px;">
</p>
<!-- ------------------------HANDICRAFT-IMAGE START HERE-------------------------------- -->
<div class="medium-6 columns medium-5 columns image">
<div class="md-card-image">
<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" ></ecm-image>
</div>
</div>
<!-- ------------------------HANDICRAFT-IMAGE ENDS HERE-------------------------------- -->
<!-- ----------------------HANDICRAFT-DETAILS START HERE-------------------------------- -->
<div class="medium-6 medium-5 columns head">
<!-- <md-card> -->
<div>
<md-card-content>
<div>
<div _ngcontent-c30="" class="ecm-share">
<i _ngcontent-c30="" class="material-icons" style="color: dimgray;">&#xE80D;</i>
<span _ngcontent-c30="" class="share">Share</span>
</div>
<span style="display: block; color: mediumvioletred; font-size: 14px; font-weight: bold;" > Stone Handicraft </span>
<span style="display: block; font-size: 20px; font-weight:bold;"> {{itemDetail.itemShDescr}} </span>
<span style="display: inline; color: #888; font-size: 15px; font-weight:bold;" > Sold by </span>
<span style="display: inline; color: mediumvioletred; font-size: 15px; font-weight:bold;" > StoneCraft </span><br>
<a (click)="scrollToReviews.emit();" class="link-reviews">
<span class="ecm-product-ratings" style="display:inline;">
<span *ngFor="let a of createRatings(itemDetail.itemAvgRating);" >
&#x2605;
</span>
<span *ngFor="let a of createRatings(5 - itemDetail.itemAvgRating);" class="ecm-null-ratings" >
&#x2605;
</span>
</span>
<span style="display:inline; padding-left: 10px; font-size: 14px;color: black;">{{ itemDetail.itemNumOfReviews}} Rating</span>
<span style="display:inline; padding-left: 5px; font-size: 14px; color: #888;" class="line"> | </span>
<span style="display:inline; padding-left: 5px; font-size: 14px;color: black;">{{ itemDetail.itemAvgRating}} Reviews</span>
</a>
<div style="padding-top: 20px;">
<span style="font-size: 25px; font-weight:bold;">
Rs. {{itemDetail.itemDiscountedRate}}
</span>
</div>
<span style="font-size: 15px; color: gray; font-weight: 100;">
<s>Rs. {{itemDetail.itemCostRate}}</s>
</span>
<span style="padding-left: 10px; color: forestgreen; font-weight:bold; font-size: 15px;">
{{itemDetail.itemDiscount}}% off
</span>
<br>
<span style="display: inline; font-size: 16px;">
{{itemDetail.itemDetailData.itemExtraInfo}}
</span>
<button type="button" onclick="()" class="md-button link_button" >More Offers
<i class="material-icons arrow ">&#xE313;</i>
</button>
<div class="row">
<div class="medium-6 columns">
<div class="medium-3 columns" style="font-size: 15px; color: gray; ">
Details
</div>
<div class="medium-9 columns Available" style="font-size: 15px;">
<ul>
<li>Material: White Stone</li>
<li>Hand Crafted</li>
<li>Pattern: Printed</li>
<li>Short Sleeve</li>
</ul>
<button type="button" onclick="()" class="md-button link_button">View More</button>
</div>
</div>
<div class="medium-6 columns">
<div class="row">
<div class="medium-2 columns Available" style="font-size: 15px; color: gray; padding-left: initial;">
Delivery
</div>
<div class="medium-10 columns Available" style="font-size: 15px;">
<span style="display:inline; color: forestgreen; font-weight:bold; ">
Available
</span>
at 400086
<button type="button" onclick="()" class="md-button link_changebutton">Change
<i class="material-icons arrow">&#xE313;</i>
</button>
<br>
<b>Free Delivery </b> in 5 to 6 days
<span class="symbol" >
?
</span>
</div>
</div>
<br>
<div class="row">
<div class="medium-2 columns" style="font-size: 15px; color: gray; padding-left: initial; ">
Service
</div>
<div class="medium-10 columns" style="font-size: 15px;">
30 days exchange policy
<span class="symbol" >
?
</span>
Cash on delivery available
<span class="symbol" >
?
</span>
</div>
</div>
<br>
</div>
</div>
<div>
<span style="display: inline; color: mediumvioletred; font-size: 14px; font-weight: bold;" > Size </span>
<div class="size" style="padding-left: 10px; display: inline;">
<button md-mini-fab class="back_selected btn"> S</button>
<button md-mini-fab class="back_selected btn" >M</button>
<button md-mini-fab class="back btn selected" >L</button>
<!-- <button type="button" class="btn" onclick="()">S</button>
<button type="button" class="btn" onclick="()">M</button>
<button type="button" class="btn_selected" onclick="()">L</button> -->
</div>
<button type="button" onclick="()" class=" md-button link_button_size " >Size Chart
<i class="material-icons arrow">&#xE313;</i>
</button>
</div>
</div>
</md-card-content>
<md-card-actions>
<div style="padding-top: 30px; padding-left: 0px;">
<button type="button" class="button medium-btn Add_to_cart" onclick="()">Add to cart</button>
<button type="button" class="button medium-btn Buy_now" onclick="()">Buy Now</button>
</div>
</md-card-actions>
<div _ngcontent-c30="" class="medium-12 columns ecm-payments">
<i class="material-icons"> &#xE8E8;</i>
<span _ngcontent-c30="" class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>
</div>
</div>
<!-- </md-card> -->
</div>
<!-- ----------------------HANDICRAFT-DETAILS ENDS HERE-------------------------------- -->
</md-card>
<div class="row ecm-card">
<!-- <div class="medium-12 col-sm-9 ecm-itemsDetailsInfo" > -->
<md-card class="medium-6 columns medium-8 columns ecm-itemsDetailsInfo" >
<div>
<span class="ecm-itemDeatils">Items Details</span>
</div>
<hr style="margin-top: 8px;">
<div class="ecm-Overview">
<span class="ecm-other-title">Overview</span>
<span class="ecm-other-detail">
<app-view-more [text]="Overview" [maxLength]="120"></app-view-more>
</span>
</div>
<h6 style="padding-top: 25px;font-size: 18px;">Description</h6>
<table style="width:80%;padding-top: 10px;">
<tr>
<td>Brand</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Artifacts India Ltd.</td>
</tr>
<tr>
<td>SKU</td>
<td style="font-size: 15px;color: black;font-weight: normal;">JFHDND989088</td>
</tr>
<tr>
<td>Type</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Chef Made Food</td>
</tr>
<tr>
<td>Size</td>
<td style="font-size: 15px;color: black;font-weight: normal;">20x20cm Large</td>
</tr>
<tr>
<td>Weight</td>
<td style="font-size: 15px;color: black;font-weight: normal;">678gms</td>
</tr>
<tr>
<td>Material</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Gazar and Acharr</td>
</tr>
<tr>
<td>Color</td>
<td style="font-size: 15px;color: black;font-weight: normal;">White</td>
</tr>
<tr>
<td>Package Content</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Gazar ka Achar</td>
</tr>
<tr>
<td>Care</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Dont keep For two weeks</td>
</tr>
</table>
<div class="ecm-returnsPolicy">
<span class="ecm-other-title">Return Policy</span>
<span class="ecm-other-detail">Returns is a scheme provided by respective sellers directly under this policy in trms of which 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</span>
</div>
<div class="ecm-termsCondition">
<span class="ecm-other-title">Terms and Conditions</span>
<span class="ecm-other-detail">Returns is a scheme provided by respective sellers directly under this policy in trms of which Champions Yacht Club specializes in offering luxury boating and yachting experiences in Goa with a large fleet of Catamarans, Boats, Cruisers & Yachts in Goa.</span>
</div>
</md-card>
</div>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { EcmTemplateInterface } from './ecm-template.component'; import { EcmTemplateInterface } from './ecm-template.component';
import { ItemDetail } from '../../ecm-model/product-detail-model'; import { ItemDetail } from '../../ecm-model/product-detail-model';
import { Router,ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
import { Item } from '../../ecm-model/product-model';
@Component({ @Component({
selector: 'ecm-handicraft', selector: 'ecm-handicraft',
...@@ -12,9 +15,59 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface{ ...@@ -12,9 +15,59 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface{
@Input() itemDetail: ItemDetail; @Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter(); @Output() scrollToReviews = new EventEmitter();
constructor() { } //@Input() itemData: Item;
userActionUrl= '/ecm/service/feeds/cart';
itemCode;
myCity;
Item;
itemData;
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";
constructor(private route: ActivatedRoute, private router: Router, private http: Http ) { }
ngOnInit() { ngOnInit() {
this.itemData=JSON.stringify(this.itemDetail);
console.log("Item data in handicraft " +this.itemData);
console.log( "ngOnInit EcmHandicraftComponent Object Keys : " + Object.keys( this.itemDetail ) )
console.log( this.itemDetail );
this.route.params.subscribe( params => {
this.itemCode = params['key'];
});
this.myCity = localStorage.getItem('mycity');
} }
createRatings(ratings){
var rating: number[] = [];
for(var i = 1; i <= ratings; i++){
rating.push(i);
}
return rating;
}
addItemInCart(itemCode)
{
console.log("StoreInCart Called");
this.http.post(this.userActionUrl+'/'+itemCode, {})
.subscribe(data => {
console.log("Inserted in Cart");
}, error => {
console.log(error.json());
});
this.router.navigate(['/cart']);
}
} }
.head{
.row margin-top: 16px;
{
max-width: 72rem;
} }
.row-image .ecm-other-title {
{ font-size: 18px;
margin-left: inherit; padding-bottom: 15px;
padding-left: 35px; display: block;
} }
.thumbnail .ecm-other-titles {
{ font-size: 16px;
height: 333px; font-weight: bold;
width: 352px; padding-bottom: 15px;
border-radius: 9px; color: dimgrey;
box-shadow: none;
} }
.image { .ecm-other-detail {
padding-top: 70px; font-weight: 100;
} font-size: 14px;
color: #444;
.stars text-align: justify;
{
color: coral;
font-size: 18px;
} }
.button .ecm-other-Overview {
{ font-weight: 100;
border: 9px solid transparent; font-size: 14px;
margin-right: 15px; text-align: justify;
} }
.ratings
.ecm-other-details {
padding-top: 30px;
}
.Overview{
padding-top: 30px;
padding-left: .625rem;
padding-right: .625rem;
width: 100%;
float: left;
}
.ecm-itemCategory
{ {
margin-left: 100px; display: block;
margin-top: -35px; color: mediumvioletred;
font-size: 13px; font-size: 18px;
padding: 8px;
color: darkgrey;
font-weight: bold;
} }
.off .ecm-itemShDescr
{ {
margin-left: 49px; display: block;
margin-top: -35px; padding-top: 15px;
font-size: 14px; font-size: 14px;
padding: 8px; font-weight: bold;
color:#1f881f; color: mediumvioletred;
font-weight: 700;
} }
.adult .ecm-itemDescr{
{
padding-right: 275px; display: block;
padding-bottom: 20px; font-size: 20px;
padding-top: 21px; padding-top: 10px;
font-weight: 600;
} }
.child .ecm-itemAvgRating{
{ color: rgb(36, 34, 34);
margin-left: 200px; padding-left: 10px;
margin-top: -64px; padding-right: 12px;
padding-bottom: 48px; font-size: 15px;
} }
.subheader .ecm-itemNumOfReviews{
{ color: rgb(36, 34, 34);
margin-top: -17px; font-size: 15px;
margin-bottom: -31px;
margin-top: -31px;
margin-left: 10px;
} }
.counterButton .ecm-itemExtraInfo{
{ font-size: 15px;
width: 13%; font-weight: 600;
margin-left: 215px;
margin-top: -132px;
text-align: center
} }
.totalPrice .ecm-Onwards{
{ font-weight: 100;
margin-left: 195px;
margin-bottom: -25px;
} }
.inc
{ .ecm-itemCostRate{
margin-left: 300px; font-size: 15px;
margin-top: -126px; color: gray;
font-size: x-large; font-weight: 100;
cursor: pointer;
color: mediumvioletred;
} }
.dec .ecm-itemDiscount
{ {
margin-left: 158px; padding-left: 10px;
margin-top: -129px; color: forestgreen;
font-size: x-large; }
.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; cursor: pointer;
color: mediumvioletred; 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;
} }
.overview .image
{ {
font-weight:bold; padding-top: 16px;
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
} }
.savelater .savelater
{ {
...@@ -120,125 +159,138 @@ ...@@ -120,125 +159,138 @@
padding-right: 30px; padding-right: 30px;
background-color: ghostwhite; background-color: ghostwhite;
color: mediumvioletred; color: mediumvioletred;
border-radius: 3px; padding-top: 10px;
padding-bottom: 10px;
border-radius: 3px;
} }
.booknow .booknow
{ {
background-color: mediumvioletred; background-color: mediumvioletred;
padding-left: 42px; padding-left: 75px;
padding-right: 42px; padding-right: 75px;
border-radius: 4px; 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;
} }
.discountRate .OverViewInfo
{
font-size: x-large;
}
.itemCategory
{ {
font-size: small; padding-left: 90px;
color: mediumvioletred; margin-top: -21px;
font-weight: bold; width: 100%;
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 .ecm-DiscountRate
{ {
margin-left: -40px; margin-left: -13px;
padding-top: 4px; padding-bottom: 25px;
color: rgba(68, 68, 68, 0.6);
} }
.itemNumOfReviews .ecm-payments
{ {
margin-left: 35px; padding-top: 18px;
margin-top: -53px; margin-left: -13px;
color:rgba(68, 68, 68, 0.6); font-size: 15px;
color: dimgrey;
} }
.Onwards .ecm-Info{
{ padding-left: 8px;
padding-left: 71px; vertical-align: super;
margin-top: -25px;
color: #444;
} }
.itemCostRate .ecm-share{
{
margin-top: -17px; float: right;
color: #444; cursor: pointer;
} }
.itemExtraInfo .share{
{ vertical-align: super;
font-family:serif; color: dimgray;
font-size: small;
font-size: small;
margin-top: -14px;
color:rgba(255, 0, 0, 0.62);
} }
.total .material-icons
{ {
margin-left: 217px; font-size: 26px;
margin-bottom: -25px;
margin-top: -6px;
} }
.ecm-Outing-Speciality{
.Height padding-left: 13px;
{ margin-left: -13px;
color: #444;
margin-top: -31px;
padding-bottom: 66px;
} }
.ecm-SpecialityInfo{
padding-left: 90px;
.package margin-top: -21px;
{ width: 100%;
font-weight: 100;
} }
.ecm-Outing-Info{
.itemVenue
{
font-weight: 100; font-weight: 100;
font-size: 14px;
text-align: justify;
vertical-align: top;
} }
.ecm-Outers{
color: mediumvioletred;
padding-right: 10px;
font-weight: 600;
margin-left: -14px;
vertical-align: top;
}
.ecm-itemDiscountedRate{
font-size: 28px;
font-weight: 600;
}
/* new */
/* New */
.ecm-other-title { .ecm-other-title {
font-size: 18px; font-size: 18px;
font-weight: 500;
display: block;
padding-bottom: 15px; padding-bottom: 15px;
display: block;
} }
.ecm-other-detail { .ecm-other-detail {
font-weight: 100; font-weight: 100;
font-size: 14px; font-size: 14px;
color: #444; color: #444;
text-align: justify; text-align: justify;
} }
.ecm-card{
margin-top: 20px;
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.ecm-itemDeatils{
padding-bottom: 8px;
border-bottom: solid mediumvioletred;
border-bottom-width: 2px;
font-size: 14px;
}
.ecm-other-details { .ecm-returnsPolicy{
padding-top: 30px; padding-top: 30px;
} }
.link-reviews{ .ecm-termsCondition{
padding-top: 30px;
}
td{
font-size: 15px;
font-weight: bold;
color: dimgrey;
height: 50px;
} }
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
--> -->
<div *ngIf="itemDetail"> <div *ngIf="itemDetail">
<div class="row"> <md-card class="row" style="margin-top: 15px;">
<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- --> <!-- ------------------------ITEM-IMAGE START HERE-------------------------------- -->
<span class="medium-6 columns medium-5 columns image"> <span class="medium-6 columns medium-5 columns image">
<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" ></ecm-image> <ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" ></ecm-image>
...@@ -86,79 +86,71 @@ ...@@ -86,79 +86,71 @@
<!-- ----------------------ITEM-DETAILS START HERE-------------------------------- --> <!-- ----------------------ITEM-DETAILS START HERE-------------------------------- -->
<div class="medium-6 medium-5 columns head" style="margin-top: 70px;"> <div class="medium-6 medium-5 columns head">
<span style="display: block; color: mediumvioletred; font-size: 18px;" > {{itemDetail.itemCategory.shDescr}} </span> <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 style="display: block; padding-top: 15px; font-size: 20px; font-weight:bold;"> {{itemDetail.itemShDescr}} </span> <span class="ecm-itemShDescr">{{itemDetail.itemShDescr}}</span>
<span class="ecm-itemDescr">{{itemDetail.itemDescr}}</span>
<span style="display: block; font-weight: 100; font-size: 16px;">{{itemDetail.itemDescr}}</span> <div class="ecm-Outing-Speciality">
<span class="ecm-other-titles">Hosted by</span>
<div class="medium-12 columns ecm-SpecialityInfo">
<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>
</div>
</div>
<a (click)="scrollToReviews.emit();" class="link-reviews"> <a (click)="scrollToReviews.emit();" class="link-reviews">
<span *ngIf="itemDetail.itemAvgRating == 0 && itemDetail.itemNumOfReviews == 0 " style="color: gray; padding-left: 10px; font-size: 18px;"> <span *ngIf="itemDetail.itemAvgRating == 0 && itemDetail.itemNumOfReviews == 0 " style="color: gray; font-size: 18px;">
Be the first to Review this product Be the first to Review this product
</span> </span>
<span *ngIf="itemDetail.itemAvgRating > 0 || itemDetail.itemNumOfReviews > 0 " > <span *ngIf="itemDetail.itemAvgRating > 0 || itemDetail.itemNumOfReviews > 0 " style="display: inline-flex;" >
<span *ngFor="let a of createRatings(itemDetail.itemAvgRating)" style="color: rgb(500, 150, 50); font-size: 20px;"> &#x2605; </span> <span class="ecm-ratingStars" *ngFor="let a of createRatings(itemDetail.itemAvgRating)">&#x2605;</span>
<span style="color: gray; padding-left: 10px; font-size: 18px;"> {{itemDetail.itemAvgRating}} Ratings | {{itemDetail.itemNumOfReviews}} Reviews </span> <span class="ecm-itemAvgRating">{{itemDetail.itemAvgRating}} Ratings</span>
<span class="ecm-itemNumOfReviews">|<span style="padding-left: 12px;"> {{itemDetail.itemNumOfReviews}} Reviews</span></span>
</span> </span>
</a> </a>
<div style="padding-top: 20px;"> <div style="padding-top: 9px;">
<span style="font-size: 25px; font-weight:bold;"> <!-- <span class="ecm-itemExtraInfo">{{itemDetail.itemDetailData.itemExtraInfo}}</span> -->
₹ {{itemDetail.itemDiscountedRate}} <span class="ecm-itemExtraInfo"> 15 July to 18 July 2017 </span>
</span> <span class="ecm-itemExtraInfo" style="padding-left: 15px">|<span style="padding-left: 15px">11AM, 2PM, 4PM</span></span>
<span style="font-weight: 100;"> Onwards </span>
</div> </div>
<span style="font-size: 15px; color: gray; font-weight: 100;"> <div class="ecm-Overview">
<s>₹ {{itemDetail.itemCostRate}}</s> <span class="ecm-other-titles">Overview</span>
</span> <div class="medium-12 columns OverViewInfo">
<span style="padding-left: 10px; color: forestgreen;"> <span class="ecm-other-Overview">{{itemDetail.itemOverview}}</span>
{{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> </div>
<div class="medium-12 columns ecm-saveButton">
<div class="medium-12 columns" style="padding-top: 30px; padding-left: 0px;"> <div class="ecm-DiscountRate">
<button class="button medium-btn savelater">Save For Later</button> <span class="ecm-itemDiscountedRate" style="font-size: 28px;">
<button class="button medium-btn booknow" (click)="addItemInCart(itemDetail.itemCode)">Book Now</button> ₹ {{itemDetail.itemDiscountedRate}}
</span>
<span class="ecm-Onwards" style="font-size: 18px;"> Onwards </span>
</div>
<button md-raised-button class="button medium-btn booknow" (click)="addItemInCart(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>
<!-- ------------------------------- 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>
</div> <!-- ------------------------------- ITEM-OVERVIEW ENDS HERE-------------------------------- --> </md-card>
<!-- ------------------------------- ITEM-DETAILS ENDS HERE-------------------------------- -->
<!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS START HERE--------------- --> <!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS START HERE--------------- -->
<div class="row"> <!-- <div class="row">
<div class="medium-6 columns medium-5 columns ecm-other-details"> <div class="medium-6 columns medium-5 columns ecm-other-details">
<span class="ecm-other-title">Packages Include</span> <span class="ecm-other-title">Packages Include</span>
<li class="ecm-other-detail" *ngFor="let package of itemDetail.itemDetailData.itemPackages">{{package.package}}</li> <li class="ecm-other-detail" *ngFor="let package of itemDetail.itemDetailData.itemPackages">{{package.package}}</li>
...@@ -167,5 +159,83 @@ ...@@ -167,5 +159,83 @@
<span class="ecm-other-title">Venue Details</span> <span class="ecm-other-title">Venue Details</span>
<span class="ecm-other-detail">{{itemDetail.itemDetailData.itemVenue}}</span> <span class="ecm-other-detail">{{itemDetail.itemDetailData.itemVenue}}</span>
</div> </div>
</div> <!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS ENDS HERE----------------- --> </div> -->
<!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS ENDS HERE----------------- -->
<div class="row ecm-card">
<!-- <div class="medium-12 col-sm-9 ecm-itemsDetailsInfo" > -->
<md-card class="medium-6 columns medium-8 columns ecm-itemsDetailsInfo" >
<div>
<span class="ecm-itemDeatils">Items Details</span>
</div>
<hr style="margin-top: 8px;">
<div class="ecm-Overview">
<span class="ecm-other-title">Overview</span>
<span class="ecm-other-detail">
<app-view-more [text]="Overview" [maxLength]="120"></app-view-more>
</span>
</div>
<h6 style="padding-top: 25px;font-size: 18px;">Description</h6>
<table style="width:80%;padding-top: 10px;">
<tr>
<td>Brand</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Artifacts India Ltd.</td>
</tr>
<tr>
<td>SKU</td>
<td style="font-size: 15px;color: black;font-weight: normal;">JFHDND989088</td>
</tr>
<tr>
<td>Type</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Chef Made Food</td>
</tr>
<tr>
<td>Size</td>
<td style="font-size: 15px;color: black;font-weight: normal;">20x20cm Large</td>
</tr>
<tr>
<td>Weight</td>
<td style="font-size: 15px;color: black;font-weight: normal;">678gms</td>
</tr>
<tr>
<td>Material</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Gazar and Acharr</td>
</tr>
<tr>
<td>Color</td>
<td style="font-size: 15px;color: black;font-weight: normal;">White</td>
</tr>
<tr>
<td>Package Content</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Gazar ka Achar</td>
</tr>
<tr>
<td>Care</td>
<td style="font-size: 15px;color: black;font-weight: normal;">Dont keep For two weeks</td>
</tr>
</table>
<div class="ecm-returnsPolicy">
<span class="ecm-other-title">Return Policy</span>
<span class="ecm-other-detail">Returns is a scheme provided by respective sellers directly under this policy in trms of which 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</span>
</div>
<div class="ecm-termsCondition">
<span class="ecm-other-title">Terms and Conditions</span>
<span class="ecm-other-detail">Returns is a scheme provided by respective sellers directly under this policy in trms of which Champions Yacht Club specializes in offering luxury boating and yachting experiences in Goa with a large fleet of Catamarans, Boats, Cruisers & Yachts in Goa.</span>
</div>
</md-card>
</div>
</div> </div>
...@@ -2,9 +2,14 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; ...@@ -2,9 +2,14 @@ import { Component, OnInit, Input, Output, EventEmitter } 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 { 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 { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
import { Item } from '../../ecm-model/product-model';
@Component( { @Component( {
selector: 'ecm-outing', selector: 'ecm-outing',
templateUrl: './ecm-outing.component.html', templateUrl: './ecm-outing.component.html',
...@@ -19,14 +24,17 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface { ...@@ -19,14 +24,17 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
total = this.itemPrice; total = this.itemPrice;
userActionUrl= '/ecm/service/feeds/cart'; userActionUrl= '/ecm/service/feeds/cart';
itemCode; itemCode;
myCity;
constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { } constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
ngOnInit() { ngOnInit() {
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.route.params.subscribe( params => {
this.itemCode = params['key']; this.itemCode = params['key'];
}); });
this.myCity = localStorage.getItem('mycity')
} }
createRatings( ratings ) { createRatings( ratings ) {
...@@ -55,7 +63,7 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface { ...@@ -55,7 +63,7 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
return false; return false;
} }
addItemInCart(itemCode) addItemInCart(itemCode)
{ {
console.log("StoreInCart Called"); console.log("StoreInCart Called");
...@@ -66,6 +74,8 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface { ...@@ -66,6 +74,8 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
}, error => { }, error => {
console.log(error.json()); console.log(error.json());
}); });
//this.openDialog();
this.router.navigate(['/cart']);
} }
} }
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