Added ecm-variants component

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

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

+<div class="date-selection" *ngIf="availableDates.length > 1">         
+	<span class="header-attribs-title" style="vertical-align: bottom;">Select Date</span>
+	<md-select class="date-select-option" name="date" [(ngModel)]="date_selected">
+		<md-option *ngFor="let variant of availableDates; let i = index" [value]="i" (click)="loadItem(i,'Date')">
+			{{ toDate(variant.value) |date : dispDateFormat}}
+	    </md-option>
+	</md-select>	
+</div>	
+
+<div class="date-selection" *ngIf="availableDates.length == 1">         
+	<span class="header-attribs-title" style="vertical-align: bottom;">Date</span>
+	<span class="date-select-option" click)="loadItem(0,'Date')">
+			{{ toDate(availableDates[0]) |date : dispDateFormat}}
+	</span>
+</div>
+
+<div class="time-selection" *ngIf="availableTimings.length > 1">
+	<span class="header-attribs-title">Time Slot</span>
+	<div class="time-select-chips">
+		<span class="time-slot-chip" *ngFor="let variant of availableTimings; let j = index" (click)="loadItem(j,'Time')"  [ngClass]="time_selected == j ? 'time-selected' : ''">
+			{{ toTime(variant.value) |date : dispTimeFormat}}
+		</span>
+	</div>
+</div>	
+
+<div class="time-selection" *ngIf="availableTimings.length == 1">
+	<span class="header-attribs-title">Timing</span>
+	<div class="time-select-chips">
+		<span class="time-slot-chip selected" (click)="loadItem(0,'Time')">
+			{{ toTime(availableTimings[0]) |date : dispTimeFormat}}
+		</span>
+	</div>
+</div>	
+
+<div *ngIf="availableSizes.length > 0">
+	<span class="size-title">Select Size </span>
+	<div *ngFor="let variant of availableSizes; let i = index"
+		class="size-variant">
+		<a [ngClass]="size_selected == i ? 'highlight' : ''"
+			md-button class="attribute-button"
+			(click)="loadItem(i,'Size')"> {{variant.value}} </a>
+	</div>
+</div>
+	
+<div *ngIf="availableColors.length > 0">
+	<span class="color-title">Select Color </span>
+	<div *ngFor="let variant of availableColors; let j = index"
+		class="color-variant"
+		[ngClass]="color_selected == j ? 'selected' : ''"
+		(click)="loadItem(j,'Color')">
+		<ecm-image [isThumbnail]="true" [refId]='variant.itemCode'
+			[refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"></ecm-image>
+	</div>
+</div>
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-variants/ecm-variants.component.ts

+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+
+@Component( {
+    selector: 'ecm-variants',
+    templateUrl: './ecm-variants.component.html',
+    styleUrls: ['./ecm-variants.component.css']
+})
+export class EcmVariantsComponent implements OnChanges{
+
+    @Input( 'itemCode' ) itemCode: string;
+    @Input( 'itemVariants' ) itemVariants;
+    @Output() selected = new EventEmitter();
+    @Input( 'interactive' ) interactive: boolean = true;
+    currentVariants;
+    traceData: any;
+    availableDates: Array<string> = [];
+    availableTimings: Array<string> = [];
+    availableSizes: Array<string> = [];
+    availableColors: Array<string> = [];
+    date_selected;
+    time_selected;
+    size_selected;
+    color_selected;
+    timeVar
+    attractions: Array<string> = [];
+    activities: Array<string> = [];
+    transportation: Array<string> = [];
+    thingsToCarry: Array<string> = [];
+    advisory: Array<string> = [];
+
+    constructor() { }
+
+    ngOnChanges() {
+        console.log( 'OnInit Item Variants and itemcode', this.itemVariants, this.itemCode );
+        this.fetchAttributes();
+    }
+
+    fetchAttributes() {
+        
+        this.currentVariants = this.itemVariants.products[this.itemCode];
+        console.log( 'data in fetch currentVariants', this.currentVariants );
+        console.log( this.itemVariants.products, this.currentVariants );
+        this.itemVariants.attributes.forEach( keyAttribute => {
+
+            if ( keyAttribute.index >= 0 ) {
+                if ( keyAttribute.label == 'Date' ) {
+                    this.date_selected = this.currentVariants[this.getVarIndex( 'Date' )];
+                    this.itemVariants.attributeOptions[keyAttribute.index].forEach( variant => {
+                        if ( variant.value ) {
+                            this.availableDates.push( variant );
+                        }
+                    });
+                }
+
+                if ( keyAttribute.label == 'Time' ) {
+                    this.time_selected = this.currentVariants[this.getVarIndex( 'Time' )];
+                    this.itemVariants.attributeOptions[keyAttribute.index].forEach( variant => {
+                        if ( variant.value ) {
+                            this.availableTimings.push( variant );
+                        }
+                    });
+                }
+                if ( keyAttribute.label == 'Size' ) {
+                    this.size_selected = this.currentVariants[this.getVarIndex( 'Size' )];
+                    this.itemVariants.attributeOptions[keyAttribute.index].forEach( variant => {
+                        if ( variant.value ) {
+                            this.availableSizes.push( variant );
+                        }
+                    });
+                }
+
+                if ( keyAttribute.label == 'Color' ) {
+                    this.color_selected = this.currentVariants[this.getVarIndex( 'Color' )];
+                    this.itemVariants.attributeOptions[keyAttribute.index].forEach( variant => {
+                        if ( variant.value ) {
+                            this.availableColors.push( variant );
+                        }
+                    });
+                }
+            }
+        });
+
+    }
+
+    getVarIndex( variant ) {
+        let selectedVariant = this.itemVariants.attributes.find( keyAttribute => keyAttribute.label === variant );
+        if ( !selectedVariant )
+            return -1;
+        return selectedVariant.index;
+    }
+
+    loadItem( index, variant ) {
+
+        let varIndex = this.getVarIndex( variant );
+        let currentVariants = this.simpleClone( this.currentVariants );
+        currentVariants[varIndex] = index;
+        console.log( 'loadItem index:[' + index + ']variant:[' + variant + ']varIndex[' + varIndex + ']', currentVariants );
+
+        let itemCode;
+        let keys = Object.keys( this.itemVariants.products );
+        //items.find(x => x.itemCode === this.itemCode);
+        keys.forEach( product => {
+
+            let variants = this.itemVariants.products[product];
+            console.log( 'loadItem variants:[', variants, currentVariants );
+            if ( this.compare( currentVariants, variants ) ) {
+                if ( product != this.itemCode ) {
+                    itemCode = product;
+                    console.log( 'compare  product:[' + product + ']' );
+                }
+            }
+        });
+
+        if ( itemCode ) {
+            this.selected.emit( itemCode );
+        }
+    }
+    dispDateFormat = 'dd MMM yyyy - EEEE';
+    dispTimeFormat = 'hh:mm a';
+    toDate( dateStr ) {
+        var parts = dateStr.split( "-" );
+        return new Date( parts[2], parts[1] - 1, parts[0] );
+    }
+
+    toTime( timeStr ) {
+        var parts = timeStr.split( ":" );
+        var d = new Date();
+        this.timeVar = new Date( d.getFullYear(), d.getMonth(), d.getDay(), parts[0], parts[1], 0, 0 );
+        return new Date( d.getFullYear(), d.getMonth(), d.getDay(), parts[0], parts[1], 0, 0 );
+    }
+
+    compare( array1, array2 ) {
+        if ( array1.length != array2.length )
+            return false;
+        else {
+            for ( let i = 0; i < array1.length; i++ ) {
+                if ( array1[i] != array2[i] )
+                    return false;
+            }
+            return true;
+        }
+    }
+
+    simpleClone( obj: any ) {
+        return Object.assign( [], obj );
+    }
+
+}