angular app

app.component.html

<!-- <header> -->

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<a class="navbar-brand" routerLink='/productdisplay' style="width: 30%;">

<img src="./assets/images/Everest Logo blue.jpg" style="width:64%;"></a>

<form class="form-inline my-2 my-lg-0" style="padding-left: 20px;">

<input class="form-control mr-lg-2" type="text"
name="search" [(ngModel)]="filter" style="width: 600px;">

<!-- <app-productdisplay [filter]="filter"></app-productdisplay> -->

</form>

<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<!-- <div class="col-md-2"> -->

<!-- <select class="form-control" >

<option value="">Select Store</option>

<option value="{{store.Id}}" *ngFor="let store of allStores">
{{store.Name}}</option>

</select> -->

<!-- </div> -->

<div class="collapse navbar-collapse" style="" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<!--lakshminarayana changes 21-01-2019-->

<!-- <div class="col-md-8"> -->

<select class="form-control" >

<option value="">Select Store</option>

<option value="{{store.Id}}" *ngFor="let store of allStores">
{{store.Name}}</option>

</select>

<!-- </div> -->

<!--till here-->

<li class="nav-item active" *ngIf="!isLoggedIn">

<a class="nav-link navbar-text" (click)="open(content)"
style="cursor: pointer;" ><b>Login/Register</b></a>

</li>

<div class="btn-group mr-3" *ngIf="isLoggedIn">

<button type="button" class="btn btn-primary"><b>User Details</b></button>

<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">

<button class="btn btn-primary dropdown-toggle-split"
ngbDropdownToggle></button>

<div class="dropdown-menu" ngbDropdownMenu>

<button routerLink='/profile' class="dropdown-item">Profile</button>

<button routerLink='/myorders' class="dropdown-item">My Orders</button>

<button class="dropdown-item" (click)="LogOut()">LogOut</button>

</div>

</div>

</div>

<li class="nav-item active">

<!-- <a class="nav-link" href="#"><b>Cart</b></a> -->

<button type="button" routerLink='/mycart' class="btn btn-primary">

<b>Cart </b> <span class="badge badge-light">{{cartItemCount}}</span>

<span class="sr-only">unread messages</span>

</button>

</li>

<li class="nav-item active">

<!-- <a routerLink='/admin' class="nav-link" href="#"><b>Admin</b></a> -->

</li>

</ul>

</div>

</nav>

<!-- </header> -->

<!-- Model Code Start -->

<!-- <div *ngIf="closelogin"></div> -->

<ng-template #content let-c="close" let-d="dismiss" id="modeldismiss" >

<div class="modal-header" style="background: deepskyblue;
font-size: xx-large;">

<h4 class="modal-title" id="modal-basic-title">Login / Register</h4>

<button type="button" class="close" aria-label="Close"
(click)="d('Cross click')">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body">

<!-- Tab Start Code -->

<ngb-tabset>

<ngb-tab >

<ng-template ngbTabTitle><b>Login</b> </ng-template>

<ng-template ngbTabContent >

<br>

<form [formGroup]="loginForm">

<div class="form-group">

<div class="input-group mb-3">

<div class="input-group-prepend">

<!-- <span class="input-group-text" id="basic-addon1"></span> -->

</div>

<input type="text" formControlName="email"
class="form-control" placeholder="email">

</div>

<div class="input-group mb-3">

<div class="input-group-prepend">

<!-- <span class="input-group-text" id="basic-addon1"></span> -->

</div>

<input type="password" formControlName="password"
class="form-control" placeholder="password">

</div>

</div>

<button type="button" style="margin-left: 39%;"
[disabled]="!loginForm.valid" class="btn btn-outline-success"
(click)="Login()"><b>Login</b></button>

</form>

</ng-template>

</ngb-tab>

<ngb-tab>

<ng-template ngbTabTitle><b>Register</b> </ng-template>

<ng-template ngbTabContent>

<br>

<form [formGroup]="registrationForm" >

<div class="form-group">

<div class="row">

<div class="col-md-2">

<label for="FormControlUserName"
style="color: lightseagreen;font-size: medium;" ><b>Name*:</b></label>

</div>

<div class="col-md-6">

<input type="text" formControlName="name" placeholder="Name"
class="form-control">

</div>

<div class="col-md-4">

<span style="font-weight: bold;color: red;"
*ngIf="!registrationForm.controls['name'].valid&&registrationForm.controls['name'].dirty">

<span *ngIf="registrationForm.controls.name.errors.required">
User Name is Required.</span>

<span *ngIf="registrationForm.controls.name.errors.minlength">
User name minimum should be length of 3.</span>

<span *ngIf="registrationForm.controls.name.errors.maxlength">
User name maximum should be length of 50.</span>

</span>

</div>

</div>

<br>

<div class="row">

<div class="col-md-2">

<label for="FormControlEmail"
style="color: lightseagreen;font-size: medium;" ><b>Email*:</b></label>

</div>

<div class="col-md-6">

<input type="email"
formControlName="email" placeholder="Email" class="form-control">

</div>

<div class="col-md-4">

<span style="font-weight: bold;color: red;"
*ngIf="!registrationForm.controls['email'].valid&&registrationForm.controls['email'].dirty">

<span *ngIf="registrationForm.controls.email.errors.required">
Email is Required.</span>

<span *ngIf="registrationForm.controls.email.errors.email">
Email is not in correct pattern.</span>

</span>

</div>

</div>

<br>

<div class="row">

<div class="col-md-2">

<label for="FormControlPassword"
style="color: lightseagreen;font-size: medium;" ><b>Password*:</b></label>

</div>

<div class="col-md-6">

<input type="password"
formControlName="password" placeholder="Password" class="form-control">

</div>

<div class="col-md-4">

<span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['password'].valid&&registrationForm.controls['password'].dirty">

<span *ngIf="registrationForm.controls.password.errors.required">Password is Required.</span>

<span *ngIf="registrationForm.controls.password.errors.minlength">Password minimum should be length of 3.</span>

<span *ngIf="registrationForm.controls.password.errors.maxlength">Password maximum should be length of 50.</span>

</span>

</div>

</div>

</div>

<button type="button" style="margin-left: 39%;"
[disabled]="!registrationForm.valid" class="btn btn-outline-success"
(click)="OnRegister()"><b>Register</b></button>

</form>

</ng-template>

</ngb-tab>

</ngb-tabset>

<!-- Tab End Code -->

</div>

<div class="modal-footer">

<p *ngFor="let alert of alerts">

<ngb-alert style="width: 758px;" [type]="alert.type"
(close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>

</p>

</div>

</ng-template>

<!-- Model Code End -->

<div class="row">

<div class="col-md-1">

</div>

<div class="col-md-10">

<router-outlet></router-outlet>

</div>

<div class="col-md-1">

</div>

</div>

app.component.ts

import {Input, Component, OnInit, EventEmitter, Output }
from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

import { FormBuilder, FormGroup, Validators, FormControl }
from '@angular/forms';

import { HttpClient,HttpClientModule } from '@angular/common/http';

import { Registration } from './Models/User.Models';

import {RegistrationService} from './Services/Registration.Service'

import { AuthenticationService } from './Services/authentication.service';

import { SharedService } from './Services/shared.service';

import { ProductService } from './Services/product.service';

import { ProductDisplay } from './Models/ProductDisplay.Model';

import { Product } from './Models/Product.Model';

import { IAlert } from './Models/IAlert';

import { MatTableDataSource, MatSort,MatPaginator } from '@angular/material';

import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss'],

providers:[RegistrationService]

})

export class AppComponent implements OnInit {

closeResult: string;

registrationForm: FormGroup;

loginForm:FormGroup;

registrationInputs: Registration[];

currentUser: Registration[];

isLoggedIn:boolean=false;

uservalue:any;

profileData:any;

userData:Array<any>=[];

cartItemCount:number=0;

approvalText:string="";

closelogin:boolean=true;

allStores:Array<any>=[];

public globalStores: any;

@Output() cartEvent = new EventEmitter<number>();

yourByteArray:any;

productAddedTocart:Product[];

@Output() searchtxtval=new EventEmitter<any>();

public alerts: Array<IAlert> = [];

message = "";

public globalResponse: any;

allProducts: ProductDisplay[];

constructor(private sharedService:SharedService,
public navCtrl: NgxNavigationWithDataComponent,

private modalService: NgbModal,private fb: FormBuilder,

private regService:RegistrationService ,

private authService:AuthenticationService,
private productService:ProductService) {

}

ngOnInit()

{

let product1 ='';

this.productService.getAllProducts(product1)

.subscribe((result) => {

this.globalResponse = result;

},

error => { //This is error part

console.log(error.message);

},

() => {

// This is Success part

console.log("Product fetched sucssesfully.");

//console.log(this.globalResponse);

this.allProducts=this.globalResponse[1];

console.log("images are added all products");

console.log(this.allProducts);

}

)

this.productService.getServicingStores(product1)

.subscribe((result) => {

this.globalStores = result;

},

error => { //This is error part

console.log(error.message);

},

() => {

this.allStores=this.globalStores[1];

debugger;

console.log(this.allStores);

}

)

this.productAddedTocart=this.productService.getProductFromCart();

this.cartItemCount=this.productAddedTocart.length;

this.sharedService.updateCartCount(this.cartItemCount);

this.sharedService.currentMessage.subscribe(msg => this.cartItemCount = msg);

this.registrationForm = this.fb.group({

name: ['',
Validators.compose([
Validators.required, Validators.minLength(3),Validators.maxLength(50)])],

password:['',Validators.compose([Validators.required, Validators.minLength(3),
Validators.maxLength(50)])],

email:['',Validators.compose([Validators.required,Validators.email])],

// Role:['',Validators.required],

// Phone:['',Validators.required],

// Gender:['',''],

});

this.loginForm = this.fb.group({

email: ['', [Validators.required]],

password:['',[Validators.required]],

});

if(localStorage.getItem("LOG_IN") == '"YES"'){

debugger;

this.closelogin=false;

this.isLoggedIn=true;

}

}

onClick(searchTerm:string){

debugger;

console.log(searchTerm);

this.searchtxtval.emit(searchTerm);

}

OnAddCart(product:Product)

{

debugger;

console.log(product);

this.productAddedTocart=this.productService.getProductFromCart();

if(this.productAddedTocart==null)

{

this.productAddedTocart=[];

this.productAddedTocart.push(product);

this.productService.addProductToCart(this.productAddedTocart);

this.alerts.push({

id: 1,

type: 'success',

message: 'Product added to cart.'

});

setTimeout(()=>{

this.closeAlert(this.alerts);

}, 3000);

if(localStorage.getItem("LOG_IN") == '"YES"'){

this.profileData = localStorage.getItem("USER_DATA");

this.userData = JSON.parse(this.profileData);

this.productService.addProductsToCart({
userId:this.userData[0].id,productdetails:product})

.subscribe((result) => {

this.globalResponse = result;

},

error => { //This is error part

this.alerts.push({

id: 2,

type: 'danger',

message: 'Error:'+error,

});

},

)

}

}

else

{

let tempProduct=this.productAddedTocart.find(p=>p.Id==product.Id);

if(tempProduct==null)

{

this.productAddedTocart.push(product);

this.productService.addProductToCart(this.productAddedTocart);

this.alerts.push({

id: 1,

type: 'success',

message: 'Product added to cart.'

});

//setTimeout(function(){ }, 2000);

setTimeout(()=>{

this.closeAlert(this.alerts);

}, 3000);

if(localStorage.getItem("LOG_IN") == '"YES"'){

this.profileData = localStorage.getItem("USER_DATA");

this.userData = JSON.parse(this.profileData);

this.productService.addProductsToCart({
userId:this.userData[0].id,productdetails:product})

.subscribe((result) => {

this.globalResponse = result;

},

error => { //This is error part

this.alerts.push({

id: 2,

type: 'danger',

message: 'Error:'+error,

});

},

)

}

}

else

{

this.alerts.push({

id: 2,

type: 'warning',

message: 'Product already exist in cart.'

});

setTimeout(()=>{

this.closeAlert(this.alerts);

}, 3000);

}

}

//console.log(this.cartItemCount);

this.cartItemCount=this.productAddedTocart.length;

// this.cartEvent.emit(this.cartItemCount);

this.sharedService.updateCartCount(this.cartItemCount);

}

public closeAlert(alert:any) {

const index: number = this.alerts.indexOf(alert);

this.alerts.splice(index, 1);

}

open(content) {

this.alerts=[];

this.modalService.open(content, {ariaLabelledBy:
'modal-basic-title',size: 'lg'}).result.then((result) => {

this.closeResult = `Closed with: ${result}`;

}, (reason) => {

// this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;

});

}

private getDismissReason(reason: any): string {

if (reason === ModalDismissReasons.ESC) {

return 'by pressing ESC';

} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {

return 'by clicking on a backdrop';

} else {

return `with: ${reason}`;

}

}

Login()

{

//let user=this.loginForm.value;

debugger;

console.log(this.loginForm.value.email)

//console.log(user);

this.isLoggedIn=false;

// this.authService.removeToken();

this.alerts=[];

//console.log(user);

this.authService.ValidateUser({

email:this.loginForm.value.email,

password:this.loginForm.value.password

})

.subscribe((result) => {

debugger;

console.log(result);

if(result[0]==1){

this.uservalue=1

this.globalResponse = result[1];

}else{

this.uservalue=-1

}

// var obj=[{

// name:this.globalResponse.name,

// email:this.globalResponse.email

// }]

// localStorage.setItem("USER_DATA", JSON.stringify(obj));

},

error => {

console.log(error.message);

this.alerts.push({

id: 2,

type: 'danger',

message: 'Server Error.'

});

},

() => {

// This is Success part

// console.log(this.globalResponse);

// this.authService.storeToken(this.globalResponse.access_token);

if(this.uservalue == -1){

this.alerts.push({

id: 2,

type: 'danger',

message: 'Either user name or password is incorrect.'

});

}else{

localStorage.setItem("USER_DATA", JSON.stringify(this.globalResponse));

this.alerts.push({

id: 1,

type: 'success',

message: 'Login successful. Now you can close and proceed further.',

});

localStorage.setItem("LOG_IN", JSON.stringify("YES"));

this.closelogin=false;

this.isLoggedIn=true;

// this.GetClaims();

// this.navCtrl.navigate('/productdisplay');

}

}

)

}

OnRegister()

{

//this.registrationInputs=this.registrationForm.value;

//console.log(this.registrationInputs);

this.regService.RegisterUser({

name:this.registrationForm.value.name,

email:this.registrationForm.value.email,

password:this.registrationForm.value.password

})

.subscribe((result) => {

this.globalResponse = result;

},

error => { //This is error part

this.alerts.push({

id: 2,

type: 'danger',

message: 'Registration failed with fallowing error:'+error,

});

},

() => {

// This is Success part

this.alerts.push({

id: 1,

type: 'success',

message: 'Registration successful.',

});

}

)

}

// public closeAlert(alert: IAlert) {

// const index: number = this.alerts.indexOf(alert);

// this.alerts.splice(index, 1);

// }

GetClaims()

{

this.authService.getClaims()

.subscribe((result) => {

this.globalResponse = result;

},

error => { //This is error part

console.log(error.message);

},

() => {

// This is Success part

// console.log(this.globalResponse );

let a=this.globalResponse;

this.currentUser=this.globalResponse;

this.authService.storeRole(this.currentUser);

}

)

}

LogOut()

{

this.isLoggedIn=false;

this.authService.removeToken();

localStorage.setItem("LOG_IN", JSON.stringify("NO"));

this.navCtrl.navigate('/productdisplay');

}

//sorting

key: string = 'name';

reverse: boolean = false;

sort(key){

this.key = key;

this.reverse = !this.reverse;

}

p: number = 1;

}

export interface IAlert {

id: number;

type: string;

message: string;

}

product.component.html:

<div id="collapseExample" [ngbCollapse]="false">

<div class="card">

<div class="card-body">

<p *ngFor="let alert of alerts">

<ngb-alert style="width: 300px;" [type]="alert.type"
(close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>

</p>

<div *ngFor="let cat of allProducts">

<h3 class="modal-header"
style="color: cornflowerblue" ng >{{cat.Category}}</h3>

<!-- <table class="table table-bordered table-responsive" style="display: inline;margin-left: 5px;" *ngFor="let prod of cat.procutDetails"> -->

<table class="table table-bordered table-responsive"
style="display: inline;margin-left: 5px;"
*ngFor="let prod of cat.procutDetails
| orderBy: key : reverse | filter:filter |
paginate: { itemsPerPage: 5, currentPage: p }; let i = index">

<tr>

<td>

<!-- <angular-image-slider [images]="imagesUrl"></angular-image-slider> -->

<img src="http://45.113.122.70/~np/Everest/public/images/{{prod.Image1}}"
imageViewer width="150px;" height="150px;" (click)="productviewpage(prod.Id)"
style="cursor: pointer"/>

</td>

</tr>

<tr>

<td>{{prod.Name}}</td>

</tr>

<tr>

<td>Price:{{prod.MRP}}</td>

</tr>

<tr>

<td>

<button type="button" class="btn btn-outline-success"
(click)="OnAddCart(prod)"><b>Add to cart</b></button>

</td>

</tr>

</table>

<span *ngIf="cat.procutDetails?.length > 5" (click)="seemore(cat.Id)"

style="text-decoration: underline;

color: #002bff;

cursor: pointer;" >see more...</span>

<!-- <a *ngIf="cat.procutDetails?.length > 5" (click)="seemore(cat.Id)">See more...</a> -->

</div>

</div>

product.component.ts:

import { Component, EventEmitter, Output,OnInit,Input } from '@angular/core';

import { ProductDisplay } from '../Models/ProductDisplay.Model';

import { ProductService } from '../Services/product.service';

import { Product } from '../Models/Product.Model';

import { IAlert } from '../Models/IAlert';

import { SharedService } from '../Services/shared.service';

import { MatTableDataSource, MatSort,MatPaginator } from '@angular/material';

import { Router } from '@angular/router';

import { NgxNavigationWithDataComponent } from "ngx-navigation-with-data";

@Component({

selector: 'app-productdisplay',

templateUrl: './productdisplay.component.html',

styleUrls: ['./productdisplay.component.scss'],

providers:[ProductService]

})

export class ProductdisplayComponent implements OnInit {

// navCtrl: any;

singletestimage:any;

public imagesUrl= [];

public alerts: Array<IAlert> = [];

cartItemCount: number = 0;

@Output() cartEvent = new EventEmitter<number>();

public globalResponse: any;

public globalProduct:any;

public globalsingleProduct:any;

allProducts: ProductDisplay[];

particularProducts:Array<any>=[];

singleProduct:Array<any>=[];

productAddedTocart:Product[];

profileData:any;

userData:Array<any>=[];

@Input() filter:any;

constructor(private productService:ProductService,
private sharedService:SharedService,private router: Router,
public navCtrl: NgxNavigationWithDataComponent) { }

ngOnInit() {

let product1 ='';

this.productService.getAllProducts(product1)

.subscribe((result) => {

this.globalResponse = result;

},

error => { //This is error part

console.log(error.message);

},

() => {

// This is Success part

console.log("Product fetched sucssesfully.");

//console.log(this.globalResponse);

this.allProducts=this.globalResponse[1];

console.log("images are added all products");

console.log(this.allProducts);

for(let pimage of this.allProducts ){

for(let images of pimage["procutDetails"]){

this.imagesUrl.push("http://45.113.122.70/~np/Everest/public/images/"
+images["Image1"]);

}

}

}

)

}

onClicked(value:string){

console.log(value);

}

productviewpage(prodId){

// this.navCtrl.navigate('/singleproductdetail');

debugger;

console.log(prodId);

this.productService.getSingleProduct({productId:prodId})

.subscribe((result) => {

debugger;

console.log(result);

this.globalsingleProduct = result;

},

error => { //This is error part

console.log(error.message);

},

() => {

debugger;

this.singleProduct=this.globalsingleProduct[1];

console.log(this.singleProduct);

this.singletestimage = this.singleProduct[0].Image1;

this.navCtrl.navigate('/singleproductdetail',
{"singleproduct":this.singleProduct});

}

)

}

seemore(catId){

debugger;

console.log("cat value",catId);

this.productService.getParticularProducts({categoryId:catId})

.subscribe((result) => {

debugger;

console.log(result);

this.globalProduct = result;

},

error => { //This is error part

console.log(error.message);

},

() => {

debugger;

this.particularProducts=this.globalProduct[1];

console.log(this.particularProducts);

localStorage.setItem("catproducts",
JSON.stringify(this.particularProducts));

this.navCtrl.navigate('/fullproductdetails',
{"catproducts":this.particularProducts,"catId":catId});

}

)

}

OnAddCart(product:Product)

{

debugger;

console.log(product);

this.productAddedTocart=this.productService.getProductFromCart();

if(this.productAddedTocart==null)

{

this.productAddedTocart=[];

this.productAddedTocart.push(product);

this.productService.addProductToCart(this.productAddedTocart);

this.alerts.push({

id: 1,

type: 'success',

message: 'Product added to cart.'

});

setTimeout(()=>{

this.closeAlert(this.alerts);

}, 3000);

if(localStorage.getItem("LOG_IN") == '"YES"'){

this.profileData = localStorage.getItem("USER_DATA");

this.userData = JSON.parse(this.profileData);

this.productService.addProductsToCart(
{userId:this.userData[0].id,productdetails:product})

.subscribe((result) => {

this.globalResponse = result;

},

error => { //This is error part

this.alerts.push({

id: 2,

type: 'danger',

message: 'Error:'+error,

});

},

)

}

}

else

{

let tempProduct=this.productAddedTocart.find(p=>p.Id==product.Id);

if(tempProduct==null)

{

this.productAddedTocart.push(product);

this.productService.addProductToCart(this.productAddedTocart);

this.alerts.push({

id: 1,

type: 'success',

message: 'Product added to cart.'

});

//setTimeout(function(){ }, 2000);

setTimeout(()=>{

this.closeAlert(this.alerts);

}, 3000);

if(localStorage.getItem("LOG_IN") == '"YES"'){

this.profileData = localStorage.getItem("USER_DATA");

this.userData = JSON.parse(this.profileData);

this.productService.addProductsToCart({userId:this.userData[0].id,
productdetails:product})

.subscribe((result) => {

this.globalResponse = result;

},

error => { //This is error part

this.alerts.push({

id: 2,

type: 'danger',

message: 'Error:'+error,

});

},

)

}

}

else

{

this.alerts.push({

id: 2,

type: 'warning',

message: 'Product already exist in cart.'

});

setTimeout(()=>{

this.closeAlert(this.alerts);

}, 3000);

}

}

//console.log(this.cartItemCount);

this.cartItemCount=this.productAddedTocart.length;

// this.cartEvent.emit(this.cartItemCount);

this.sharedService.updateCartCount(this.cartItemCount);

}

public closeAlert(alert:any) {

const index: number = this.alerts.indexOf(alert);

this.alerts.splice(index, 1);

}

//sorting

key: string = 'name';

reverse: boolean = false;

sort(key){

this.key = key;

this.reverse = !this.reverse;

}

p: number = 1;

}