Updated

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174391 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-details.component.css

@@ -50,10 +50,11 @@ li {
 }
 
 ecm-template{
-	position: relative;
+    top: 70px;
+    position: relative;
     display: block;
     margin: 0;
     padding: 0;
-    top: 60px;
+    /* top: 60px; */
     min-height: 400px;
 }
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-celebration.component.css

@@ -288,5 +288,26 @@ ul{
     padding-left: 30px
 }
 
+.ecm-card {
+	/* margin-top: 20px; */
+	/* max-width: 75rem; */
+	/* margin-left: auto; */
+	/* margin-right: auto; */
+	padding-top: 25px;
+}
+
+/* Recent View */
+.ecm-recent-view {
+	height: 300px;	
+}
 
+@media screen and (max-width: 640px) {
+	.ecm-recent-view {
+		display: none;
+	}
+	
+	.ecm-itemsDetailsInfo {
+		width: 100%;
+	}
+}
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-celebration.component.html

 <div *ngIf="itemDetail">
-
+		
+		<md-card style="margin-top: 15px;">
 		<div class="row">
 			<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- -->
 			<span class="medium-6 columns medium-5 columns image"> 
@@ -69,13 +70,15 @@
 				</div>
 			</div>
 		</div> 
+		</md-card>
 	
 <!-- ------------------------------- ITEM-DETAILS  ENDS HERE-------------------------------- -->
 </div>
 
 <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 class="small-9 columns ecm-itemsDetailsInfo">
+			<md-card> 
 				<div>
 			 	 <span class="ecm-itemDeatils">Items Details</span>
 			 	 </div>
@@ -139,7 +142,12 @@
 				</div>
 				
 			</md-card>
-		</div> 
+			</div>
+			
+			<div class="small-3 columns ecm-recent-view">
+			    <ecm-recent-view #recentView> </ecm-recent-view> 
+			</div>
+	 </div> 
 
 
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-celebration.component.ts

-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 import { Http } from '@angular/http';
 import { EcmTemplateInterface } from './ecm-template.component';
 import { ItemDetail } from '../../ecm-model/product-detail-model';
+import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
 
-@Component({
-  selector: 'ecm-celebration',
-  templateUrl: './ecm-celebration.component.html',
-  styleUrls: ['./ecm-celebration.component.css']
+@Component( {
+    selector: 'ecm-celebration',
+    templateUrl: './ecm-celebration.component.html',
+    styleUrls: ['./ecm-celebration.component.css']
 })
 export class EcmCelebrationComponent implements OnInit, EcmTemplateInterface {
 
-  @Input() itemDetail: ItemDetail;
-  @Output() scrollToReviews = new EventEmitter();
-  @Output() doActivity = new EventEmitter();  
-  
-  userActionUrl= '/ecm/service/feeds/cart';
-  itemCode;
-  myCity;  
-  actionPerformed 
-  activityPerformed ;
-  transPortFacility;
-  thingsToCarry;
-  itemDetailpath;
-  
-  constructor(private route: ActivatedRoute, private router: Router, private http: Http ) { }
+    @Input() itemDetail: ItemDetail;
+    @Output() scrollToReviews = new EventEmitter();
+    @Output() doActivity = new EventEmitter();
+    @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
 
-  ngOnInit() {
-  
-  		console.log( "ngOnInit EcmCelebrationComponent Object Keys : " + Object.keys( this.itemDetail ) )
+    userActionUrl = '/ecm/service/feeds/cart';
+    itemCode;
+    myCity;
+    actionPerformed
+    activityPerformed;
+    transPortFacility;
+    thingsToCarry;
+    itemDetailpath;
+
+    constructor( private route: ActivatedRoute, private router: Router, private http: Http ) { }
+
+    ngOnInit() {
+
+        console.log( "ngOnInit EcmCelebrationComponent Object Keys : " + Object.keys( this.itemDetail ) )
         console.log( this.itemDetail );
-                this.route.params.subscribe( params => {
+        this.route.params.subscribe( params => {
             this.itemCode = params['key'];
         });
-       this.actionPerformed = this.itemDetail.itemDetailData.itemDetail2.actionPerformed;
+        this.actionPerformed = this.itemDetail.itemDetailData.itemDetail2.actionPerformed;
         this.activityPerformed = this.itemDetail.itemDetailData.itemDetail2.activityPerformed;
         this.transPortFacility = this.itemDetail.itemDetailData.itemDetail2.transportFacility;
         this.thingsToCarry = this.itemDetail.itemDetailData.itemDetail2.thingsToCarry;
-          this.itemDetailpath   =this.itemDetail.itemDetailData.itemDetail2
-     this.myCity = localStorage.getItem('mycity');
-  
-  }
-  
-  createRatings( ratings ) {
+        this.itemDetailpath = this.itemDetail.itemDetailData.itemDetail2
+        this.myCity = localStorage.getItem( 'mycity' );
+
+    }
+
+    ngAfterViewInit() {
+        this.recentView.ngOnInit();
+    }
+
+    ngOnDestroy() {
+        if ( this.recentView )
+            this.recentView.doDestroy( this.itemDetail.itemCode );
+    }
+
+    createRatings( ratings ) {
         var rating: number[] = [];
-        for ( var i = 1; i <= ratings; i++ ) 
-        {
+        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());
-                   }); 
+    addItemInCart( itemCode ) {
+        console.log( "StoreInCart Called" );
+
+        this.http.post( this.userActionUrl + '/' + itemCode, {})
+            .subscribe( data => {
+                console.log( "Inserted in Cart" );
+            }, error => {
+                console.log( error.json() );
+            });
     }
 
 }

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-food.component.css

@@ -300,14 +300,6 @@
     font-size: 18px;
     border: groove;
 }
-.ecm-itemsDetailsInfo{
-	
-	padding-top: 15px;
-	
-}
-
-
-
 
 .ecm-returnsPolicy{
 	    padding-top: 30px;
@@ -317,10 +309,11 @@
 	padding-top: 30px;
 }
 .ecm-card{
-	margin-top: 20px;
-    max-width: 75rem;
-    margin-left: auto;
-    margin-right: auto;
+	/* margin-top: 20px; */
+	/* max-width: 75rem; */
+	/* margin-left: auto; */
+	/* margin-right: auto; */
+	padding-top: 25px;
 }
 .ecm-itemDeatils{
 	padding-bottom: 8px;
@@ -424,12 +417,7 @@ td{
     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;
@@ -466,3 +454,18 @@ ul{
 .preferences{
 	
 }
+
+/* Recent View */
+.ecm-recent-view {
+	height: 300px;	
+}
+
+@media screen and (max-width: 640px) {
+	.ecm-recent-view {
+		display: none;
+	}
+	
+	.ecm-itemsDetailsInfo {
+		width: 100%;
+	}
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-food.component.html

 <div *ngIf="itemDetail">
 
-		<md-card class="row" style="margin-top: 15px;">
+		<md-card style="margin-top: 15px;">
+		<div class="row">
 			<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- -->
-			<span class="medium-6 columns medium-5 columns image"> 
+			<span class="medium-6 medium-5 columns image"> 
 				<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>	
 			</span>
 			<!-- -----------------------ITEM-IMAGE ENDS HERE-------------------------------- ----->
@@ -27,8 +28,7 @@
 					<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
@@ -40,9 +40,7 @@
 						<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>
@@ -70,11 +68,13 @@
 					<span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>	
 				</div>
 			</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 class="small-9 columns ecm-itemsDetailsInfo">
+			<md-card> 
 				<div>
 			 	 <span class="ecm-itemDeatils">Items Details</span>
 			 	 </div>
@@ -100,11 +100,8 @@
 				<div class="Attraction" style="padding-top: 24px;">
 				     <span class="attraction">Preferences</span>
 				     <ul *ngFor = "let a of Preferences">
-				     <li>{{a.Free}}</li>
-				   
-				
-				     </ul>
-				
+				       <li>{{a.Free}}</li>
+				     </ul>		
 				</div>
 				<!-- <div class="preferences" style="padding-top: 24px;">
 				     <span class="attraction">Preferences</span>
@@ -125,6 +122,11 @@
 				</div>
 				
 			</md-card>
+		  </div>
+		  
+		  	<div class="small-3 columns ecm-recent-view">
+			    <ecm-recent-view #recentView> </ecm-recent-view> 
+			</div>
 		</div> 
 </div>
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-food.component.ts

-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { EcmTemplateInterface } from './ecm-template.component';
 import { ItemDetail } from '../../ecm-model/product-detail-model';
-import { Router,ActivatedRoute } from '@angular/router';
+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';
+import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
 
-@Component({
-  selector: 'ecm-food',
-  templateUrl: './ecm-food.component.html',
-  styleUrls: ['./ecm-food.component.css']
+@Component( {
+    selector: 'ecm-food',
+    templateUrl: './ecm-food.component.html',
+    styleUrls: ['./ecm-food.component.css']
 })
-export class EcmFoodComponent implements OnInit,  EcmTemplateInterface {
-
-  @Input() itemDetail: ItemDetail;
-  @Output() scrollToReviews = new EventEmitter();
-  @Output() doActivity = new EventEmitter();  
-  
-  @Input() itemData: Item;  
-  
-  userActionUrl= '/ecm/service/feeds/cart';
-  itemCode;
-  myCity;  
-  Item;
-  ingredients;
-  itemDetailpath;
-  Preferences;
-  
-  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 ) )
+export class EcmFoodComponent implements OnInit, EcmTemplateInterface {
+
+    @Input() itemDetail: ItemDetail;
+    @Output() scrollToReviews = new EventEmitter();
+    @Output() doActivity = new EventEmitter();
+    @Input() itemData: Item;
+    @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
+
+    userActionUrl = '/ecm/service/feeds/cart';
+    itemCode;
+    myCity;
+    Item;
+    ingredients;
+    itemDetailpath;
+    Preferences;
+
+    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.route.params.subscribe( params => {
             this.itemCode = params['key'];
         });
-      this.itemDetailpath   =this.itemDetail.itemDetailData.itemDetail2
-      this.ingredients = this.itemDetail.itemDetailData.itemDetail2.ingredients;
-      this.Preferences = this.itemDetail.itemDetailData.itemDetail2.Preferences;
-     this.myCity = localStorage.getItem('mycity');
-  }
-  
-  createRatings( ratings ) {
+        this.itemDetailpath = this.itemDetail.itemDetailData.itemDetail2
+        this.ingredients = this.itemDetail.itemDetailData.itemDetail2.ingredients;
+        this.Preferences = this.itemDetail.itemDetailData.itemDetail2.Preferences;
+        this.myCity = localStorage.getItem( 'mycity' );
+    }
+
+    ngAfterViewInit() {
+        this.recentView.ngOnInit();
+    }
+
+    ngOnDestroy() {
+        if ( this.recentView )
+            this.recentView.doDestroy( this.itemDetail.itemCode );
+    }
+
+    createRatings( ratings ) {
         var rating: number[] = [];
         for ( var i = 1; i <= ratings; i++ ) {
             rating.push( i );
         }
         return rating;
     }
-     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']);
+    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/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.css

-.ecm-product-ratings{
-    color: rgb(500, 150, 50);
-    font-size: large;
-    display: block;
+.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;
+
+.button {
+	border: 9px solid transparent;
+	margin-right: 15px;
 }
-.Add_to_cart
-{
-	padding-left: 30px; 
-	padding-right: 30px; 
-	background-color: ghostwhite; 
+
+.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; 
+.Buy_now {
+	background-color: mediumvioletred;
+	padding-left: 42px;
 	padding-right: 42px;
 	border-radius: 4px;
 	color: white;
 }
-.link_button
-{
-    color: mediumvioletred;
-    font-weight: bold;	
+
+.link_button {
+	color: mediumvioletred;
+	font-weight: bold;
 }
 
 ul {
-  list-style: none;
-  display:inline;
- 
+	list-style: none;
+	display: inline;
 }
 
-
-
 li::before {
-  content: "• ";
-  color: gray; /* or whatever color you prefer */
+	content: "• ";
+	color: gray; /* or whatever color you prefer */
 }
 
-
-.btn
-{
-
-
-
-
-  font-weight:bold;
-
-  color:mediumvioletred;
-  text-align: center;
-  line-height: 18px;
-  
+.btn {
+	font-weight: bold;
+	color: mediumvioletred;
+	text-align: center;
+	line-height: 18px;
 }
-.selected
-{
-
 
- 
+.selected {
+	font-weight: bold;
+	color: white;
+	text-align: center;
+	line-height: 18px;
+}
 
-  font-weight:bold;
+.link_button_size {
+	color: mediumvioletred;
+	font-weight: bold;
+	padding-left: 15px;
+	font-size: 14px;
+}
 
-  color:white;
-  text-align: center;
-  line-height: 18px;
-  
+.symbol {
+	display: inline;
+	height: 20px;
+	width: 20px;
+	border-radius: 50%;
+	border: 1px solid black;
+	border: black;
 }
-.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
-{
+
+.back {
 	background-color: mediumvioletred;
-	
 }
-.back_selected
-{
+
+.back_selected {
 	background-color: ghostwhite;
 }
+
 .ecm-Info {
-    padding-left: 8px;
-    vertical-align: super;
-    
+	padding-left: 8px;
+	vertical-align: super;
 }
+
 .ecm-payments {
-    
-    margin-left: -13px;
-    font-size: 15px;
-    color: dimgrey;
-    padding-left: 0px;
+	margin-left: -13px;
+	font-size: 15px;
+	color: dimgrey;
+	padding-left: 0px;
 }
+
 .ecm-share {
-    float: right;
-    cursor: pointer;
-    font-weight: bold;
-    font-size: 15px
+	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;
+
+.share {
+	vertical-align: super;
+	color: dimgray;
 }
-.ecm-card{
-    padding-top: 15px;
+
+.arrow {
+	vertical-align: middle;
+	margin-left: -2px;
+	font-size: 21px;
 }
 
 /*  new */
-
-
 .ecm-other-title {
 	font-size: 18px;
-    padding-bottom: 15px;
-    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{
+	font-weight: 100;
+	font-size: 14px;
+	color: #444;
+	text-align: justify;
+}
+
+.ecm-card {
+	/* margin-top: 20px; */
+	/* max-width: 75rem; */
+	/* margin-left: auto; */
+	/* margin-right: auto; */
+	padding-top: 25px;
+}
+
+.ecm-itemDeatils {
 	padding-bottom: 8px;
-    border-bottom: solid mediumvioletred;
-    border-bottom-width: 2px;
-    font-size: 14px;
+	border-bottom: solid mediumvioletred;
+	border-bottom-width: 2px;
+	font-size: 14px;
 }
 
-.ecm-returnsPolicy{
-	    padding-top: 30px;
+.ecm-returnsPolicy {
+	padding-top: 30px;
 }
 
-.ecm-termsCondition{
+.ecm-termsCondition {
 	padding-top: 30px;
 }
 
-td{
+td {
 	font-size: 15px;
-    font-weight: bold;
-    color: dimgrey;
-    height: 50px;
+	font-weight: bold;
+	color: dimgrey;
+	height: 50px;
 }
-.image
-{
+
+.image {
 	padding-top: 16px;
 }
-.head{
-	 margin-top: 16px;
+
+.head {
+	margin-top: 16px;
 }
+
 .link_changebutton {
-    color: mediumvioletred;
-    font-weight: bold;
-    position: absolute;
+	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));
-  }
+	.Available {
+		font-size: calc(0.8rem + 1.2 * (( 100vw - 20rem)/30));
+	}
 }
+
 @media screen and (min-width: 50rem) {
-  .Available {
-    font-size: 2rem;
-  }
+	.Available {
+		font-size: 2rem;
+	}
 }
 
-
-.ecm-card{
-	margin-top: 20px;
-    max-width: 75rem;
-    margin-left: auto;
-    margin-right: auto;
-}
-.ecm-itemDeatils{
+.ecm-itemDeatils {
 	padding-bottom: 8px;
-    border-bottom: solid mediumvioletred;
-    border-bottom-width: 2px;
-    font-size: 14px;
+	border-bottom: solid mediumvioletred;
+	border-bottom-width: 2px;
+	font-size: 14px;
 }
 
-.ecm-returnsPolicy{
-	    padding-top: 30px;
+.ecm-returnsPolicy {
+	padding-top: 30px;
 }
 
-.ecm-termsCondition{
+.ecm-termsCondition {
 	padding-top: 30px;
 }
 
-td{
+td {
 	font-size: 15px;
-    font-weight: bold;
-    color: dimgrey;
-    height: 50px;
+	font-weight: bold;
+	color: dimgrey;
+	height: 50px;
 }
-.attraction{
+
+.attraction {
 	font-size: 18px;
-    padding-bottom: 15px;
-    display: block;
+	padding-bottom: 15px;
+	display: block;
 }
-.data{
-	 padding-top: 25px;
+
+.data {
+	padding-top: 25px;
 }
 
-.data-title{
-	 font-weight: 100;
-    font-size: 14px;
-    color: #444;
-    text-align: justify;	
-   
+.data-title {
+	font-weight: 100;
+	font-size: 14px;
+	color: #444;
+	text-align: justify;
 	display: inline-block;
-    width: 160px;
-    padding-left: 10px;
+	width: 160px;
+	padding-left: 10px;
 }
 
-.data-title-detail{
-	 font-weight: 100;
-    font-size: 14px;
-    color: #444;
-    text-align: justify;	
-    display: inline;
-    padding-left: 
-	
+.data-title-detail {
+	font-weight: 100;
+	font-size: 14px;
+	color: #444;
+	text-align: justify;
+	display: inline;
+	padding-left:
+}
+
+.product-detail-card {
+	margin-top: 15px;	
 }
 
+.ecm-recent-view {
+	height: 300px;	
+}
+
+@media screen and (max-width: 640px) {
+	.ecm-recent-view {
+		display: none;
+	}
+	
+	.ecm-product-details {
+		width: 100%;
+	}
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.html

 
-<md-card class="row" style="margin-top: 15px;">
-
+<md-card class="product-detail-card">
+	
+	<div class="row">
     <!-- ------------------------HANDICRAFT-IMAGE START HERE-------------------------------- -->
     <div class="medium-6 columns medium-5 columns image">
             <div class="md-card-image">
@@ -12,7 +13,6 @@
     <!-- ----------------------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">
@@ -149,19 +149,18 @@
 				<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-------------------------------- -->  
-            
+    </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 class="small-9 columns ecm-product-details">
+			<md-card> 
 				<div>
 			 	 <span class="ecm-itemDeatils">Items Details</span>
 			 	 </div>
@@ -214,25 +213,20 @@
 				    
 				    </div> 
 				
-		<!-- 			<div *ngIf="allProductDetail" class="Attraction" style="padding-top: 24px;">
+		        <!-- <div *ngIf="allProductDetail" class="Attraction" style="padding-top: 24px;">
 				     <span class="attraction">Activities</span>
 				     <ul *ngFor = "let a of allProductDetail">
 				     <li>{{a.allProductDetail}}</li>
 				     </ul>
 				    </div>  -->
 
-				 
-				   
+				 				   
 				 <!--     <li>A 4th century fort,Thala,stands in the middle of the of a forest and overlooks the hilly terrain</li>
 				     <li>There are quite Few waterFalls in this region the mostpopular is of being taksehi castel</li>
 				     <li>Devi kedar janni hills</li>
 				     <li>Bhira Dam</li>  -->
 				    
-				
-				
-				
-				
-			
+
 				<div class="ecm-returnsPolicy">
 					<span class="ecm-other-title">Return Policy</span>
 					<span class="ecm-other-detail">{{itemDetailpath.returnPolicy}}</span>
@@ -244,7 +238,12 @@
 				</div>
 				
 			</md-card>
-		</div> 
+			</div>
+			
+			<div class="small-3 columns ecm-recent-view">
+			    <ecm-recent-view #recentView> </ecm-recent-view> 
+			</div>
+</div> 
 		
 
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.ts

-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { EcmTemplateInterface } from './ecm-template.component';
 import { ItemDetail } from '../../ecm-model/product-detail-model';
-import { Router,ActivatedRoute } from '@angular/router';
+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',
-  templateUrl: './ecm-handicraft.component.html',
-  styleUrls: ['./ecm-handicraft.component.css']
+import { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
+
+@Component( {
+    selector: 'ecm-handicraft',
+    templateUrl: './ecm-handicraft.component.html',
+    styleUrls: ['./ecm-handicraft.component.css']
 })
-export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface{
-
-  @Input() itemDetail: ItemDetail;
-  @Output() scrollToReviews = new EventEmitter();
-  @Output() doActivity = new EventEmitter();  
-  
-
-  isCartItem = false;
-  //@Input() itemData: Item;  
-  
-  userActionUrl= '/ecm/service/feeds/cart';
-  itemCode;
-  myCity;  
-  Item;
-  itemData;
-  allProductDetail;
-  itemDetailpath;
-  
-  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 ) )
+export class EcmHandicraftComponent implements OnInit, EcmTemplateInterface {
+
+    @Input() itemDetail: ItemDetail;
+    @Output() scrollToReviews = new EventEmitter();
+    @Output() doActivity = new EventEmitter();
+    @ViewChild( 'recentView' ) recentView: EcmRecentViewComponent;
+
+    isCartItem = false;
+    //@Input() itemData: Item;  
+
+    userActionUrl = '/ecm/service/feeds/cart';
+    itemCode;
+    myCity;
+    Item;
+    itemData;
+    allProductDetail;
+    itemDetailpath;
+
+    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.route.params.subscribe( params => {
             this.itemCode = params['key'];
         });
-  
-      this.allProductDetail = this.itemDetail.itemDetailData.itemDetail2.allProductDetail;
-       this.itemDetailpath   =this.itemDetail.itemDetailData.itemDetail2
-   		console.log("Product Details 2"+JSON.stringify(this.allProductDetail));
-     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']);
+
+        this.allProductDetail = this.itemDetail.itemDetailData.itemDetail2.allProductDetail;
+        this.itemDetailpath = this.itemDetail.itemDetailData.itemDetail2
+        console.log( "Product Details 2" + JSON.stringify( this.allProductDetail ) );
+        this.myCity = localStorage.getItem( 'mycity' );
+
+    }
+
+    ngAfterViewInit() {
+        this.recentView.ngOnInit();
     }
-		
+
+    ngOnDestroy() {
+        if ( this.recentView )
+            this.recentView.doDestroy( this.itemDetail.itemCode );
+    }
+
+    createRatings( ratings ) {
+        var rating: number[] = [];
+        for ( var i = 1; i <= ratings; i++ ) {
+            rating.push( i );
+        }
+        return rating;
+    }
+
+    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'] );
+    }
+
 }
 
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-outing.component.css

@@ -266,11 +266,12 @@
     color: #444;
     text-align: justify;	
 }
-.ecm-card{
-	margin-top: 20px;
-    max-width: 75rem;
-    margin-left: auto;
-    margin-right: auto;
+.ecm-card {
+	/* margin-top: 20px; */
+	/* max-width: 75rem; */
+	/* margin-left: auto; */
+	/* margin-right: auto; */
+	padding-top: 25px;
 }
 .ecm-itemDeatils{
 	padding-bottom: 8px;
@@ -304,4 +305,19 @@ ul{
     color: #444;
     text-align: justify;
     padding-left: 30px
-}
+}
\ No newline at end of file
+
+/* Recent View */
+.ecm-recent-view {
+	height: 300px;	
+}
+
+@media screen and (max-width: 640px) {
+	.ecm-recent-view {
+		display: none;
+	}
+	
+	.ecm-itemsDetailsInfo {
+		width: 100%;
+	}
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-outing.component.html

 <div *ngIf="itemDetail">
 
-		<md-card class="row" style="margin-top: 15px;">
+		<md-card style="margin-top: 15px;">
+		 <div class="row">
 			<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- -->
 			<span class="medium-6 medium-5 columns image"> 
 				<ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>	
@@ -69,6 +70,7 @@
 					<span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>	
 				</div>
 			</div>
+		  </div>	
 		</md-card> 
 	
 <!-- ------------------------------- ITEM-DETAILS  ENDS HERE-------------------------------- -->
@@ -88,7 +90,8 @@
 
 		<div class="row ecm-card">
 		<!-- 	<div class="medium-12 col-sm-9 ecm-itemsDetailsInfo" > -->
-			<md-card class="medium-8 medium-7 ecm-itemsDetailsInfo" id="item-detail-2"> 
+			<div class="small-9 columns ecm-itemsDetailsInfo" id="item-detail-2">
+			 <md-card> 
 				<div>
 			 	 <span class="ecm-itemDeatils">Items Details</span>
 			 	 </div>
@@ -152,6 +155,11 @@
 				</div>
 				
 			</md-card>
-		</div> 
+			</div>
+		
+			<div class="small-3 columns ecm-recent-view">
+			    <ecm-recent-view #recentView> </ecm-recent-view> 
+			</div>
+	</div> 
 </div>
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-outing.component.ts

-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } 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 { EcmRecentViewComponent } from '../../ecm-view/ecm-recent-view/ecm-recent-view.component';
 
 import { EcmCartComponent } from '../../ecm-view/ecm-cart/ecm-cart.component';
 import { Item } from '../../ecm-model/product-model';
@@ -20,6 +20,7 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
     @Input() itemDetail: ItemDetail;
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();  
+    @ViewChild('recentView') recentView: EcmRecentViewComponent;
 
     counterValue = 1;
     itemPrice = 1000;
@@ -48,7 +49,16 @@ export class EcmOutingComponent implements OnInit, EcmTemplateInterface {
           this.itemDetailpath   =this.itemDetail.itemDetailData.itemDetail2
         this.myCity = localStorage.getItem('mycity')
     }
-
+    
+    ngAfterViewInit(){
+        this.recentView.ngOnInit();
+    }
+    
+    ngOnDestroy() {
+        if( this.recentView )
+          this.recentView.doDestroy( this.itemDetail.itemCode );
+    }
+    
     createRatings( ratings ) {
         var rating: number[] = [];
         for ( var i = 1; i <= ratings; i++ ) {

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-template.component.html

-<ng-template ecm-template></ng-template>
+<ng-template ecm-template-ref></ng-template>
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-recent-view/ecm-recent-view.component.css

-/*
-.recentView-section {
-	margin-top: 70px;
-	height: 600px;
-	background-color: #F2F2F2;
-}
-
-.row.row-category {
-	max-width: 72rem;
-}
-.ecm-section-info {
-	padding: 10px;
-	max-width: 72rem;
-	margin-left: auto;
-	margin-right: auto;
-}
-.ecm-section-info-title {
-	font-size: 26px;
-	color: #444;
-	display: block;
-}
-.ecm-section-info-subhead {
-	font-size: 16px;
-	color: #888;
-	display: block;
-}
-.end {
-	padding-top: 15px;
-	padding-bottom: 50px;
-}
-*/
 
 .ecm-recent-view {
     width: 300px;
@@ -47,8 +16,8 @@ hr {
 }
 
 .recent-view-title {
-    margin-left: 50px;
-    margin-right: 50px;
+    margin-left: 30px;
+    margin-right: 30px;
     text-align: center;
     display: block;
     height: 40px;
@@ -86,3 +55,35 @@ hr {
     cursor: pointer;
 }
 
+.recentView-section {
+	margin-top: 70px;
+	height: 600px;
+	background-color: #F2F2F2;
+}
+
+.row.row-category {
+	max-width: 72rem;
+}
+.ecm-section-info {
+	padding: 10px;
+	max-width: 72rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+.ecm-section-info-title {
+	font-size: 26px;
+	color: #444;
+	display: block;
+}
+.ecm-section-info-subhead {
+	font-size: 16px;
+	color: #888;
+	display: block;
+}
+.end {
+	padding-top: 15px;
+	padding-bottom: 50px;
+}
+
+
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-recent-view/ecm-recent-view.component.html

-
-<md-card *ngIf="recentViewItems && recentViewItems.length " class="media-object stack-for-small ecm-recent-view" id='recentViewCard'>
+<md-card *ngIf="recentViewItems && recentViewItems.length "id='recentViewCard'>
     <div>
       <span class="recent-view-title"> Recently Viewed </span>
     </div>