Commit e1b8114c authored by root's avatar root

Deleting

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174318 ce508802-f39f-4f6c-b175-0d175dae99d5
parent fb29e195
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "ProteusECM"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/hammerjs/hammer.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>ProteusECM</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
# AdminLTE
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.2.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
{
"name": "proteus-ecm",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/cdk": "^2.0.0-beta.11",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.11",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^2.0.4",
"@ngrx/store": "^2.2.2",
"angular2-jwt": "^0.2.3",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"ngrx-store-logger": "^0.2.0",
"rxjs": "^5.1.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.1.1",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
beforeLaunch: function() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
},
onPrepare() {
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
import { Component } from '@angular/core';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import {AppState} from './ecm-store/reducers';
import {CartActions, CategoryActions, MenuActions, WishListActions} from './ecm-store/actions';
import { HostUrlService } from './host-url.service';
import { Store } from '@ngrx/store';
@Component({
selector: 'ecm-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
export class AppComponent {
title = 'Proteus ECM';
location: Location;
locationPath: string = "";
constructor(location: Location, private store: Store<AppState>, private cartAction: CartActions, private categoryAction: CategoryActions, private menuAction:MenuActions, private wishListAction: WishListActions, public hostUrlService : HostUrlService) {
this.location = location;
this.locationPath = this.location.path(true);
console.log( ' this.locationPath[' + this.locationPath + ']');
var url = '';
if( document.getElementById("hostUrl") ){
url= (<HTMLInputElement>document.getElementById("hostUrl")).value;
}
this.hostUrlService.hostUrl = url;
setTimeout(() => {
this.checkAppState();
}, 1000);
}
checkAppState(){
this.setItem('jwtToken', this.get('jwtToken'), false );
this.setItem('appstate', this.get('app_stat'), true );
this.setItem('TOKEN_ID', this.get('TOKEN_ID'), true );
this.setItem('ECM_TYPE', this.get('ECM_TYPE'), true );
this.store.dispatch(this.cartAction.loadCartItems());
this.store.dispatch(this.wishListAction.loadWishlistItems());
this.store.dispatch(this.categoryAction.loadCategories());
this.store.dispatch(this.menuAction.loadMenu());
}
get(name){
var retVal = 'undefined';
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(this.locationPath))
{
console.log( 'name[' + name + '] decodeURIComponent(name[1]) [' + decodeURIComponent(name[1]) + ']');
retVal = decodeURIComponent(name[1]);
}
console.log( 'retVal[' + retVal + ']');
return retVal;
}
setItem(key, data, isUndefined){
if (typeof(Storage) != 'undefined' && ( data !== 'undefined' || isUndefined ) )
{
localStorage.setItem(key, data);
}
else
{
console.log('Sorry, your browser does not support Web Storage...');
}
}
}
This diff is collapsed.
h6
{
color: mediumvioletred;
}
/* .changePass-form */
/* { */
/* position: relative; */
/* left: calc( ( 100% / 2 ) - 187.5px ); */
/* margin: 0; */
/* width: 375px; */
/* padding: 0 40px 0 40px; */
/* } */
.password-input-container {
/* width: 320px; */
/* width: 295px; */
font-size: 15px;
/* line-height: 15px; */
/* margin: 0 0 10px 0; */
/* padding: 0; */
width: 100%;
}
.password-input {
height:20px;
}
.statusError {
position: absolute;
font-size: 75%;
width: 50%;
margin-top: -1.2em;
line-height: 1.2em;
overflow: hidden;
}
.successForm{
position: absolute;
left: calc( ( 100% / 2 ) - 110px );
top: 40%;
color: mediumvioletred;
}
.signin-button
{
background: mediumvioletred;
color: #fff;
}
.signin-button[disabled]
{
background: #e0e0e0;
color: #fff;
}
.signin-button{
width: 200px;
height: 46px;
font-size: 15px;
line-height: 15px;
text-align: center;
border-radius: 2px;
position: relative;
padding: 0;
margin: 5px 0 5px 0;
}
.changePassForm{
padding: 10px;
}
.changePass-head{
font-size: 16px;
font-weight: normal;
border-bottom: 1px solid lightgrey;
padding: 12px;
}
.changePass-form{
padding: 0px;
}
<div class="row">
<div class="small-12 medium-12 large-12 medium column changePass-form ">
<div class="changePass-head">
<span *ngIf="!fullProfile">Change Password</span>
</div>
<form class="changePassForm" #changePass="ngForm" (ngSubmit)="changePassword(changePass);" novalidate autocomplete="off">
<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
<input mdInput class="username-input" placeholder="Current Password" required name="cpassword" [(ngModel)]="_current_password" #current_password="ngModel" (keydown)="clearTimer();" type = 'password'
#curPassElem (focus) = "scrollIntoView(curPassElem);" />
<md-error *ngIf="current_password.errors && current_password.dirty" class="">Password required</md-error>
</md-input-container>
<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
<input mdInput class="username-input" placeholder="New Password" required name="npassword" [(ngModel)]="_new_password" #new_password="ngModel" (keydown)="clearTimer();" type = 'password'
#newPassElem (focus) = "scrollIntoView(newPassElem);" />
<md-error *ngIf="new_password.errors && new_password.dirty" class="">Password required</md-error>
</md-input-container>
<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
<input mdInput class="username-input" placeholder="Confirm Password" required name="cfpassword" [(ngModel)]="_confirm_password" #confirm_password="ngModel" (keydown)="clearTimer();" type = 'password'
#confPassElem (focus) = "scrollIntoView(confPassElem);" />
<md-error *ngIf="confirm_password.errors && confirm_password.dirty" class="">Password required</md-error>
</md-input-container>
<md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error>
<button md-button class="signin-button" type="submit" [disabled]="!changePass.form.valid">Change Password</button>
</form>
<md-progress-bar *ngIf="statusPending"
class="signin-progress-bar"
[color]="'primary'"
[mode]="'indeterminate'"
[value]="50">
</md-progress-bar>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangePasswordComponent } from './change-password.component';
describe('ChangePasswordComponent', () => {
let component: ChangePasswordComponent;
let fixture: ComponentFixture<ChangePasswordComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ChangePasswordComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChangePasswordComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ECMSigninService } from '../ecm-signin/ecm-signin.service';
import { FormGroupDirective, NgControl, NgForm, NgModel } from '@angular/forms';
@Component( {
selector: 'change-password',
templateUrl: './change-password.component.html',
styleUrls: ['./change-password.component.css'],
providers: [ECMSigninService]
})
export class ChangePasswordComponent implements OnInit {
_username: string;
_password: string;
_npassword: string;
statusPending: boolean = false;
statusErrorMsg: string;
userData: any;
_current_password: string;
_new_password: string;
_confirm_password: string;
@Output() closePanel = new EventEmitter();
constructor( public signinService: ECMSigninService, ) { }
@Input('activeScreen') activeScreen : string = 'userInfoScreen';
activeNGForm: NgForm;
ngOnInit() {
}
changePassword(chgForm: NgForm) {
this.signinService.changeCurrentPassword( this.userData.jti, this._new_password, this._current_password, this.userData.TOKEN_ID ).subscribe(
result => {
console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf( '{' ) + ']' );
if ( result.Response.status == 'success' ) {
console.log( 'Logging Out' );
alert(result.Response.results);
this.activeScreen = 'successForm';
this.userData = null;
//TODO Load Login Screen
this.closePanel.emit();
}
else if ( result.Response.status == 'error' ) {
chgForm.resetForm();
}
},
error => {
let errorMessage = <any>error;
console.log( 'comp errorMessage[' + errorMessage + ']' );
}
);
}
}
.ecm-breadcrumbs {
/* font-size: .85em; */
color: #000;
line-height: 1.5;
/* margin: 20px; */
padding-left: 0;
margin: 0;
list-style-type: none;
}
.ecm-breadcrumbs li {
display: inline;
list-style-type: none;
margin-left: 0;
}
.ecm-breadcrumbs li:before {
content: "/";
color: gray;
padding-left: 8px;
padding-right: 8px;
}
.ecm-breadcrumbs li:first-child:before {
content: "";
padding-right: 5px;
}
.ecm-breadcrumbs li a {
background-color: transparent;
color: black;
text-decoration: none;
cursor: pointer;
}
.ecm-breadcrumbs li a:hover {
/*color: rgba(199, 21, 133, 0.45);*/
color: mediumvioletred;
}
/*
.row.sub-heading {
top: 60px;
position: relative;
background: #ffffff;
max-width: 100rem;
padding-left: 3rem;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
*/
/* New */
.sub-heading {
position: relative;
top: 70px;
padding-left: 3rem;
}
.img-back-32 {
content: url(../../assets/images/svg/back_32_32.svg);
}
.fixed-header-back {
position: absolute;
padding: 0;
height: 20px !important;
width: 20px !important;
min-width: 20px !important;
/* box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1); */
box-shadow: none;
cursor: pointer;
/*border-radius: 100%;*/
margin-left: -2rem !important;
background: #F2F2F2;
}
.fixed-header-back:hover {
box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1);
}
.ecm-section-info {
padding: 8px;
}
.disabled-link {
background-color: transparent;
color: gray;
text-decoration: none;
cursor: default;
}
\ No newline at end of file
<div class="row sub-heading">
<div class="ecm-section-info" >
<img class="fixed-header-back img-back-32 mat-raised-button" (click) = "backClicked();" src="back_32_32.svg" />
<ul class="ecm-breadcrumbs">
<li *ngFor="let breadcrumb of getBreadCrummbs(); let i = index">
<a *ngIf="!((i+1) == getBreadCrummbs().length)" [routerLink]="[breadcrumb.url]">{{breadcrumb.label}}</a>
<span class="disabled-link" *ngIf="(i+1) == getBreadCrummbs().length">{{breadcrumb.label}}</span>
</li>
</ul>
</div>
</div>
\ No newline at end of file
import { Component, OnInit, Input, Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { Store } from '@ngrx/store';
import {AppState} from '../ecm-store/reducers';
import { ItemDetail } from '../ecm-model/product-detail-model';
import { Category } from '../ecm-model/category-model';
import { SubCategory } from '../ecm-model/subcategory-model';
import { Item } from '../ecm-model/product-model';
import { Observable } from 'rxjs/Observable';
interface IBreadcrumb {
label: string;
url: string;
}
@Injectable()
export class Breadcrumbs {
breadcrumbsList: IBreadcrumb[] = [];
get breadcrumbs(): IBreadcrumb[] { return this.breadcrumbsList; }
set breadcrumbs(breadcrumbs: IBreadcrumb[]) {
console.log('set breadcrumbs',breadcrumbs);
this.breadcrumbsList = breadcrumbs;
}
constructor() {
}
}
@Component( {
selector: 'ecm-breadcrumbs',
templateUrl: './ecm-breadcrumbs.component.html',
styleUrls: ['./ecm-breadcrumbs.component.css']
})
export class EcmBreadcrumbsComponent implements OnInit {
@Input() itemDetail: ItemDetail;
@Input() pageName;
breadcrumbs: IBreadcrumb[] = [];
category;
subcategory;
item : Observable<Item>;
constructor( private _location: Location, private store: Store<AppState>, public breadcrumbSerivce: Breadcrumbs) { }
ngOnInit() {
}
backClicked() {
//TODO : Pagewise Back click
this._location.back();
}
getBreadCrummbs(){
return this.breadcrumbSerivce.breadcrumbs;
}
}
.ecm-card {
border-radius: 5px;
box-shadow: 0 0 5px 0px #ccc;
padding: 0;
margin: 0;
position: relative;
height: 400px;
width: auto;
background-color: #fff;
border-radius: 3px;
cursor: pointer;
}
@media screen and (max-width: 640px){
.ecm-card {
box-shadow: none;
}
}
.ecm-card-img {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
width: 100%;
height: calc( 100% - 90px);
}
.ecm-card-footer {
width: 100%;
height: 70px;
padding: 10px;
}
.ecm-card-info {
padding: 6px 0px 8px 8px;
/*width: calc(100% - 165px);
width: calc(100% - 150px);
float: left;*/
}
.ecm-card-info-title {
font-size: 14px;
font-weight: 600;
color: #444;
display: block;
line-height: 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ecm-card-info-subhead {
font-size: 12px;
color: #888;
top: 7px;
position: relative;
overflow: hidden;
line-height: 15px;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
}
/*
@supports (-webkit-line-clamp: 2) {
.ecm-card-info-subhead {
font-size: 12px;
color: #888;
top: 7px;
position: relative;
overflow: hidden;
line-height: 15px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
text-overflow: initial;
}
}
*/
.ecm-card-info-img {
float: left;
/*background-color: mediumvioletred;*/
border: none;
border-radius: 100%;
}
.ecm-card-action {
width: 90px;
height: 42px;
line-height: 15px;
font-size: 12px;
padding: 15px;
text-align: center;
float: right;
position: relative;
top: 5px;
color: #c71585;
right: 5px;
box-shadow: none;
font-weight: 700;
}
.ecm-card-action:HOVER {
background-color: mediumvioletred;
color: #fff;
}
.top {
position: absolute;
right: 20px;
top: 15px;
}
.share {
/*background-image: url("../../assets/images/share.png");*/
border: none;
width: 40px;
height: 40px;
}
.share:hover {
background-color: transparent;
}
.ecm-card-price {
/* width: 90px; */
/* height: 35px; */
/* line-height: 20px; */
/* border-radius: 2px; */
/* position: relative; */
/* top: 15px; */
/* right: 10px; */
/*
font-size: 20px;
text-align: center;
padding: 10px;
float: right;
*/
color: #333;
}
p {
color: #616161;
margin-bottom: 0;
line-height: 1.3;
}
.ecm-ratings{
/* top: 10px !important;
font-size: 20px;*/
color: rgb(500, 150, 50);
display: block;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
/* top: 5px; */
}
.ecm-rupee{
color: #787878;
font-size: 14px;
}
#ecm-item {
cursor: pointer;
height: 320px;
margin-top: 5px;
}
#ecm-item-info {
/* padding: 10px;
width: calc(100% - 120px);
padding: 10px;
width: calc(100% - 80px); */
}
#ecm-item-info-title {
line-height: 15px;
padding-top: 0px;
padding-right: 5px;
position: relative;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 70%;
vertical-align: middle;
}
#ecm-item-info-subhead {
top: 5px;
line-height: 12px;
}
/* ECM Reviews */
.circle {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 100%;
font-size: 35px;
color: white;
text-align: center;
background: mediumturquoise;
position: absolute;
}
.ecm-result-header{
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
}
.ecm-select {
float: right;
padding-left: 25px;
font-size: 12px;
}
.ecm-options {
line-height: 32px;
height: 35px;
font-size: 14px;
padding: 0px 10px 0px 10px;
}
.ecm-result-info{
font-size: 18px
}
.ecm-review-tab {
padding: 20px;
}
.ecm-product-ratings{
color: rgb(500, 150, 50);
font-size: 20px;
display: block;
}
.ecm-null-ratings {
color: lightgray;
}
.review-section {
margin-left: 115px;
padding-right: 35px;
}
.ecm-review-title {
display: block;
font-size: 18px;
}
.ecm-user-comments {
font-size: 14px;
color: #444;
padding-top: 15px;
padding-bottom: 10px;
display: block;
text-align: justify;
}
.ecm-customer-details {
display: block;
color: #444;
font-size: 12px;
padding-top: 5px;
}
.user-img {
border-radius: 50%;
height: 50px;
width: 50px;
background: lightgrey;
}
.ecm-img {
padding-left: 35px;
position: absolute;
}
.ecm-reviews {
position: relative;
padding-top: 15px;
padding-bottom: 30px;
}
.ecm-result-count {
font-size: 10px;
padding-left: 15px;
color: #444;
}
.mat-select-trigger {
height: 20px !important;
}
.ecm-select-options {
display: inline-flex;
float: right;
}
.ecm-thumbsup-icon {
padding-top: 20px;
padding-left: 10px;
height: 15px;
width: 15px;
opacity: 0.4;
}
.likes-count {
font-size: 15px;
color: #444;
opacity: 0.8;
padding-left: 5px;
padding-right: 15px;
}
.ecm-seperator {
padding-left: 5px;
font-size: 20px;
}
.ecm-verified-icon {
font-size: 18px;
vertical-align: sub;
color: green;
}
.ecm-thumpsdown-icon, .ecm-thumpsup-icon{
font-size: 18px;
vertical-align: sub;
color: grey;
opacity: 0.5;
cursor: pointer;
}
.ecm-thumpsdown-icon:hover, .ecm-thumpsup-icon:hover {
color: mediumvioletred;
opacity: 1;
}
.ecm-item-footer {
/* border-top: 1px solid #f3f3f3; */
padding: 10px;
width: 100%;
}
.ecm-discount-rate{
font-weight: bold;
padding-left: 5px;
}
.ecm-discount-off{
font-weight: bold;
color: green;
padding-left: 5px;
}
.new{
background: yellow;
font-size: 12px;
padding: 2px 8px;
}
.ecm-total-ratings{
color: #333;
font-weight: bold;
font-size: 12px;
}
.ecm-wishlist-button{
position: absolute;
/* padding: 8px; */
/* padding: 8px; */
right: 25px;
top: 25px;
/* height: 40px; */
/* width: 40px; */
cursor: pointer;
line-height: 8px;
z-index: 1;
color: darkgray;
}
.ecm-wishlist-button:hover {
color: mediumvioletred !important;
}
.favourite-icon {
color: inherit;
font-size: 28px;
}
.close-icon{
color: inherit;
/* font-size: 22px; */
position: relative;
box-shadow: 0px 0px 3px 1px lightgrey;
border-radius: 100%;
}
.inwishlist {
color: mediumvioletred !important;
}
.product-img-container {
position: relative;
min-height: 230px;
padding: 0;
}
.trend-img-container {
position: relative;
min-height: 310px;
padding: 0;
}
/* CSSS FOR ORDER */
.orderDescription1, .orderDescription2, .orderDescription3, .offers{
font-size: 13px;
}
.orderDescription1{
color:rgb(72, 72, 72)
}
.orderDescription2{
display: block;
font-weight: bold;
/* color: rgb(70, 67, 67); */
/* height: 40px; */
}
.deliveryDate{
font-size: 12px;
color: rgb(113, 113, 113);
position: relative;
top: 16px;
}
.trackButton{
padding-top: 28px;
padding-bottom: 12px;
}
.cancel-order-button{
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 3px;
background: #fff;
color: mediumvioletred !important;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
min-width: 80px;
margin-right: 5px;
width: calc(50% - 10px)
}
.track-order-button{
display: inline-block;
height: 40px;
line-height: 40px;
background: mediumvioletred;
color: #fff !important;
text-align: center;
margin-left: 5px;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
min-width: 80px;
width: calc(50% - 10px);
}
.orderQuantity{
display: block;
font-size: 10px;
font-weight: bold;
color: dimgray;
height: 24px;
}
.orderPrice{
font-size: 14px;
font-weight: bold;
}
@media screen and (max-width: 640px){
.trackButton, .offers {
display: none !important;
}
.reviewScreen {
border-left: 0;
}
.reviewScreen{
border-top: 1px solid rgba(158, 158, 158, 0.28) !important;
margin-top: 40px !important;
min-height: 78px;
}
}
.reviewScreen{
border-left: 1px solid lightgray;
min-height: 158px;
}
<div *ngIf="card" class="ecm-card">
<img class="ecm-card-img" src="{{card.img}}" alt="Washed Out">
<div class="ecm-card-footer">
<img class="ecm-card-info-img" src="{{card.info_img}}" />
<div class="ecm-card-info">
<span class="ecm-card-info-title">{{card.info_title}}</span>
<span class="ecm-card-info-subhead">{{card.info_subhead}}</span>
</div>
<a md-raised-button *ngIf="!card.info_link" class="ecm-card-action">Open</a>
<a *ngIf="!card.info_link" class="ecm-card-action top share"></a>
</div>
</div>
<div *ngIf="category" class="ecm-card" (click)="viewCategories()">
<!-- <img class="ecm-card-img"src="{{category.resourceUrl}}{{category.catCode}}.png"alt="Category image"> -->
<ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-footer">
<ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-info">
<span class="ecm-card-info-title">{{category.shDescr}}</span>
<span class="ecm-card-info-subhead">{{category.descr}}</span>
</div>
<!-- <a md-raised-button *ngIf="!category.catLink" class="ecm-card-action" (click)="viewCategories()">View</a> -->
<a *ngIf="!category.catLink" class="ecm-card-action top share" [routerLink]="[ '/share',category.catCode]"></a>
</div>
</div>
<div *ngIf="subcategory" class="ecm-card" (click)="viewProducts()">
<!-- <img class="ecm-card-img"src="{{subcategory.resourceUrl}}{{subcategory.scatCode}}.png"alt="Category image">-->
<ecm-image [refId]="subcategory.scatCode + ':' + subcategory.catCode" [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-footer">
<ecm-image [refId]='subcategory.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-info">
<span class="ecm-card-info-title">{{subcategory.shDescr}}</span>
<span class="ecm-card-info-subhead">{{subcategory.descr}}</span>
</div>
<!-- <a md-raised-button *ngIf="!subcategory.catLink" class="ecm-card-action" (click)="viewProducts()">View</a> -->
<a *ngIf="!subcategory.catLink" class="ecm-card-action top share" [routerLink]="[ '/share',subcategory.scatCode]"></a>
</div>
</div>
<div *ngIf="itemData" >
<!-- <div class="ecm-wishlist-button">
<md-button-toggle class="wishButton">
<md-icon style="position: relative;right: -10px;" *ngIf="!inWishlist" (click)="addToWishlist();">favorite_border</md-icon>
<md-icon style="position: relative;right: -10px;" (click)="removeFromWishlist();" >favorite</md-icon>
</md-button-toggle>
</div> -->
<div class="ecm-card" id="ecm-item" (click)="viewItem()">
<ecm-image [ngClass]="trendImg ? 'trend-img-container' : 'product-img-container'" class="large-12 columns" [isThumbnail]="true" [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>
<div class="ecm-item-footer large-12 columns">
<div class="ecm-item-info" id="ecm-item-info">
<span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.itemHeader.itemShDescr}}</span>
<span class="new" >New</span>
<!--
<span *ngIf="itemData.cat_sh_descr && itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{itemData.cat_sh_descr}} - {{itemData.scat_sh_descr}}</span>
<span *ngIf="extraParam && !itemData.cat_sh_descr && !itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{extraParam.catShDesc}} - {{extraParam.scatDesc}}</span>
-->
</div>
<div class="ecm-card-price"><span class="ecm-rupee"></span><s style="color:lightgray;">Rs. {{itemData.itemHeader.itemCostRate | number : '3.1-5'}}</s>
<span class="ecm-discount-rate">Rs.{{itemData.itemHeader.itemDiscountedRate | number : '3.1-5'}}</span>
<span class="ecm-discount-off">{{itemData.itemHeader.itemDiscount}}% off</span>
</div>
<div class="ecm-ratings">
<rating style="vertical-align: sub;" [rate]="itemData.itemRatings.AVG_RATING" [isSmallRatings]=true></rating>
<span class="ecm-total-ratings">({{itemData.itemRatings.NO_OF_RATINGS}})</span>
</div>
</div>
</div>
<div [ngClass]="inWishlist ? 'inwishlist' : ''" [style.top]="IS_WISHLIST ? '25px' : '15px'" class="ecm-wishlist-button">
<md-icon *ngIf="!IS_WISHLIST" class="favourite-icon" (click)="inWishlist ? removeFromWishlist.emit() : addToWishlist.emit()">favorite</md-icon>
<md-icon *ngIf="IS_WISHLIST" class="close-icon" (click)="removeFromWishlist.emit()">close</md-icon>
</div>
</div>
<!-- <div *ngIf="outingData" class="ecm-card" id="ecm-item" (click)="viewItem()">
<ecm-image [isThumbnail]="true" [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>
<div class="ecm-item-footer">
<div class="ecm-card-info" id="ecm-item-info">
<span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.shDescr}}</span>
<!--
<span *ngIf="itemData.cat_sh_descr && itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{itemData.cat_sh_descr}} - {{itemData.scat_sh_descr}}</span>
<span *ngIf="extraParam && !itemData.cat_sh_descr && !itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{extraParam.catShDesc}} - {{extraParam.scatDesc}}</span>
<span class="ecm-ratings">
<span *ngFor="let a of createRatings(itemData.rating);">&#x2605;</span>
</span>
</div>
<div class="ecm-card-price"><span class="ecm-rupee">Rs. </span>{{itemData.costRate}}</div>
</div>
</div> -->
<div *ngIf="reviewsData" class="ecm-reviews">
<div class="ecm-img"> <span class="circle"> {{reviewsData.reviewBy.charAt(0).toUpperCase()}} </span> </div>
<div class="review-section">
<span class="ecm-product-ratings">
<span *ngFor="let a of createRatings(reviewsData.productRating);" >
&#x2605;
</span>
<span *ngFor="let a of createRatings(5 - reviewsData.productRating);" class="ecm-null-ratings">
&#x2605;
</span>
</span>
<span class="ecm-review-title">{{reviewsData.productRemarks}}</span>
<span class="ecm-customer-details"> By {{reviewsData.reviewBy}} on {{reviewsData.reviewDate | date :'longDate'}} <span class="ecm-seperator">|</span> <i class="material-icons ecm-verified-icon">&#xE86C;</i> Verified Customer</span>
<span class="ecm-user-comments">{{reviewsData.productComments}}</span>
<i (click)="updateLikes(reviewsData.item_code)" class="material-icons ecm-thumpsup-icon">&#xE8DC;</i>
<span class="likes-count"> {{reviewsData.productUsfulCnt}} </span>
<i (click)="updateDislikes(reviewsData.item_code)" class="material-icons ecm-thumpsdown-icon">&#xE8DB;</i>
<span class="likes-count"> {{reviewsData.productNotUsfulCnt}} </span>
</div>
</div>
<div *ngIf="orderDetails">
<div class="small-4 medium-2 large-2 columns">
<ecm-image [refId]='orderDetails.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
</div>
<div class="small-8 medium-3 large-3 columns orderDescriptiom">
<span class="orderDescription1">{{itemDetail?.itemHeader.itemShDescr}}</span>
<span class="orderDescription2">{{itemDetail?.itemHeader.itemDescr}}</span>
<span class="deliveryDate">Delivery expected between 4 to 5 days</span>
<div class="trackButton">
<button md-button class="cancel-order-button" (click)="cancelOrder()">Cancel</button>
<button md-button class="track-order-button" (click)="trackOrder()">Track</button>
</div>
</div>
<div class="small-3 medium-3 large-3 columns offers"
style="text-align: center;">
<span class="orderQuantity">Quantity {{orderDetails?.quantity}}</span>
<span class="orderPrice">Rs {{itemDetail?.itemHeader.itemDiscountedRate}}</span>
</div>
</div>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { MdSnackBar } from '@angular/material';
import { Store } from '@ngrx/store';
import {AppState} from '../ecm-store/reducers';
import { ECMCard } from '../ecm-model/card-model';
import { Category } from '../ecm-model/category-model';
import { SubCategory } from '../ecm-model/subcategory-model';
import { ItemDetail } from '../ecm-model/product-detail-model';
import { Reviews } from '../ecm-model/product-review.model';
import { EcmProductReviewService } from '../ecm-product-details/ecm-product-review.service';
import {EcmProductDetailService} from '../ecm-product-details/ecm-product-detail.service'
import { Observable } from 'rxjs/Observable';
import { Item } from '../ecm-model/product-model';
import { Order } from '../ecm-model/order-model';
import { ItemActions } from '../ecm-store/actions';
@Component({
selector: 'ecm-card',
templateUrl: './ecm-card.component.html',
styleUrls: ['./ecm-card.component.css']
})
export class ECMCardComponent implements OnInit {
@Input() card: ECMCard;
@Input() category: Category;
@Input() subcategory: SubCategory;
@Input() itemData: ItemDetail;
@Input() extraParam: any;
@Input() reviewsData: Reviews;
@Input('trendImg') trendImg: boolean;
@Input() orderDetails: Order;
inWishlist: boolean;
@Output() storeData = new EventEmitter();
@Output() addToWishlist = new EventEmitter();
@Output() removeFromWishlist = new EventEmitter();
itemCode: any;
itemDetail: ItemDetail;
wishlistItems: Observable<Item[]>;
categoryList: any;
IS_WISHLIST: boolean;
constructor(private route: ActivatedRoute,private router: Router, private productDetailService: EcmProductDetailService, private productReviewService: EcmProductReviewService, private store: Store<AppState>, private itemAction: ItemActions, public snackBar: MdSnackBar,) {
}
ngOnInit() {
if(this.itemData){
this.wishlistItems = this.store.select('wishlistItems');
this.wishlistItems.subscribe( wishlistItems => {
if(wishlistItems.find(x => x.itemCode === this.itemData.itemCode))
this.inWishlist = true;
else
this.inWishlist = false;
} );
}
let openRoutePath = this.route.snapshot.url[0].path;
if(openRoutePath == 'wishlist'){
this.IS_WISHLIST = true;
}
let menu : Observable<any> = this.store.select('menuList');
menu.subscribe( menuList => {
this.categoryList = menuList.summary;
console.log('menuList.summary',menuList, menuList.summary);
});
if(this.orderDetails){
this.productDetailService.getItemDetail(this.orderDetails.itemCode).subscribe(
itemDetail => {
this.itemDetail = itemDetail;
}
);
}
}
viewItem(){
// this.recentviewService.storeRecentViewItem(this.itemData.itemCode);
this.storeData.emit(this.itemData);
this.router.navigate(['/detail',this.itemData.itemCode]);
}
createRatings(ratings){
var rating: number[] = [];
for(var i = 1; i <= ratings; i++){
rating.push(i);
}
return rating;
}
viewCategories(){
let cat = this.categoryList.find( category => category.catCode === this.category.catCode);
console.log( this.categoryList, cat );
if( cat && !cat.subcategory ){
this.store.dispatch( this.itemAction.loadItems( this.category.catCode ) );
this.router.navigate([ '/products', this.category.catCode]);
}
else {
this.storeData.emit(this.category);
this.router.navigate([ '/categories', this.category.catCode]);
}
}
viewProducts(){
this.storeData.emit(this.subcategory);
this.router.navigate([ '/products', this.subcategory.scatCode]);
}
updateLikes(item_code) {
if(this.isAuthUser())
{
let likesData ="{\"userId\":\""+this.reviewsData.userId+"\",\"productUsfulCnt\":\""+(this.reviewsData.productUsfulCnt+1)+"\",\"productNotUsfulCnt\":\""+this.reviewsData.productNotUsfulCnt+"\"}";
console.log("Likes Data-->");
console.log(likesData);
this.productReviewService.updateLikes(item_code, likesData);
}
else
{
alert("Please Login First.");
}
}
updateDislikes(item_code) {
if(this.isAuthUser())
{
let likesData ="{\"userId\":\""+this.reviewsData.userId+"\",\"productUsfulCnt\":\""+this.reviewsData.productUsfulCnt+"\",\"productNotUsfulCnt\":\""+(this.reviewsData.productNotUsfulCnt-1)+"\"}";
console.log("Likes Data-->");
console.log(likesData);
this.productReviewService.updateLikes(item_code, likesData);
}
else
{
alert("Please Login First.");
}
}
isAuthUser(){
var isAuthUser;
var userInfo = localStorage.getItem( 'userInfo' );
console.log( 'EcmUserOptionComponent getUserInfo ::' + userInfo );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
isAuthUser = true;
}
else
{
isAuthUser = false;
}
return isAuthUser;
}
//////////////////////////////////// FOR ORDERS ////////////////////////////////////////////
cancelOrder(){
this.openSnackBar( 'The Order has been canceled' );
}
openSnackBar( message: string ) {
this.snackBar.open( message, '', {
duration: 2000,
});
}
}
.view-all-card {
border-radius: 5px;
box-shadow: 0 0 5px 0px #ccc;
padding: 0;
margin: 0;
position: relative;
height: 400px;
width: auto;
padding-top: 50%;
padding-left: 30%;
}
.view-all-link {
color: mediumvioletred;
font-size: 32px;
}
.carousel {
width: 100%;
}
.carousel-cell {
height: 400px;
margin-right: 10px;
border-radius: 5px;
counter-increment: gallery-cell;
}
.carousel-cell:before {
display: block;
text-align: center;
line-height: 200px;
font-size: 80px;
color: white;
}
.carousel-cell #ecm-item {
height: 400px !important;
}
/* full height */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px !important;
height: 44px !important;
border: none;
border-radius: 50%;
background: white;
cursor: pointer;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
transition: background-color .25s ease-out, color .25s ease-out;
}
.flickity-prev-next-button:hover,
.flickity-prev-next-button:focus {
opacity: 1;
background: transparent;
}
.flickity-prev-next-button:disabled {
display: none;
}
button.flickity-prev-next-button.next:before {
content: "\203A";
font-size: 32px;
line-height: 16px;
}
button.flickity-prev-next-button.previous:before {
content: "\2039";
font-size: 32px;
line-height: 16px;
}
/* arrow visibility */
.flickity-prev-next-button .arrow {
display: none;
}
/* prev-next button position outside and background image */
.flickity-prev-next-button.previous {
left: -20px;
width: 40px;
top: 205px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.flickity-prev-next-button.next {
right: -16px;
width: 40px;
top: 205px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.flickity-prev-next-button.next:active {
color: white;
background-color: black;
opacity: 1;
}
.flickity-prev-next-button.previous:active {
color: white;
background-color: black;
opacity: 1;
}
.flickity-prev-next-button:hover, .flickity-prev-next-button:focus {
background: white;
}
/*
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 10px;
border-radius: 100%;
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
border: 1px solid mediumvioletred;
}
.flickity-page-dots .dot.is-selected {
background-color: mediumvioletred;
}
*/
.flickity-page-dots {
display: none;
}
@media only screen and (max-width: 1024px) {
.flickity-prev-next-button.previous {
left: 0px;
width: 40px;
}
.flickity-prev-next-button.next {
right: 0px;
width: 40px;
}
}
<div class="carousel" [attr.data-flickity]="cardsPerSlide" >
<div class="carousel-cell small-12 medium-6 large-4 column end " *ngFor="let cardItem of cardItems">
<ecm-card *ngIf='! cardItem.viewAll' [itemData]="cardItem" [trendImg]="true" (addToWishlist)="addToWishlist(cardItem);" (removeFromWishlist)="removeFromWishlist(cardItem);"></ecm-card>
<div *ngIf='cardItem.viewAll' class="view-all-card" >
<a md-button class="view-all-link" (click)="viewAll();">{{cardItem.viewAll}}</a>
</div>
</div>
</div>
<ecm-panel #ecmPanel>
</ecm-panel>
\ No newline at end of file
import { Component, OnInit, Input, ViewEncapsulation, OnChanges, ViewChild } from '@angular/core';
import { MdSnackBar } from '@angular/material';
import { RESIZE_EVENT } from '../ecm-store/ecm-resize';
import { AppState } from '../ecm-store/reducers';
import { Store } from '@ngrx/store';
import { WishListActions } from '../ecm-store/actions';
import { EcmPanelComponent } from '../ecm-view/ecm-panel/ecm-panel.component';
declare var reinitFlickity: any;
@Component( {
selector: 'ecm-carousel',
templateUrl: './ecm-carousel.component.html',
styleUrls: ['./ecm-carousel.component.css'],
encapsulation: ViewEncapsulation.None
})
export class EcmCarouselComponent implements OnInit, OnChanges {
@Input() cardItems: any;
cardsPerSlide: string = '{ "groupCells": 3 }';
@ViewChild( 'ecmPanel' ) ecmPanel: EcmPanelComponent;
constructor(private wishlistAction: WishListActions, private store: Store<AppState>, public snackBar: MdSnackBar) {}
ngOnInit() {
/*
console.log( " ngOnInit this.cardItems [" + this.cardItems + "]");
if( this.cardItems && this.cardItems.length > 10 ) {
let size = this.cardItems.length;
this.cardItems = this.cardItems.slice(0, 9);
console.log( "size[" + size + "]this.cardItems [" + this.cardItems + "]");
let viewAll = {"viewAll" : "View All +"};
this.cardItems.push( viewAll );
console.log( "viewAll [" + viewAll + "]");
console.log( "this.cardItems [" + this.cardItems + "]");
}
*/
RESIZE_EVENT.subscribe(data => {
//console.log("data["+data+"]");
this.callUpdate( data );
});
let data = document.documentElement.clientWidth;
this.callUpdate( data );
}
callUpdate( data : any ) {
if( data > 1024 )
{
this.update(3);
}
else if( data < 1023 && data > 639 )
{
this.update(2);
}
else if( data < 640 )
{
this.update(1);
}
}
update( numOfCard : number ) {
this.cardsPerSlide = '{ "groupCells": ' + numOfCard + ' }';
reinitFlickity();
}
viewAll() {
alert("View All Treding Items");
}
ngOnChanges(){
console.log("ngOnChanges of Carousel");
}
addToWishlist( item ) {
if(this.isAuthUser())
{
this.store.dispatch( this.wishlistAction.addToWishlistSuccess( item ) );
this.openSnackBar('Item Added to your Wishlist');
}
else
{
//this.header.userAction();
this.ecmPanel.open({ type: 'overlay', option: 'SIGNIN_OPT', top:'100px', left: 'calc( 50% - 375px / 2 )', width:'375px', height: '535px' });
}
}
removeFromWishlist( item ){
this.store.dispatch( this.wishlistAction.deleteWishlistItemSuccess( item ) );
this.openSnackBar('Item Deleted from your Wishlist');
}
openSnackBar( message: string ) {
this.snackBar.open( message, '', {
duration: 2000,
});
}
isAuthUser(){
var isAuthUser;
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
isAuthUser = true;
}
else
{
isAuthUser = false;
}
return isAuthUser;
}
}
.ecm-content {
width: 100%;
height: auto;
padding-bottom: 100px;
padding-bottom: 50px;
}
\ No newline at end of file
<div class="ecm-content">
<ecm-trend-product> </ecm-trend-product>
<ecm-category> </ecm-category>
</div>
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'ecm-content' ,
templateUrl: './ecm-content.component.html',
styleUrls: ['./ecm-content.component.css']
})
export class ECMContentComponent implements OnInit {
constructor() { }
ngOnInit() {
console.log('ECMContentComponent onInit');
}
}
/*Images Source*/
/*
.img-logo {
content: url(../../assets/images/w_logo_38_38.png);
content: url(../../assets/images/svg/w_logo_38_38.svg);
}
.img-twitter {
content: url(../../assets/images/w_twitter_38_38.png);
}
.img-gplus {
content: url(../../assets/images/w_google_plus_38_38.png);
}
.img-facebook {
content: url(../../assets/images/w_facebook_38_38.png);
}
.footer-section {
background-color: #2a2a2a;
width: 100%;
height: 200px;
}
.footer-section-60 {
height: 60px;
}
.footer-subscribe {
width: 100%;
height: 140px;
padding: 40px 0 40px 0;
}
.subscribe-form {
height: 60px;
width: 100%;
overflow: hidden;
position: relative;
}
.subscribe-email {
border: none;
border-radius: 5px;
width: 100%;
height: 60px;
position: relative;
outline: none;
font-size: 14pt;
padding: 10px 0 10px 40px;
background-color: #252525;
max-width: 552px;
float: right;
box-shadow: none;
color: #fff;
}
.subscribe-submit {
margin: 0;
padding: 0;
top: 7px;
height: 45px;
width: 128px;
color: #ffffff;
background: mediumvioletred;
position: relative;
font-size: 14pt;
line-height: 1px;
text-align: center;
border: none;
border-radius: 2px;
}
.footer-social {
border-bottom: 3pt solid #b600aa;
background-color: #222222;
width: 100%;
height: 60px;
}
.footer-social-left {
display: inline-block;
width: 38px;
}
.footer-social-right {
float: right;
}
.row.row-footer {
max-width: 100rem;
top: 11px;
position: relative;
}
*/
/* New Footer */
.ecm-footer {
min-height: 50px;
text-align: center;
background-color: white;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
margin-top: 30px;
width: 100%;
}
.footer-title {
color: black;
display: block;
padding-top: 15px;
}
.terms-title {
color: mediumvioletred;
font-weight: 700;
}
.policy-title {
color: mediumvioletred;
font-weight: 700;
}
<!--
<section class="footer-section ">
<div class="footer-subscribe ">
<form action="#" method="post" class="subscribe-form" id="subscribe-form" #subscribeForm>
<div class="row">
<div class="small-8 column">
<input type="text" class="subscribe-email" name="subscribe-email"placeholder="Enter Your Email ID" #subscribeEmail />
</div>
<div class="small-4 column">
<button md-raised-button type="submit" class="subscribe-submit" (click)="subscribeForm.submit();">Subscribe</button>
</div>
</div>
</form>
</div>
<div class="footer-social">
<div class="row row-footer">
<div class="small-12 columns">
<span class="footer-social-left"> <img class="img-logo"></span>
<span class="footer-social-right"> <img class="img-facebook">
<img class="img-gplus"> <img class="img-twitter">
</span>
</div>
</div>
</div>
</section>
-->
<div class="ecm-footer">
<span class="footer-title">Design & Developed @ Proteus Technologies Pvt. Ltd. All Rights Reserved. <span class="terms-title">Terms</span> and <span class="policy-title">policy</span></span>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ecm-footer',
templateUrl: './ecm-footer.component.html',
styleUrls: ['./ecm-footer.component.css']
})
export class ECMFooterComponent implements OnInit {
constructor() { }
ngOnInit() {
console.log(' ECMFooterComponent onInit ');
}
}
.input-container {
height: 600px;
padding: 50px 0 50px 0;
}
.input-container-bg {
background-image: url(../../assets/images/banner.png);
background-size: 100% 100%;
-webkit-filter: contrast(100%) brightness(50%);
filter: contrast(100%) brightness(50%);
position: absolute;
height: 600px;
width: 100%;
z-index : -1;
}
/*Images Source*/
.img-user {
content: url(../../assets/images/w_user_128_128.png);
}
.user-adj {
position: absolute;
left: calc( 100% - 200px );
padding: 0;
margin: 0;
-webkit-filter: contrast(100%) brightness(85%);
filter: contrast(100%) brightness(85%);
border-radius: 100%;
cursor: pointer;
}
.img-logo {
content: url(../../assets/images/logo.png);
}
.logo-adj {
position: relative;
left: calc( ( 100% / 2 ) - 100px );
/* left: calc( ( 100% / 2 ) - 150px ); */
padding: 0;
padding-bottom: 75px;
padding-top: 75px;
margin: 0;
}
.user-image-128{
width: 128px;
height: 128px;
}
.img-user-32 {
content: url(../../assets/images/svg/user_32_32.svg);
}
.img-logo-32 {
content: url(../../assets/images/svg/logo_32_32.svg);
}
.img-cart-32 {
content: url(../../assets/images/svg/cart_32_32.svg);
}
/*Fixed Header*/
ecm-search{
width: calc( 100% - 300px )
}
.square-button {
height: 60px !important;
width: 60px !important;
/* padding: 0 !important; */
min-width: 60px !important;
vertical-align: middle !important;
}
.invisible{
display: none;
}
.fixed-header-section {
background-color: mediumvioletred;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 3;
display: none;
}
.fixed-header-logo{
float: left;
cursor: pointer;
margin-left: 10px;
}
.fixed-header-logo,
.fixed-header-user,
.fixed-header-cart {
position: relative;
height: 42px;
width: 42px;
padding: 0;
}
.fixed-header-user,
.fixed-header-no-user{
border-radius: 100%;
cursor: pointer;
height: 32px;
width: 32px;
}
.fixed-header-no-user{
background: rgba(0,0,0,0.1);
box-shadow: 0 0 0px 5px rgba(0,0,0,0.1);
height: 28px;
width: 28px;
}
.fixed-header-cart{
cursor: pointer;
height: 28px;
width: 28px;
position: relative;
}
.fixed-header-badge {
position: absolute;
top: 0;
left: 32px;
z-index: 1;
margin: 0;
padding: 0;
margin-top: 10px;
background: #fff;
color: mediumvioletred;
border: 3px solid mediumvioletred;
font-weight: bolder;
font-size: xx-small;
border-radius: 100%;
display: inline-block;
width: 20px;
height: 20px;
line-height: 16px;
text-align: center;
}
.no-badge {
margin-right: 10px !important;
}
.user-span,
.cart-span{
float: right;
}
.user-span:after,
.cart-span:after {
content: '';
display: block;
position: absolute;
border-color: transparent transparent #fff transparent;
border-style: solid;
border-width: 10px;
top: 40px;
margin-left: 20px;
}
.siteHeading {
/*position: absolute;
width: 25%;
display: inline-block;
margin-left: 20px !important;
margin: 16px;
color: #fff;
font-size: large;*/
position: relative;
display: inline-block;
margin: 15px 30px 15px 15px;
color: #fff;
font-size: 14pt;
font-weight: bold;
}
/*Fixed Header Menu*/
.fixed-header-nav{
/* top: 13px;
left: 1.5rem;
position: fixed;
z-index: 4;
*/
/* height: 45px; */
/* top: 0;
left: 0;
position: fixed;
z-index: 4;
height: 100%; */
top: 13px;
left: 1.5rem;
position: fixed;
z-index: 4;
}
/*Right Slide Panel*/
.ecm-bgGlass {
background-color: gray;
opacity: 0.5;
z-index: 4;
position: fixed;
left: 0px;
top: 0px;
display: none;
width: 100%;
height: 100%;
}
.overlayPanel {
/* width: 400px; */
/* height: 509px; */
width : 375px;
height : 500px;
position: fixed;
top: calc( 50% - 500px / 2 );
left: calc( 50% - 375px / 2 );
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
z-index: 4;
display: none;
border-radius: 2px;
background: #fff;
}
.rightSlidePanel {
width: 400px;
max-height: calc( 100% - 60px );
position: fixed;
right: 5px;
/* top: 40px; */
top: 60px;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
z-index: 4;
display: none;
border-radius: 5px;
background: #fff;
}
@media screen and (max-width:30em)
{
.overlayPanel
{
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.overlayPanel-content{
position: relative;
display: block;
height: 100%;
overflow: hidden;
overflow-y: auto;
}
.siteHeading{
display : none;
}
}
.button {
width: 90px;
height: 35px;
line-height: 15px;
text-align: center;
border: 1px solid mediumvioletred;
background-color:transparent;
border-radius: 2px;
float: left;
position: relative;
top: 15px;
color: #333;
right: 10px;
margin:2rem;
font-size: .9rem;
}
.button:hover {
background-color: mediumvioletred;
color: #fff;
}
/* Toggle button */
.hide-button {
top: 0;
right: 0;
position: absolute;
display: inline-block;
width: 24px;
height: 24px;
margin: 15px;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: 100%;
transition: 0.6s;
-webkit-transition: 0.6s;
z-index: 4;
}
.hide-button:hover {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
rgba(0, 0, 0, 0.1);
}
.hide-button:before, .hide-button:after {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
background-color: mediumvioletred;
border-radius: 5px;
transition: 0.5s;
}
.hide-button:before {
transform: translateY(-50%) rotate(45deg) scale(1);
}
.hide-button:after {
transform: translateY(-50%) rotate(-45deg) scale(1);
}
.medium-btn-checkout{
width: 100%;
height: 50px;
line-height: 15px;
text-align: center;
border: 1px solid mediumvioletred;
background-color: mediumvioletred;
border-radius: 2px;
float: left;
position: relative;
top: 15px;
color: white;
right: 10px;
margin: 2rem;
font-size: .9rem;
margin-left: 14px;
}
.width-300{
width: 300px;
}
/*mobile view */
.toolbar-spacer{
flex: 1 1 auto;
}
/*
.mat-dialog-container {
max-width: 100% !important;
height: 60px !important;
overflow: hidden !important;
padding: 0px !important;
border-radius: 0 !important;
}
*/
.mat-dialog-container {
padding: 0px !important;
max-width: 100% !important;
}
.mobile-search{
color: #fff;
}
.back-search{
color: mediumvioletred;
}
.back-search: hover{
color: #fff;
background-color: mediumvioletred;
}
.ecm-menu-icon {
background-color: white;
margin: 6px 0;
display: block;
}
.nav-menu-box {
height: 60px;
width: 60px;
}
.ecm-menu-icon1 {
height: 2px;
width: 25px;
}
.ecm-menu-icon2 {
height: 2px;
width: 22px;
}
.ecm-menu-icon3 {
height: 2px;
width: 25px;
}
.onSelect {
background: rgba(68, 68, 68, 0.16);
}
@media screen and (max-width: 750px){
.logo-adj{
width: 128px;
left: calc( 50% - 64px );
margin-bottom: 60px;
}
.user-adj {
width: 75px;
left: calc( 100% - 90px );
top: 15px;
}
}
\ No newline at end of file
<!-- Overlay Start
<div #bgGlass class="ecm-bgGlass"></div>
<div #overlayPanel class="overlayPanel" >
<span (click)="hideOverlayPanel();" class="hide-button"></span>
<ecm-signin *ngIf="sideOption=='USER_OPT'" (closePanel)="hideOverlayPanel(); createUserData();" ></ecm-signin>
</div>
Overlay End -->
<!-- SlidePanel Start
<div #rightSlidePanel class="rightSlidePanel" [ngClass]="{'width-300': ( sideOption=='CART_OPT' && (cartItems | async)?.length == 0 ) }" >
<span (click)="hideSidePanel();" class="hide-button"></span>
<ecm-user-option *ngIf="sideOption=='USER_OPT'" (closePanel)="hideSidePanel(); createUserData();" (updateProfileImages) = "updateProfileImages();" ></ecm-user-option>
<div *ngIf="sideOption=='CART_OPT'" style="margin: 3rem;" >
<ecm-cart [isMiniCart] = 'true' (closePanel)="hideSidePanel();" ></ecm-cart>
</div>
</div>
SlidePanel End -->
<ecm-panel #ecmPanel>
</ecm-panel>
<div *ngIf="!isFixedHeader; then floatHeader " ></div>
<section *ngIf="isFixedHeader" class="fixed-header-section" style="opacity: 1; display: block;">
<ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
</section>
<ng-template #floatHeader>
<section class="header-section visible">
<div class="input-container-bg" [@fadeState]="headerFadeState"></div>
<div class="input-container">
<span>
<img *ngIf="userData" (click)="userAction();" [src]="profileImageLink" (error)="this.src = hostUrl + '/ecm/assets/images/w_user_128_128.png'; " class="user-adj user-image-128" title= "{{userData.name}}" [@userState]="headerFadeState" />
<img *ngIf="!userData" (click)="userAction();" class="img-user user-adj" [@userState]="headerFadeState" src="w_user_128_128.png"/>
</span>
<div class="row">
<div class="small-12 medium-10 large-10 medium-centered column">
<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" src="logo.png" />
<ecm-search [compFadeState]="headerFadeState" [headerState]="'relative'"></ecm-search>
</div>
</div>
</div>
</section>
<section class="fixed-header-section" [@fixedHeaderShow]="headerFadeState">
<ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
</section>
</ng-template>
<ng-template #fixedHeader>
<div *ngIf="clientWidth >= 640" >
<ng-container *ngTemplateOutlet="fixedHeaderLarge"></ng-container>
</div>
<div *ngIf="clientWidth < 639" >
<ng-container *ngTemplateOutlet="fixedHeaderSmall"></ng-container>
</div>
</ng-template>
<ng-template #fixedHeaderLarge>
<md-toolbar color="primary">
<button md-button (click)="menuAction();" class="square-button">
<span class="ecm-menu-icon ecm-menu-icon1"></span>
<span class="ecm-menu-icon ecm-menu-icon2"></span>
<span class="ecm-menu-icon ecm-menu-icon3"></span>
</button>
<img class="fixed-header-logo img-logo-32" src="logo_32_32.svg" />
<span class="siteHeading">{{siteHeading}}</span>
<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
<span (click)="cartAction();" mdTooltip="Show Cart" [mdTooltipPosition]="'below'" >
<button md-button class="square-button">
<span *ngIf="(cartItems | async)?.length!=0" class="fixed-header-badge">{{(cartItems | async)?.length}}</span>
<img class="fixed-header-cart img-cart-32" src="cart_32_32.svg"/>
<!-- <img *ngIf="cartItems == 0" class="fixed-header-cart img-cart-32 no-badge" /> -->
<!--<md-icon class="example-icon">shopping_cart</md-icon>-->
</button>
</span>
<span (click)="userAction();" [mdTooltip]="userToolTipText" [mdTooltipPosition]="'below'">
<button md-button class="square-button">
<img *ngIf="userData" [src]="profileImageLink" (error)="this.src = hostUrl + '/ecm/assets/images/svg/user_32_32.svg'; this.className = 'fixed-header-no-user'" title="{{userData.name}}" [ngClass]="( userImage.src.indexOf('/ibase/') > 0 ) ? 'fixed-header-user' : 'fixed-header-no-user' " #userImage/>
<img *ngIf="!userData" class="fixed-header-no-user img-user-32" src="user_32_32.svg"/>
<!--<md-icon class="example-icon">account_circle</md-icon>-->
</button>
</span>
</md-toolbar>
</ng-template>
<ng-template #fixedHeaderSmall >
<md-toolbar color="primary">
<div (click)="menuAction();" class="user-nav-menu">
<span class="ecm-menu-icon ecm-menu-icon1"></span>
<span class="ecm-menu-icon ecm-menu-icon2"></span>
<span class="ecm-menu-icon ecm-menu-icon3"></span>
</div>
<img class="fixed-header-logo img-logo-32" src="logo_32_32.svg" />
<span class="siteHeading">{{siteHeading}}</span>
<span class="toolbar-spacer"></span>
<span>
<button md-button class="square-button" (click)="searchAction();" style="position: inherit;">
<i class="material-icons mobile-search">search</i>
</button>
</span>
<span (click)="cartAction();" mdTooltip="Show Cart" [mdTooltipPosition]="'below'" >
<button md-button class="square-button">
<span *ngIf="cartCounter > 0" class="fixed-header-badge">{{ cartCounter }}</span>
<img class="fixed-header-cart img-cart-32" src="cart_32_32.svg"/>
<!-- <img *ngIf="cartItems == 0" class="fixed-header-cart img-cart-32 no-badge" /> -->
<!--<md-icon class="example-icon">shopping_cart</md-icon>-->
</button>
</span>
<span (click)="userAction();" [mdTooltip]="userToolTipText" [mdTooltipPosition]="'below'" >
<button md-button class="square-button">
<img *ngIf="userData" [src]="profileImageLink" (error)="this.src = hostUrl +'/ecm/assets/images/svg/user_32_32.svg'; this.className = 'fixed-header-no-user'" title="{{userData.name}}" [ngClass]="( userImage.src.indexOf('/ibase/') > 0 ) ? 'fixed-header-user' : 'fixed-header-no-user' " #userImage/>
<img *ngIf="!userData" class="fixed-header-no-user img-user-32" src="user_32_32.svg"/>
<!--<md-icon class="example-icon">account_circle</md-icon>-->
</button>
</span>
</md-toolbar>
</ng-template>
<span style="float:left;">
<button md-button class="square-button" (click)="dialogRef.close()" >
<i class="material-icons back-search">keyboard_backspace</i>
</button>
</span>
<ecm-search [compFadeState]="headerFadeState" [headerState]="'mobile'" (closePanel)="closePanel()"></ecm-search>
<ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-content> </ecm-content>
<ecm-footer> </ecm-footer>
\ No newline at end of file
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'ecm-explore',
templateUrl: './ecm-explore.component.html',
styleUrls: ['./ecm-explore.component.css']
})
export class ECMExploreComponent implements OnInit, OnDestroy {
constructor() { }
ngOnInit() {
console.log(' ECMExploreComponent ngOnInit');
}
ngOnDestroy() {
console.log(' ECMExploreComponent ngOnDestroy');
}
}
<ecm-header> </ecm-header>
<ecm-content *ngIf="clientWidth > 750"> </ecm-content>
<ecm-footer *ngIf="clientWidth > 750"> </ecm-footer>
\ No newline at end of file
import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { JwtHelper } from 'angular2-jwt';
import { RESIZE_EVENT } from '../ecm-store/ecm-resize';
@Component({
selector: 'ecm-home',
templateUrl: './ecm-home.component.html',
styleUrls: ['./ecm-home.component.css']
})
export class ECMHomeComponent implements OnInit, OnDestroy, AfterViewChecked {
jwtHelper: JwtHelper = new JwtHelper();
clientWidth;
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit() {
console.log(' ECMHomeComponent ngOnInit');
let appstateCahce: string = localStorage.getItem('appstate') ? localStorage.getItem('appstate') : 'no-appstate';
console.log(' ECMHomeComponent appstateCahce[' + appstateCahce + ']');
if( appstateCahce !== 'undefined' && appstateCahce !== 'no-appstate' ){
this.goToLink(appstateCahce);
}
this.clientWidth = document.documentElement.clientWidth;
RESIZE_EVENT.subscribe(data => {
this.clientWidth = data;
});
}
ngAfterViewChecked() {
let appstateCahce: string = localStorage.getItem('appstate') ? localStorage.getItem('appstate') : 'no-appstate';
/*
if ( appstateCahce === 'no-appstate' ) {
window.scrollBy(0, 1);
} else */if ( appstateCahce !== 'undefined' && appstateCahce !== 'no-appstate' ) {
this.goToLink(appstateCahce);
localStorage.setItem('appstate', 'undefined');
}
}
goToHome() {
this.router.navigate([]);
}
goToLink( appstate: string ) {
this.router.navigate(['/link', appstate]);
}
ngOnDestroy() {
console.log(' ECMHomeComponent ngOnDestroy');
}
}
.ecm-image {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
width: 100%;
height: calc( 100% - 70px);
text-align: center;
}
.ecm-image:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.ecm-card > ecm-image > .ecm-image > img
{
/* height: 330px; */
height: 230px;
}
.ecm-image-icon {
float: left;
/*background-color: mediumvioletred;*/
border: none;
border-radius: 100%;
height: 47px;
width: 51px;
}
.ecm-small-image-icon {
float: left;
/*background-color: mediumvioletred;*/
border: none;
border-radius: 100%;
height: 38px;
width: 42px;
}
.img-loading {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ddd;
box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
position: absolute;
top: 45%;
left: 55%;
margin: -25px 0 0 -25px;
-webkit-animation: loader 0.5s infinite ease-in-out both;
-moz-animation: loader 0.5s infinite ease-in-out both;
animation: loader 0.5s infinite ease-in-out both;
}
@-webkit-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@-moz-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
.img-mask {
width: 100%;
height: 100%;
position: absolute;
}
.img-mask-icon {
height: 47px;
width: 51px;
}
/* ContentPlugin - External Component CSS*/
.contentPopupTitle{
color: mediumvioletred;
}
.galaxyButton {
cursor: pointer;
background: mediumvioletred;
border-radius: 2px;
margin: 5px 0 5px 0;
padding: 5px 20px 5px 20px;
color: #fff;
}
.close-button {
right: 0 !important;
position: absolute !important;
display: inline-block !important;
width: 24px !important;
height: 24px !important;
margin: 15px !important;
background-color: transparent !important;
border: none !important;
cursor: pointer !important;
border-radius: 100% !important;
transition: 0.6s !important;
-webkit-transition: 0.6s !important;
z-index: 4 !important;
box-shadow: none !important;
left: auto !important;
}
.close-button:hover {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
rgba(0, 0, 0, 0.1);
color: transparent;
}
.close-button:before, .close-button:after {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
background-color: mediumvioletred;
border-radius: 5px;
transition: 0.5s;
}
.close-button:before {
transform: translateY(-50%) rotate(45deg) scale(1);
}
.close-button:after {
transform: translateY(-50%) rotate(-45deg) scale(1);
}
.attachedFile {
border: none !important;
height: auto !important;
}
.thumbnailView {
height: calc( 100% - 90px) !important;
display: block !important;
top: 0 !important;
left: 0 !important;
}
<div *ngIf=" isThumbnail " class="img-mask" [ngClass]="attachType == 'Icon' ? 'img-mask-icon' : ''"> </div>
<div *ngIf="!attachType" class="img-loading" #loadingImage></div>
<div *ngIf="!attachType" class="ecm-image" #targetAttachImage></div>
<!-- <img *ngIf="attachType == 'Image'" class="ecm-image" #targetImage /> -->
<!-- <img *ngIf="attachType == 'Icon'" [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetImage /> -->
<div *ngIf=" attachType == 'Image' " class="ecm-image" #targetAttachImage></div>
<div *ngIf=" attachType == 'Icon' " [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetAttachImage></div>
\ No newline at end of file
import { Component, OnInit, AfterViewChecked, Input, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
declare var getAttachmentsPlugin: any;
declare var getImagePlugin: any;
@Component({
selector: 'ecm-image',
templateUrl: './ecm-image.component.html',
styleUrls: ['./ecm-image.component.css'],
encapsulation: ViewEncapsulation.None
})
export class EcmImageComponent implements OnInit, AfterViewChecked {
@Input() refId: string;
@Input() refSer: string;
@Input() object: string;
@Input() attachType: string;
@Input() isSingleImage: any;
@Input() height: string;
@Input() width: any;
@Input() isThumbnail: boolean = false;
@Input() isSmallIcon: boolean = false;
@ViewChild( 'targetAttachImage' ) targetDiv: ElementRef;
@ViewChild( 'targetImage' ) targetImg: ElementRef;
@ViewChild( 'loadingImage' ) loadingDiv: ElementRef;
imageUrl : any;
attchPluginViewUI: any;
constructor() { }
ngOnInit()
{
if( this.attachType )
{
//this.initImage(this.object,this.refSer, this.refId, this.attachType);
}
else
{
////this.initAttachImage(this.object,this.refSer, this.refId, 'V', this.isSingleImage, this.height, this.width);
//this.initSingleImage(this.object,this.refSer, this.refId);
this.attachType = "";
}
this.initSingleImage(this.object,this.refSer, this.refId);
}
//192.168.0.222:9090/ibase/rest/E12ExtService/getAttachDocument?
//OBJ_NAME=objName&
//REF_SER=refSer&
//REF_ID=refId&
//DOC_TYPE=attachType&
//TOKEN_ID=localStorage.getItem('TOKEN_ID')&
//DATA_FORMAT=JSON
initImage(objName:string, refSer:string, refId:string, attachType:string)
{
this.imageUrl = "?OBJ_NAME=" + objName + "&REF_SER=" + refSer + "&REF_ID=" + refId +
"&DOC_TYPE=" + attachType + "&TOKEN_ID=" + localStorage.getItem('TOKEN_ID') + "&DATA_FORMAT=JSON" +
"&TEST=ON";
console.log("initImage calling /ibase/rest/E12ExtService/getAttachDocument ");
console.log("created imageUrl " + this.imageUrl);
}
/*
initAttachImage(objName:string, refSer:string, refId:string, uiMode:string, isSingleImage:any, height:string, width:string)
{
console.log("loadImage check window.getAttachmentsPlugin ");
if (! getAttachmentsPlugin ){
console.log("window.getAttachmentsPlugin is null" );
return;
}
// Get the target element in which you want to add AttachmentsPlugin.
console.log("loadImage after check window.getAttachmentsPlugin ");
this.attchPluginViewUI = getAttachmentsPlugin({
OBJ_NAME : objName,
REF_SER : refSer,
REF_ID : refId,//ITEM_CODE
// host url can be empty in browser
// for mobile devices it has be specified correctly
HOST_URL : "",
DOC_TYPE : "",
// A - For gettig add ui (user can add new attachments and view attached files)
// E - For getting edit ui (user can view attachments, add new attachments as well as delete attachments)
// V - For getting view ui (user can only view attachments)
UI : uiMode,
// The thumbnail height and width
THUMBNAIL_WIDTH : width ? width : '100%',
THUMBNAIL_HEIGHT : height ? height : '100%',
// Maximum width of attachment plugin, can be specified in pixels
MAX_WIDTH : "100%",
// true for browser, false for mobile.
IS_HOSTED_MODE : true || false,
ENABLE_SINGLE_IMAGE : isSingleImage
});
//console.log("created attchPluginViewUI " + this.attchPluginViewUI);
//this.nodeToString( this.attchPluginViewUI );
if (this.targetDiv && this.attchPluginViewUI)
{
this.targetDiv.nativeElement.innerHTML = "";
}
}
*/
initSingleImage(objName:string, refSer:string, refId:string)
{
console.log("initSingleImage check window.getImagePlugin ");
if (! getImagePlugin ){
console.log("window.getImagePlugin is null" );
return;
}
// Get the target element in which you want to add AttachmentsPlugin.
console.log("loadImage after check window.getImagePlugin ");
getImagePlugin({
OBJ_NAME : objName,
REF_SER : refSer,
REF_ID : refId,//ITEM_CODE
HOST_URL : "",
DOC_TYPE : this.attachType,
IS_HOSTED_MODE : true || false,
ENABLE_SINGLE_IMAGE : true
}, this, 'imageCallback');
}
imageCallback(imgData:any) {
console.log("imageCallback imgData>>" + imgData);
if( imgData && imgData[0]) {
this.targetDiv.nativeElement.appendChild( imgData[0] );
this.loadingDiv.nativeElement.style.display = 'none';
}
}
ngAfterViewChecked()
{
//console.log("EcmImageComponent ngAfterViewChecked... ");
if( this.targetDiv && this.attchPluginViewUI && this.attchPluginViewUI.innerHTML !== "" && this.targetDiv.nativeElement.innerHTML === "" )
{
console.log("EcmImageComponent ngAfterViewChecked... ");
this.targetDiv.nativeElement.appendChild(this.attchPluginViewUI);
this.loadingDiv.nativeElement.style.display = 'none';
}
if (this.targetImg && this.imageUrl)
{
console.log("this.targetImg ngAfterViewChecked... " + this.targetImg.nativeElement);
this.targetImg.nativeElement.src = "/ibase/rest/E12ExtService/getAttachDocument" + this.imageUrl;
//this.targetImg.nativeElement.onerror ="this.src = '/ecm/assets/images/svg/img_not_found.svg'; this.onerror = null;";
this.targetImg.nativeElement.onerror = this.onEcmImageError;
this.imageUrl = null;
}
}
onEcmImageError( elem ){
console.log( "onEcmImageError", this );
console.log( "onEcmImageError", elem );
}
}
/**
* Card Model
*/
export class ECMCard {
constructor(
public img: string,
public info_img: string,
public info_title: string,
public info_subhead: string,
public info_link: any) {
}
}
export class ECMCart {
public itemCode:string = '';
public quantity:number = 0;
public itemCost:number = 0;
}
\ No newline at end of file
/**
* Category Model
* {catCode, curRank, descr, shDescr, ecmTemplate}
*/
export class Category {
constructor(
public catCode: string = '',
public descr: string = '',
public shDescr: string = '',
public curRank: string = '',
public catLink: string = '',
public ecmTemplate: string = '') {
console.log('comp this.ecmTemplate[' + this.ecmTemplate + ']');
}
}
\ No newline at end of file
export class Order {
constructor(
public orderNo:string = '',
public userId:string = '',
public ecmSite:string = '',
public currCode:string = '',
public exchRate:string = '',
public orderDate :string = '',
public remark:string = '',
public divAddress:string = '',
public billAddress:string = '',
public amount:string = '',
public taxAmt:string = '',
public discAmt:string = '',
public promoAmt:string = '',
public netAmt:string = '',
public wfStat:string = '',
public wfStatDate:string = '',
public itemCode:string = '',
public orderStat :string = '',
public statDate :any = '',
public orderId:string = '',
public orderTotal:string = '',
public itemQuantity:string = '',
public itemCost:string = '',
public itemAttributtes:string = '',
public itemDeliveryExpectation:string = '',
public ecmOrderDets: OrderDetail[] = []
) { }
}
export class OrderDetail {
constructor(
public discPerc: string = '',
public eOrderNo: string = '',
public itemCode: string = '',
public lineNo: string = '',
public quantity: string = '',
public rate: string = '',
public statdate: string = '',
public taxAmt : string = ''
) { }
}
\ No newline at end of file
/**
* ItemDetail Model
* {catCode, curRank, descr, shDescr, ecmTemplate}
*/
export class ItemDetail {
public itemCode: string = '';
public itemQuantity: number;
public itemCategory: any; // JSON String
public itemSubCategory: any; // JSON String
public itemHeader: any; // JSON String
public itemRatings: any; // JSON String
public itemVariants: any; // JSON String
public itemAttributes: Array<any>; // JSON String
public itemDetail1: any; // JSON String
public itemDetail2: any; // JSON String
public productStatus: any; // JSON String
}
/*
any = { "itemPackages": [{"package": "Experienced Instructor"},{"package":"Meal(option)"}, {"package":"Large group concession"}],
"itemExtraInfo" : "Discount valid till 31st July 2017 ",
"itemVenue" : "Mumbai"
};
*/
\ No newline at end of file
/**
* Item Model
* {catCode, curRank, descr, shDescr, ecmTemplate}
*/
export class Item {
public itemCode: string = '';
public item_descr: string = '';
public shDescr: string = '';
public costRate: string;
public rating: number;
public itemQuantity: number ;
public scat_sh_descr: string = '';
public scat_descr: string = '';
public cat_sh_descr: string = '';
public cat_descr: string = '';
public length: number;
public width: number;
public height: number;
public gross_weight: number;
public product_code: string = "";
public price_list: string = "";
public item_type: string = "";
public phyAttribId1: string = "";
public phyAttribId2: string = "";
public phyAttribId3: string = "";
public phyAttribId4: string = "";
public phyAttribId5: string = "";
public phyAttribId6: string = "";
public descr: string = "";
}
export class Reviews {
public item_code: string = '';
public productComments: string = '';
public productNotUsfulCnt: number;
public productRating: number;
public productRemarks: string = '';
public productUsfulCnt: number;
public userId: string = '';
public reviewBy: string = '';
public reviewDate: string = '';
public site_code: string = '';
}
/**
* SubCategory Model
* {catCode, scatCode, curRank, descr, shDescr, ecmTemplate}
*/
export class SubCategory {
constructor(
public scatCode: string = '',
public catCode: string = '',
public descr: string = '',
public shDescr: string = '',
public curRank: string = '',
public catLink: string = '',
public ecmTemplate: string = '') {
console.log('comp this.ecmTemplate[' + this.ecmTemplate + ']');
}
}
.category-list-container {
padding-top: 10px;
padding-left: 20px;
padding-bottom: 25px;
border-bottom: 1px solid #f2f2f2;
}
.top-categories-title, .my-menu-title {
color: #787878;
font-size: 0.8rem;
padding-left: 5px;
}
.category-list {
padding-top: 20px;
}
.category-title {
line-height: 38px;
font-size: 1rem;
padding-left: 10px;
}
.view-all-button {
padding-left: 52px;
padding-top: 5px;
color: mediumvioletred;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
}
.my-menu-container {
padding-top: 10px;
padding-left: 20px;
}
.my-menu-list {
padding-top: 10px;
}
.menu-title {
font-size: 1rem;
padding-left: 10px;
line-height: 36px;
cursor: pointer;
}
.ecm-user-icon, .ecm-order-icon, .ecm-wishlist-icon {
height: 36px;
width: 36px;
}
.nav-my-profile, .nav-orders, .nav-wishlist {
padding-bottom: 10px;
cursor: pointer;
}
.help-center-title {
width: 100%;
bottom: 0;
position: absolute;
padding: 10px;
padding-left: 20px;
font-size: 1rem;
/* width: 80%; */
border-top: 1px solid #f2f2f2;
}
.category-products-tab {
width: 40%;
height: 75%;
left: 296px;
top: 64px;
position: fixed;
background: white;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
overflow: hidden;
overflow-y: scroll;
display: none;
padding: 10px 0px;
}
.category-box{
padding: 5px 0px;
cursor: pointer;
}
.category-box:HOVER ,
.category-box.hovered{
background: rgba(200, 191, 191, 0.16);
color: mediumvioletred;
border-right: 5px solid mediumvioletred;
}
.category-box:HOVER ~ .category-products-tab {
display: block;
}
.category-products-tab:HOVER{
display: block;
}
.category_product {
height: 150px;
padding-top: 10px;
}
.sub-cat-descr {
display: block;
color: black;
padding-bottom: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ecm-item {
display: block;
color: #787878;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ecm-item:hover {
color: mediumvioletred;
}
.view-all {
color: mediumvioletred;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
::-webkit-scrollbar {
width: 7px;
-webkit-appearance: none;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(199, 21, 133, 0.75);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
<!--
<div class="category-list-container">
<div class="top-categories-title">Top Categories</div>
<div class="category-list">
<div *ngFor="let _category of categoryList" class="category-box" (click)="viewAllSubCategory(_category);" on-mouseover="showSubcategories(_category.catCode);">
<ecm-image [refId]='_category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isSmallIcon]="true"></ecm-image>
<span class="category-title">{{_category.shDescr}}</span>
<div class="row category-products-tab">
<div *ngFor="let _subcategory of subcategories" class="small-12 medium-6 large-4 column category_product">
<span class="sub-cat-descr">{{_subcategory.shDescr}}</span>
<div *ngFor="let _item of _subcategory.items | slice:0:4;">
<a (click)="viewItem(_item.itemCode)" class="ecm-item">
{{_item.descr}}
</a>
</div>
<div *ngIf="_subcategory.items.length > 4">
<span class="view-all" (click)="viewAllProducts(_subcategory);">View All</span>
</div>
</div>
</div>
</div>
</div>
<div class="view-all-button">
<span (click)="viewAllCategories();">View All</span>
</div>
</div>
-->
<div class="category-list-container">
<div class="top-categories-title">Top Categories</div>
<div class="category-list">
<div *ngFor="let _category of categoryList | slice:0:3; let i = index;" class="category-box" [ngClass]="{'hovered' : hoverIdx == i }" (click)="viewAllSubCategory(_category);" on-mouseover="hoverIdx = i; ">
<ecm-image [refId]='_category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isSmallIcon]="true"></ecm-image>
<span class="category-title">{{_category.catShDescr}}</span>
</div>
<div class="row category-products-tab" *ngIf="hoverIdx >= 0" >
<div *ngFor="let _subcategory of categoryList[hoverIdx].list " class="small-12 medium-6 large-4 column category_product">
<div *ngIf="categoryList[hoverIdx].subcategory">
<span class="sub-cat-descr">{{_subcategory.scatShDescr}}</span>
<div *ngFor="let _item of _subcategory.list | slice:0:4;">
<a (click)="viewItem(_item.itemCode)" class="ecm-item">
{{_item.descr}}
</a>
</div>
<div *ngIf="_subcategory.list.length > 4">
<span class="view-all" (click)="viewAllProducts(_subcategory, hoverIdx);">View All</span>
</div>
</div>
<div *ngIf="!categoryList[hoverIdx].subcategory">
<a (click)="viewItem(_subcategory.itemCode)" class="ecm-item">
{{_subcategory.shDescr}}
</a>
</div>
</div>
</div>
</div>
<div class="view-all-button">
<span (click)="viewAllCategories();">View All</span>
</div>
</div>
<div class="my-menu-container" *ngIf="userData">
<div class="my-menu-title">My Menu</div>
<div class="my-menu-list">
<div class="nav-my-profile" (click)="goToMyProfile();">
<img class="ecm-user-icon" src="{{hostUrl}}/ecm/assets/images/svg/user.svg" />
<span class="menu-title">My Profile</span>
</div>
<div class="nav-orders" (click)="goToMyOrders();">
<img class="ecm-order-icon" src="{{hostUrl}}/ecm/assets/images/svg/order.svg" />
<span class="menu-title">Orders</span>
</div>
<div class="nav-wishlist" (click)="goToWishlist();">
<img class="ecm-wishlist-icon" src="{{hostUrl}}/ecm/assets/images/svg/wishlist.svg" />
<span class="menu-title">Wishlist</span>
</div>
</div>
</div>
<div class="help-center-title">
<span>Help Center</span>
</div>
$items: 4;
$transition-duration: 0.5s;
$transition-delay: 0.05s;
/* Basic styles */
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
}
body {
font-family: sans-serif;
background-color: #F6C390;
}
a {
text-decoration: none;
}
.container {
position: relative;
margin: 0;
width: 300px;
height: auto;
background-color: #533557;
background-color: transparent;
overflow: hidden;
}
/* Toggle functionality */
// To hide the checkbox
#toggle {
position: absolute;
left: -100%;
top: -100%;
}
#toggle:focus {
& ~ .toggle-container .button-toggle {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
}
// Styles for the 'open' state, if the checkbox is checked
#toggle:checked {
// Any element you need to change the style if menu is open goes here, using the sibling selector (~) as follows
// Making the "X" icon using `:before` and `:after` pseudo-elements
& ~ .toggle-container .button-toggle {
box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
&:hover {
box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
&:before {
transform: translateY(-50%) rotate(45deg) scale(1);
}
&:after {
transform: translateY(-50%) rotate(-45deg) scale(1);
}
}
&:focus ~ .toggle-container .button-toggle {
box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
// Open nav
& ~ .nav {
margin-bottom: 100px;
pointer-events: auto;
transform: translate(50px, 50px);
// Restoring nav items from "lines" in the menu icon
.nav-item {
color: #EC7263;
letter-spacing: 0;
height: 40px;
line-height: 40px;
margin-top: 0;
opacity: 1;
transform: scaleY(1);
transition: $transition-duration, opacity 0.1s;
// Setting delays for the nav items in open transition
@for $i from 1 through $items {
&:nth-child(#{$i}) {
$delay: ($items - $i) * $transition-delay;
transition-delay: $delay;
&:before {
transition-delay: $delay;
}
}
}
// Hiding the lines
&:before {
opacity: 0;
}
}
}
}
/* Toggle button */
.button-toggle {
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
margin: 25px;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: 100%;
transition: $transition-duration + 0.1;
// Shadow on hover
&:hover {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
// Making the "X" icon using `:before` and `:after` pseudo-elements
// Initially hidden because `scale(0)` transformation
&:before,
&:after {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
border-radius: 5px;
transition: $transition-duration;
}
&:before {
transform: translateY(-50%) rotate(45deg) scale(0);
}
&:after {
transform: translateY(-50%) rotate(-45deg) scale(0);
}
}
/* Menu */
.nav {
display: inline-block;
margin: 25px 25px 20px;
// Don't want pointer-events as menu is closed
pointer-events: none;
transition: $transition-duration;
}
// Showing nav items as lines, making up the hamburger menu icon
.nav-item {
position: relative;
display: inline-block;
float: left;
clear: both;
color: transparent;
font-size: 14px;
letter-spacing: -6.2px;
height: 7px;
line-height: 7px;
text-transform: uppercase;
white-space: nowrap;
transform: scaleY(0.2);
transition: $transition-duration, opacity 1s;
// Setting delays for the nav items in close transition
@for $i from 1 through $items {
&:nth-child(#{$i}) {
$delay: ($i - 1) * $transition-delay;
transition-delay: $delay;
&:before {
transition-delay: $delay;
}
}
}
// Adjusting width for the first line
&:nth-child(1) {
letter-spacing: -8px;
}
// Adjusting width for the second line
&:nth-child(2) {
letter-spacing: -7px;
}
// Adjusting from the fourth element onwards
&:nth-child(n + 4) {
letter-spacing: -8px;
margin-top: -7px;
opacity: 0;
}
// Getting the lines for the hamburger menu icon
&:before {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
transform: translateY(-50%) scaleY(5);
transition: $transition-duration;
}
}
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store';
import { AppState } from '../ecm-store/reducers';
import { CategoryActions, SubCategoryActions, ItemActions } from '../ecm-store/actions';
import { Observable } from 'rxjs/Observable';
import { HostUrlService } from '../host-url.service';
@Component({
selector: 'ecm-nav-menu',
templateUrl: './ecm-nav-menu.component.html',
styleUrls: ['./ecm-nav-menu.component.css']
})
export class ECMNavMenuComponent implements OnInit {
@Output() closePanel = new EventEmitter();
categoryList;
subcategoryList;
subcategories;
userData;
hoverIdx = -1;
menu: Observable<any>;
hostUrl;
constructor(public hostUrlService : HostUrlService,private store: Store<AppState> , private router: Router, private route: ActivatedRoute, private itemAction: ItemActions/*, private categoryAction:CategoryActions*/, private subCategoryAction: SubCategoryActions) {
this.hostUrl=this.hostUrlService.hostUrl;
}
ngOnInit() {
this.getCategories();
this.createUserData();
console.log( 'ECMNavComponent onInit hostUrl' , this.hostUrl);
}
getCategories() {
this.menu = this.store.select('menuList');
this.menu.subscribe( menuList => {
this.categoryList = menuList.summary;
console.log('menuList.summary',menuList, menuList.summary);
});
}
viewAllSubCategory(category) {
console.log('viewAllSubCategory');
this.closePanel.emit();
if( category.subcategory )
{
this.store.dispatch( this.subCategoryAction.resetSubCategoryList() );
this.store.dispatch( this.subCategoryAction.loadSubCategories( category.catCode ) );
//this.store.dispatch(this.categoryAction.getCategorySuccess(category));
this.router.navigate([ '/categories', category.catCode]);
}
if( !category.subcategory )
{
this.store.dispatch( this.itemAction.loadItems( category.catCode ) );
this.router.navigate([ '/products', category.catCode]);
}
}
viewAllCategories() {
let openRoutePath = this.route.snapshot.url[0].path;
this.closePanel.emit();
if ( openRoutePath !== 'home' )
{
this.router.navigate( ['/home'] );
}
else
{
window.scrollTo( 0, 1100 );
}
}
viewAllProducts(subcategory, hoverIdx) {
console.log('viewAllProducts for subcat:',subcategory);
//this.closePanel.emit();
//this.store.dispatch( this.subCategoryAction.getSubCategorySuccess(subcategory) );
//let category = this.categoryList.find( category => category.catCode === subcategory.catCode);
//this.store.dispatch(this.categoryAction.getCategorySuccess(category));
this.closePanel.emit();
this.store.dispatch( this.subCategoryAction.resetSubCategoryList() );
this.store.dispatch( this.subCategoryAction.loadSubCategories( this.categoryList[hoverIdx].catCode ) );
this.store.dispatch( this.itemAction.resetItemList() );
this.store.dispatch( this.itemAction.loadItems( subcategory.scatCode ) );
this.router.navigate( ['/products', subcategory.scatCode] );
}
viewItem(itemCode) {
this.closePanel.emit();
this.store.dispatch( this.itemAction.getItem(itemCode) );
this.router.navigate( ['/detail', itemCode] );
}
goToWishlist() {
this.closePanel.emit();
this.router.navigate(['/wishlist']);
}
goToMyProfile() {
this.closePanel.emit();
this.router.navigate(['/myprofile']);
}
goToMyOrders() {
this.closePanel.emit();
this.router.navigate(['/myOrder']);
}
createUserData() {
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
this.userData = JSON.parse( userInfo );
}
else
{
this.userData = null;
}
}
}
.ecm-order-image{
width: 141px;
height: 110px;
}
.orderDisplay{
position: relative;
top: 82px;
}
.trackButton{
padding-top: 6px;
}
.reviewScreen{
border-left: 1px solid lightgray;
min-height: 124px;
}
.orderDescription1{
display: inline-block;
font-weight: 600;
color: rgb(70, 67, 67);
}
.orderDescription3{
display: block;
height: 30px;
}
.headContents{
border: 2px solid #f2f2f2;
background-color: rgba(242, 242, 242, 0.46);
border-left: 0px;
border-right: 0px;
margin: 0px;
padding: 5px;
}
.orderList{
margin: 0px;
border-bottom: 1px solid rgba(105, 105, 105, 0.27);
padding: 8px;
}
md-card.dispaly.mat-card {
padding: 0px;
margin-bottom: 10px;
}
.orderDate, .orderID, .orderTotal{
display: block;
font-size: 10px;
font-weight: bold;
color: dimgray;
}
.date, .id, .total{
font-size: 12px;
font-weight: bold;
}
.invoiceDetail{
text-align: right;
}
.orderInvoice{
position: relative;
right: 16px;
color: mediumvioletred;
vertical-align: sub;
cursor: pointer;
}
.orderDetail{
color: mediumvioletred;
vertical-align: sub;
cursor: pointer;
}
.orders{
font-size: 18px;
position: relative;
bottom: 10px;
}
.ecm-Orderitem-img {
position: relative;
max-height: 250px;
max-width: 250px;
}
.reviewScreen{
border-left: 1px solid lightgray;
min-height: 158px;
}
@media screen and (max-width: 640px){
.headContents, .offers {
display: none !important;
}
.ecm-Orderitem-img {
left: calc(50% - 125px) !important;
}
.reviewScreen {
border-left: 0;
}
.reviewScreen{
border-top: 1px solid rgba(158, 158, 158, 0.28) !important;
margin-top: 40px !important;
min-height: 78px;
}
.ecm-order-image{
width: 90px !important;
height: 96px !important;
position: relative;
top: 6px;
}
}
<ecm-header #header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'USERORDER'"></ecm-breadcrumbs>
<div class="row orderDisplay">
<span class="orders">Orders ( {{(ordersItems | async)?.length}} )</span>
<div *ngFor="let order of ordersList" >
<md-card class="dispaly">
<div class="row headContents">
<div class="small-6 medium-2 large-2 columns">
<!-- <span class="orderDate">Order Date</span> <span class="date">{{order?.orderDate}}</span> -->
<span class="orderDate">Order Date</span> <span class="date">{{ toDate(order?.orderDate) |date : dispDateFormat}}</span>
</div>
<div class="small-6 medium-3 large-3 columns">
<span class="orderID">Order ID</span> <span class="id">{{order?.orderNo}}</span>
</div>
<div class="small-6 medium-3 large-3 columns" style="text-align: center;">
<span class="orderTotal">Order Total</span> <span class="total">Rs {{order?.amount}}</span>
</div>
<div class="small-6 medium-4 large-4 columns invoiceDetail">
<span class="orderInvoice" (click)="invoiceDetail()">Invoice</span>
<span class="orderDetail" (click)="orderDetail()">Order Details</span>
</div>
</div>
<div *ngFor="let orderDets of order.ecmOrderDets" class="row orderList">
<ecm-card [orderDetails]="orderDets"></ecm-card>
<div class="small-12 medium-4 large-4 columns reviewScreen">
<!-- <user-review [itemCode]="orderDets.itemCode"></user-review> -->
<user-review [itemCode]="orderDets.itemCode" ></user-review>
</div>
</div>
</md-card>
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EcmOrderComponent } from './ecm-order.component';
describe('EcmOrderComponent', () => {
let component: EcmOrderComponent;
let fixture: ComponentFixture<EcmOrderComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EcmOrderComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EcmOrderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, OnChanges, DoCheck, } from '@angular/core';
import { Breadcrumbs } from '../ecm-breadcrumbs/ecm-breadcrumbs.component';
import { MdSnackBar } from '@angular/material';
import { Store } from '@ngrx/store';
import { AppState } from '../ecm-store/reducers';
import { OrderActions} from '../ecm-store/actions';
import { EcmOrderService } from './ecm-order.service';
import { Observable } from 'rxjs/Observable';
import { Router, ActivatedRoute } from '@angular/router';
import { Order } from '../ecm-model/order-model';
@Component({
selector: 'app-ecm-order',
templateUrl: './ecm-order.component.html',
styleUrls: ['./ecm-order.component.css'],
providers:[EcmOrderService]
})
export class EcmOrderComponent implements OnInit {
ordersList : any;
ordersItems : Observable<Order[]>;
totalPrice: number = 0;
orderDate: string;
constructor( private route: ActivatedRoute, public breadcrumbSerivce: Breadcrumbs, public snackBar: MdSnackBar, private store: Store<AppState>, private router: Router, private orderActions: OrderActions , public orderService: EcmOrderService) {}
ngOnInit() {
let breadcrumb = [{label: 'Home', url: '/home'}, {label: 'Orders', url: 'javascript:void(0)'}];
this.breadcrumbSerivce.breadcrumbs = breadcrumb;
this.ordersItems = this.store.select( 'orderItems' );
this.store.dispatch(this.orderActions.loadOrderItems());
this.loadOrders();
}
dispDateFormat = 'dd MMM yyyy - EEEE';
toDate( dateStr ) {
let date: Date = new Date();
//2017-11-07T00:00:00
var parts = dateStr.split( "-" );
date = new Date(parts[2], parts[1] - 1, parts[0]);
console.log("the date try", date);
if(date.toString() === 'Invalid Date'){
date = new Date(dateStr);
console.log("the date catch", date);
}
return date;
}
loadOrders() {
this.store.select( 'orderItems' ).subscribe( orderItems => {
console.log( 'loadUser orderList >> ', orderItems );
this.ordersList = orderItems;
});
}
invoiceDetail(){
this.openSnackBar( 'The Page is redirected to Invoice' );
}
orderDetail(){
this.router.navigate( ['/orderDetail'] );
}
openSnackBar( message: string ) {
this.snackBar.open( message, '', {
duration: 2000,
});
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { ItemDetail } from '../ecm-model/product-detail-model';
import { Store } from '@ngrx/store';
import {AppState} from '../ecm-store/reducers';
import {OrderActions} from '../ecm-store/actions';
import { Order } from '../ecm-model/order-model';
import { HostUrlService } from '../host-url.service';
@Injectable()
export class EcmOrderService {
private orderActionUrl = '/ecm/service/orders';
orderItems: Order[];
constructor( private http: Http, private store: Store<AppState>, public hostUrlService : HostUrlService ) { }
fetchOrder(): Observable<Order[]> {
console.log( "fetch Orders Called" );
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.get( this.hostUrlService.hostUrl+this.orderActionUrl, options )
.map( (res) => this.extractData(res) )
.catch(this.handleError);
}
addToOrder(order) {
console.log( "add orders StoreInOrders Called" );
console.log(JSON.stringify(order));
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.post( this.hostUrlService.hostUrl+this.orderActionUrl, JSON.stringify(order) , options)
.map( (res) => this.extractData(res) );
}
updateOrder( order ) {
console.log( "add orders StoreInOrders Called" );
console.log(JSON.stringify(order));
let headers = new Headers( { 'Content-Type': 'application/json' });
let options = new RequestOptions( { headers: headers });
return this.http.post( this.hostUrlService.hostUrl+this.orderActionUrl, JSON.stringify(order) , options)
.map( (res) => this.extractData(res) );
}
//
// cancelOrder(itemCode) {
// let headers = new Headers( { 'Content-Type': 'application/json' });
// let options = new RequestOptions( { headers: headers });
//
// return this.http.delete( '/ibase/ecm/service/order'+itemCode, options)
// .map( (res) => this.extractData(res) );
// }
cancelOrder( order: Order ) {
console.log( "deleteUserOrder Called", order);
return this.http.delete( this.orderActionUrl + 'card/' + order.itemCode, {})
.map( res => res.json() );
}
private extractData( res: Response ) {
let respJson = res.json();
console.log( 'extracData', respJson );
if ( respJson != null ) {
for ( let key of Object.keys( respJson ) ) {
console.log( "getOrder Order ==> key: " + key )
let data = respJson[key];
try {
respJson[key] = JSON.parse( data );
console.log( "getOrder Orde try : " + respJson[key] );
}
catch ( e ) {
console.log( "getOrder Orde ==> key: ", data, typeof data === 'object' )
if ( typeof data === 'object' )
respJson[key] = this.formatObject( data );
else
respJson[key] = data;
console.log( "getOrder Orde catch : " + respJson[key] );
}
}
console.log( 'extractData[' + JSON.stringify( respJson ) + ']' );
}
return respJson || {};
}
formatObject( respJson: any ) {
console.log( 'formatObject', respJson );
if ( respJson != null ) {
for ( let key of Object.keys( respJson ) ) {
console.log( "formatObject Order ==> key: " + key )
let data = respJson[key];
try {
respJson[key] = JSON.parse( data );
console.log( "formatObject Order try : " + respJson[key] );
}
catch ( e ) {
respJson[key] = data;
console.log( "formatObject itemDetail catch : " + respJson[key] );
}
}
console.log( 'formatObject[' + JSON.stringify( respJson ) + ']' );
}
return respJson || {};
}
private handleError( error: Response | any ) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if ( error instanceof Response ) {
const body = error.json() || '';
const err = body.error || JSON.stringify( body );
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error( 'Service handleError:' + errMsg );
return Observable.throw( errMsg );
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Store } from '@ngrx/store';
import { ItemDetail } from '../ecm-model/product-detail-model';
import { HostUrlService } from '../host-url.service';
@Injectable()
export class EcmProductDetailService {
private SERVICE_URL = '/ecm/service/category/detail/'; // URL to web service
constructor ( public hostUrlService : HostUrlService,private http: Http) {}
getItemDetail (itemCode : string): Observable<ItemDetail> {
let itemsUrl = this.hostUrlService.hostUrl+this.SERVICE_URL + itemCode ;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.get(itemsUrl, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let respJson = res.json();
for( let key of Object.keys( respJson ) )
{
console.log( "getItemDetail itemDetail ==> key: " + key )
let data = respJson[key];
try
{
respJson[key] = JSON.parse( data );
console.log( "getItemDetail itemDetail try : " + respJson[key] );
}
catch(e)
{
respJson[key] = data;
console.log( "getItemDetail itemDetail catch : " + respJson[key] );
}
}
console.log('extractData[' + JSON.stringify(respJson) + ']');
return respJson || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error('Service handleError:' + errMsg);
return Observable.throw(errMsg);
}
}
.md-tab-link {
color: black;
opacity: 1;
}
.md-tab-link:focus {
color: mediumvioletred;
}
.ecm-nav {
margin-left: 35px;
margin-top: 45px;
}
* {
font-family: "Roboto-Regular", sans-serif !important;
}
.ecm-tab {
margin-top: 30px;
margin-right: 110px;
padding-left: 15px;
}
.row {
max-width: 72rem;
}
/* Imprtant Tab*/
.ecm-terms-header {
padding-top: 20px;
padding-left: 35px;
}
.ecm-terms-points {
color: #444;
font-size: 12px;
padding-left: 20px;
padding-top: 10px;
}
li {
padding-bottom: 10px;
}
.ecm-important {
padding-left: 35px;
}
ecm-template{
top: 70px;
position: relative;
display: block;
margin: 0;
padding: 0;
/* top: 60px; */
min-height: 400px;
}
\ No newline at end of file
<ecm-header #header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs *ngIf="itemDetail" [pageName]="'DETAIL'" [itemDetail]='itemDetail'></ecm-breadcrumbs>
<div class="row">
<ecm-template *ngIf="ecmTemplate" [itemDetail] = "itemDetail" [ecmTemplate] = "ecmTemplate" (scrollToReviews)="scrollToReviews();" (doActivity) = "doActivity($event);">
</ecm-template>
</div>
<ecm-panel #ecmPanel>
</ecm-panel>
<div class="row" *ngIf="noOfReviews != 0" #reviewsAndRating>
<ecm-product-review [itemDetail] = "itemDetail" (doActivity) = "doActivity($event);"></ecm-product-review>
</div>
<ecm-related-items *ngIf="scatCode" [scatCode]="scatCode"> </ecm-related-items>
<ecm-footer></ecm-footer>
\ No newline at end of file
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { MdSnackBar } from '@angular/material';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { RESIZE_EVENT } from '../ecm-store/ecm-resize';
import { AppState } from '../ecm-store/reducers';
import { CartActions, ItemActions, WishListActions } from '../ecm-store/actions';
import { EcmProductDetailService } from './ecm-product-detail.service';
import { ScrollService } from '../scroll.service';
import { EcmProductReviewService } from './ecm-product-review.service';
import { ItemDetail } from '../ecm-model/product-detail-model';
import { EcmTemplateItem,EcmTemplateComponent } from './ecm-template/ecm-template.component';
import { EcmOutingComponent } from './ecm-template/ecm-outing.component';
import { EcmFoodComponent } from './ecm-template/ecm-food.component';
import { EcmCelebrationComponent } from './ecm-template/ecm-celebration.component';
import { EcmHandicraftComponent } from './ecm-template/ecm-handicraft.component';
import { EcmTrainingComponent } from './ecm-template/ecm-training.component';
import { EcmProductReviewComponent } from './ecm-product-review.component';
import { EcmRelatedItemsComponent } from '../ecm-view/ecm-related-items/ecm-related-items.component';
import { ECMCart } from '../ecm-model/cart-model';
import { Item } from '../ecm-model/product-model';
import { ECMHeaderComponent } from '../ecm-header/ecm-header.component';
import { Reviews } from '../ecm-model/product-review.model';
import { MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA } from '@angular/material';
import { EcmPanelComponent } from '../ecm-view/ecm-panel/ecm-panel.component';
import { Breadcrumbs } from '../ecm-breadcrumbs/ecm-breadcrumbs.component';
export const ECM_TEMPLATES: any = {
'ecm-outing' : new EcmTemplateItem(EcmOutingComponent),
'ecm-food' : new EcmTemplateItem(EcmFoodComponent),
'ecm-celebration' : new EcmTemplateItem(EcmCelebrationComponent),
'ecm-handicraft' : new EcmTemplateItem(EcmHandicraftComponent),
'ecm-training' : new EcmTemplateItem(EcmTrainingComponent)
};
@Component({
selector: 'ecm-product-details',
templateUrl: './ecm-product-details.component.html',
styleUrls: ['./ecm-product-details.component.css'],
providers: [EcmProductDetailService]
})
export class EcmProductDetailsComponent implements OnInit {
@ViewChild('reviewsAndRating') reviewsAndRating: ElementRef;
@ViewChild('header') header: ECMHeaderComponent;
@ViewChild( 'ecmPanel' ) ecmPanel: EcmPanelComponent;
clientWidth: any;
itemCode: string;
ecmTemplate: EcmTemplateItem;
itemDetail;
scatCode;
noOfReviews;
userReview: Reviews;
attribVal;
attribCode;
constructor(private route: ActivatedRoute, private router:Router, public productDetailService: EcmProductDetailService, public snackBar: MdSnackBar, private store: Store<AppState>, private productreviewService: EcmProductReviewService, public dialog: MdDialog, private cartActions: CartActions, private itemAction:ItemActions, private wishListAction:WishListActions, public breadcrumbSerivce: Breadcrumbs) { }
ngOnInit() {
this.clientWidth = document.documentElement.clientWidth;
RESIZE_EVENT.subscribe(data => {
this.clientWidth = data;
});
this.route.params.subscribe( params => {
//let id: number = +params['id']; // (+) converts string 'id' to a number
// In a real app: dispatch action to load the details here.
this.itemCode = params['itemCode'];
console.log( 'ngOnInit itemCode[' + this.itemCode + ']' );
window.scrollTo(0,0);
//this.getItemFromStore();
this.store.dispatch( this.itemAction.getItem(this.itemCode) );
this.getItemDetail(this.itemCode);
});
}
getItemFromStore(){
let items: Observable<Item[]> = this.store.select('items');
let item;
items.subscribe( items => {
item = items.find(x => x.itemCode === this.itemCode);
this.store.dispatch( this.itemAction.getItemSuccess(item) );
});
}
getItemDetail( itemCode: string ) {
this.store.select('item')
.subscribe( itemDetail => {
this.itemDetail = itemDetail
console.log('Item Detail ****',itemDetail);
if ( this.itemDetail.itemCategory ) {
this.storeCatSubcat();
let ecmTemplateName = this.itemDetail.itemCategory.ecmTemplate;
console.log( "getItemDetail ecmTemplateName: " + ecmTemplateName )
this.ecmTemplate = ECM_TEMPLATES[ecmTemplateName];
this.scatCode = this.itemDetail.itemSubCategory.scatCode;
this.noOfReviews = this.itemDetail.itemRatings.NO_OF_REVIEWS;
let breadcrumb = [{label: 'Home', url: '/home'}, {label: this.itemDetail.itemCategory.shDescr,url: '/categories/' + this.itemDetail.itemSubCategory.catCode},{label: this.itemDetail.itemSubCategory.shDescr,url: '/products/' + this.itemDetail.itemSubCategory.scatCode}];
this.breadcrumbSerivce.breadcrumbs = breadcrumb;
console.log( "Changed scatCode.." + this.scatCode );
if ( this.ecmTemplate ) {
this.ecmTemplate.setItemDetail( this.itemDetail );
}
else {
//alert( "Sorry, the " + ecmTemplateName + " is not in the system yet!" );
}
}
});
}
scrollToReviews() {
let offsetTop = this.reviewsAndRating.nativeElement.offsetTop;
console.log(' scrollToReviews:: offsetTop >>' + offsetTop);
window.scrollTo(0, offsetTop - 80);
}
doActivity($event) {
this.performActivity($event.activity, $event.data, $event);
}
performActivity(activity: string, data: any, $event) {
console.log( 'doActivity > > ' , activity, data, $event.caller, $event.callBack );
if( activity == 'ADD_CART' ) {
if( data.isAddToCart ) { //GO TO CART
this.router.navigate(['/cart']);
}
else { //ADD TO CART
this.addToCart(data.item);
this.showSnackbar('Item Added to your Cart');
}
}
else if( activity == 'ADD_WISHLIST' ) {
if(this.checkUser() !== 'undefined' && this.checkUser() !== null && this.checkUser() !== 'null')
{
this.addToWishlist(data.item);
$event.caller[$event.callBack]();
this.showSnackbar('Item Added to your Wishlist');
}
else
{
this.showSignInPanel();
}
}
else if( activity == 'REMOVE_WISHLIST' ) {
this.removeFromWishlist(data.item);
this.showSnackbar('Item Removed from your Wishlist');
}
else if( activity == 'BOOK_NOW' ) {
this.showSnackbar('Book Now - Redirect to Checkout');
}
else if( activity == 'BUY_NOW' ) {
if( !data.isAddToCart ) { //ADD TO CART
this.addToCart(data.item);
this.showSnackbar('Item Added to your Cart');
}
this.router.navigate(['/checkout']);
}
else if(activity == 'SHOW_SIGNIN_PANEL'){
this.showSignInPanel();
}
}
addToCart(item) {
item.itemQuantity = 1;
this.store.dispatch(this.cartActions.addToCartSuccess(item));
}
addToWishlist( item ) {
this.store.dispatch(this.wishListAction.addToWishlistSuccess(item));
}
removeFromWishlist( item ) {
this.store.dispatch(this.wishListAction.deleteWishlistItemSuccess(item));
}
showSnackbar( message ) {
this.snackBar.open( message, '', { duration: 2000 });
}
storeCatSubcat()
{
let category = this.itemDetail.itemCategory;
if( category ) {
this.store.dispatch({type: 'CATEGORY', payload: category});
}
let subCategory = this.itemDetail.itemSubCategory;
if( subCategory ) {
this.store.dispatch({type: 'SUB_CATEGORY', payload: subCategory});
}
}
showSignInPanel()
{
console.log('showSignin');
this.header.userAction();
}
checkUser(){
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
return userInfo;
}
else
{
return userInfo;
}
}
openReviewDialog(userInfo){
console.log("Complete Fecth Review");
if( this.clientWidth < 640 )
{
this.ecmPanel.open({ type: 'overlay', option: 'WRITE_REVIEW_OPT', top:'0px', left: '0px', width:'100%', height: '100%', data: { detail: this.itemDetail,userId: JSON.parse(this.checkUser()).LOGIN_CODE, userReview: this.userReview} });
}
else
{
this.ecmPanel.open({ type: 'overlay', option: 'WRITE_REVIEW_OPT', top:'100px', left: '20%', width:'60%', height: '535px', data: { detail: this.itemDetail,userId: JSON.parse(this.checkUser()).LOGIN_CODE, userReview: this.userReview} });
}
}
getAttributeType(itemCode){
this.itemDetail.itemVariants.forEach(
value => {
if(value.variants){
this.attribCode = value.attribCode;
let variant = value.variants.find(x => x.itemCode === itemCode);
this.attribVal = variant.value;
}
});
}
}
<div class="row">
<div class="medium-8 large-8 columns ecm-review-section">
<md-card class="ecm-review-card">
<div class="ecm-review-header">
<div class="review-title">
<span class="header-title"> Ratings & Reviews </span>
</div>
<div class="ratings-section">
<div class="row header-content">
<div class="large-2 columns ecm-total-reviews">
<span class="ecm-avg-rating"> {{itemAvgRating}} </span>
<span class="star-rating-block">
<rating [rate]="itemAvgRating" [isSmallRatings]="true"></rating>
</span>
<span class="ecm-total-ratings" *ngIf="itemAvgRating"> {{itemAvgRating}} Ratings </span>
<span class="ecm-total-ratings" *ngIf="!itemAvgRating"> 0 Ratings </span>
</div>
<div *ngIf="itemDetail" class="large-5 columns">
<rating [ratingDetail]="itemDetail.itemRatings" (filterBy)="filter($event);"></rating>
</div>
<div class="large-5 columns ecm-write-review">
<button *ngIf="!editMode" md-button class="write-review-button" (click)="showEditMode();">
<i class="material-icons edit">&#xE254;</i>
<span md-button class="write-review-text"> Write a Review </span>
</button>
<!-- <ecm-edit-review *ngIf="editMode" [itemDetail]="itemDetail" [userId]="userId" (closePanel)="editMode = false"> </ecm-edit-review> -->
<user-review *ngIf="editMode" [editMode]="'E'" [itemCode]="itemDetail.itemCode" [isDetailPage]="true" (onCancel)="editMode = false"></user-review>
</div>
</div>
</div>
<md-tab-group class="ecm-tab medium-12 col-sm-9" (selectChange)="onSelectChange($event)" >
<md-tab label="Most Recent">
<!--
<md-select class="ecm-select" placeholder="Filter By" [(ngModel)]="sortBy" (change)="sort()" name="sort">
<md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
{{type.viewValue}}
</md-option>
</md-select>
-->
<div class="rating-details-section">
<div *ngIf="numFound==0" class="ecm-null-data-descr">
No reviews to display
</div>
<div *ngIf="reviews && numFound!=0" class="reviews-content">
<ecm-card *ngFor="let review of reviews" [reviewsData]="review"> </ecm-card>
</div>
<div *ngIf="reviews && numFound!=0 && pageCount!=1" class="ecm-pagination-section">
<span class="ecm-pages-info">1 of {{pageCount}} Pages</span>
<span *ngFor="let a of createPages(); let i = index" class="ecm-page" [ngClass]="{active:(i+1) === currentPage}" (click)="goToPage(i+1)">
<span>{{i+1}}</span>
</span>
<span class="next-button" (click)="nextPage()"> Next </span>
<!-- <span class="next-button" [ngClass]="{disabled:currentPage === reviews.length}" (click)="nextPage()"> Next </span> -->
</div>
</div>
</md-tab>
<md-tab label="Most Helpful">
<!--
<md-select class="ecm-select" placeholder="Filter By" [(ngModel)]="sortBy" (change)="sort()" name="sort">
<md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
{{type.viewValue}}
</md-option>
</md-select>
-->
<div class="rating-details-section">
<div *ngIf="numFound==0" class="ecm-null-data-descr">
No reviews to display
</div>
<div *ngIf="reviews && numFound!=0" class="reviews-content">
<ecm-card *ngFor="let review of reviews" [reviewsData]="review"> </ecm-card>
</div>
<div *ngIf="reviews && numFound!=0 && pageCount!=1" class="ecm-pagination-section">
<span class="ecm-pages-info">1 of {{pageCount}} Pages</span>
<span *ngFor="let a of createPages(); let i = index" class="ecm-page" [ngClass]="{active:(i+1) === currentPage}" (click)="goToPage(i+1)">
<span>{{i+1}}</span>
</span>
<span class="next-button" (click)="nextPage()"> Next </span>
<!-- <span class="next-button" [ngClass]="{disabled:currentPage === reviews.length}" (click)="nextPage()"> Next </span> -->
</div>
</div>
</md-tab>
</md-tab-group>
</div>
</md-card>
</div>
</div>
export class EcmLocation {
public latitude : string;
public longitude : string;
public address: string;
public pincode: string;
public city: string;
public country: string;
public state: string;
public toString(){
return "[" + this.latitude + "][" + this.longitude + "][" + this.address + "][" + this.pincode + "][" + this.city + "][" + this.country + "][" + this.state + "]";
}
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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