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>
ecm-celebration works!
</p>
<div *ngIf="itemDetail">
<div class="row">
<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- -->
<span class="medium-6 columns medium-5 columns image">
<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" ></ecm-image>
</span>
<!-- -----------------------ITEM-IMAGE ENDS HERE-------------------------------- ----->
<!-- ----------------------ITEM-DETAILS START HERE-------------------------------- -->
<div class="medium-6 medium-5 columns head">
<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 { Router,ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
import { EcmTemplateInterface } from './ecm-template.component';
import { ItemDetail } from '../../ecm-model/product-detail-model';
......@@ -12,9 +13,44 @@ export class EcmCelebrationComponent implements OnInit, EcmTemplateInterface {
@Input() itemDetail: ItemDetail;
@Output() scrollToReviews = new EventEmitter();
constructor() { }
userActionUrl= '/ecm/service/feeds/cart';
itemCode;
myCity;
constructor(private route: ActivatedRoute, private router: Router, private http: Http ) { }
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>
ecm-food works!
</p>
<div *ngIf="itemDetail">
<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 { EcmTemplateInterface } from './ecm-template.component';
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({
selector: 'ecm-food',
......@@ -11,9 +16,55 @@ export class EcmFoodComponent implements OnInit, EcmTemplateInterface {
@Input() itemDetail: ItemDetail;
@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() {
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!
</p>
<md-card class="row" style="margin-top: 15px;">
<!-- ------------------------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 { EcmTemplateInterface } from './ecm-template.component';
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({
selector: 'ecm-handicraft',
......@@ -12,9 +15,59 @@ export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface{
@Input() itemDetail: ItemDetail;
@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() {
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']);
}
}
.row
{
max-width: 72rem;
.head{
margin-top: 16px;
}
.row-image
{
margin-left: inherit;
padding-left: 35px;
.ecm-other-title {
font-size: 18px;
padding-bottom: 15px;
display: block;
}
.thumbnail
{
height: 333px;
width: 352px;
border-radius: 9px;
box-shadow: none;
.ecm-other-titles {
font-size: 16px;
font-weight: bold;
padding-bottom: 15px;
color: dimgrey;
}
.image {
padding-top: 70px;
}
.stars
{
color: coral;
font-size: 18px;
.ecm-other-detail {
font-weight: 100;
font-size: 14px;
color: #444;
text-align: justify;
}
.button
{
border: 9px solid transparent;
margin-right: 15px;
.ecm-other-Overview {
font-weight: 100;
font-size: 14px;
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;
margin-top: -35px;
font-size: 13px;
padding: 8px;
color: darkgrey;
font-weight: bold;
display: block;
color: mediumvioletred;
font-size: 18px;
}
.off
.ecm-itemShDescr
{
margin-left: 49px;
margin-top: -35px;
display: block;
padding-top: 15px;
font-size: 14px;
padding: 8px;
color:#1f881f;
font-weight: 700;
font-weight: bold;
color: mediumvioletred;
}
.adult
{
padding-right: 275px;
padding-bottom: 20px;
padding-top: 21px;
.ecm-itemDescr{
display: block;
font-size: 20px;
padding-top: 10px;
font-weight: 600;
}
.child
{
margin-left: 200px;
margin-top: -64px;
padding-bottom: 48px;
.ecm-itemAvgRating{
color: rgb(36, 34, 34);
padding-left: 10px;
padding-right: 12px;
font-size: 15px;
}
.subheader
{
margin-top: -17px;
margin-bottom: -31px;
margin-top: -31px;
margin-left: 10px;
.ecm-itemNumOfReviews{
color: rgb(36, 34, 34);
font-size: 15px;
}
.counterButton
{
width: 13%;
margin-left: 215px;
margin-top: -132px;
text-align: center
.ecm-itemExtraInfo{
font-size: 15px;
font-weight: 600;
}
.totalPrice
{
margin-left: 195px;
margin-bottom: -25px;
.ecm-Onwards{
font-weight: 100;
}
.inc
{
margin-left: 300px;
margin-top: -126px;
font-size: x-large;
cursor: pointer;
color: mediumvioletred;
.ecm-itemCostRate{
font-size: 15px;
color: gray;
font-weight: 100;
}
.dec
.ecm-itemDiscount
{
margin-left: 158px;
margin-top: -129px;
font-size: x-large;
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;
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-left: 15px;
padding-right: 15px;
padding-top: 25px;
padding-top: 16px;
}
.savelater
{
......@@ -120,125 +159,138 @@
padding-right: 30px;
background-color: ghostwhite;
color: mediumvioletred;
border-radius: 3px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 3px;
}
.booknow
{
background-color: mediumvioletred;
padding-left: 42px;
padding-right: 42px;
border-radius: 4px;
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;
}
.discountRate
{
font-size: x-large;
}
.itemCategory
.OverViewInfo
{
font-size: small;
color: mediumvioletred;
font-weight: bold;
padding-bottom: 25px;
display:block;
padding-left: 90px;
margin-top: -21px;
width: 100%;
}
.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;
padding-top: 4px;
color: rgba(68, 68, 68, 0.6);
margin-left: -13px;
padding-bottom: 25px;
}
.itemNumOfReviews
.ecm-payments
{
margin-left: 35px;
margin-top: -53px;
color:rgba(68, 68, 68, 0.6);
padding-top: 18px;
margin-left: -13px;
font-size: 15px;
color: dimgrey;
}
.Onwards
{
padding-left: 71px;
margin-top: -25px;
color: #444;
.ecm-Info{
padding-left: 8px;
vertical-align: super;
}
.itemCostRate
{
margin-top: -17px;
color: #444;
.ecm-share{
float: right;
cursor: pointer;
}
.itemExtraInfo
{
font-family:serif;
font-size: small;
font-size: small;
margin-top: -14px;
color:rgba(255, 0, 0, 0.62);
.share{
vertical-align: super;
color: dimgray;
}
.total
.material-icons
{
margin-left: 217px;
margin-bottom: -25px;
margin-top: -6px;
font-size: 26px;
}
.Height
{
color: #444;
margin-top: -31px;
padding-bottom: 66px;
.ecm-Outing-Speciality{
padding-left: 13px;
margin-left: -13px;
}
.package
{
font-weight: 100;
.ecm-SpecialityInfo{
padding-left: 90px;
margin-top: -21px;
width: 100%;
}
.itemVenue
{
.ecm-Outing-Info{
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 {
font-size: 18px;
font-weight: 500;
display: block;
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-other-details {
padding-top: 30px;
.ecm-returnsPolicy{
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 @@
-->
<div *ngIf="itemDetail">
<div class="row">
<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>
......@@ -86,79 +86,71 @@
<!-- ----------------------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">
<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
</span>
<span *ngIf="itemDetail.itemAvgRating > 0 || itemDetail.itemNumOfReviews > 0 " >
<span *ngFor="let a of createRatings(itemDetail.itemAvgRating)" style="color: rgb(500, 150, 50); font-size: 20px;"> &#x2605; </span>
<span style="color: gray; padding-left: 10px; font-size: 18px;"> {{itemDetail.itemAvgRating}} Ratings | {{itemDetail.itemNumOfReviews}} Reviews </span>
<span *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: 20px;">
<span style="font-size: 25px; font-weight:bold;">
₹ {{itemDetail.itemDiscountedRate}}
</span>
<span style="font-weight: 100;"> Onwards </span>
<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>
<span style="font-size: 15px; color: gray; font-weight: 100;">
<s>₹ {{itemDetail.itemCostRate}}</s>
</span>
<span style="padding-left: 10px; color: forestgreen;">
{{itemDetail.itemDiscount}}% off
</span>
<span style="display: block; font-size: 16px; font-weight: 100; color: indianred;">
{{itemDetail.itemExtraInfo}}
</span>
<div style="width: 300px; padding-top: 20px;">
<div style="float: left;">
<span _ngcontent-c16="" style="display: block; padding-top: 10px; font-size: 18px;">Adult</span>
<span _ngcontent-c16="" style="padding-bottom: 10px; color: gray; font-weight: 100; font-size: 14px;">Height Above 4'6</span>
</div>
<div style="float: right;">
<button style="font-size: 35px; color: mediumvioletred; position: relative; text-align: center; cursor: pointer; border: 9px solid transparent; font-weight: lighter;" [disabled]="disable()" (click)="decrement()">-</button>
<span style="color: mediumvioletred; position: absolute; margin-left: 6px; margin-right: 6px; font-size: 14px; font-weight: 100;">₹ {{total}}</span>
<span>
<input style="width: 60px; height: 35px; border-radius: 2px; text-align: center;" type="text" [value]="counterValue">
</span>
<button style="font-size: 35px; color: mediumvioletred; position: relative; text-align: center; cursor: pointer; border: 9px solid transparent; font-weight: lighter;" (click)="increment()">+</button>
<div 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" style="padding-top: 30px; padding-left: 0px;">
<button class="button medium-btn savelater">Save For Later</button>
<button class="button medium-btn booknow" (click)="addItemInCart(itemDetail.itemCode)">Book Now</button>
<div 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>
<!-- ------------------------------- ITEM-DETAILS ENDS HERE-------------------------------- -->
</div> <!-- ------------------------------- ITEM-OVERVIEW START HERE-------------------------------- -->
<div class="row">
<div class="medium-12 col-sm-9 overview">
<span class="ecm-other-title">Overview</span>
<span class="ecm-other-detail">{{itemDetail.itemOverview}}</span>
</div>
</div> <!-- ------------------------------- ITEM-OVERVIEW ENDS HERE-------------------------------- -->
</md-card>
<!-- ------------------------------- ITEM-DETAILS ENDS 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">
<span class="ecm-other-title">Packages Include</span>
<li class="ecm-other-detail" *ngFor="let package of itemDetail.itemDetailData.itemPackages">{{package.package}}</li>
......@@ -167,5 +159,83 @@
<span class="ecm-other-title">Venue Details</span>
<span class="ecm-other-detail">{{itemDetail.itemDetailData.itemVenue}}</span>
</div>
</div> <!-- ------------------------------- ITEM-VENUE AND PACKAGES DETAILS ENDS HERE----------------- -->
</div> -->
<!-- ------------------------------- 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>
......@@ -2,9 +2,14 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
import { ItemDetail } from '../../ecm-model/product-detail-model';
import { EcmTemplateInterface } from './ecm-template.component';
import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
import { Item } from '../../ecm-model/product-model';
@Component( {
selector: 'ecm-outing',
templateUrl: './ecm-outing.component.html',
......@@ -19,14 +24,17 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
total = this.itemPrice;
userActionUrl= '/ecm/service/feeds/cart';
itemCode;
myCity;
constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
ngOnInit() {
console.log( "ngOnInit EcmOutingComponent Object Keys : " + Object.keys( this.itemDetail ) )
console.log( this.itemDetail );
this.route.params.subscribe( params => {
this.itemCode = params['key'];
});
this.myCity = localStorage.getItem('mycity')
}
createRatings( ratings ) {
......@@ -55,7 +63,7 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
return false;
}
addItemInCart(itemCode)
addItemInCart(itemCode)
{
console.log("StoreInCart Called");
......@@ -66,6 +74,8 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
}, error => {
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