diff --git a/src/app/app.component.html b/src/app/app.component.html
index c96ed95..35fc20f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,18 +1,7 @@
<div *ngFor="let step of steps" class="inputwrapper">
- <div class="textwrapper arrow_box">
- <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
- [(ngModel)]="step.content">{{step.content}}</textarea>
- </div>
- <div [ngClass]="{selectwrapper: true, error: step.error}">
- <div class="arrow_box">
- <select class="select" (change)="convert(step, $event)">
- <option id="undefined">Select conversion ...</option>
- <option class="option" *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}
- </option>
- </select>
- </div>
- </div>
- <div class="errormessage" *ngIf="step.error" [innerHTML]="step.message"></div>
+ <app-text-input-field [step]="step" #ti></app-text-input-field>
+ <app-converter-selector [step]="step" [textInput]="ti"></app-converter-selector>
+ <app-error-message [step]="step"></app-error-message>
</div>
<app-version></app-version>
<!--<router-outlet></router-outlet>-->
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 9a81a0c..63be152 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -2,106 +2,3 @@
font-family: "ABeeZee", sans-serif;
margin: 0 1em 1em 1em;
}
-
-.textwrapper {
- margin: 0 0 1em 0;
- padding: 0 1em 0 0;
-}
-
-.arrow_box {
- position: relative;
- background: #fff;
- border: 1px solid #aaa;
- &:focus {
- border-color: #888;
- }
- &:hover {
- border-color: #333;
- }
- &:after, &:before {
- top: 100%;
- left: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
- &:after {
- border-color: rgba(255, 255, 255, 0);
- border-top-color: #fff;
- border-width: 1em;
- margin-left: -1em;
- }
- &:before {
- border-color: rgba(170, 170, 170, 0);
- border-top-color: #aaa;
- border-width: calc(1em + 1px);
- margin-left: calc(-1em - 1px);
- }
- &:focus:before {
- border-color: rgba(136, 136, 136, 0);
- border-top-color: #888;
- }
- &:hover:before {
- border-color: rgba(51, 51, 51, 0);
- border-top-color: #333;
- }
- .selectwrapper > & {
- display: inline-block;
- }
-}
-
-.textinput {
- background-color: #fff;
- border: none;
- color: #000;
- font-family: "Free Monospaced", monospace;
- height: 10em;
- margin: 0;
- padding: 0.5em;
- resize: vertical;
- width: 100%;
- &:focus {
- border-color: #888;
- }
- &:hover {
- border-color: #333;
- }
-}
-
-.selectwrapper {
- margin: 0 0 1em 0;
- padding: 0;
- text-align: center;
- &.error {
- > .arrow_box {
- border-color: red;
- &:before {
- border-top-color: red;
- }
- }
- select {
- color: red;
- }
- }
-}
-
-.select {
- background-color: #fff;
- border: none;
- color: #000;
- font-family: "ABeeZee", sans-serif;
- margin: 0;
- padding: 0.5em;
-}
-
-.option {
- /* font-family: "ABeeZee", sans-serif;*/
-}
-
-.errormessage {
- color: red;
- text-align: center;
-}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 820811b..051970e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,6 @@
import {Component, OnInit} from '@angular/core';
-import {ConverterRegistryService} from './converter-registry.service';
import {InputComponentManagerService} from './input-component-manager.service';
import {Step} from './step';
-import {Converter} from './converter/converter';
@Component({
selector: 'app-root',
@@ -11,47 +9,11 @@ import {Converter} from './converter/converter';
})
export class AppComponent implements OnInit {
public steps: Step[] = [];
- public converters: Converter[] = [];
- constructor(private converterRegistryService: ConverterRegistryService,
- private inputComponentManagerService: InputComponentManagerService) {
- }
-
- convert(step: Step, $event: any): void {
- step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
- this.update(step);
- }
-
- update(step: Step): void {
- const converter: Converter = step.selectedConverter;
-
- if (converter !== undefined) {
- const content: string = step.content;
- let result: string;
- try {
- result = converter.convert(content);
- } catch (error) {
- if (typeof console === 'object' && typeof console.log === 'function') {
- console.log(error);
- }
- step.message = error.message;
- step.error = true;
- result = null;
- }
- if (result !== null) {
- step.message = '';
- step.error = false;
- if (result !== '') {
- const nextComponent: Step = this.inputComponentManagerService.getNext(step);
- nextComponent.content = result;
- this.update(nextComponent);
- }
- }
- }
+ constructor(private inputComponentManagerService: InputComponentManagerService) {
}
ngOnInit(): void {
- this.converters = this.converterRegistryService.getAllConverters();
this.steps = this.inputComponentManagerService.getAllComponents();
this.inputComponentManagerService.getFirst();
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5e40ab8..875f69f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,11 +6,17 @@ import {InputComponentManagerService} from './input-component-manager.service';
import {NativeLibraryWrapperService} from './native-library-wrapper.service';
import {FormsModule} from '@angular/forms';
import {VersionComponent} from './version/version.component';
+import { TextInputFieldComponent } from './text-input-field/text-input-field.component';
+import { ConverterSelectorComponent } from './converter-selector/converter-selector.component';
+import { ErrorMessageComponent } from './error-message/error-message.component';
@NgModule({
declarations: [
AppComponent,
- VersionComponent
+ VersionComponent,
+ TextInputFieldComponent,
+ ConverterSelectorComponent,
+ ErrorMessageComponent
],
imports: [
BrowserModule,
diff --git a/src/app/converter-selector/converter-selector.component.html b/src/app/converter-selector/converter-selector.component.html
new file mode 100644
index 0000000..b15dd1b
--- /dev/null
+++ b/src/app/converter-selector/converter-selector.component.html
@@ -0,0 +1,9 @@
+<div [ngClass]="{selectwrapper: true, error: step.error}">
+ <div class="arrow_box">
+ <select class="select" (change)="convert(step, $event)">
+ <option id="undefined">Select conversion ...</option>
+ <option class="option" *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}
+ </option>
+ </select>
+ </div>
+</div>
diff --git a/src/app/converter-selector/converter-selector.component.scss b/src/app/converter-selector/converter-selector.component.scss
new file mode 100644
index 0000000..b31f217
--- /dev/null
+++ b/src/app/converter-selector/converter-selector.component.scss
@@ -0,0 +1,74 @@
+.selectwrapper {
+ margin: 0 0 1em 0;
+ padding: 0;
+ text-align: center;
+ &.error {
+ > .arrow_box {
+ border-color: red;
+ &:before {
+ border-top-color: red;
+ }
+ }
+ select {
+ color: red;
+ }
+ }
+}
+
+.select {
+ background-color: #fff;
+ border: none;
+ color: #000;
+ font-family: "ABeeZee", sans-serif;
+ margin: 0;
+ padding: 0.5em;
+}
+
+.arrow_box {
+ position: relative;
+ background: #fff;
+ border: 1px solid #aaa;
+ &:focus {
+ border-color: #888;
+ }
+ &:hover {
+ border-color: #333;
+ }
+ &:after, &:before {
+ top: 100%;
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ }
+ &:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-top-color: #fff;
+ border-width: 1em;
+ margin-left: -1em;
+ }
+ &:before {
+ border-color: rgba(170, 170, 170, 0);
+ border-top-color: #aaa;
+ border-width: calc(1em + 1px);
+ margin-left: calc(-1em - 1px);
+ }
+ &:focus:before {
+ border-color: rgba(136, 136, 136, 0);
+ border-top-color: #888;
+ }
+ &:hover:before {
+ border-color: rgba(51, 51, 51, 0);
+ border-top-color: #333;
+ }
+ .selectwrapper > & {
+ display: inline-block;
+ }
+}
+
+.option {
+ /* font-family: "ABeeZee", sans-serif;*/
+}
diff --git a/src/app/converter-selector/converter-selector.component.spec.ts b/src/app/converter-selector/converter-selector.component.spec.ts
new file mode 100644
index 0000000..410aaa7
--- /dev/null
+++ b/src/app/converter-selector/converter-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConverterSelectorComponent } from './converter-selector.component';
+
+describe('ConverterSelectorComponent', () => {
+ let component: ConverterSelectorComponent;
+ let fixture: ComponentFixture<ConverterSelectorComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ConverterSelectorComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ConverterSelectorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/converter-selector/converter-selector.component.ts b/src/app/converter-selector/converter-selector.component.ts
new file mode 100644
index 0000000..c3b6230
--- /dev/null
+++ b/src/app/converter-selector/converter-selector.component.ts
@@ -0,0 +1,30 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Step} from '../step';
+import {Converter} from '../converter/converter';
+import {ConverterRegistryService} from '../converter-registry.service';
+import {TextInputFieldComponent} from '../text-input-field/text-input-field.component';
+
+@Component({
+ selector: 'app-converter-selector',
+ templateUrl: './converter-selector.component.html',
+ styleUrls: ['./converter-selector.component.scss']
+})
+export class ConverterSelectorComponent implements OnInit {
+ @Input()
+ public step: Step;
+ @Input()
+ private textInput: TextInputFieldComponent;
+ public converters: Converter[] = [];
+
+ constructor(private converterRegistryService: ConverterRegistryService) {
+ }
+
+ convert(step: Step, $event: any): void {
+ step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
+ this.textInput.update(step);
+ }
+
+ ngOnInit() {
+ this.converters = this.converterRegistryService.getAllConverters();
+ }
+}
diff --git a/src/app/error-message/error-message.component.html b/src/app/error-message/error-message.component.html
new file mode 100644
index 0000000..6c306bd
--- /dev/null
+++ b/src/app/error-message/error-message.component.html
@@ -0,0 +1 @@
+<div class="errormessage" *ngIf="step.error" [innerHTML]="step.message"></div>
diff --git a/src/app/error-message/error-message.component.scss b/src/app/error-message/error-message.component.scss
new file mode 100644
index 0000000..ef9b713
--- /dev/null
+++ b/src/app/error-message/error-message.component.scss
@@ -0,0 +1,4 @@
+.errormessage {
+ color: red;
+ text-align: center;
+}
diff --git a/src/app/error-message/error-message.component.spec.ts b/src/app/error-message/error-message.component.spec.ts
new file mode 100644
index 0000000..d90c1d5
--- /dev/null
+++ b/src/app/error-message/error-message.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorMessageComponent } from './error-message.component';
+
+describe('ErrorMessageComponent', () => {
+ let component: ErrorMessageComponent;
+ let fixture: ComponentFixture<ErrorMessageComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ErrorMessageComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ErrorMessageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/error-message/error-message.component.ts b/src/app/error-message/error-message.component.ts
new file mode 100644
index 0000000..8db15df
--- /dev/null
+++ b/src/app/error-message/error-message.component.ts
@@ -0,0 +1,15 @@
+import {Component, Input} from '@angular/core';
+import {Step} from '../step';
+
+@Component({
+ selector: 'app-error-message',
+ templateUrl: './error-message.component.html',
+ styleUrls: ['./error-message.component.scss']
+})
+export class ErrorMessageComponent {
+ @Input()
+ public step: Step;
+
+ constructor() {
+ }
+}
diff --git a/src/app/text-input-field/text-input-field.component.html b/src/app/text-input-field/text-input-field.component.html
new file mode 100644
index 0000000..7000fb7
--- /dev/null
+++ b/src/app/text-input-field/text-input-field.component.html
@@ -0,0 +1,4 @@
+<div class="textwrapper arrow_box">
+ <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
+ [(ngModel)]="step.content">{{step.content}}</textarea>
+</div>
diff --git a/src/app/text-input-field/text-input-field.component.scss b/src/app/text-input-field/text-input-field.component.scss
new file mode 100644
index 0000000..89dc5f9
--- /dev/null
+++ b/src/app/text-input-field/text-input-field.component.scss
@@ -0,0 +1,69 @@
+.textwrapper {
+ margin: 0 0 1em 0;
+ padding: 0 1em 0 0;
+}
+
+.arrow_box {
+ position: relative;
+ background: #fff;
+ border: 1px solid #aaa;
+ &:focus {
+ border-color: #888;
+ }
+ &:hover {
+ border-color: #333;
+ }
+ &:after, &:before {
+ top: 100%;
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ }
+ &:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-top-color: #fff;
+ border-width: 1em;
+ margin-left: -1em;
+ }
+ &:before {
+ border-color: rgba(170, 170, 170, 0);
+ border-top-color: #aaa;
+ border-width: calc(1em + 1px);
+ margin-left: calc(-1em - 1px);
+ }
+ &:focus:before {
+ border-color: rgba(136, 136, 136, 0);
+ border-top-color: #888;
+ }
+ &:hover:before {
+ border-color: rgba(51, 51, 51, 0);
+ border-top-color: #333;
+ }
+}
+
+.textinput {
+ background-color: #fff;
+ border: none;
+ color: #000;
+ font-family: "Free Monospaced", monospace;
+ height: 10em;
+ margin: 0;
+ padding: 0.5em;
+ resize: vertical;
+ width: 100%;
+ &:focus {
+ border-color: #888;
+ }
+ &:hover {
+ border-color: #333;
+ }
+}
+
+.errormessage {
+ color: red;
+ text-align: center;
+}
diff --git a/src/app/text-input-field/text-input-field.component.spec.ts b/src/app/text-input-field/text-input-field.component.spec.ts
new file mode 100644
index 0000000..144588c
--- /dev/null
+++ b/src/app/text-input-field/text-input-field.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextInputFieldComponent } from './text-input-field.component';
+
+describe('TextInputFieldComponent', () => {
+ let component: TextInputFieldComponent;
+ let fixture: ComponentFixture<TextInputFieldComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TextInputFieldComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TextInputFieldComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/text-input-field/text-input-field.component.ts b/src/app/text-input-field/text-input-field.component.ts
new file mode 100644
index 0000000..932db29
--- /dev/null
+++ b/src/app/text-input-field/text-input-field.component.ts
@@ -0,0 +1,45 @@
+import {Component, Input} from '@angular/core';
+import {Step} from '../step';
+import {Converter} from '../converter/converter';
+import {InputComponentManagerService} from '../input-component-manager.service';
+
+@Component({
+ selector: 'app-text-input-field',
+ templateUrl: './text-input-field.component.html',
+ styleUrls: ['./text-input-field.component.scss']
+})
+export class TextInputFieldComponent {
+ @Input()
+ public step: Step;
+
+ constructor(private inputComponentManagerService: InputComponentManagerService) {
+ }
+
+ update(step: Step): void {
+ const converter: Converter = step.selectedConverter;
+
+ if (converter !== undefined) {
+ const content: string = step.content;
+ let result: string;
+ try {
+ result = converter.convert(content);
+ } catch (error) {
+ if (typeof console === 'object' && typeof console.log === 'function') {
+ console.log(error);
+ }
+ step.message = error.message;
+ step.error = true;
+ result = null;
+ }
+ if (result !== null) {
+ step.message = '';
+ step.error = false;
+ if (result !== '') {
+ const nextComponent: Step = this.inputComponentManagerService.getNext(step);
+ nextComponent.content = result;
+ this.update(nextComponent);
+ }
+ }
+ }
+ }
+}