### File

`src/app/layout/enhanced-text-result/enhanced-text-result.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-enhanced-text-result`
styleUrls | `enhanced-text-result.component.scss`
templateUrl | `./enhanced-text-result.component.html`

### Index

###### Properties
Public _definitionService Public BACK_LABEL backLabel category cleanWord closeResult error processing Public router showOnlyIcons Public STATISTICS_LABEL statisticsLabel text wordCategory wordDefinition
###### Methods
activeCategory backClicked getDefinition Private getDismissReason ngOnInit onResize open Private updaTeLabels

### Constructor

`constructor(_textService: TextService, _definitionService: DefinitionService, router: Router, _location: Location, modalService: NgbModal)`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:29
Parameters :
Name | Type | Optional | Description
_textService | `TextService` |  |
_definitionService | `DefinitionService` |  |
router | `Router` |  |
_location | `Location` |  |
modalService | `NgbModal` |  |

### Methods

activeCategory
`activeCategory(cat: string)`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:106
Parameters :
Name | Type | Optional | Description
cat | `string` |  |
Returns : `void`

backClicked
`backClicked()`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:70
Returns : `void`

getDefinition
`getDefinition(word: string)`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:45
Parameters :
Name | Type | Optional | Description
word | `string` |  |
Returns : `void`

Private getDismissReason
`getDismissReason(reason: any)`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:95
Parameters :
Name | Type | Optional | Description
reason | `any` |  |
Returns : `string`

ngOnInit
`ngOnInit()`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:36
Returns : `void`

onResize
`onResize(event: )`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:74
Parameters :
Name | Type | Optional | Description
event |  |  |
Returns : `void`

open
`open(content: )`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:87
Parameters :
Name | Type | Optional | Description
content |  |  |
Returns : `void`

Private updaTeLabels
`updaTeLabels()`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:81
Returns : `void`

### Properties

Public _definitionService
`_definitionService: `DefinitionService``
Type : `DefinitionService`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:33

Public BACK_LABEL
`BACK_LABEL: `string``
Type : `string`
Default value : `Back`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:15

backLabel
`backLabel: `string``
Type : `string`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:24

category
`category: `string``
Type : `string`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:28

cleanWord
`cleanWord: `string``
Type : `string`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:26

closeResult
`closeResult: `string``
Type : `string`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:27

error
`error: `boolean``
Type : `boolean`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:22

processing
`processing: `boolean``
Type : `boolean`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:19

Public router
`router: `Router``
Type : `Router`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:33

showOnlyIcons
`showOnlyIcons: `boolean``
Type : `boolean`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:23

Public STATISTICS_LABEL
`STATISTICS_LABEL: `string``
Type : `string`
Default value : `Statistics`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:16

statisticsLabel
`statisticsLabel: `string``
Type : `string`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:25

text
`text: `IText``
Type : `IText`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:21

wordCategory
`wordCategory: `string``
Type : `string`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:29

wordDefinition
`wordDefinition: `IDefinition``
Type : `IDefinition`
Defined in src/app/layout/enhanced-text-result/enhanced-text-result.component.ts:20

    import { HttpErrorResponse } from '@angular/common/http';
    import { Component, OnInit } from '@angular/core';
    import { TextService, IText, IWordMatch, IDefinition, DefinitionService } from '../../shared'
    import { Router } from '@angular/router';
    import { Location } from '@angular/common';
    import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

    @Component({
      selector: 'app-enhanced-text-result',
      templateUrl: './enhanced-text-result.component.html',
      styleUrls: ['./enhanced-text-result.component.scss']
    })
    export class EnhancedTextResultComponent implements OnInit {

      public static BACK_LABEL: string = ' Back';
      public static readonly STATISTICS_LABEL: string = ' Statistics';

      processing: boolean;
      wordDefinition: IDefinition;
      text: IText;
      error: boolean;
      showOnlyIcons: boolean;
      backLabel: string = EnhancedTextResultComponent.BACK_LABEL;
      statisticsLabel: string = EnhancedTextResultComponent.STATISTICS_LABEL;
      cleanWord: string;
      closeResult: string;
      category: string;
      wordCategory: string;

      // tslint:disable-next-line:max-line-length
      constructor(private _textService: TextService, public _definitionService: DefinitionService, public router: Router, private _location: Location,
        private modalService: NgbModal) { }

      ngOnInit() {
        window.scrollTo(0, 0);
        this.showOnlyIcons = window.innerWidth <= 680;
        this.updaTeLabels();
        this.text = this._textService.resultText;
        this.getDefinition('book')
      }

      // it gets the definition of  the word using DefinitionService
      getDefinition(word: string) {
        this.processing = true;
        this.error = false;
        this.cleanWord = word.replace(/[^a-zA-Z ]/g, '');
        this._definitionService.getDefinitionService(this.cleanWord)
          .subscribe
          (res => {
            this.wordDefinition = res;
            this.processing = false;
          },
          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log('Client-side Error occured');
            } else {
              this.error = true;
              this.processing = false;
              console.log('Server-side Error occured');
            }
          }
          );

      }

      // return to the previous page
      backClicked() {
        this._location.back();
      }

      onResize(event) {
        this.showOnlyIcons = window.innerWidth <= 680;
        this.updaTeLabels();
        event.target.innerWidth;
      }

      private updaTeLabels(): void {
        this.backLabel = this.showOnlyIcons ? '' : EnhancedTextResultComponent.BACK_LABEL;
        this.statisticsLabel = this.showOnlyIcons ? '' : EnhancedTextResultComponent.STATISTICS_LABEL;
      }

      // definiton Model open
      open(content) {
        this.modalService.open(content).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}`;
        }
      }

      // Convert the active category name "hi,med,low,..." to "High Frequency,.." used for popup title.
      activeCategory(cat: string) {
          this.category = cat;
          // tslint:disable-next-line:max-line-length
          this.wordCategory = ( cat === 'awl') ? 'AWL' : ( cat === 'hi') ? 'High Frequency' : ( cat === 'med') ? 'Medium Frequency' : ( cat === 'low') ? 'Low Frequency' : 'Names & Off-Lists';
      }
    }

    <!--if it sees the object it will show the result, else it prompt the user to go back-->
    <div *ngIf="text;  else elseBlock">
    	<div class="row">
    		<div class="col-8 col-md-8">
    			<h2>Enhanced Text</h2>
    		</div>
    		<div class="col-4 col-md-4" (window:resize)="onResize($event)">
    			<div class="float-right">
    				<button type="button" class="btn btn-warning" (click)="backClicked()">
    					<i class="fa fa-step-backward" aria-hidden="true"></i>{{backLabel}}</button>
    				<button type="button" class="btn btn-primary" [routerLink]="['/text-statistics']">
    					<i class="fa fa-pie-chart" aria-hidden="true"></i>{{statisticsLabel}}</button>
    			</div>
    		</div>
    	</div>
    	<hr>

    	<!--Category Colors Information -->
    	<div class="container center">
    		<div class="row center font-responsive">
    			<div class="col-xl-2 col-md-4 col-6">
    				<span (click)="activeCategory('awl'); open(wordList);">
    					<a href="javascript:void(0)">Academic Word</a>
    				</span>
    				<div class="box awlBox"></div>
    			</div>
    			<div class="col-xl-2 col-md-4 col-6">
    				<span (click)="activeCategory('hi'); open(wordList);">
    					<a href="javascript:void(0)">High Frequency</a>
    				</span>
    				<span class="box hiBox"></span>
    			</div>
    			<div class="col-xl-2 col-md-4 col-6">
    				<span (click)="activeCategory('med'); open(wordList);">
    					<a href="javascript:void(0)">Med Frequency</a>
    				</span>
    				<div class="box medBox"></div>
    			</div>
    			<div class="col-xl-2 col-md-4 col-6">
    				<span (click)="activeCategory('low'); open(wordList);">
    					<a href="javascript:void(0)">Low Frequency</a>
    				</span>
    				<div class="box lowBox"></div>
    			</div>
    			<div class="col-xl-2 col-md-4 col-6">
    				<span (click)="activeCategory(''); open(wordList);">
    					<a href="javascript:void(0)">Names & Off-List</a>
    				</span>
    				<div class="box offBox"></div>
    			</div>
    		</div>
    	</div>
    	<hr>

    	<!--Word Lists popups-->
    	<ng-template #wordList let-c="close" let-d="dismiss">
    		<div class="modal-header">
    			<h4 class="modal-title">
    				{{wordCategory}} Words in this text &nbsp;&nbsp;
    			</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">

    			<!--word List-->
    			<div *ngFor='let word of text.words'>
    				<span *ngIf="word.category == category" [class]="word.category" (click)="getDefinition(word.initialValue); open(content); ">
    					<a href="javascript:void(0)">{{word.initialValue}}<hr></a>
    				</span>
    				<span class="oneLine" *ngIf="word.initialValue == ''">
    					<br>
    				</span>
    			</div>
    		</div>
    		<div class="modal-footer">
    			<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
    		</div>
    	</ng-template>

    	<!--Definition model (Popup)-->
    	<ng-template #content let-c="close" let-d="dismiss">
    		<div class="modal-header">
    			<h4 class="modal-title">
    				<img src="assets/images/Wikipedia-logo.png" title="Wikipedia Dictionary" style="width:50px;height:50px;"> Definition &nbsp;&nbsp;
    				<i class="fa fa-spinner fa-spin" style="font-size:32px;color:black" *ngIf='processing'></i>
    			</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">
    			<!--Alert-->
    			<div class="alert alert-warning" role="alert" *ngIf='error'>
    				<strong>Oh snap!</strong> We couldn't find the definition, please try another word.
    			</div>
    			<!--Definition-->
    			<p *ngIf='!error && !processing' class="card-text" [innerHTML]="wordDefinition.wiki.html"></p>
    		</div>
    		<div class="modal-footer">
    			<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
    		</div>
    	</ng-template>

    	<!--Print each word from the words object and color it base on the category-->
    	<div class="enhancedTextbox equalLength">
    		<div class="oneLine" *ngFor='let word of text.words'>
    			<span [class]="word.category" (click)="getDefinition(word.initialValue); open(content);">
    				<a href="javascript:void(0)">{{word.initialValue}}</a>
    			</span>
    			<span class="oneLine" *ngIf="word.initialValue == ''">
    				<br>
    			</span>
    		</div>
    	</div>

    </div>

    <!--if page refreshes it prompt the user to go to the previous page-->
    <ng-template #elseBlock>
    	<!-- <meta http-equiv="refresh" content="0;url=http://www.myvirs.com/dashboard" /> -->
    	<div class="row">
    		<div class="col-6">
    			<h1>Oops!</h1>
    		</div>
    		<div class="col-6" (window:resize)="onResize($event)">
    			<div class="float-right">
    				<button type="button" class="btn btn-warning" (click)="backClicked()">
    					<i class="fa fa-step-backward" aria-hidden="true"></i>{{backLabel}}</button>
    			</div>
    		</div>
    	</div>
    	<hr>

    	<div>
    		<h4> Redirecting to homepage in 3 seconds...</h4>
    	</div>
    </ng-template>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""