12-11-2019

.editorconfig

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

README.md

+# Truebusapp
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.5.
+
+## 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|guard|interface|enum|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/).
+
+## 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).

angular.json

+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "truebusapp": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {},
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/truebusapp",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss",
+                            "src/responsive.scss",
+                            "node_modules/font-awesome/css/font-awesome.css",
+                            "node_modules/bootstrap/dist/css/bootstrap-grid.min.css",
+                            "node_modules/bootstrap/dist/css/bootstrap-reboot.min.css",
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/material-design-lite/material.min.css",
+                            "node_modules/slick-carousel/slick/slick.scss",
+                            "node_modules/slick-carousel/slick/slick-theme.scss",
+                            "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
+
+                        ],
+                        "scripts": [
+                            "node_modules/jquery/dist/jquery.min.js",
+                            "node_modules/slick-carousel/slick/slick.min.js",
+                            "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
+                            "node_modules/bootstrap/dist/js/bootstrap.min.js",
+                            "node_modules/material-design-lite/material.min.js",
+                            "./src/assets/js/checkout.js"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.prod.ts"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "truebusapp:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "truebusapp:build:production"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "truebusapp:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
+                        "styles": [
+                            "src/styles.css"
+                        ],
+                        "scripts": [],
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        },
+        "truebusapp-e2e": {
+            "root": "e2e/",
+            "projectType": "application",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "truebusapp:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "truebusapp:serve:production"
+                        }
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "e2e/tsconfig.e2e.json",
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "truebusapp"
+}
\ No newline at end of file

e2e/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: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.e2e.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
\ No newline at end of file

e2e/src/app.e2e-spec.ts

+import { AppPage } from './app.po';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to truebusapp!');
+  });
+});

e2e/src/app.po.ts

+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

e2e/tsconfig.e2e.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
\ No newline at end of file

package.json

+{
+    "name": "mogobus",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@agm/core": "^1.0.0",
+        "@angular/animations": "^6.1.10",
+        "@angular/cdk": "^7.3.7",
+        "@angular/common": "^6.1.0",
+        "@angular/compiler": "^6.1.0",
+        "@angular/core": "^6.1.0",
+        "@angular/flex-layout": "^6.0.0-beta.18",
+        "@angular/forms": "^6.1.0",
+        "@angular/http": "^6.1.0",
+        "@angular/material": "^7.0.3",
+        "@angular/platform-browser": "^6.1.0",
+        "@angular/platform-browser-dynamic": "^6.1.0",
+        "@angular/router": "^6.1.0",
+        "@fortawesome/angular-fontawesome": "^0.3.0",
+        "agm-direction": "^0.7.9",
+        "angular-6-social-login-v2": "^1.0.5",
+        "angular2-counto": "^1.2.5",
+        "bootstrap": "^4.1.3",
+        "bs-moment": "^0.3.1",
+        "core-js": "^2.5.4",
+        "font-awesome": "^4.7.0",
+        "hammerjs": "^2.0.8",
+        "jquery": "^3.4.1",
+        "material-design-lite": "^1.3.0",
+        "ng-bootstrap": "^1.6.3",
+        "ng-pick-datetime": "^7.0.0",
+        "ngx-bootstrap": "^3.0.1",
+        "ngx-infinite-scroll": "^6.0.1",
+        "ngx-slick-carousel": "^0.4.6",
+        "rating": "^0.1.0",
+        "rxjs": "^6.3.3",
+        "rxjs-compat": "^6.3.3",
+        "slick-carousel": "^1.8.1",
+        "zone.js": "~0.8.26"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.8.0",
+        "@angular/cli": "~6.2.5",
+        "@angular/compiler-cli": "^6.1.0",
+        "@angular/language-service": "^6.1.0",
+        "@types/jasmine": "~2.8.8",
+        "@types/jasminewd2": "~2.0.3",
+        "@types/node": "~8.9.4",
+        "codelyzer": "~4.3.0",
+        "har-validator": "^5.1.3",
+        "jasmine-core": "~2.99.1",
+        "jasmine-spec-reporter": "~4.2.1",
+        "karma": "~3.0.0",
+        "karma-chrome-launcher": "~2.2.0",
+        "karma-coverage-istanbul-reporter": "~2.0.1",
+        "karma-jasmine": "~1.1.2",
+        "karma-jasmine-html-reporter": "^0.2.2",
+        "protractor": "~5.4.0",
+        "ts-node": "~7.0.0",
+        "tslint": "~5.11.0",
+        "typescript": "~2.9.2"
+    }
+}

src/app/app.component.html

+<!-- NAVBAR-STARTS-->
+
+<app-navbar></app-navbar>
+
+<!-- NAVBAR-ENDS-->
+
+<!-- OUTLET-STARTS-->
+
+<router-outlet></router-outlet>
+
+<!-- OUTLET-ENDS-->
+
+<!-- FOOTER-STARTS-->
+
+<app-footer></app-footer>
+
+<!-- FOOTER-ENDS-->
\ No newline at end of file

src/app/app.component.spec.ts

+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'truebusapp'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('truebusapp');
+  });
+
+  it('should render title in a h1 tag', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to truebusapp!');
+  });
+});

src/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'truebusapp';
+}

src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HomeModule} from './home/home.module';
+import { AppComponent } from './app.component';
+import {AppRoutingModule} from './app.routing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { NavbarComponent } from './navbar/navbar.component';
+import { FooterComponent } from './footer/footer.component';
+
+import { AuthService } from './provider/auth.service';
+import { AuthGuard } from './provider/auth.guard';
+import { HttpErrorHandler, HandleError } from './provider/http-error-handler.service';
+import { WebService } from './provider/web.service';
+import { MessageService } from './provider/message.service';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { SocialLoginModule, AuthServiceConfig,  GoogleLoginProvider,  FacebookLoginProvider } from 'angular-6-social-login-v2';
+import { ModalModule } from 'ngx-bootstrap';
+import { defineLocale } from 'ngx-bootstrap/chronos';
+import { deLocale } from 'ngx-bootstrap/locale';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+
+defineLocale('de', deLocale);
+
+export function getAuthServiceConfigs() {
+  const config = new AuthServiceConfig(
+      [
+        {
+          id: FacebookLoginProvider.PROVIDER_ID,
+          provider: new FacebookLoginProvider('1956236594672582')
+        },
+        {
+          id: GoogleLoginProvider.PROVIDER_ID,
+          provider: new GoogleLoginProvider('702262932965-9hn1av70pu2mdqhnrat68lu7psn4fpoj.apps.googleusercontent.com')
+        }
+      ]);
+  return config;
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    NavbarComponent,
+    FooterComponent
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    HomeModule,
+    ReactiveFormsModule,
+    FormsModule,
+    InfiniteScrollModule,
+    ModalModule.forRoot(),
+    FlexLayoutModule,
+    SocialLoginModule
+  ],
+  // tslint:disable-next-line:max-line-length
+  providers: [AuthGuard, AuthService, HttpErrorHandler, WebService, MessageService, {provide: LocationStrategy, useClass: HashLocationStrategy}, {provide: AuthServiceConfig, useFactory: getAuthServiceConfigs}],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/app.routing.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AccountComponent } from './home/account/account.component';
+import { AuthGuard } from './provider/auth.guard';
+
+const appRoutes: Routes = [
+  { path: '', redirectTo: 'index', pathMatch: 'full'},
+  { path: 'account', component: AccountComponent, canActivate: [AuthGuard] }
+ ];
+@NgModule({
+  imports: [ RouterModule.forRoot(appRoutes, {useHash: true})],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/footer/footer.component.html

+<footer class="footer_section">
+    <div class="container-fluid">
+        <div class="footer_section_inner_container">
+            <h3>QUICK LINKS</h3>
+            <div class="row">
+                <div class="col-md-2">
+                    <ul>
+                        <li>Book Tickets</li>
+                        <li>Cancel Tickets</li>
+                        <li>Track Bus</li>
+                    </ul>
+                </div>
+                <div class="col-md-2">
+                    <ul>
+                        <li>About Us</li>
+                        <li>Contact Us</li>
+                        <li>Sign In / Sign Up</li>
+                    </ul>
+                </div>
+                <div class="col-md-2">
+                    <ul>
+                        <li>Terms & Conditions</li>
+                        <li>Privacy Policy</li>
+                        <li>Feedback</li>
+                    </ul>
+                </div>
+
+                <div class="col-md-6">
+                    <div fxLayout="row" fxLayoutAlign="end center">
+                        <div fxFlex="40" class="mogo_footer_sec">
+                            <img src="../../assets/imgs/logo.png">
+                            <h4>Mogo Bus PVT. LTD.</h4>
+                            <p>
+                                Shop No. 10, Platform No. 1, Omni Bus, <br>Terminus, Landmark: Omni Bus Stand
+                            </p>
+                            <div class="social" fxLayout="row" fxLayoutAlign="start center">
+                                <div class="social_icon fb"></div>
+                                <div class="social_icon insta"></div>
+                                <div class="social_icon google"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <hr>
+            <div fxLayout="row" fxLayoutAlign="space-between center">
+                <div fxFlex="100">
+                    <h6>Copyright 2019 &copy; MogoBus All rights reserved.</h6>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</footer>
\ No newline at end of file

src/app/footer/footer.component.scss

+@import "../../styles.scss";
+.footer_section {
+    background: $white_color;
+    padding-top: 50px;
+    padding-bottom: 10px;
+    .footer_section_inner_container {
+        width: 90%;
+        margin: 0 auto;
+        ul {
+            margin: 0px;
+            padding: 0px;
+            padding-bottom: 30px;
+            li {
+                list-style: none;
+                text-transform: uppercase;
+                color: $dark-color;
+                font-size: 12px;
+                line-height: 19px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                cursor: pointer;
+            }
+        }
+        img {
+            height: 70px;
+        }
+        h3 {
+            color: $dark-color;
+            margin: 0px;
+            padding: 0px;
+            font-size: 20px;
+            font-weight: 500;
+            padding-bottom: 20px;
+        }
+        h4 {
+            color: $dark-color;
+            margin: 0px;
+            padding: 0px;
+            font-size: 15px;
+            font-weight: 600;
+            padding-top: 15px;
+        }
+        p {
+            color: $dark-color;
+            margin: 0px;
+            padding: 0px;
+            font-size: 12px;
+            line-height: 20px;
+        }
+        h6 {
+            margin: 0px;
+            color: #727272;
+            font-size: 12px;
+            line-height: 30px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+        }
+        .social {
+            padding-top: 20px;
+            .social_icon {
+                width: 25px;
+                height: 25px;
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: cover;
+                margin-right: 10px;
+            }
+            .fb {
+                background-image: url("/assets/imgs/fb_icon.png");
+            }
+            .insta {
+                background-image: url("/assets/imgs/insta_icon.png");
+            }
+            .google {
+                background-image: url("/assets/imgs/g_icon.png");
+            }
+        }
+        hr {}
+    }
+}
\ No newline at end of file

src/app/footer/footer.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor(public router: Router) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/home/account/account.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountComponent } from './account.component';
+
+describe('AccountComponent', () => {
+  let component: AccountComponent;
+  let fixture: ComponentFixture<AccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/booking/booking.component.scss

+@import "../../../styles.scss";
+.search_wrapper {
+    width: 100%;
+    background-image: linear-gradient(to right, #FE6509, #FE8109);
+    padding-top: 110px;
+    .search_wrapper_inner {
+        background-image: url("/assets/imgs/mask_bg.png");
+        .search_inner_container {
+            width: 95%;
+            margin: 0 auto;
+            padding-top: 30px;
+            padding-bottom: 30px;
+            p {
+                color: #fff;
+                margin: 0px;
+                padding: 0px;
+                text-transform: uppercase;
+                padding-bottom: 5px;
+                font-size: 12px;
+            }
+            h4 {
+                color: #fff;
+                margin: 0px;
+                padding: 0px;
+                font-weight: 700;
+                .arrow {
+                    width: 40px;
+                    height: 40px;
+                    text-align: center;
+                    background-image: url("../../../assets/imgs/icon_sprite.png");
+                    background-size: 375px;
+                    margin-left: 15px;
+                    margin-right: 15px;
+                }
+                .arrow_left {
+                    background-position: top -56px left -6px;
+                }
+                .arrow_right {
+                    background-position: top -56px left -61px;
+                }
+            }
+            input {
+                border: none;
+                border-bottom: 1px solid $white-color;
+                background-color: transparent;
+                height: 40px;
+                color: $white-color;
+                border-radius: 0px;
+                font-size: 24px;
+                line-height: 32px;
+                font-weight: 700;
+                &:focus {
+                    outline: none;
+                    box-shadow: none;
+                }
+                &::placeholder {
+                    color: $white-color;
+                }
+            }
+            .modify_btn {
+                background-color: $brown-theme;
+                color: $white-color;
+                border: none;
+                height: 40px;
+                min-width: 140px;
+                cursor: pointer;
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+    }
+    .passenger_detail_wrapper {
+        width: 100%;
+        background-color: $bg-gray;
+        padding-top: 30px;
+        padding-bottom: 30px;
+        .add_passenger_detail {
+            background-color: $white-color;
+            margin-bottom: 10px;
+            h5 {
+                margin: 0px;
+                color: $text-dark;
+                font-size: 14px;
+                padding: 20px;
+            }
+            ul {
+                margin: 0px;
+                padding: 0px;
+                li {
+                    list-style: none;
+                    border-left: 10px solid #71cf74;
+                    margin-bottom: 10px;
+                    padding: 10px;
+                    p {
+                        color: $black-color;
+                        text-transform: uppercase;
+                        font-weight: 500;
+                        margin: 0px;
+                        padding: 8px;
+                        strong {
+                            color: #71cf74;
+                            margin-left: 5px;
+                        }
+                    }
+                    .input_detail {
+                        width: 100%;
+                        border: 1px solid $bg-gray;
+                        height: 40px;
+                        padding-left: 10px;
+                        padding-right: 10px;
+                        &:focus {
+                            outline: none;
+                        }
+                    }
+                    .radio {
+                        position: relative;
+                        display: block;
+                        padding-left: 30px;
+                        margin-bottom: 0px;
+                        font-size: 14px;
+                        color: $text-dark;
+                        cursor: pointer;
+                        margin-right: 10px;
+                        top: 10px;
+                    }
+                    .radio:before {
+                        background: $white-color;
+                        content: "";
+                        position: absolute;
+                        display: inline-block;
+                        top: 0;
+                        left: 0;
+                        width: 20px;
+                        height: 20px;
+                        border: 1px solid $bg-gray;
+                        border-radius: 100%;
+                        -moz-border-radius: 100%;
+                        -webkit-border-radius: 100%;
+                        box-shadow: inset 0 0 3px 0 #ccc;
+                        -moz-box-shadow: inset 0 0 3px 0 #ccc;
+                        -webkit-box-shadow: inset 0 0 3px 0 #ccc;
+                    }
+                    input[type="radio"] {
+                        display: none;
+                    }
+                    input[type="radio"]:checked+label:before {
+                        content: "\2022";
+                        text-align: center;
+                        line-height: 15px;
+                        font-family: Tahoma;
+                        font-size: 30px;
+                        color: $primary-color;
+                        text-shadow: 0 0 4px #bbb;
+                    }
+                }
+            }
+        }
+        .ticket_details {
+            width: 100%;
+            .ticket_legend {
+                padding: 20px;
+                width: 320px;
+                margin: 0 auto;
+                background: $dark-color;
+                border-radius: 15px;
+                p {
+                    color: $text-dark;
+                    margin: 0px;
+                    padding-bottom: 10px;
+                    font-size: 14px;
+                }
+                h5 {
+                    color: $text-dark;
+                    margin: 0px;
+                    padding-bottom: 10px;
+                    font-size: 14px;
+                    line-height: 20px;
+                    strong {
+                        color: #fff;
+                    }
+                }
+                .choose_place {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    border: none;
+                    background: #dedede;
+                    font-size: 14px;
+                    color: $dark-color;
+                    border-radius: 8px;
+                    margin-bottom: 15px;
+                    padding-left: 10px;
+                    text-transform: capitalize;
+                    strong {
+                        color: $text-dark;
+                        font-weight: 400;
+                        text-transform: capitalize;
+                    }
+                    &:focus {
+                        outline: none;
+                    }
+                }
+                .proceed {
+                    width: 100%;
+                    font-weight: 400;
+                    font-size: 16px;
+                    border-radius: 8px;
+                    color: #fff;
+                    height: 45px;
+                    background: $primary-color;
+                    border: none;
+                    cursor: pointer;
+                    text-transform: capitalize;
+                    &:focus {
+                        border: none;
+                        outline: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.cmn_modal_content {
+    .custom_row {
+        padding-bottom: 15px !important;
+        p {
+            color: $primary-color !important;
+        }
+        h4 {
+            margin: 0px;
+            padding: 0px;
+            font-size: 16px;
+            color: $dark-color;
+            strong {}
+        }
+        select {
+            width: 140px;
+            height: 40px;
+            border: 1px solid $cm-border-color;
+        }
+    }
+}
\ No newline at end of file

src/app/home/booking/booking.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookingComponent } from './booking.component';
+
+describe('BookingComponent', () => {
+  let component: BookingComponent;
+  let fixture: ComponentFixture<BookingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/changepassword/changepassword.component.html

+<!-- MAIN-WRAPPER-STARTS -->
+
+<div class="main_wrapper">
+
+  <!-- SEARCH-BANNER-STARTS-->
+
+  <div class="search_banner">
+      <div class="search_overlay">
+          <!-- <h2>
+                    Check in any time Book your ticket and start you journey
+               </h2> -->
+      </div>
+  </div>
+
+  <!-- SEARCH-BANNER-ENDS-->
+
+  <!-- ACCOUNT-TABS-STARTS -->
+
+  <div class="accounts_tab_div_wrapper relative">
+          <div class="loader_common_main_wrapper" *ngIf="loading">
+                  <div class="loader"></div>
+              </div>
+      <div class="">
+          <div class="account_tabs">
+
+              <!-- ACCOUNT-TABS-MENU-STARTS -->
+
+              <ul class="nav nav-tabs">
+                  <li class="nav-item">
+                      <a class="nav-link" data-toggle="tab" href="#password">Change Password</a>
+                  </li>
+              </ul>
+
+              <!-- ACCOUNT-TABS-MENU-ENDS -->
+
+
+
+              <!-- ACCOUNT-TABS-CONTENT-STARTS -->
+
+              <div class="tab-content">
+                  <div class="tab-pane active" id="password">
+                      <div class="wallet_balance_wrapper" *ngIf="!keyState">
+                          <div *ngIf="passwordMsg && passwordMsg!=''" [innerHTML]="passwordMsg"></div>
+                          <form [formGroup]="passwordForm" (ngSubmit)="passwordProcess()" autocomplete="off">
+                              <h4>Change Password</h4>
+                              <div class="row">
+                                  <div class="col-md-5">
+                                      <div class="row">
+                                          <div class="col-12">
+                                              <!-- <p><strong>Geroge Similton</strong></p> -->
+                                              <input class="" placeholder="Enter New Password" type="password" formControlName="newpassword">
+                                              <div class="s_error" *ngIf="!passwordForm.controls['newpassword'].valid && passwordSubmit">
+                                                  <div class="s_validation" *ngIf="passwordForm.controls['newpassword'].hasError('required')">{{vs.errorList.required}} </div>
+                                              </div>
+                                          </div>
+                                      </div>
+                                      <div class="row">
+                                          <div class="col-12">
+                                              <!-- <p><strong>Geroge Similton</strong></p> -->
+                                              <input class="" placeholder="Confirm New Password" type="password" formControlName="cpassword">
+                                              <div class="s_error" *ngIf="!passwordForm.controls['cpassword'].valid && passwordSubmit">
+                                                  <div class="s_validation" *ngIf="passwordForm.controls.cpassword.invalid">{{vs.errorList.confirm}} </div>
+                                              </div>
+                                          </div>
+                                      </div>
+                                      <br>
+                                      <div class="row">
+                                          <div class="col-12">
+                                              <p class="clear"><button class="proceed mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Save Password </button>
+                                              </p>
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <div class="col-md-7"></div>
+                              </div>
+                          </form>
+                      </div>
+                      <div class="wallet_balance_wrapper" *ngIf="keyState">
+                          <div class="row" [innerHTML]="keyStatemsg"></div>
+                      </div>
+                  </div>
+
+                  <!-- ACCOUNT-TABS-CONTENT-ENDS -->
+
+              </div>
+          </div>
+      </div>
+
+      <!-- ACCOUNT-TABS-ENDS -->
+
+  </div>
+
+  <!-- MAIN-WRAPPER-ENDS -->

src/app/home/changepassword/changepassword.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangepasswordComponent } from './changepassword.component';
+
+describe('ChangepasswordComponent', () => {
+  let component: ChangepasswordComponent;
+  let fixture: ComponentFixture<ChangepasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChangepasswordComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChangepasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/changepassword/changepassword.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../provider/web.service';
+import { FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { ValidationService } from './../../provider/validation.service';
+
+@Component({
+  selector: 'app-changepassword',
+  templateUrl: './changepassword.component.html',
+  styleUrls: ['./changepassword.component.scss']
+})
+export class ChangepasswordComponent implements OnInit {
+
+  loading: boolean;
+  passwordSubmit: boolean;
+  resetkey: any;
+  public passwordForm: FormGroup;
+  funcName: any;
+  passwordMsg: any;
+  keyState: boolean;
+  keyStatemsg: any;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private service: WebService,
+    private formBuilder: FormBuilder,
+    public vs: ValidationService
+  ) {
+    this.keyState = false;
+  }
+
+  ngOnInit() {
+    this.resetkey = decodeURIComponent(this.route.snapshot.params['id']);
+    this.passwordForm = this.formBuilder.group({
+      'newpassword': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
+      'cpassword': ['', Validators.compose([Validators.required]), this.MatchPassword.bind(this)]
+    });
+
+    this.funcName = 'keyValid';
+    const postData = {'resetkey': this.resetkey};
+    this.service.post_data(this.funcName, postData).subscribe(response => {
+      this.loading = false;
+      if ( response.status === 'success') {
+        this.keyState = false;
+        this.keyStatemsg = '';
+      } else {
+        this.keyState = true;
+        this.keyStatemsg = '<big class="text-danger">' + response.message + '</big>';
+      }
+    }, (error) => {
+      this.keyStatemsg = '<big class="text-danger"> Something went wrong. Feel free to contact us .</big>';
+    });
+  }
+
+  MatchPassword(val: any) {
+    return new Promise(resolve => {
+      if (val.value === this.passwordForm.value.newpassword) {
+        resolve(null);
+      } else {
+        resolve({ 'match': false });
+      }
+    });
+  }
+
+  passwordProcess() {
+    this.passwordSubmit = true;
+    if (this.passwordForm.valid) {
+      const password_data = this.passwordForm.value;
+      const This = this;
+
+      const postData = {
+        'newpassword': password_data.newpassword,
+        'resetkey': this.resetkey,
+      };
+
+      this.funcName = 'resetPassword';
+
+
+      this.loading = true;
+      this.service.post_data(this.funcName, postData).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          this.passwordMsg = '<small class="text-info">' + response.message + '</smal>';
+          this.service.setLocalStorageItem('userData', JSON.stringify(response.data));
+        } else {
+          this.passwordMsg = '<small class="text-danger">' + response.message + '</smal>';
+        }
+        setTimeout(function() {
+          This.passwordMsg = '';
+        }, 3000);
+      }, (error) => {
+        this.passwordMsg = '<small class="text-danger"> Something went wrong. Feel free to contact us .</smal>';
+      });
+    }
+  }
+
+}

src/app/home/home.module.spec.ts

+import { HomeModule } from './home.module';
+
+describe('HomeModule', () => {
+  let homeModule: HomeModule;
+
+  beforeEach(() => {
+    homeModule = new HomeModule();
+  });
+
+  it('should create an instance', () => {
+    expect(homeModule).toBeTruthy();
+  });
+});

src/app/home/home.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {moduleRouting} from './home.routing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+/* BOOTSTRAP-COMPONENTS */
+
+import { BsDatepickerModule } from 'ngx-bootstrap';
+
+import { defineLocale } from 'ngx-bootstrap/chronos';
+
+import { enGbLocale } from 'ngx-bootstrap/locale';
+
+defineLocale('engb', enGbLocale);
+
+import { DateSet } from './../provider/dateSet.pipe';
+import { SearchPipe } from './../provider/search.pipe';
+
+import { LoaderComponent } from './../loader/loader.component';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { SlickCarouselModule } from 'ngx-slick-carousel';
+import { CountoModule } from 'angular2-counto';
+
+
+
+/* CUSTOM-COMPONENTS */
+
+import { IndexComponent } from './index/index.component';
+import { SearchresultComponent } from './searchresult/searchresult.component';
+import { BookingComponent } from './booking/booking.component';
+import { AccountComponent } from './account/account.component';
+import { SuccessComponent } from './success/success.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { ChangepasswordComponent } from './changepassword/changepassword.component';
+import { TermsComponent } from './terms/terms.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BsDatepickerModule,
+    moduleRouting,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    FormsModule,
+    SlickCarouselModule,
+    InfiniteScrollModule,
+    CountoModule,
+    BsDatepickerModule.forRoot()
+  ],
+  declarations: [
+    IndexComponent,
+    SearchresultComponent,
+    BookingComponent,
+    AccountComponent,
+    TermsComponent,
+    SuccessComponent,
+    LoaderComponent,
+    DateSet,
+    SearchPipe,
+
+    ChangepasswordComponent
+  ]
+})
+export class HomeModule { }

src/app/home/home.routing.ts

+import { ModuleWithProviders } from '@angular/core'
+import { Routes, RouterModule } from '@angular/router';
+import { IndexComponent } from './index/index.component';
+import {SearchresultComponent} from './searchresult/searchresult.component';
+import {BookingComponent} from './booking/booking.component';
+import { AccountComponent } from './account/account.component';
+import { SuccessComponent } from './success/success.component';
+import { ChangepasswordComponent } from './changepassword/changepassword.component';
+import { AuthGuard } from './../provider/auth.guard';
+import { TermsComponent } from './terms/terms.component';
+
+const ModuleRoutes: Routes = [
+    { path: 'index', component: IndexComponent },
+    { path: 'searchresult/:id',	component: SearchresultComponent},
+    { path: 'booking/:data', component: BookingComponent },
+    { path: 'account',	component: AccountComponent, canActivate: [AuthGuard]},
+    { path: 'success/:bookId/:amount', component: SuccessComponent, canActivate: [AuthGuard] },
+    { path: 'changepassword/:id', component: ChangepasswordComponent },
+    { path: 'terms', component:TermsComponent}
+];
+
+export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes);
+

src/app/home/index/index.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IndexComponent } from './index.component';
+
+describe('IndexComponent', () => {
+  let component: IndexComponent;
+  let fixture: ComponentFixture<IndexComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IndexComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/index/index.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+import { FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { trigger, transition, state, animate, style } from '@angular/animations';
+import { ValidationService } from './../../provider/validation.service';
+import { WebService } from './../../provider/web.service';
+import $ from "jquery";
+import * as moment from 'moment';
+import { debounceTime, distinctUntilChanged, switchMap, startWith } from 'rxjs/operators';
+
+
+@Component({
+  selector: 'app-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ 
+          transform: 'translateY(100%)',
+         }),
+        animate('600ms ease-in', 
+        style({ 
+          transform: 'translateY(0%)'
+         }))
+      ]),
+      transition(':leave', [
+        style({ 
+          transform: 'translateY(0%)'
+         }),
+        animate('600ms ease-out', 
+        style({ 
+          transform: 'translateY(100%)'
+         }))
+      ])
+    ])
+  ]
+  
+
+})
+export class IndexComponent implements OnInit {
+
+
+  @Input() currentState;
+  adslideConfig = { 
+    "slidesToShow": 1,
+    "slidesToScroll": 1,
+    fade: true,
+    "arrows": true, 
+  };
+
+  whoareweConfig = {
+    "slidesToShow": 1,
+    "slidesToScroll": 1,
+    
+    "arrows": true,
+  };
+
+  offerConfig = {
+    "slidesToShow": 1,
+    "slidesToScroll": 1,
+    "arrows": true,
+  };
+  shownGroup: number;
+
+
+  slickGoTo(){
+    alert("hi");
+  }
+
+  slickInit(e) {
+    console.log('slick initialized');
+  }
+
+  breakpoint(e) {
+    console.log('breakpoint');
+  }
+
+  afterChange(e) {
+
+  }
+
+  beforeChange(e) {
+    console.log('beforeChange');
+  }
+  source_field: any;
+  homeForm: FormGroup;
+  results: any[];
+  funcName: any;
+  desfuncName: any;
+  searchSubmit: boolean;
+  sourceFlag: boolean;
+  destResults: any[];
+  destFlag: boolean;
+  main_error: boolean;
+  today: any;
+  source_state: boolean;
+  dest_state: boolean;
+  sourceLoad: boolean;
+  destload: boolean;
+  promocodedata:any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private _localeService: BsLocaleService,
+    private formBuilder: FormBuilder,
+    public vs: ValidationService,
+    public service: WebService,
+    ) {
+
+    this.shownGroup = 0;
+    this._localeService.use('engb');
+    this.homeForm = this.formBuilder.group({
+      fromStationId: ['', Validators.compose([Validators.required])],
+      toStationId: ['', Validators.compose([Validators.required])],
+      travelDate: ['', Validators.compose([Validators.required])],
+      returnDate: [''],
+      sourceName: ['', Validators.compose([Validators.required])],
+      destinationName: ['', Validators.compose([Validators.required])],
+    });
+    this.searchSubmit = false;
+    this.sourceFlag = false;
+    this.main_error = false;
+    this.source_state = false;
+    this.dest_state = false;
+    this.sourceLoad = false;
+    this.destload = false;
+    this.destFlag = false;
+    this.today = new Date();
+
+    
+  }
+
+
+
+
+
+  isGroupShown(group) {
+    return this.shownGroup === group;
+  }
+  toggleGroup(group) {
+    if (this.isGroupShown(group)) {
+     this.shownGroup = group;
+    } else {
+      this.shownGroup = group;
+    }
+  }
+
+
+  ngOnInit() {
+    this.service.get_data('get_promocode').subscribe(response=> {
+      if(response.status === "success") {      
+         this.promocodedata = this.service.ObjArray(response.data);
+      }
+      console.log('Promocodedata', this.promocodedata);
+    })
+    this.funcName = 'source_location/';
+    this.homeForm.get('sourceName').valueChanges.pipe(debounceTime(400), distinctUntilChanged(), switchMap((query) =>
+    this.service.get_data(this.funcName +  this.filterQuery(query, 'source')))).subscribe(response => {
+      console.log(this.source_state);
+      this.sourceLoad = false;
+      if (response.status === 'success' && this.source_state === true) {
+        this.results = response.data;
+        console.log(this.results);
+        if (this.results.length > 0 ) {
+          this.sourceFlag = true;
+        } else {
+          this.sourceFlag = false;
+        }
+        console.log(this.sourceFlag);
+      } else {
+        this.results = [];
+        this.sourceFlag = false;
+      }
+    });
+
+    this.desfuncName = 'destination_location/';
+    this.homeForm.get('destinationName').valueChanges.pipe(debounceTime(500), distinctUntilChanged(), switchMap((query) =>
+    this.service.get_data(this.desfuncName + this.filterQuery(query, 'dest') + '/' + this.homeForm.controls['fromStationId'].value)))
+    .subscribe(response => {
+      this.destload = false;
+      if (response.status === 'success' && this.dest_state === true) {
+        this.destResults = response.data;
+        console.log(this.results);
+        if (this.destResults.length > 0 ) {
+          this.destFlag = true;
+        } else {
+          this.destFlag = false;
+        }
+        console.log(this.destFlag);
+      } else {
+        this.destResults = [];
+        this.destFlag = false;
+      }
+    });
+
+  }
+
+  filterQuery(query, type: string) {
+    if (type === 'source') {
+      this.sourceLoad = true;
+    } else {
+      this.destload = true;
+    }
+    if (query !== null){
+      return query.replace(/[^a-zA-Z ]/g, '');
+    } else {
+      return '';
+    }
+  }
+
+  select_source(data: any) {
+    this.sourceFlag = false;
+    this.source_state = false;
+    this.homeForm.controls['sourceName'].patchValue(data.stationName);
+    this.homeForm.controls['fromStationId'].patchValue(data.stationCode);
+  }
+
+  select_dest(data: any) {
+    this.destFlag = false;
+    this.dest_state = false;
+    this.homeForm.controls['destinationName'].patchValue(data.stationName);
+    this.homeForm.controls['toStationId'].patchValue(data.stationCode);
+  }
+
+  onChanges(): void {
+  }
+
+  bus_search() {
+    this.main_error = false;
+    this.searchSubmit = true;
+    const response = this.homeForm.value;
+    const This = this;
+    console.log(this.homeForm.value);
+    if (this.homeForm.valid) {
+      const searchObj = encodeURIComponent(JSON.stringify(this.homeForm.value));
+      this.router.navigate(['searchresult/' + searchObj]);
+    } else {
+      const data = this.homeForm.value;
+      if (data.sourceName !== '' && data.destinationName !== '' && data.travelDate !== '') {
+        if (data.fromStationId === '' || data.toStationId === '') {
+          this.main_error = true;
+        }
+      }
+    }
+    console.log('tested');
+  }
+
+  initCalled() {
+    this.sourceFlag = false;
+    this.destFlag = false;
+    console.log(this.source_state);
+  }
+
+  resetFun() {
+    this.searchSubmit = false;
+    this.homeForm.reset();
+  }
+
+
+ goToPage(path: any, data= null) {
+    console.log(data);
+    this.router.navigateByUrl(path, { queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  min_return () {
+    const d = this.homeForm.get('travelDate').value;
+    return d;
+  }
+
+  value_change(type: string) {
+    console.log(this.source_state);
+    if (type === 'source') {
+      this.source_state = true;
+    } else {
+      this.dest_state = true;
+    }
+  }
+}

src/app/home/searchresult/searchresult.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchresultComponent } from './searchresult.component';
+
+describe('SearchresultComponent', () => {
+  let component: SearchresultComponent;
+  let fixture: ComponentFixture<SearchresultComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchresultComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchresultComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/success/success.component.html

+<div class="success_div">
+
+    <!-- BANNER-STARTS -->
+
+    <div class="search_banner">
+        <div class="search_overlay">
+        </div>
+    </div>
+
+    <!-- BANNER-ENDS -->
+
+    <div class="success_div_inner" *ngIf="bookinfoData">
+        <img src="assets/imgs/asset_success.png">
+        <h3>Booking Successful</h3>
+        <div class="row">
+            <div class="col">
+                <p>Booking ID</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>{{bookReplace(bookinfoData.bookingCode)}}</strong></p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>Seat Number</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>{{getSeats(bookinfoData.passengerDetails)}}</strong></p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>Boarding Point</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>{{bookinfoData.boardingPointDetails.name}}</strong></p>
+            </div>
+        </div>
+        <div class="row" *ngIf="bookinfoData.droppingPointDetails">
+            <div class="col">
+                <p>Droping Point</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>{{bookinfoData.droppingPointDetails.name}}</strong></p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>Total</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>&#8377;{{amount}}</strong></p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect success_btn" (click)="navigate('home')">Home</button>
+            </div>
+            <div class="col">
+                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect success_btn" (click)="navigate('account')">My Account</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/home/success/success.component.scss

+.search_banner {
+    width: 100%;
+    position: relative;
+    background: url("/assets/imgs/bus_2.jpg");
+    background-attachment: fixed !important;
+    background-size: cover !important;
+    .search_overlay {
+        padding-top: 10%;
+        padding-bottom: 5%;
+        background: rgba(44, 71, 196, 0.9);
+        h2 {
+            text-align: center;
+            color: #fff;
+            margin: 0px;
+            padding-bottom: 50px;
+            font-weight: 400;
+            margin: 0px;
+        }
+    }
+}
+
+.success_div {
+    width: 100%;
+    background: #f8f8f8;
+    .success_div_inner {
+        width: calc(100% - 70%);
+        padding: 25px;
+        padding-top: 40px;
+        background: #fff;
+        text-align: center;
+        margin: 0 auto;
+        border-radius: 5px;
+        -webkit-box-shadow: 1px 0px 15px 0px rgba(0, 0, 0, 0.3);
+        -moz-box-shadow: 1px 0px 15px 0px rgba(0, 0, 0, 0.3);
+        box-shadow: 1px 0px 15px 0px rgba(0, 0, 0, 0.3);
+        position: relative;
+        bottom: 100px;
+        img {
+            width: 80px;
+        }
+        h3 {
+            text-align: center;
+            color: #4b6073;
+            font-size: 24px;
+            padding-bottom: 20px;
+        }
+        .row {
+            padding-bottom: 10px;
+        }
+        p {
+            text-align: left;
+            margin: 0px;
+            font-size: 18px;
+            color: #4b6073;
+        }
+        .success_btn {
+            width: 100%;
+            height: 50px;
+            font-size: 18px;
+            color: #fff;
+            background: #ff7800;
+            border: none;
+            cursor: pointer;
+            margin-top: 30px;
+        }
+    }
+}
\ No newline at end of file

src/app/home/success/success.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SuccessComponent } from './success.component';
+
+describe('SuccessComponent', () => {
+  let component: SuccessComponent;
+  let fixture: ComponentFixture<SuccessComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SuccessComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SuccessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/success/success.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../provider/web.service';
+
+
+@Component({
+  selector: 'app-success',
+  templateUrl: './success.component.html',
+  styleUrls: ['./success.component.scss']
+})
+export class SuccessComponent implements OnInit {
+
+  bookingId: any;
+  funcName: any;
+  bookinfoData: any;
+  amount: any;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private service: WebService
+  ) {
+  }
+
+  ngOnInit() {
+    this.bookingId = this.route.snapshot.params['bookId'];
+    this.amount = this.route.snapshot.params['amount'];
+    this.getBookinfo(this.bookingId);
+    console.log(this.bookingId);
+  }
+
+  getBookinfo(bookId) {
+    const url = 'bookingdetails?username=javatest&password=123456&bookingCode=' + bookId;
+    console.log(url);
+    this.service.online_service(url).subscribe(response => {
+        this.bookinfoData = response;
+       console.log(this.bookinfoData);
+    }, (error) => {
+      console.log(error);
+    });
+  }
+
+  navigate(type: string) {
+    if (type === 'home') {
+      this.router.navigate(['/index']);
+    } else {
+      this.router.navigate(['/account']);
+    }
+  }
+
+  getSeats(passanger: any, type: string) {
+    if (passanger instanceof Array !== true) {
+      passanger = new Array(passanger);
+    }
+
+    const seatArray = new Array();
+    passanger.forEach(item => {
+      seatArray.push(item.seatNbr);
+    });
+
+    return seatArray.join(', ');
+
+  }
+
+  bookReplace(bookID: any) {
+    const str = bookID;
+    return str.replace(/^.{2}/g, 'TR');
+  }
+
+}

src/app/home/terms/terms.component.scss

+.terms_wrapper{
+    background: #2c47c4;
+    padding-top: 75px;
+    ul{
+        padding:0px;
+        margin:0px;
+        background: rgba(0,0,0,0.8);
+        border:none;
+        li{
+            list-style: none;
+            border-radius: 0px;
+            .active{
+                background: rgba(273,273,273,0.3);
+                color: #fff;
+            }
+            a{
+                border-radius: 0px;
+                border:none;
+                color: #fff;
+                text-decoration: none;
+                padding: 14px;
+                font-weight: 400;
+                &:hover{
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .tab-content{
+        background: #fff;
+        padding:20px;
+        p{
+            padding-bottom: 10px;
+            font-size: 15px;
+        }
+        ul{
+            background: transparent;
+            padding-left: 35px;
+            li{
+                background: transparent;
+                list-style: circle;
+                
+            }
+        }
+        
+    }
+}
\ No newline at end of file

src/app/home/terms/terms.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TermsComponent } from './terms.component';
+
+describe('TermsComponent', () => {
+  let component: TermsComponent;
+  let fixture: ComponentFixture<TermsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TermsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TermsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/terms/terms.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-terms',
+  templateUrl: './terms.component.html',
+  styleUrls: ['./terms.component.scss']
+})
+export class TermsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/loader/loader.component.html

+<div class="loader_main_wrapper">
+    <div class="loader"></div>
+</div>

src/app/loader/loader.component.scss

+.loader_main_wrapper {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    padding: 6px;
+    width: 100%;
+    height: 100%;
+    overflow:hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(273,273,273,0.8);
+    z-index: 9999;
+    .loader {
+        border: 16px solid #ff7800;
+        border-top: 16px solid #2c47c4;
+        border-radius: 50%;
+        width: 100px;
+        height: 100px;
+        animation: spin 2s linear infinite;
+    }
+}
+

src/app/loader/loader.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loader/loader.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/navbar/navbar.component.scss

+@import "../../styles.scss";
+.navbar {
+    background-color: $white-color;
+    position: fixed;
+    transition-duration: 1s;
+    transition-timing-function: ease;
+    padding: 1rem 1rem;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    padding-right: 5%;
+    padding-left: 5%;
+    z-index: 999;
+    .my_account {
+        height: 41px;
+        padding-left: 10px;
+        padding-right: 30px;
+        padding-top: 7px;
+        padding-bottom: 7px;
+        min-width: 125px;
+        border: 1px solid $primary-color;
+        border-radius: 3px;
+        &:hover {
+            background-color: $primary-color;
+            div {
+                color: $white-color;
+            }
+        }
+        div {
+            display: inline-block;
+            color: $black-color;
+            font-size: 17px;
+            font-weight: 400;
+            span {
+                position: relative;
+                cursor: pointer;
+                bottom: 0px;
+                font-size: 16px;
+                text-transform: capitalize;
+                padding-left: 10px;
+            }
+        }
+        .my_account_pic {
+            width: 27px;
+            height: 27px;
+            background: $white-color;
+            border-radius: 50%;
+            border: 1px solid $primary-color;
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                object-fit: cover;
+                object-position: center;
+            }
+        }
+        .dropdown-menu {
+            border-radius: 0px;
+            margin: 0px;
+            padding: 0px;
+            background: $white-color;
+            border: none;
+            li {
+                color: $black-color;
+                cursor: pointer;
+                padding: 10px;
+                &:hover {
+                    background-color: $primary-color;
+                    color: $white-color;
+                }
+            }
+        }
+    }
+    .navbar-brand {
+        img {
+            height: 70px;
+            width: auto;
+            transition-duration: 1s;
+            transition-timing-function: ease;
+        }
+    }
+    .navbar-nav {
+        padding-right: 25px;
+        li {
+            a {
+                border: 2px solid transparent;
+                background: transparent;
+                border-radius: 3px;
+                color: $black-color;
+                height: 41px;
+                margin-left: 5px;
+                margin-right: 5px;
+                padding-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 15px;
+                padding-right: 15px;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 36px;
+                cursor: pointer;
+                text-transform: uppercase;
+                &:hover {
+                    border: 2px solid $primary-color;
+                    color: $white-color;
+                    background-color: $primary-color;
+                }
+                &:focus {
+                    border: 2px solid $primary-color;
+                    color: $white-color;
+                    background-color: $primary-color;
+                }
+            }
+        }
+    }
+    .nav_btn {
+        border: 2px solid $primary-color;
+        background: transparent;
+        border-radius: 3px;
+        color: $primary-color;
+        height: 41px;
+        margin-left: 5px;
+        margin-right: 5px;
+        padding-left: 25px;
+        padding-right: 25px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 36px;
+        cursor: pointer;
+        text-transform: uppercase;
+        &:hover {
+            border: 2px solid $primary-color;
+            color: $white-color;
+            background-color: $primary-color;
+        }
+        &:focus {
+            border: 2px solid $primary-color;
+            color: $white-color;
+            background-color: $primary-color;
+        }
+    }
+}
+
+.scrolled_navbar {
+    background: $white-color !important;
+    transition-duration: 1s;
+    transition-timing-function: ease;
+    .navbar-brand {
+        img {
+            height: 50px;
+            width: auto;
+            transition-duration: 1s;
+            transition-timing-function: ease;
+        }
+    }
+}
\ No newline at end of file

src/app/navbar/navbar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/provider/auth.guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from './auth.service';
+import {Router} from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private auth: AuthService, private myRoute: Router) {
+
+  }
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    if (this.auth.isLoggednIn()) {
+      return true;
+    } else {
+      this.myRoute.navigate(['index']);
+      return false;
+    }
+  }
+}

src/app/provider/auth.service.ts

+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  constructor(private myRoute: Router) { }
+
+  sendToken(token: string) {
+    localStorage.setItem('LoggedInUser', token);
+  }
+  getToken() {
+    return localStorage.getItem('userData');
+  }
+  isLoggednIn() {
+    return this.getToken() !== null;
+  }
+  logout() {
+    localStorage.removeItem('userData');
+    this.myRoute.navigate(['index']);
+  }
+}

src/app/provider/bookingData.ts

+import { Injectable } from '@angular/core';
+
+@Injectable()
+
+export class BookingData {
+    public storage: any;
+
+    public constructor() {}
+}

src/app/provider/dateSet.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'dateSet' })
+export class DateSet implements PipeTransform {
+  transform(timeString: string ) {
+    let time;
+    time = timeString.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [timeString];
+    if (time.length > 1) { // If time format correct
+      time = time.slice (1);  // Remove full string match value
+      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
+      time[3] = ' ';
+      time[4] = ' ';
+      time[0] = +time[0] % 12 || 12; // Adjust hours
+    }
+    return time.join ('');
+  }
+}

src/app/provider/declare.model.ts

+export class Login {
+    login_post: Loggeddata;
+    sign_post: SignupData;
+    forgot_post: string;
+}
+
+export class Loggeddata {
+    username: string;
+    password: string;
+}
+
+export class SignupData {
+    name: string;
+    username: string;
+    password: string;
+    mob: string;
+}

src/app/provider/http-error-handler.service.ts

+import { Injectable } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+
+import { Observable, of } from 'rxjs';
+
+import { MessageService } from './message.service';
+
+/** Type of the handleError function returned by HttpErrorHandler.createHandleError */
+export type HandleError =
+  <T> (operation?: string, result?: T) => (error: HttpErrorResponse) => Observable<T>;
+
+/** Handles HttpClient errors */
+@Injectable()
+export class HttpErrorHandler {
+  constructor(private messageService: MessageService) { }
+
+  /** Create curried handleError function that already knows the service name */
+  createHandleError = (serviceName = '') => <T>
+    (operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result)
+
+  /**
+   * Returns a function that handles Http operation failures.
+   * This error handler lets the app continue to run as if no error occurred.
+   * @param serviceName = name of the data service that attempted the operation
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  handleError<T> (serviceName = '', operation = 'operation', result = {} as T) {
+
+    return (error: HttpErrorResponse): Observable<T> => {
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      const message = (error.error instanceof ErrorEvent) ?
+        error.error.message :
+       `server returned code ${error.status} with body "${error.error}"`;
+
+      // TODO: better job of transforming error for user consumption
+      this.messageService.add(`${serviceName}: ${operation} failed: ${message}`);
+
+      // Let the app keep running by returning a safe result.
+      return of( result );
+    };
+
+  }
+}
+
+
+/*
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license */

src/app/provider/message.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable()
+
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+  clear() {
+    this.messages = [];
+  }
+}

src/app/provider/search.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'searchPipe', pure: false })
+export class SearchPipe implements PipeTransform {
+  transform(result, filters ) {
+    // console.log(filters);
+    return result.filter(function(item) {
+        //console.log(item);
+        let index;
+        let time_state: any;
+        let state = 1;
+        if ( filters.travels.length !== 0 || filters.drop_point.length !== 0 || filters.pick_point.length !== 0
+            || filters.rate.length !== 0 || filters.time.length !== 0 || filters.type.length !== 0) {
+
+
+            if (filters.travels.length !== 0) {
+                state = 0;
+                index = filters.travels.indexOf(item.operatorCode);
+                if (index !== -1) {
+                    state = 1;
+                }
+            }
+
+            if (filters.pick_point.length !== 0 && state === 1) {
+                state = 0;
+                if (item.boardingPointDetails instanceof Array) {
+                    let pick_state = false;
+                    item.boardingPointDetails.forEach((items: any) => {
+                        index = filters.pick_point.indexOf(items.name);
+                        if (index !== -1) {
+                            pick_state = true;
+                        }
+                    });
+
+                    if ( pick_state !== false ) {
+                        state = 1;
+                    }
+                } else {
+                    if (item.boardingPointDetails !== undefined) {
+                        index = filters.pick_point.indexOf(item.boardingPointDetails.name);
+                        if (index !== -1) {
+                            state = 1;
+                        }
+                    }
+                }
+            }
+
+            if (filters.drop_point.length !== 0 && state === 1) {
+                state = 0;
+                if (item.droppingPointDetails instanceof Array) {
+                    let pick_state = false;
+                    item.droppingPointDetails.forEach((items: any) => {
+                        index = filters.drop_point.indexOf(items.name);
+                        if (index !== -1) {
+                            pick_state = true;
+                        }
+                    });
+
+                    if ( pick_state !== false ) {
+                        state = 1;
+                    }
+                } else {
+                    if (item.droppingPointDetails !== undefined) {
+                        index = filters.drop_point.indexOf(item.droppingPointDetails.name);
+                        if (index !== -1) {
+                            state = 1;
+                        }
+                    }
+                }
+            }
+
+            if (filters.time.length !== 0 && state === 1) {
+                state = 0;
+                const time_split = item.departureTime.split(':');
+                const date1 = new Date();
+                date1.setHours(time_split[0]);
+                date1.setMinutes(time_split[1]);
+                const bus_time = date1.getTime();
+                const item_list = [];
+                time_state = false;
+                filters.time.filter(times => {
+                     const date_list = times.split('-');
+                    // tslint:disable-next-line:radix
+                    const start_time = parseInt(date_list[0]);
+                    // tslint:disable-next-line:radix
+                    const end_time = parseInt(date_list[1]);
+                    if (start_time < bus_time && bus_time  < end_time) {
+                        time_state = true;
+                    }
+                });
+
+                if (time_state !== false) {
+                    state = 1;
+                }
+
+            }
+
+            if (filters.rate.length !== 0 && state === 1) {
+                state = 0;
+                index = filters.rate.indexOf(item.rate);
+                if (index !== -1) {
+                    console.log(item);
+                    state = 1;
+                }
+            }
+
+            if (filters.type.length !== 0 && state === 1) {
+                state = 0;
+                const str = item.busType;
+                let type_state = false;
+                filters.type.forEach((items: any) => {
+                    if (items === 'A/C' || items === 'Sleeper') {
+                        if (items === 'A/C') {
+                            index = str.includes('Non');
+                            if (index !== true) {
+                                type_state = true;
+                            }
+                        } else {
+                            index = str.includes('Semi');
+                            if (index !== true) {
+                                type_state = true;
+                            }
+                        }
+                    } else {
+                        index = str.includes(items);
+                        if (index === true) {
+                            type_state = true;
+                        }
+                    }
+                });
+
+                if (type_state !== false) {
+                    state = 1;
+                }
+            }
+
+
+            if (state === 1) {
+                return result;
+            }
+
+
+        } else {
+            return result;
+        }
+    });
+    return result;
+  }
+}

src/app/provider/subject.service.ts

+import { Injectable } from '@angular/core';
+import { observable, Observable } from 'rxjs';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SubjectService {
+  private loginDetails = new BehaviorSubject<any>(null);
+  private isLoggined = new BehaviorSubject<any>(null);
+
+  sendLoginData(loginData: any) {
+    this.loginDetails.next(loginData);
+  }
+
+  getLoginData(): Observable<any> {
+    return this.loginDetails.asObservable();
+  }
+
+  sendisLoggined(isLoggined: any) {
+    this.isLoggined.next(isLoggined);
+  }
+
+  getisLoggined(): Observable<any> {
+    return this.isLoggined.asObservable();
+  }
+
+}

src/app/provider/validation.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ValidationService {
+  errorList = {
+    'required': 'This field is required',
+    'email': 'Please enter a valid email',
+    'phone': 'Please enter a valid phone number',
+    'password': 'Please enter a valid password',
+    'minLength': 'Minimum characters length is',
+    'maxLength': 'Maximum characters length is',
+    'min': 'Age min start at ',
+    'max': 'Age max end at ',
+    'confirm': 'Password mismatch'
+  };
+
+  constructor() { }
+
+  getErrorList() {
+    return this.errorList;
+  }
+
+  getError(error: any): string {
+    if (this.errorList.hasOwnProperty(error.code)) {  // check whether the error code having our definition
+      return this.errorList[error.code]; // return our definition
+    } else {
+      return error.message;
+    }
+  }
+}

src/app/provider/web.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { map, catchError } from 'rxjs/operators';
+import { apiConfig, serverApiDev } from '../../environments/server.config';
+import { HttpErrorHandler, HandleError } from './http-error-handler.service';
+
+const httpOptions = {
+  headers: new HttpHeaders({
+    'Content-Type':  'application/json',
+    'Auth': 'my_key'
+  })
+};
+
+const httplive = {
+  headers: new HttpHeaders({
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+    'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
+  })
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class WebService {
+  private handleError: HandleError;
+  constructor(private http: HttpClient, httpErrorHandler: HttpErrorHandler) {
+    this.handleError = httpErrorHandler.createHandleError('WebService');
+  }
+
+  post_data(url: string, data) {
+    return this.http.post(`${apiConfig + url}`, data, httpOptions).pipe(map((response: any) => response));
+  }
+  get_data(url) {
+    return this.http.get(`${apiConfig + url}`, httpOptions).pipe(map((response: any) => response));
+  }
+  setLocalStorageItem(id: string, data: string) {
+    localStorage.setItem(id, data);
+  }
+  getLocalStorageItem(data: string): string {
+      return localStorage.getItem(data);
+  }
+  removeLocalStorageItem(data) {
+    localStorage.removeItem(data);
+    localStorage.clear();
+  }
+
+  online_service(url: string, data = null) {
+    const sendData = {'url': url, 'data': data};
+    const web_url = 'online_service';
+    return this.http.post(`${apiConfig + web_url}`, sendData, httpOptions).pipe(map((response: any) => response));
+  }
+
+  online_service_dup(url: string, data = null) {
+    return this.http.post(`${serverApiDev + url}`, data).pipe(map((response: any) => response));
+ }
+
+  ObjArray(data: any) {
+    if (data instanceof Array !== true) {
+      if (data !== undefined) {
+        return new Array(data);
+      } else {
+        return undefined;
+      }
+    } else {
+      return data;
+    }
+  }
+}