On 27th APRIL 2017

Commited  ProteusECM : Angular Project


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

ecm/Angular/trunk/README.md

+# 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).

ecm/Angular/trunk/karma.conf.js

+// 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
+  });
+};

ecm/Angular/trunk/package.json

+{
+  "name": "admin-lte",
+  "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/common": "^2.4.0",
+    "@angular/compiler": "^2.4.0",
+    "@angular/core": "^2.4.0",
+    "@angular/forms": "^2.4.0",
+    "@angular/http": "^2.4.0",
+    "@angular/platform-browser": "^2.4.0",
+    "@angular/platform-browser-dynamic": "^2.4.0",
+    "@angular/router": "^3.4.0",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.7.6"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.0.0-rc.2",
+    "@angular/compiler-cli": "^2.4.0",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~2.0.0",
+    "jasmine-core": "~2.5.2",
+    "jasmine-spec-reporter": "~3.2.0",
+    "karma": "~1.4.1",
+    "karma-chrome-launcher": "~2.0.0",
+    "karma-cli": "~1.0.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "protractor": "~5.1.0",
+    "ts-node": "~2.0.0",
+    "tslint": "~4.5.0",
+    "typescript": "~2.0.0"
+  }
+}

ecm/Angular/trunk/protractor.conf.js

+// 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 } }));
+  }
+};

ecm/Angular/trunk/src/app/app.component.html

+<router-outlet> </router-outlet>
+

ecm/Angular/trunk/src/app/app.component.ts

+import { Component } from '@angular/core';
+import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+
+@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;
+  constructor(location: Location) { 
+    this.location = location; 
+    console.log( ' this.location.path(true)[' + this.location.path(true) + ']');
+    this.checkAppState();
+  }
+  checkAppState(){
+   this.setItem('jwtToken', this.get('jwtToken'), false );
+   this.setItem('appstate', this.get('app_stat'), true );
+  }
+  get(name){
+   var retVal = 'undefined';
+   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(this.location.path(true)))
+   {
+     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...');
+   }
+  }
+}

ecm/Angular/trunk/src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule, Routes } from '@angular/router';
+
+//import { JwtHelper } from 'angular2-jwt'; //For Future
+
+import { AppComponent } from './app.component';
+import { NgbCarouselModule } from './ecm-carousel/carousel.module';
+import { ECMHeaderComponent } from './ecm-header/ecm-header.component';
+import { ECMFooterComponent } from './ecm-footer/ecm-footer.component';
+import { ECMContentComponent } from './ecm-content/ecm-content.component';
+import { ECMSearchComponent } from './ecm-search/ecm-search.component';
+import { ECMCategoryComponent } from './ecm-category/ecm-category.component';
+import { ECMTrendComponent } from './ecm-trend/ecm-trend.component';
+import { ECMCardComponent } from './ecm-card/ecm-card.component';
+import { ECMNavMenuComponent } from './ecm-nav-menu/ecm-nav-menu.component';
+import { ECMHomeComponent } from './ecm-home/ecm-home.component';
+import { ViewComponent} from './ecm-view/view.component';
+import { ShareComponent} from './ecm-view/share.component';
+const appRoutes: Routes = [
+  { path: '', redirectTo: 'Home', pathMatch: 'full' },
+  { path: 'Home', component: ECMHomeComponent, children:[
+  { path: 'content', component: ECMContentComponent ,outlet:'content'},
+  { path: 'view/:catCode', component: ViewComponent ,outlet:'content'}]},
+  { path: 'share/:catCode', component: ShareComponent}
+];
+@NgModule({
+  declarations: [
+    AppComponent,
+    ECMHeaderComponent,
+    ECMFooterComponent,
+    ECMContentComponent,
+    ECMSearchComponent,
+    ECMCategoryComponent,
+    ECMTrendComponent,
+    ECMCardComponent,
+    ECMNavMenuComponent,
+    ECMHomeComponent,
+    ViewComponent,
+    ShareComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    RouterModule.forRoot(appRoutes),
+    NgbCarouselModule.forRoot()
+  ],
+  providers: [
+	{provide: LocationStrategy, useClass: HashLocationStrategy}
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

ecm/Angular/trunk/src/app/ecm-card/card-model.ts

+/**
+ * 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) {
+  }
+}

ecm/Angular/trunk/src/app/ecm-card/ecm-card.component.css

+.ecm-card {
+	border-radius: 5px;
+	box-shadow: 0 0 5px 0px #ccc;
+	padding: 0;
+	margin: 0;
+	position: relative
+}
+.ecm-card-img {
+	border-top-right-radius: 5px;
+	border-top-left-radius: 5px;
+	width: 100%;
+}
+.ecm-card-footer {
+	width: 100%;
+	height: 90px;
+	padding: 10px;
+}
+.ecm-card-info {
+	padding: 10px 5px 10px 5px;
+	width: calc(100% - 165px);
+	height: 100%;
+	float: left;
+}
+.ecm-card-info-title {
+	font-size: 14px;
+	font-weight: 600;
+	color: #444;
+	display: block;
+	line-height: 20px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+.ecm-card-info-subhead {
+	font-size: 12px;
+	color: #888;
+	display: block;
+	line-height: 12px;
+	top: 7px;
+	position: relative;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: normal;
+	line-height: 15px;
+}
+.ecm-card-info-img {
+	float: left;
+	/*background-color: mediumvioletred;*/
+	border: none;
+	border-radius: 100%;
+}
+.ecm-card-action {
+	width: 90px;
+	height: 35px;
+	line-height: 15px;
+	font-size: 12px;
+	padding: 10px;
+	text-align: center;
+	border: 1px solid mediumvioletred;
+	border-radius: 2px;
+	float: right;
+	position: relative;
+	top: 15px;
+	color: #333;
+	right: 10px;
+}
+.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;
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-card/ecm-card.component.html

+<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>
+		<!-- Currently Default Actions will be View and Share
+		<a class="ecm-card-action" routerLink="/view" routerLinkActive="active">View</a> 
+		<a class="ecm-card-action top share" routerLink="/share" routerLinkActive="active"></a>
+		-->
+		<a *ngIf="card.info_link" class="ecm-card-action"[routerLink]="['link', card.info_title]">Open</a> 
+		<a *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">
+	<img class="ecm-card-img"src="{{category.resourceUrl}}{{category.catCode}}.png"alt="Category image">
+	<div class="ecm-card-footer">
+		<img class="ecm-card-info-img"src="{{category.resourceUrl}}{{category.catCode}}_icon.png"alt="Category icon" />
+		<div class="ecm-card-info">
+			<span class="ecm-card-info-title">{{category.shDescr}}</span> 
+			<span class="ecm-card-info-subhead">{{category.descr}}</span>
+		</div>
+		<!-- Currently Default Actions will be View and Share
+		<a class="ecm-card-action" routerLink="/view" routerLinkActive="active">View</a> 
+		<a class="ecm-card-action top share" routerLink="/share" routerLinkActive="active"></a>
+		-->
+		<a *ngIf="category.catLink" class="ecm-card-action"[routerLink]="['link', category.shDescr]">Open</a> 
+		<a *ngIf="!category.catLink" class="ecm-card-action"[routerLink]="['/Home', {outlets:{content:['view',category.catCode]}}]">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">
+	<img class="ecm-card-img"src="{{subcategory.resourceUrl}}{{subcategory.scatCode}}.png"alt="Category image">
+	<div class="ecm-card-footer">
+		<img class="ecm-card-info-img"src="{{subcategory.resourceUrl}}{{subcategory.catCode}}_icon.png"alt="Category icon" />
+		<div class="ecm-card-info">
+			<span class="ecm-card-info-title">{{subcategory.shDescr}}</span> 
+			<span class="ecm-card-info-subhead">{{subcategory.descr}}</span>
+		</div>
+		<!-- Currently Default Actions will be View and Share
+		<a class="ecm-card-action" routerLink="/view" routerLinkActive="active">View</a> 
+		<a class="ecm-card-action top share" routerLink="/share" routerLinkActive="active"></a>
+		-->
+		<a *ngIf="subcategory.catLink" class="ecm-card-action"[routerLink]="['link', subcategory.shDescr]">Open</a>
+        <a *ngIf="!subcategory.catLink" class="ecm-card-action top share"[routerLink]="['share', subcategory.scatCode]"></a>
+	</div>
+</div>

ecm/Angular/trunk/src/app/ecm-card/ecm-card.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { ECMCard } from './card-model';
+import { Category, SubCategory } from '../ecm-category/category-model';
+
+@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;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

ecm/Angular/trunk/src/app/ecm-carousel/carousel-config.ts

+import {Injectable} from '@angular/core';
+
+/**
+ * Configuration service for the NgbCarousel component.
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the carousels used in the application.
+ */
+@Injectable()
+export class NgbCarouselConfig {
+  interval = 0;
+  wrap = true;
+  keyboard = true;
+}

ecm/Angular/trunk/src/app/ecm-carousel/carousel.css

+img {
+	vertical-align: middle;
+	border-style: none;
+}
+.carousel {
+	height: 450px;
+	margin-bottom: 60px;
+	position: relative
+}
+.carousel-inner {
+	position: relative;
+	overflow: hidden;
+	max-width: 90%;
+	margin-left: auto;
+	margin-right: auto;
+	/* padding-bottom: 75px;*/
+}
+.carousel-item {
+	position: relative;
+	display: none;
+	width: 100%
+}
+@media ( -webkit-transform-3d ) {
+	.carousel-item {
+		-webkit-transition: -webkit-transform .6s ease-in-out;
+		transition: -webkit-transform .6s ease-in-out;
+		transition: transform .6s ease-in-out;
+		transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+		-webkit-perspective: 1000px;
+		perspective: 1000px;
+		height: 450px;
+	}
+}
+@supports ((-webkit-transform:translate3d (0, 0,0)) or (transform:translate3d
+	 (0, 0,0))){.carousel-item {
+	-webkit-transition: -webkit-transform .6s ease-in-out;
+	transition: -webkit-transform .6s ease-in-out;
+	transition: transform .6s ease-in-out;
+	transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	-webkit-perspective: 1000px;
+	perspective: 1000px;
+	height: 450px;
+}
+}
+.carousel-item-next, .carousel-item-prev, .carousel-item.active {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex
+}
+.carousel-item-next, .carousel-item-prev {
+	position: absolute;
+	top: 0
+}
+@media ( -webkit-transform-3d ) {
+	.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right
+		{
+		-webkit-transform: translateZ(0);
+		transform: translateZ(0)
+	}
+	.active.carousel-item-right, .carousel-item-next {
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0)
+	}
+	.active.carousel-item-left, .carousel-item-prev {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0)
+	}
+}
+@supports ((-webkit-transform:translate3d (0, 0,0)) or (transform:translate3d
+	 (0, 0,0))){.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right
+	{
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0)
+}
+.active.carousel-item-right, .carousel-item-next {
+	-webkit-transform: translate3d(100%, 0, 0);
+	transform: translate3d(100%, 0, 0)
+}
+.active.carousel-item-left, .carousel-item-prev {
+	-webkit-transform: translate3d(-100%, 0, 0);
+	transform: translate3d(-100%, 0, 0)
+}
+}
+.carousel-control-next, .carousel-control-prev {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	width: 5%;
+	color: #fff;
+	text-align: center;
+	opacity: .5
+}
+.carousel-control-next:focus, .carousel-control-next:hover,
+	.carousel-control-prev:focus, .carousel-control-prev:hover {
+	color: #fff;
+	text-decoration: none;
+	outline: 0;
+	opacity: .9;
+}
+.carousel-control-prev {
+	left: 0
+}
+.carousel-control-next {
+	right: 0
+}
+.carousel-control-next-icon, .carousel-control-prev-icon {
+	display: inline-block;
+	width: 38px;
+	height: 38px;
+	background: transparent no-repeat 50%;
+	background-size: 100% 100%
+}
+.carousel-control-prev-icon {
+	background-image:
+		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+	background-image: url(../../assets/images/v_left_arrow_38_38.png);
+}
+.carousel-control-next-icon {
+	background-image:
+		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+	background-image: url(../../assets/images/v_right_arrow_38_38.png);
+}
+/*circle style*/
+.carousel-indicators {
+	position: absolute;
+	bottom: 10px;
+	left: 50%;
+	z-index: 2;
+	width: 60%;
+	padding-left: 0;
+	margin-left: -30%;
+	text-align: center;
+	list-style: none
+}
+.carousel-indicators li {
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	margin: 1px;
+	text-indent: -999px;
+	cursor: pointer;
+	background-color: #000\9;
+	background-color: rgba(0, 0, 0, 0);
+	border: 1px solid mediumvioletred;
+	border-radius: 10px
+}
+.carousel-indicators .active {
+	width: 12px;
+	height: 12px;
+	margin: 0;
+	background-color: mediumvioletred;
+}
+/*hyphen style*/
+/*
+.carousel-indicators {
+	position: absolute;
+	right: 0;
+	bottom: 10px;
+	left: 0;
+	z-index: 15;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	padding-left: 0;
+	margin-right: 15%;
+	margin-left: 15%;
+	list-style: none
+}
+
+.carousel-indicators li {
+	position: relative;
+	-webkit-box-flex: 1;
+	-ms-flex: 1 0 auto;
+	flex: 1 0 auto;
+	max-width: 30px;
+	height: 3px;
+	margin-right: 3px;
+	margin-left: 3px;
+	text-indent: -999px;
+	cursor: pointer;
+	background-color: violet;
+}
+.carousel-indicators li:before {
+	top: -10px
+}
+.carousel-indicators li:after, 
+.carousel-indicators li:before {
+	position: absolute;
+	left: 0;
+	display: inline-block;
+	width: 100%;
+	height: 10px;
+	content: ""
+}
+.carousel-indicators li:after {
+	bottom: -10px
+}
+.carousel-indicators .active {
+	background-color: mediumvioletred;
+}
+*/
+.carousel-caption {
+	position: absolute;
+	right: 15%;
+	bottom: 20px;
+	left: 15%;
+	z-index: 10;
+	padding-top: 20px;
+	padding-bottom: 20px;
+	color: #fff;
+	text-align: center
+}
+.text-justify {
+	text-align: justify !important
+}
+.text-nowrap {
+	white-space: nowrap !important
+}
+.text-truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap
+}
+.text-left {
+	text-align: left !important
+}
+.text-right {
+	text-align: right !important
+}
+.text-center {
+	text-align: center !important
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
+@media screen and (min-width:768px) {
+	/*	.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right,
+		.carousel-control .icon-next, .carousel-control .icon-prev {
+		width: 30px;
+		height: 30px;
+		margin-top: -10px;
+		font-size: 30px
+	}
+	.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev
+		{
+		margin-left: -10px
+	}
+	.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next
+		{
+		margin-right: -10px
+	}
+	.carousel-caption {
+		right: 20%;
+		left: 20%;
+		padding-bottom: 30px
+	}
+*/
+	.carousel-indicators {
+		bottom: 20px
+	}
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-carousel/carousel.html

+<ol class="carousel-indicators">
+	<li *ngFor="let slide of slides" [id]="slide.id"[class.active]="slide.id === activeId"(click)="cycleToSelected(slide.id)"></li>
+</ol>
+<div class="carousel-inner">
+	<div *ngFor="let slide of slides" class="carousel-item"[class.active]="slide.id === activeId">
+		<template [ngTemplateOutlet]="slide.tplRef"></template>
+	</div>
+</div>
+<a class="left carousel-control-prev" role="button"(click)="cycleToPrev()"> 
+<span class="carousel-control-prev-icon"aria-hidden="true"></span> 
+<span class="sr-only">Previous</span>
+</a>
+<a class="right carousel-control-next" role="button"(click)="cycleToNext()">
+<span class="carousel-control-next-icon"aria-hidden="true"></span>
+<span class="sr-only">Next</span>
+</a>

ecm/Angular/trunk/src/app/ecm-carousel/carousel.module.ts

+import {NgModule, ModuleWithProviders} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NGB_CAROUSEL_DIRECTIVES} from './carousel';
+import {NgbCarouselConfig} from './carousel-config';
+export {NgbCarousel, NgbSlide} from './carousel';
+export {NgbCarouselConfig} from './carousel-config';
+
+@NgModule({declarations: NGB_CAROUSEL_DIRECTIVES, exports: NGB_CAROUSEL_DIRECTIVES, imports: [CommonModule]})
+export class NgbCarouselModule {
+  static forRoot(): ModuleWithProviders { return {ngModule: NgbCarouselModule, providers: [NgbCarouselConfig]}; }
+}

ecm/Angular/trunk/src/app/ecm-carousel/carousel.ts

+import {
+  Component,
+  Directive,
+  TemplateRef,
+  ContentChildren,
+  QueryList,
+  Input,
+  OnDestroy,
+  AfterContentChecked,
+  OnInit
+} from '@angular/core';
+import {NgbCarouselConfig} from './carousel-config';
+let nextId = 0;
+
+/**
+ * Represents an individual slide to be used within a carousel.
+ */
+@Directive({selector: 'template[ngbSlide]'})
+export class NgbSlide {
+  /**
+   * Unique slide identifier. Must be unique for the entire document for proper accessibility support.
+   * Will be auto-generated if not provided.
+   */
+  @Input() id = `ngb-slide-${nextId++}`;
+  constructor(public tplRef: TemplateRef<any>) {}
+}
+/**
+ * Directive to easily create carousels based on Bootstrap's markup.
+ */
+@Component({
+  selector: 'ngb-carousel',
+  exportAs: 'ngbCarousel',
+  templateUrl: './carousel.html',
+  styleUrls: ['./carousel.css'],
+  host: {
+    'class': 'carousel slide',
+    '[style.display]': '"block"',
+    'tabIndex': '0',
+    '(mouseenter)': 'pause()',
+    '(mouseleave)': 'cycle()',
+    '(keydown.arrowLeft)': 'keyPrev()',
+    '(keydown.arrowRight)': 'keyNext()'
+  }
+})
+export class NgbCarousel implements AfterContentChecked,OnDestroy, OnInit {
+  @ContentChildren(NgbSlide) slides: QueryList<NgbSlide>;
+  private _slideChangeInterval;
+  /**
+   * Amount of time in milliseconds before next slide is shown.
+   */
+  @Input() interval: number;
+  /**
+   * Whether can wrap from the last to the first slide.
+   */
+  @Input() wrap: boolean;
+  /**
+   * A flag for allowing navigation via keyboard
+   */
+  @Input() keyboard: boolean;
+  /**
+   * The active slide id.
+   */
+  @Input() activeId: string;
+  constructor(config: NgbCarouselConfig) {
+    this.interval = config.interval;
+    this.wrap = config.wrap;
+    this.keyboard = config.keyboard;
+  }
+  ngAfterContentChecked() {
+    let activeSlide = this._getSlideById(this.activeId);
+    this.activeId = activeSlide ? activeSlide.id : (this.slides.length ? this.slides.first.id : null);
+  }
+  ngOnInit() { this._startTimer(); }
+  ngOnDestroy() { clearInterval(this._slideChangeInterval); }
+  /**
+   * Navigate to a slide with the specified identifier.
+   */
+  select(slideId: string) {
+    this.cycleToSelected(slideId);
+    this._restartTimer();
+  }
+  /**
+   * Navigate to the next slide.
+   */
+  prev() {
+    this.cycleToPrev();
+    this._restartTimer();
+  }
+  /**
+   * Navigate to the next slide.
+   */
+  next() {
+    this.cycleToNext();
+    this._restartTimer();
+  }
+  /**
+   * Stops the carousel from cycling through items.
+   */
+  pause() { this._stopTimer(); }
+  /**
+   * Restarts cycling through the carousel slides from left to right.
+   */
+  cycle() { this._startTimer(); }
+
+  cycleToNext() { this.cycleToSelected(this._getNextSlide(this.activeId)); }
+
+  cycleToPrev() { this.cycleToSelected(this._getPrevSlide(this.activeId)); }
+
+  cycleToSelected(slideIdx: string) {
+    let selectedSlide = this._getSlideById(slideIdx);
+    if (selectedSlide) {
+      this.activeId = selectedSlide.id;
+    }
+  }
+  keyPrev() {
+    if (this.keyboard) {
+      this.prev();
+    }
+  }
+  keyNext() {
+    if (this.keyboard) {
+      this.next();
+    }
+  }
+  private _restartTimer() {
+    this._stopTimer();
+    this._startTimer();
+  }
+  private _startTimer() {
+    if (this.interval > 0) {
+      this._slideChangeInterval = setInterval(() => { this.cycleToNext(); }, this.interval);
+    }
+  }
+  private _stopTimer() { clearInterval(this._slideChangeInterval); }
+
+  private _getSlideById(slideId: string): NgbSlide {
+    let slideWithId: NgbSlide[] = this.slides.filter(slide => slide.id === slideId);
+    return slideWithId.length ? slideWithId[0] : null;
+  }
+  private _getSlideIdxById(slideId: string): number {
+    return this.slides.toArray().indexOf(this._getSlideById(slideId));
+  }
+  private _getNextSlide(currentSlideId: string): string {
+    const slideArr = this.slides.toArray();
+    const currentSlideIdx = this._getSlideIdxById(currentSlideId);
+    const isLastSlide = currentSlideIdx === slideArr.length - 1;
+
+    return isLastSlide ? (this.wrap ? slideArr[0].id : slideArr[slideArr.length - 1].id) :
+                         slideArr[currentSlideIdx + 1].id;
+  }
+  private _getPrevSlide(currentSlideId: string): string {
+    const slideArr = this.slides.toArray();
+    const currentSlideIdx = this._getSlideIdxById(currentSlideId);
+    const isFirstSlide = currentSlideIdx === 0;
+
+    return isFirstSlide ? (this.wrap ? slideArr[slideArr.length - 1].id : slideArr[0].id) :
+                          slideArr[currentSlideIdx - 1].id;
+  }
+}
+export const NGB_CAROUSEL_DIRECTIVES = [NgbCarousel, NgbSlide];

ecm/Angular/trunk/src/app/ecm-category/category-model.ts

+/**
+ * Category Model
+ * {catCode, curRank, descr, shDescr, resourceUrl}
+ */
+export class Category {
+    constructor(
+      public catCode: string = '',
+      public descr: string = '',
+      public shDescr: string = '',
+      public curRank: string = '',
+      public catLink: string = '',
+      public resourceUrl: string = '') {
+        console.log('comp this.resourceUrl[' + this.resourceUrl + ']');
+    }
+}
+export class SubCategory {
+    constructor(
+      public scatCode: string = '',
+      public catCode: string = '',
+      public descr: string = '',
+      public shDescr: string = '',
+      public curRank: string = '',
+      public catLink: string = '',
+      public resourceUrl: string = '') {
+        console.log('comp this.resourceUrl[' + this.resourceUrl + ']');
+    }
+}
+export const MockTrendings: Category[] = [
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','','')
+];
+
+

ecm/Angular/trunk/src/app/ecm-category/ecm-category.component.css

+.categories-section {
+	padding: 0;
+	margin: 0;
+	padding-top: 100px;
+	background-color: #FFF;
+}
+.ecm-section-info {
+	padding: 10px;
+}
+.ecm-section-info-title {
+	font-size: 26px;
+	color: #444;
+	display: block;
+}
+.ecm-section-info-subhead {
+	font-size: 16px;
+	color: #888;
+	display: block;
+}
+.end {
+	padding-top: 15px;
+	padding-bottom: 50px;
+}
+.row.row-category {
+	max-width: 72rem;
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-category/ecm-category.component.html

+<div *ngIf="categories">
+	<section class="categories-section">
+		<div class="row row-category">
+			<div class="ecm-section-info">
+				<span class="ecm-section-info-title">Categories</span> <span class="ecm-section-info-subhead">Explore top AuthenticRegional Foods, Outings, Celebrations around {{selectedPlace}}</span>
+			</div>
+			<div class="small-12 medium-6 large-4 column end "*ngFor="let _category of categories">
+				<ecm-card [category]="_category"></ecm-card>
+			</div>
+			<div></div>
+		</div>
+	</section>
+</div>
+

ecm/Angular/trunk/src/app/ecm-category/ecm-category.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ECMCategoryService } from './ecm-category.service';
+import { ECMCard } from '../ecm-card/card-model';
+import { Category, SubCategory } from '../ecm-category/category-model';
+@Component({
+  selector: 'ecm-category',
+  templateUrl: './ecm-category.component.html',
+  styleUrls: ['./ecm-category.component.css'],
+  providers: [ECMCategoryService]
+})
+export class ECMCategoryComponent implements OnInit {
+  errorMessage: string;
+  selectedPlace = 'Mumbai';
+  categories: Category[];
+//  cat_cards: ECMCard[];
+  constructor(public categoryService: ECMCategoryService) { }
+  ngOnInit() {
+    this.getCategories();
+  }
+/*
+  getCategories(): void {
+    this.categoryService.getCategories().then( categories => {
+        this.categories = categories;
+        this.cat_cards = [];
+        for ( let i = 0; i < this.categories.length ; ++i ) {
+            let img = 'assets/images/' + this.categories[i].type + '.png';
+            let info_img = 'assets/images/' + this.categories[i].type + '_icon.png';
+            let info_title = this.categories[i].title;
+            let info_subhead = this.categories[i].descr;
+            this.cat_cards.push( new ECMCard( img, info_img, info_title, info_subhead, false ) );
+        }
+      }
+    );
+  }
+*/
+  getCategories() {
+    this.categoryService.getCategories().subscribe(
+      categories => {
+        this.categories = categories;
+        console.log('comp categories[' +  JSON.stringify( categories ) + '] \n this.categories[' +  JSON.stringify( this.categories ) + ']');
+/*
+        this.cat_cards = [];
+        for ( let i = 0; i < this.categories.length ; ++i ) {
+            let img = 'assets/images/category/' + this.categories[i].catCode + '.png';
+            let info_img = 'assets/images/category/' + this.categories[i].catCode + '_icon.png';
+            let info_title = this.categories[i].catDescr;
+            let info_subhead = this.categories[i].catShortDescr;
+            this.cat_cards.push( new ECMCard( img, info_img, info_title, info_subhead, false ) );
+        }
+*/
+      },
+      error =>  {
+        this.errorMessage = <any>error;
+        console.log('comp errorMessage[' + this.errorMessage + ']');
+      });
+  }
+  
+
+
+/*
+  addCategory (name: string) {
+    if (!name) { return; }
+    this.categoryService.addCategory(name)
+                     .subscribe(
+                       hero  => this.categories.push(category),
+                       error =>  this.errorMessage = <any>error);
+  }
+*/
+}

ecm/Angular/trunk/src/app/ecm-category/ecm-category.service.ts

+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 { Category, SubCategory } from '../ecm-category/category-model';
+
+@Injectable()
+export class ECMCategoryService {
+
+  private categoriesUrl = '/ecm/service/category';  // URL to web service
+  private subCategoriesUrl = '/ecm/service/category';  // URL to web service
+
+  constructor (private http: Http) {}
+
+/*
+  getCategories(): Promise<Category[]> {
+    return Promise.resolve(MockCategories);
+  }
+
+  getCategoriesSlowly(): Promise<Category[]> {
+    return new Promise(resolve => {
+       // Simulate server latency with 2 second delay
+       setTimeout(() => resolve(this.getCategories()), 2000);
+    });
+  }
+  constructor() { }
+*/
+
+  getCategories (): Observable<Category[]> {
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.get(this.categoriesUrl, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
+  }
+
+  getSubCategories (scatCode : string): Observable<SubCategory[]> {
+  
+    this.subCategoriesUrl = this.subCategoriesUrl + '/' + scatCode + '/list';
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.get(this.subCategoriesUrl, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
+  }
+
+  private extractData(res: Response) {
+    let body = res.json();
+    console.log('comp categories[' + JSON.stringify(body) + ']');
+    return body || { };
+  }
+
+  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);
+  }
+
+  /*
+  addCategory (name: string): Observable<Hero> {
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.post(this.categoriesUrl, { name }, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
+  }
+  */
+
+}

ecm/Angular/trunk/src/app/ecm-category/subcategory-model.ts

+/**
+ * Category Model
+ * {catCode, curRank, descr, shDescr, resourceUrl}
+ */
+export class Category {
+    constructor(
+      public catCode: string = '',
+      public descr: string = '',
+      public shDescr: string = '',
+      public curRank: string = '',
+      public catLink: string = '',
+      public resourceUrl: string = '') {
+        console.log('comp this.resourceUrl[' + this.resourceUrl + ']');
+    }
+}
+export const MockTrendings: Category[] = [
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','','')
+];
+
+

ecm/Angular/trunk/src/app/ecm-content/ecm-content.component.css

+.ecm-content {
+	width: 100%;
+	height: auto;
+	padding-bottom: 100px;
+	background-color: #FFF;
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-content/ecm-content.component.html

+<div class="ecm-content">
+	<ecm-trend> </ecm-trend>
+	<ecm-category> </ecm-category>
+</div>

ecm/Angular/trunk/src/app/ecm-content/ecm-content.component.ts

+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 scroll to window at ###:' + document.body.scrollHeight );
+  }
+
+}

ecm/Angular/trunk/src/app/ecm-footer/ecm-footer.component.css

+/*Images Source*/
+.img-logo {
+	content: url(../../assets/images/w_logo_38_38.png);
+}
+.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;
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-footer/ecm-footer.component.html

+<section class="footer-section footer-section-60">
+	<div class="footer-subscribe hide">
+		<form action="#" method="post" class="subscribe-form"id="subscribe-form">
+			<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">
+					<input type="submit" class="subscribe-submit"name="subscribe-submit" id="subscribe-submit" value="Subscribe" />
+				</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>

ecm/Angular/trunk/src/app/ecm-footer/ecm-footer.component.ts

+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 scroll to window at ###:' + document.body.scrollHeight );
+  }
+
+}

ecm/Angular/trunk/src/app/ecm-header/ecm-header.component.css

+.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*/
+.user-image-128{
+    width: 128px;
+    height: 128px;
+}
+.img-user-32 {
+	content: url(../../assets/images/w_user_32_32.png);
+}
+.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%;
+}
+.img-logo-32 {
+	content: url(../../assets/images/logo_32_32.png);
+}
+.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;
+}
+/*Fixed Header*/
+
+.invisible{
+	display: none;
+}
+.fixed-header-section {
+    background-color: mediumvioletred;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    z-index: 3;
+    display: none;
+}
+.fixed-header-logo{
+    float: left;
+}
+.fixed-header-user{
+    float: right;
+    border-radius: 100%;
+}
+.fixed-header-logo,
+.fixed-header-user {
+    position: relative;
+    top: 4px;
+    height: 32px;
+    width: 32px;
+    padding: 0;
+}
+/*Fixed Header Menu*/
+
+.fixed-header-nav{
+	top: 0;
+	left: 0;
+    position: fixed;
+    z-index: 4;
+    height: 100%;
+}
+

ecm/Angular/trunk/src/app/ecm-header/ecm-header.component.html

+<ecm-nav-menu class="fixed-header-nav"> </ecm-nav-menu>
+<section class="header-section visible">
+	<div class="input-container-bg" [@fadeState]="headerFadeState"></div>
+	<div class="input-container">
+		<img *ngIf="userData" class="user-adj user-image-128"title="{{userData.name}}"src="/ibase/resource/images/users/{{userData.jti}}.png"onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_128_128.png'; "[@userState]="headerFadeState" /> 
+		<img *ngIf="!userData"class="img-user user-adj" [@userState]="headerFadeState" />
+		<div class="row">
+			<div class="small-12 medium-10 large-10 medium-centered column">
+				<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" />
+				<ecm-search [compFadeState]="headerFadeState"[headerState]="'relative'"></ecm-search>
+			</div>
+		</div>
+	</div>
+</section>
+<section class="fixed-header-section"
+	[@fixedHeaderShow]="headerFadeState">
+	<div class="large-11 medium-centered">
+		<img class="fixed-header-logo img-logo-32" /> <img *ngIf="userData"class="fixed-header-user" title="{{userData.name}}"src="/ibase/resource/images/users/{{userData.jti}}.png"onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_32_32.png'; " />
+		<img *ngIf="!userData" class="fixed-header-user img-user-32" />
+		<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
+	</div>
+</section>

ecm/Angular/trunk/src/app/ecm-header/ecm-header.component.ts

+import { Component, Input, Output, Inject, OnInit, OnDestroy, AfterViewChecked, HostListener, trigger, state, animate, transition, style } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Component({
+  selector: 'ecm-header',
+  templateUrl: './ecm-header.component.html',
+  styleUrls: ['./ecm-header.component.css'],
+  animations: [
+    trigger('l2dLogoTrans', [
+       state('false' , style({ opacity: 1, transform : 'scale(1.0) translateY(0) ' })),
+       state('true', style({ transform : ' translateY(0) ' })),
+       state('fade150', style({ transform : ' translateX(-10px) translateY(0) scale(0.95)' })),
+       state('fade200', style({ transform : ' translateX(-50px) translateY(0) scale(0.85)' })),
+       state('fade250', style({ transform : ' translateX(-100px) translateY(0) scale(0.75)' })),
+       state('fade300', style({ transform : ' translateX(-150px) translateY(0) scale(0.65)' })),
+       state('fade350', style({ transform : ' translateX(-250px) translateY(0) scale(0.55)' })),
+       state('fade400', style({ transform : ' translateX(-400px) translateY(50px) scale(0.45)' })),
+       state('fade450', style({ transform : ' translateX(-450px) translateY(50px) scale(0.40)' })),
+       state('fade500', style({ transform : ' translateX(-500px) translateY(50px) scale(0.35)' })),
+       state('fade550', style({ transform : ' translateX(-550px) translateY(50px) scale(0.30)' })),
+       state('fade600', style({ transform : ' translateX(-600px) translateY(150px) scale(0.25)' })),
+       transition('* <=> *', animate('.3s'))
+    ]),
+    trigger('fixedHeaderShow', [
+      state('fade350', style({ opacity: 0.5, display: 'block' })),
+      state('fade400', style({ opacity: 0.6, display: 'block' })),
+      state('fade450', style({ opacity: 0.7, display: 'block' })),
+      state('fade500', style({ opacity: 0.8, display: 'block' })),
+      state('fade550', style({ opacity: 0.9, display: 'block' })),
+      state('fade600', style({ opacity: 1.0, display: 'block' }))
+    ]),
+    trigger('fadeState', [
+       state('false' , style({ opacity: 1 })),
+       state('true', style({ opacity: 0.99 })),
+       state('fade150', style({ opacity: 0.90 })),
+       state('fade200', style({ opacity: 0.89 })),
+       state('fade250', style({ opacity: 0.79 })),
+       state('fade300', style({ opacity: 0.69 })),
+       state('fade350', style({ opacity: 0.59 })),
+       state('fade400', style({ opacity: 0.49 })),
+       state('fade450', style({ opacity: 0.39 })),
+       state('fade500', style({ opacity: 0.29 })),
+       state('fade550', style({ opacity: 0.19 })),
+       state('fade600', style({ opacity: 0.09 })),
+       transition('* <=> *', animate('.3s'))
+    ]),
+    trigger('userState', [
+       state('false' , style({ opacity: 1, transform : 'scale(1.0) translateY(0%) ' })),
+       state('true', style({ transform : ' translateY(0) ' })),
+       state('fade150', style({ transform : ' translateX(0) translateY(0) scale(0.95)' })),
+       state('fade200', style({ transform : ' translateX(0) translateY(25px) scale(0.75)' })),
+       state('fade250', style({ transform : ' translateX(10px) translateY(75px) scale(0.65)' })),
+       state('fade300', style({ transform : ' translateX(25px) translateY(125px) scale(0.55)' })),
+       state('fade350', style({ transform : ' translateX(35px) translateY(175px) scale(0.50)' })),
+       state('fade400', style({ transform : ' translateX(50px) translateY(225px) scale(0.45)' })),
+       state('fade450', style({ transform : ' translateX(55px) translateY(275px) scale(0.40)' })),
+       state('fade500', style({ transform : ' translateX(60px) translateY(275px) scale(0.35)' })),
+       state('fade550', style({ transform : ' translateX(75px) translateY(300px) scale(0.30)' })),
+       state('fade600', style({ transform : ' translateX(80px) translateY(325px) scale(0.25)' })),
+       transition('* <=> *', animate('.3s'))
+    ])
+  ]
+})
+
+export class ECMHeaderComponent implements OnInit, AfterViewChecked, OnDestroy {
+
+  @Input() headerFadeState = 'false';
+  isScrollTopDone: boolean = false;
+  scrollTop: number;
+
+  userData: any;
+  
+  constructor(@Inject(DOCUMENT) private document: Document) { }
+
+  ngOnInit() {
+    console.log(' ECMHeaderComponent onInit ###:' + document.body.scrollHeight );
+    this.createUserData();
+  }
+
+  ngAfterViewChecked(){
+    let currScrollTop: string = localStorage.getItem('currentScrollTop') ? localStorage.getItem('currentScrollTop') : '0';
+    let prevScrollHeight: string = localStorage.getItem('scrollHeight') ? localStorage.getItem('scrollHeight') : '0';
+
+    let currScrollTopNum: number = +currScrollTop;
+    let prevScrollHeightNum: number = +prevScrollHeight;
+
+    if ( document.body.scrollHeight >= prevScrollHeightNum && !this.isScrollTopDone ) {
+	     console.log(' ECMAdminComponent ngAfterViewChecked prevScrollHeightNum : ' +  prevScrollHeightNum + ' currScrollTopNum :' + currScrollTopNum + ' document.body.scrollHeight :' + document.body.scrollHeight );
+       window.scrollTo(0, currScrollTopNum);
+       this.isScrollTopDone = true;
+    }
+  }
+  ngOnDestroy(){
+    console.log('ECMHeaderComponent onDestroyed setting document.body.scrollHeight : ' + document.body.scrollHeight);
+    localStorage.setItem('currentScrollTop', this.scrollTop + '');
+  }
+
+  createUserData(){
+    var userInfo = localStorage.getItem('userInfo');
+    console.log('ECMHeaderComponent getUserInfo ::' + userInfo );
+    if( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
+       this.userData = JSON.parse(userInfo);
+    }
+  }
+
+  @HostListener('window:scroll', ['$event.target'])
+  onWindowScroll() {
+
+    let scrollTop: number = this.document.body.scrollTop;
+
+    if (scrollTop > 10 && scrollTop < 50) {
+      this.headerFadeState = 'true';
+    } else if (scrollTop > 50 && scrollTop < 150) {
+      this.headerFadeState = 'fade150';
+    } else if (scrollTop > 150 && scrollTop < 200) {
+      this.headerFadeState = 'fade200';
+    } else if (scrollTop > 200 && scrollTop < 250) {
+      this.headerFadeState = 'fade250';
+    } else if (scrollTop > 250 && scrollTop < 300) {
+      this.headerFadeState = 'fade300';
+    } else if (scrollTop > 300 && scrollTop < 350) {
+      this.headerFadeState = 'fade350';
+    }else if (scrollTop > 350 && scrollTop < 400) {
+      this.headerFadeState = 'fade400';
+    } else if (scrollTop > 400 && scrollTop < 450) {
+      this.headerFadeState = 'fade450';
+    } else if (scrollTop > 450 && scrollTop < 500) {
+      this.headerFadeState = 'fade500';
+    } else if (scrollTop > 500 && scrollTop < 550) {
+      this.headerFadeState = 'fade550';
+    }else if (scrollTop > 550 ) {
+      this.headerFadeState = 'fade600';
+    }else if (scrollTop < 10) {
+      this.headerFadeState = 'false';
+    }
+
+    console.log('headerFadeState[' + this.headerFadeState + ']' + document.body.scrollHeight );
+    this.scrollTop = scrollTop;
+    localStorage.setItem('scrollHeight', document.body.scrollHeight + '');
+  }
+}

ecm/Angular/trunk/src/app/ecm-home/ecm-home.component.html

+<ecm-header> </ecm-header>
+<router-outlet name="content"></router-outlet>
+<ecm-footer> </ecm-footer>
+

ecm/Angular/trunk/src/app/ecm-home/ecm-home.component.ts

+import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { Router } from '@angular/router';
+import { JwtHelper } from 'angular2-jwt';
+
+@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();
+  constructor(private router: Router) { }
+  ngOnInit() {
+    console.log(' ECMHomeComponent ngOnInit');
+    console.log( ' window.location[' + window.location + ' window.location.href [' + window.location.href  + ']');
+    console.log(' ECMHomeComponent onInit scroll to window at ###:' + document.body.scrollHeight );
+    let appstateCahce: string = localStorage.getItem('appstate') ? localStorage.getItem('appstate') : 'no-appstate';
+    console.log(' ECMHomeComponent appstateCahce[' + appstateCahce + ']');
+    this.router.navigate(['/Home', {outlets:{content:['content']}}]);
+    if( appstateCahce !== 'undefined' && appstateCahce !== 'no-appstate' ){
+      this.goToLink(appstateCahce);
+    }        
+  }
+  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/Angular/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.css

+/* 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: 534px;
+	background-color: #533557;
+	background-color: transparent;
+	overflow: hidden;
+	height: 100%;
+}
+/* Toggle functionality */
+#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);
+}
+#toggle:checked ~ .container {
+	background-color: blue;
+}
+#toggle:checked ~ .toggle-container .button-toggle {
+	box-shadow: 0 0 0 700px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+}
+#toggle:checked ~ .toggle-container .button-toggle:hover {
+	box-shadow: 0 0 0 700px 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);
+}
+#toggle:checked ~ .toggle-container .button-toggle:before {
+	transform: translateY(-50%) rotate(45deg) scale(1);
+}
+#toggle:checked ~ .toggle-container .button-toggle:after {
+	transform: translateY(-50%) rotate(-45deg) scale(1);
+}
+#toggle:checked:focus ~ .toggle-container .button-toggle {
+	box-shadow: 0 0 0 700px 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);
+}
+#toggle:checked ~ .nav {
+	margin-bottom: 100px;
+	pointer-events: auto;
+	transform: translate(50px, 50px);
+}
+#toggle:checked ~ .nav .nav-item {
+	color: #EC7263;
+	color: #fff;
+	letter-spacing: 0;
+	height: 40px;
+	line-height: 40px;
+	margin-top: 0;
+	opacity: 1;
+	transform: scaleY(1);
+	transition: 0.5s, opacity 0.1s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(1) {
+	transition-delay: 0.15s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(1):before {
+	transition-delay: 0.15s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(2) {
+	transition-delay: 0.1s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(2):before {
+	transition-delay: 0.1s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(3) {
+	transition-delay: 0.05s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(3):before {
+	transition-delay: 0.05s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(4) {
+	transition-delay: 0s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(4):before {
+	transition-delay: 0s;
+}
+#toggle:checked ~ .nav .nav-item:before {
+	opacity: 0;
+}
+/* Toggle button */
+.button-toggle {
+	top: 0;
+	position: absolute;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	margin: 10px 15px 15px 5px;
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	border-radius: 100%;
+	transition: 0.6s;
+	-webkit-transition: 0.6s;
+}
+.button-toggle:hover {
+	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+}
+.button-toggle:before, .button-toggle:after {
+	position: absolute;
+	content: '';
+	top: 50%;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: #EC7263;
+	background-color: #fff;
+	border-radius: 5px;
+	transition: 0.5s;
+}
+.button-toggle:before {
+	transform: translateY(-50%) rotate(45deg) scale(0);
+}
+.button-toggle:after {
+	transform: translateY(-50%) rotate(-45deg) scale(0);
+}
+/* Menu */
+.nav {
+	left: 10px;
+	position: absolute;
+	display: inline-block;
+	margin: 10px 15px 15px 10px;
+	pointer-events: none;
+	transition: 0.5s;
+	-webkit-transition: 0.5s;
+}
+.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: 0.5s, opacity 1s;
+}
+.nav-item:nth-child(1) {
+	transition-delay: 0s;
+}
+.nav-item:nth-child(1):before {
+	transition-delay: 0s;
+}
+.nav-item:nth-child(2) {
+	transition-delay: 0.05s;
+}
+.nav-item:nth-child(2):before {
+	transition-delay: 0.05s;
+}
+.nav-item:nth-child(3) {
+	transition-delay: 0.1s;
+}
+.nav-item:nth-child(3):before {
+	transition-delay: 0.1s;
+}
+.nav-item:nth-child(4) {
+	transition-delay: 0.15s;
+}
+.nav-item:nth-child(4):before {
+	transition-delay: 0.15s;
+}
+.nav-item:nth-child(1) {
+	letter-spacing: -8px;
+}
+.nav-item:nth-child(2) {
+	letter-spacing: -7px;
+}
+.nav-item:nth-child(n + 4) {
+	letter-spacing: -8px;
+	margin-top: -7px;
+	opacity: 0;
+}
+.nav-item:before {
+	position: absolute;
+	content: '';
+	top: 50%;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: #EC7263;
+	background-color: #fff;
+	transform: translateY(-50%) scaleY(5);
+	transition: 0.5s;
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.html

+<div class="container">
+	<!-- This checkbox will give us the toggle behavior, it will be hidden, but functional -->
+	<input id="toggle" type="checkbox">
+    <!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element -->
+    <!-- This label is tied to the checkbox, and it will contain the toggle "buttons" -->
+	<label class="toggle-container" for="toggle"> <!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon -->
+		<span class="button button-toggle"></span>
+	</label>
+	<!-- The nav menu -->
+	<nav class="nav">
+		<a class="nav-item" href="">Dashboard</a> <a class="nav-item" href="">History</a>
+		<a class="nav-item" href="">Statistics</a> <a class="nav-item" href="">Settings</a>
+	</nav>
+    <!-- Just dummy content like in the animated gif -->
+	<!-- <section class="dummy-content">
+        <div class="circle"></div>
+        <div class="text">
+            <span></span>
+            <span></span>
+        </div>
+        <div class="square-top"></div>
+        <div class="square-behind"></div>
+    </section>   -->
+</div>
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.scss

+$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;
+  }
+}
+

ecm/Angular/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ecm-nav-menu',
+  templateUrl: './ecm-nav-menu.component.html',
+  styleUrls: ['./ecm-nav-menu.component.css']
+})
+export class ECMNavMenuComponent implements OnInit {
+  constructor() { }
+  ngOnInit() {
+  }
+
+}

ecm/Angular/trunk/src/app/ecm-search/ecm-search.component.css

+/*Images Source*/
+.img-locate {
+	content: url(../../assets/images/locate_20_20.png);
+	position: absolute;
+	top: 23px;
+	/*  left: 75%; */
+	z-index: 2;
+	padding-left: 10px;
+}
+.locate-me, .locate-handle {
+	width: 80%;
+	height: 53px;
+	position: absolute;
+	z-index: 3;
+	top: 5px;
+	border-left: 1px lightgray solid;
+	padding: 10px 25px 10px 5px;
+	cursor: pointer;
+}
+.locate-me {
+	padding: 15px 25px 10px 35px;
+	font-size: 14pt;
+	width: 100%;
+}
+.locate-handle:hover {
+	background-color: lightblue;
+	opacity: 0.1;
+	border-radius: 10px;
+	border: solid 1px;
+	height: 40px;
+	top: 13px;
+	left: 5px;
+}
+/*Search Input*/
+[type=text].enter-todo:focus {
+	outline: none;
+	border: none;
+	box-shadow: none;
+	transition: none;
+}
+.search-form {
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+}
+.search-page-border {
+	border: none;
+	border-radius: 4px;
+	position: relative;
+	width: 80%;
+	height: 65px;
+	float: left;
+	box-shadow: 0 0 5px 1px lightgrey;
+}
+.search-which-border {
+	position: absolute;
+	top: 0;
+	left: 79%;
+	width: 21%;
+	height: 65px;
+	background-color: #fff;
+}
+.search-terms {
+	background-image: url(../../assets/images/search.png);
+	background-position: 15px 15px;
+	background-repeat: no-repeat;
+	border: none;
+	border-bottom-left-radius: 5px;
+	border-top-left-radius: 5px;
+	width: 79%;
+	height: 65px;
+	position: relative;
+	outline: none;
+	font-size: 14pt;
+	padding: 10px 0 10px 60px;
+	box-shadow: none;
+}
+.search-which {
+	margin: 0;
+	padding: 10px 0 10px 35px;
+	border: none;
+	position: absolute;
+	height: 65px;
+	top: 0;
+	outline: none;
+	font-size: 14pt;
+	background-image: url(../../assets/images/down_arrow.png);
+	background-repeat: no-repeat;
+	background-size: 15px 15px;
+	display: none;
+}
+.search-which, select option {
+}
+.search-submit {
+	height: 65px;
+	margin: 0;
+	padding: 0;
+	color: #ffffff;
+	background: mediumvioletred;
+	position: relative;
+	width: 20%;
+	font-size: 14pt;
+	line-height: 1px;
+	text-align: center;
+	float: right;
+	border: none;
+	border-bottom-right-radius: 5px;
+	border-top-right-radius: 5px;
+}
+/*Fixed Header Search Input*/
+.sb-search {
+	position: relative;
+	margin-top: 4px;
+	margin-right: 10px;
+	width: 0%;
+	min-width: 32px;
+	height: 32px;
+	float: right;
+	overflow: hidden;
+	-webkit-transition: width 0.4s;
+	-moz-transition: width 0.4s;
+	transition: width 0.4s;
+	-webkit-backface-visibility: hidden;
+}
+.sb-search-input {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: 0;
+	border-radius: 5px;
+	outline: none;
+	background-color: mediumvioletred;
+	width: 100%;
+	height: 32px;
+	margin: 0;
+	z-index: 16;
+	padding: 0px 65px 0 10px;
+	font-size: 12px;
+	color: #fff;
+	box-shadow: none;
+}
+/*
+.sb-search-input::-webkit-input-placeholder {
+	color: #2c3e50;
+}
+
+.sb-search-input:-moz-placeholder {
+	color: #2c3e50;
+}
+
+.sb-search-input::-moz-placeholder {
+	color: #2c3e50;
+}
+
+.sb-search-input:-ms-input-placeholder {
+	color: #2c3e50;
+}
+*/
+.sb-icon-search, .sb-search-submit {
+	width: 32px;
+	height: 32px;
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 0;
+	padding: 0;
+	margin: 0;
+	line-height: 32px;
+	text-align: center;
+	cursor: pointer;
+}
+.sb-search-submit {
+	background: #fff; /* IE needs this */
+	background-color: mediumvioletred;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	/* IE 8 */
+	filter: alpha(opacity = 0); /* IE 5-7 */
+	opacity: 0;
+	color: transparent;
+	border: none;
+	outline: none;
+	z-index: -1;
+}
+.sb-icon-search {
+	color: #fff;
+	z-index: 90;
+	background-image: url(../../assets/images/w_search_38_38.png);
+	background-position: 5px 4px;
+	background-repeat: no-repeat;
+	background-size: 24px 24px;
+	border: none;
+	outline: none;
+}
+.sb-icon-search:before {
+	content: "";
+}
+/* Open state */
+.sb-search.sb-search-open {
+	width: 50%;
+}
+.sb-search.sb-search-open .sb-search-input {
+	border: none;
+	border-radius: 5px;
+	background-color: #fff;
+	color: black;
+	padding-left: 40px;
+	z-index: 16;
+}
+.sb-search.sb-search-open .sb-icon-search {
+	border: none;
+	border-radius: 5px;
+	background-image: url(../../assets/images/v_search_38_38.png);
+	left: 5px;
+	padding-left: 40px;
+	z-index: 16;
+}
+.sb-search.sb-search-open .sb-search-submit {
+	z-index: 90;
+}
+.hide {
+	display: none;
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-search/ecm-search.component.html

+<form *ngIf="headerState === 'relative'" action="#" method="post"id="search-form" [@searchInputTrans]="compFadeState">
+	<span class="search-page-border"> <input #myInput type="text"placeholder="Search Food, Tour, Events and More..."class="search-terms" name="search-terms" /> 
+	<span class="search-which-border">
+			<div class="locate-me">Locate Me</div>
+			<div class="locate-handle"></div> 
+			<img class="img-locate"title="Locate Me" /> 
+			<select name="search-which" class="search-which">
+				<option value="members">Mumbai</option>
+				<option value="groups">Pune</option>
+				<option value="forums">Nashik</option>
+				<option value="posts">Nagpur</option>
+		    </select>
+	</span>
+	</span>
+	<input type="submit" name="search-submit" class="search-submit"value="Search" />
+</form>
+<div *ngIf="headerState === 'fixed'" id="sb-search" class="sb-search">
+	<form>
+		<input class="sb-search-input" placeholder="Search ..." type="text"value="" name="search" id="search"> 
+		<input class="sb-search-submit" type="submit" value="">
+		<span class="sb-icon-search"></span>
+	</form>
+</div>

ecm/Angular/trunk/src/app/ecm-search/ecm-search.component.ts

+import { Component, OnInit, Input, trigger, state, animate, transition, style,  } from '@angular/core';
+
+@Component({
+  selector: 'ecm-search',
+  templateUrl: './ecm-search.component.html',
+  styleUrls: ['./ecm-search.component.css'],
+  animations: [
+    trigger('searchInputTrans', [
+       state('false' , style({ opacity: 1, transform : 'scale(1.0) translateY(0) ' })),
+       state('true', style({ transform : ' translateY(0) ' })),
+       state('fade150', style({ transform : ' translateY(-5px) scale(0.95)' })),
+       state('fade200', style({ transform : ' translateY(-10px) scale(0.95)' })),
+       state('fade250', style({ transform : ' translateY(-20px) scale(0.85)' })),
+       state('fade300', style({ transform : ' translateY(-30px) scale(0.85)' })),
+       state('fade350', style({ transform : ' translateY(-40px) scale(0.75)' })),
+       state('fade400', style({ transform : ' translateY(-50px) scale(0.75)' })),
+       state('fade450', style({ transform : ' translateY(-100px) scale(0.60)' })),
+       state('fade500', style({ transform : ' translateY(-150px) scale(0.55)' })),
+       state('fade550', style({ transform : ' translateY(-200px) scale(0.40)' })),
+       state('fade600', style({ transform : ' translateY(-250px) scale(0.35)' })),
+       transition('* <=> *', animate('.3s'))
+    ])
+   ]
+})
+export class ECMSearchComponent implements OnInit {
+  @Input('compFadeState') compFadeState: string = 'false';
+  @Input('headerState') headerState: string = 'relative';
+  selectedPlace = 'Mumbai';
+  constructor() { }
+  ngOnInit() {
+  }
+
+}

ecm/Angular/trunk/src/app/ecm-trend/ecm-trend.component.css

+.trending-section {
+	padding-top: 50px;
+	height: 650px;
+	background-color: #F2F2F2;
+}
+.ecm-section-info {
+	padding: 10px;
+	max-width: 75rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+.ecm-section-info-title {
+	font-size: 26px;
+	color: #444;
+	display: block;
+}
+.ecm-section-info-subhead {
+	font-size: 16px;
+	color: #888;
+	display: block;
+}
+.end {
+	padding-top: 15px;
+	padding-bottom: 50px;
+}
+.ecm-slider-container {
+	position: absolute;
+	width: 100%;
+	max-width: 100%;
+	left: 0;
+	right: 0;
+}
+.slide-card {
+	padding: 10px;
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-trend/ecm-trend.component.html

+<div *ngIf="trends_slides">
+	<section class="trending-section">
+		<div class="row">
+			<div class="ecm-section-info">
+				<span class="ecm-section-info-title">Currently Trending</span>
+				<span class="ecm-section-info-subhead">Explore top Authentic Regional Foods, Outings, Celebrations around {{selectedPlace}},based on trends.</span>
+			</div>
+			<div class="large column end ecm-slider-container">
+				<ngb-carousel>
+				<template ngbSlide *ngFor="let _card_slides of trends_slides">
+				<div *ngFor="let _card of _card_slides" class="slide-card">
+					<ecm-card [card]="_card"></ecm-card>
+				</div>
+				</template>
+				</ngb-carousel>
+			</div>
+		</div>
+	</section>
+</div>
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-trend/ecm-trend.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ECMTrendingService } from './ecm-trending.service';
+import { ECMCard } from '../ecm-card/card-model';
+import { Category } from '../ecm-category/category-model';
+
+@Component({
+  selector: 'ecm-trend',
+  templateUrl: './ecm-trend.component.html',
+  styleUrls: ['./ecm-trend.component.css'],
+  providers: [ECMTrendingService]
+})
+export class ECMTrendComponent implements OnInit {
+  trends_slides: ECMCard[][];
+  cardsPerSlide: number = 3;
+  selectedPlace = 'Mumbai';
+  trends: Category[];
+  trends_cards: ECMCard[];
+  constructor(public trendingService: ECMTrendingService) { }
+  getTrends(): void {
+    this.trendingService.getTrending().then(trends => {
+        this.trends = trends;
+        this.trends_cards = [];
+        this.trends_slides = [];
+        for ( let i = 0, j = 0; i < this.cardsPerSlide && j < this.trends.length ; ++i, ++j) {
+            let img = '/ecm/assets/images/category/' + this.trends[j].catCode + '.png';
+            let info_img = '/ecm/assets/images/category/' + this.trends[j].catCode + '_icon.png';
+            let info_title = this.trends[j].descr;
+            let info_subhead = this.trends[j].shDescr;
+            this.trends_cards.push( new ECMCard( img, info_img, info_title, info_subhead, false ) );
+            //console.log('i[' + i + ']j[' + j + ']cardsPerSlide[' + this.cardsPerSlide + ']');
+
+            if ( j < this.trends.length && i === this.cardsPerSlide - 1 )  {
+              //console.log('i[' + i + ']j[' + j + ']cardsPerSlide[' + this.cardsPerSlide + ']' + this.trends.length);
+              this.trends_slides.push(this.trends_cards);
+              this.trends_cards = [];
+              i = -1;
+            }
+        }
+        if ( this.trends_cards.length > 0 ) {
+          this.trends_slides.push(this.trends_cards);
+        }
+      }
+    );
+  }
+  ngOnInit() {
+    this.getTrends();
+  }
+
+}

ecm/Angular/trunk/src/app/ecm-trend/ecm-trending.service.ts

+import { Injectable } from '@angular/core';
+import { Category, MockTrendings } from '../ecm-category/category-model';
+
+@Injectable()
+export class ECMTrendingService {
+  getTrending(): Promise<Category[]> {
+    return Promise.resolve(MockTrendings);
+  }
+  getTrendingSlowly(): Promise<Category[]> {
+    return new Promise(resolve => {
+       // Simulate server latency with 2 second delay
+       setTimeout(() => resolve(this.getTrending()), 2000);
+    });
+  }
+  constructor() { }
+
+}

ecm/Angular/trunk/src/app/ecm-view/share.component.html

+<p>share works!</p>

ecm/Angular/trunk/src/app/ecm-view/share.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'share',
+  templateUrl: './share.component.html',
+  styleUrls: ['./share.component.css']
+})
+export class ShareComponent implements OnInit {
+  constructor() { }
+  ngOnInit() {
+  }
+
+}

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

+.categories-section {
+	padding: 0;
+	margin: 0;
+	padding-top: 100px;
+	background-color: #FFF;
+}
+.ecm-section-info {
+	padding: 10px;
+}
+.ecm-section-info-title {
+	font-size: 26px;
+	color: #444;
+	display: block;
+}
+.ecm-section-info-subhead {
+	font-size: 16px;
+	color: #888;
+	display: block;
+}
+.end {
+	padding-top: 15px;
+	padding-bottom: 50px;
+}
+.row.row-category {
+	max-width: 72rem;
+}
\ No newline at end of file

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

+<div *ngIf="subcategories">
+	<section class="subcategories-section">
+		<div class="row row-subcategory">
+			<div class="ecm-section-info">
+				<span class="ecm-section-info-title">Sub Categories</span>
+				<span class="ecm-section-info-subhead">Explore top Authentic Regional Foods, Outings, Celebrations around {{selectedPlace}}</span>
+			</div>
+			<div class="small-12 medium-6 large-4 column end "*ngFor="let _subcategory of subcategories">
+				<ecm-card [subcategory]="_subcategory"></ecm-card>
+			</div>
+		</div>
+	</section>
+</div>
+

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

+import { Component, OnInit } from '@angular/core';
+import { SubCategory } from '../ecm-category/category-model';
+import { ECMCategoryService } from '../ecm-category/ecm-category.service';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.component.html',
+  styleUrls: ['./view.component.css'],
+  providers: [ECMCategoryService]
+})
+export class ViewComponent implements OnInit {
+public catCode: any;
+  constructor(private route: ActivatedRoute, private router:Router,public subcategoryService: ECMCategoryService) { }
+  ngOnInit() {
+  {
+ 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.catCode = params['catCode'];
+       console.log( 'ngOnInit catCode[' + this.catCode + ']');
+  });
+  }
+  this.getSubCategories(this.catCode);
+  window.scrollTo(0, 600);
+  console.log("done scroll");
+  }
+  subcategories: SubCategory[];
+  getSubCategories(scatCode : string) {
+  this.subcategoryService.getSubCategories(scatCode).subscribe(
+      subcategories => {
+        this.subcategories = subcategories;
+        console.log('comp subcategories[' +  JSON.stringify( subcategories ) + '] \n this.subcategories[' +  JSON.stringify( this.subcategories ) + ']');
+      },
+      );
+
+}}

ecm/Angular/trunk/src/assets/css/styles.css

+/* You can add global styles to this file, and also import other style files */
+body {
+	margin: 0;
+	padding: 0;
+	background-color: #fff;
+}
+
+/* Font loaded - elegant icons*/
+@font-face { /* declare fonts */
+	font-family: "Roboto-Regular";
+	src: url("Roboto-Regular.ttf") format("truetype");
+}
+
+/* Font loaded - elegant icons*/
+@font-face { /* declare fonts */
+	font-family: "elegant-icons";
+	src: url("elegant-icons.ttf") format("truetype");
+}
+
+* {
+	font-family: "Roboto-Regular", sans-serif !important;
+}
+
+:FOCUS {
+	outline: none;
+}
+
+.back-button:before {
+    content: "4";
+    margin: 0;
+    font-size: 30px;
+    top: 6px;
+    font-family: "elegant-icons" !important;
+    font-style: normal !important;
+    font-weight: normal !important;
+    font-variant: normal !important;
+    text-transform: none !important;
+    line-height: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+}