vir-front-end documentation
  1. Components
  2. TextComponent

File

src/app/layout/text/text.component.ts

Implements

OnInit

Metadata

selector app-text
styleUrls text.component.scss
templateUrl ./text.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(_textService: TextService, router: Router)
Defined in src/app/layout/text/text.component.ts:19
Parameters :
Name Type Optional Description
_textService TextService
router Router

Inputs

textArea

Type: string

Defined in src/app/layout/text/text.component.ts:16

Methods

analyzeText
analyzeText(url: string)
Defined in src/app/layout/text/text.component.ts:23
Parameters :
Name Type Optional Description
url string
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/layout/text/text.component.ts:47
Returns : void

Properties

error
error: boolean
Type : boolean
Defined in src/app/layout/text/text.component.ts:19
processing
processing: boolean
Type : boolean
Defined in src/app/layout/text/text.component.ts:18
Public router
router: Router
Type : Router
Defined in src/app/layout/text/text.component.ts:20
text
text: IText
Type : IText
Defined in src/app/layout/text/text.component.ts:17
 
import { Component, Input, NgModule, OnInit} from '@angular/core';
import { routerTransition } from '../../router.animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { TextService, IText } from '../../shared'
import { Router } from '@angular/router';

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

  @Input() textArea: string;
  text: IText;
  processing: boolean;
  error: boolean;
  constructor(private _textService: TextService, public router: Router) { }

  // Function for enhanced text
  analyzeText(url: string): void {
    this.processing = true;
    this.error = false;
    this._textService.enhancedText(this.textArea)
      .subscribe
      (res => {
        this.text = res;
        this._textService.resultText = this.text;
        this.processing = false;
        this.router.navigateByUrl(url);
      },
      (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');
        }
      }
      );
  }


  ngOnInit() {
    window.scrollTo(0, 0);
  }


}



<div [@routerTransition]>

	<!--Alert-->
	<div class="alert alert-danger" role="alert" *ngIf='error'>
		<strong>Oh snap!</strong> We don't support alien characters, yet. Please enter your text again.
	</div>

	<div class="row">
		<div class="card card-info card-inverse mb-3 col-lg-12 center-block">
			<div class="card-header">
				<i class="fa fa-fw fa-keyboard-o fa-2x float-right" title="Enter your text"></i>Enter your text&nbsp;&nbsp;
				<i class="fa fa-spinner fa-spin" style="font-size:32px;color:white" *ngIf='processing'></i>
				<span class="badge badge-default">MAX 30,000 Characters</span>
			</div>

			<div class="card-block bg-white">

				<div class="form-group">
					<div class="col-md-12">
						<textarea class="form-control" name="textArea" id="exampleTextarea" rows="10" maxlength="30000" [(ngModel)]="textArea" 
						 placeholder="Enter your text here (required). You must input at least 100 words of text to run readability test." required></textarea>
					</div>
				</div>


				<!-- Button (Double) -->
				<div class="row">
					<div class="col-md-12 ">
						<div class="float-right">
							<button type="button" class="btn-block btn btn-secondary " (click)="analyzeText('/enhanced-text-result')" [disabled]="!textArea">
								<i class="fa fa-file-text" aria-hidden="true"></i> Enhanced Text</button>
							<button type="button" class="btn-block btn btn-primary" (click)="analyzeText('/text-statistics')" [disabled]="!textArea">
								<i class="fa fa-pie-chart" aria-hidden="true"></i> Statistics</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row" style="margin-top: 10px;">
		<div>
			<h5>Instruction</h5>
		</div>
	</div>
	<hr>

	<!--Instructions Boxes-->
	<div class="row topMargin">

		<div class="col-md box1">
			<div class="col-md-12">
				<i class="fa fa-keyboard-o fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
			</div>
			<div class="col-md-12">
				<h5>Type you text</h5>
				<hr>
				<p>Maximum 30,000 characters.</p>
			</div>
		</div>
		<div class="col-md box2">
			<div class="col-md-12">
				<i class="fa fa-file-text fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
			</div>

			<div class="col-md-12">
				<h5>Press "Enhanced Text"</h5>
				<hr>
				<p>to read your text in frequency-based color coded system.</p>
			</div>
		</div>
		<div class="col-md box3">
			<div class="col-md-12">
				<i class="fa fa-pie-chart fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
			</div>
			<div class="col-md-12">
				<h5>Press "Statistics"</h5>
				<hr>
				<p>to see if the text is suitable for you and view a detailed analysis of the text.</p>
			</div>
		</div>

	</div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""