diff --git a/.gitignore b/.gitignore index a74b159..7404c57 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ node_modules/ typings/ app/**/*.js app/**/*.js.map +npm-debug.log diff --git a/app/InputcomponentmanagerService.ts b/app/InputcomponentmanagerService.ts new file mode 100644 index 0000000..a1717b8 --- /dev/null +++ b/app/InputcomponentmanagerService.ts @@ -0,0 +1,41 @@ +import {Injectable} from "@angular/core"; +@Injectable() +export class InputcomponentmanagerService { + private components:any[] = []; + + public constructor() { + } + + public register(component:any):void { + this.components.push(component); + } + + public getAllComponents():any[] { + return this.components; + } + + public getNext(component:any):any { + let index:number = component.index; + if (index == this.components.length - 1) { + this.addComponent(); + } + return this.components[index + 1]; + } + + public getFirst():any { + if (this.components.length == 0) { + this.addComponent(); + } + return this.components[0]; + } + + private addComponent():void { + this.register({ + content: "", + selectedConverter: undefined, + index: this.components.length, + error: false, + message: "" + }); + } +} \ No newline at end of file diff --git a/app/app.component.html b/app/app.component.html index 47161cb..13f8984 100644 --- a/app/app.component.html +++ b/app/app.component.html @@ -1,3 +1,9 @@ -
- +
+ + +
{{step.message}}
diff --git a/app/app.component.ts b/app/app.component.ts index dc913bf..2c8f5a1 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,26 +1,57 @@ -import {Component} from "@angular/core"; -import {OnInit}from "@angular/core"; - +import {Component, OnInit} from "@angular/core"; import {ConverterregistryService} from "./converterregistry.service"; -import {Converter} from "./converter"; +import {InputcomponentmanagerService} from "./InputcomponentmanagerService"; +import {Converter} from "./converter/converter"; @Component({ moduleId: module.id, selector: "den-app", templateUrl: "app.component.html", styleUrls: ["app.component.css"], - providers: [ConverterregistryService] + providers: [ConverterregistryService, InputcomponentmanagerService] }) export class AppComponent extends OnInit { - constructor(private converterregistryService:ConverterregistryService) { + public steps:any[] = []; + public converters:Converter[] = []; + + constructor(private converterregistryService:ConverterregistryService, private inputcomponentmanagerService:InputcomponentmanagerService) { super(); } - ngOnInit():void { - let converters:Converter[] = this.converterregistryService.getConverters(); - console.log("Number of registered converters: " + converters.length); - for (let i = 0; i < converters.length; i++) { - console.log("Converter " + converters[i].getId() + ": " + converters[i].getDisplayname()); + convert(step:any, $event:any):void { + step.selectedConverter = this.converterregistryService.getConverter($event.target.selectedOptions[0].id); + this.update(step); + } + + update(step:any):void { + let converter:Converter = step.selectedConverter; + + if (converter !== undefined) { + let content:string = step.content; + let result:string; + try { + result = converter.convert(content); + } catch (error) { + result = null; + } + if (result === null) { + step.message = "Error converting. Not applicable?"; + step.error = true; + } else { + step.message = ""; + step.error = false; + if (result !== "") { + let nextComponent:any = this.inputcomponentmanagerService.getNext(step); + nextComponent.content = result; + this.update(nextComponent); + } + } } } + + ngOnInit():void { + this.converters = this.converterregistryService.getAllConverters(); + this.steps = this.inputcomponentmanagerService.getAllComponents(); + this.inputcomponentmanagerService.getFirst(); + } } diff --git a/app/app.module.ts b/app/app.module.ts index 4cf0a38..8988169 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -1,8 +1,7 @@ -import {NgModule} from '@angular/core' -import {BrowserModule} from '@angular/platform-browser' -import {FormsModule} from '@angular/forms' - -import {AppComponent} from './app.component' +import {NgModule} from "@angular/core"; +import {BrowserModule} from "@angular/platform-browser"; +import {FormsModule} from "@angular/forms"; +import {AppComponent} from "./app.component"; import {InputareaComponent} from "./inputarea.component"; @NgModule({ diff --git a/app/base64decoder.ts b/app/converter/base64decoder.ts similarity index 86% rename from app/base64decoder.ts rename to app/converter/base64decoder.ts index eba3379..1b4e5b1 100644 --- a/app/base64decoder.ts +++ b/app/converter/base64decoder.ts @@ -1,4 +1,4 @@ -import {Converter} from './converter'; +import {Converter} from "./converter"; export class Base64Decoder implements Converter { getDisplayname():string { diff --git a/app/base64encoder.ts b/app/converter/base64encoder.ts similarity index 86% rename from app/base64encoder.ts rename to app/converter/base64encoder.ts index bb9de8f..409636d 100644 --- a/app/base64encoder.ts +++ b/app/converter/base64encoder.ts @@ -1,4 +1,4 @@ -import {Converter} from './converter'; +import {Converter} from "./converter"; export class Base64Encoder implements Converter { getDisplayname():string { diff --git a/app/converter.ts b/app/converter/converter.ts similarity index 100% rename from app/converter.ts rename to app/converter/converter.ts diff --git a/app/converterregistry.service.ts b/app/converterregistry.service.ts index 44ad46d..8bd7f7f 100644 --- a/app/converterregistry.service.ts +++ b/app/converterregistry.service.ts @@ -1,8 +1,7 @@ -import {Injectable} from '@angular/core'; - -import {Converter} from './converter'; -import {Base64Encoder} from "./base64encoder"; -import {Base64Decoder} from "./base64decoder"; +import {Injectable} from "@angular/core"; +import {Converter} from "./converter/converter"; +import {Base64Encoder} from "./converter/base64encoder"; +import {Base64Decoder} from "./converter/base64decoder"; @Injectable() export class ConverterregistryService { @@ -12,7 +11,7 @@ export class ConverterregistryService { this.init(); } - public getConverters():Converter[] { + public getAllConverters():Converter[] { return this.converters; } diff --git a/app/inputarea.component.html b/app/inputarea.component.html index da0a65a..d8e65ee 100644 --- a/app/inputarea.component.html +++ b/app/inputarea.component.html @@ -1,8 +1,15 @@ -
- - -
+ + + + + + + + + + + diff --git a/app/inputarea.component.ts b/app/inputarea.component.ts index c07a4da..d3a3e1e 100644 --- a/app/inputarea.component.ts +++ b/app/inputarea.component.ts @@ -1,6 +1,7 @@ -import {Component} from "@angular/core"; -import {ConversionInput} from "./conversioninput"; -import {ConversionType} from "./conversiontype"; +import {Component, OnInit} from "@angular/core"; +import {ConverterregistryService} from "./converterregistry.service"; +import {Converter} from "./converter/converter"; +import {InputcomponentmanagerService} from "./InputcomponentmanagerService"; @Component({ @@ -9,40 +10,38 @@ import {ConversionType} from "./conversiontype"; templateUrl: "inputarea.component.html", styleUrls: ["inputarea.component.css"] }) -export class InputareaComponent { - public index:number = 0; - public conversions:ConversionType[] = [ConversionType.ENCODE_BASE64, ConversionType.DECODE_BASE64]; - private conversion:ConversionInput; - // private ConversionType:ConversionType = ConversionType; +export class InputareaComponent extends OnInit { + public converters:Converter[] = []; + public content:string = ''; + private selectedConverter:Converter; - constructor() { - console.log("Aloha, " + this.index); - this.conversion = new ConversionInput(); - this.conversion.content = ""; - this.conversion.type = ConversionType.DECODE_BASE64; - } - - public update():void { - console.log(this.conversion.content); + constructor(private converterregistryService:ConverterregistryService, private inputcomponentmanagerService:InputcomponentmanagerService) { + super(); } public convert(e):void { - this.conversion.type = ConversionType.of(+e.target.selectedOptions[0].id); - console.log(this.conversion.type); - switch (this.conversion.type) { - case ConversionType.DECODE_BASE64: - this.conversion.content = "Base64 decode"; - break; - case ConversionType.ENCODE_BASE64: - this.conversion.content = "Base64 encode"; - break; - default: - this.conversion.content = "Unknown: " + this.conversion.type; - break; + this.selectedConverter = this.converterregistryService.getConverter(e.target.selectedOptions[0].id); + this.update(); + } + + public update():void { + if (this.selectedConverter !== undefined) { + let result:string = this.selectedConverter.convert(this.content); + let nextComponent:InputareaComponent = this.inputcomponentmanagerService.getNext(this); + if (nextComponent !== undefined) { + nextComponent.setContent(result); + } } } - public setIndex(index:number):void { - this.index = index; + public setContent(content:string):void { + this.content = content; + this.update(); + } + + ngOnInit():void { + this.converters = this.converterregistryService.getAllConverters(); + this.selectedConverter = undefined; + this.inputcomponentmanagerService.register(this); } } diff --git a/app/main.ts b/app/main.ts index 244ca48..c31c26f 100644 --- a/app/main.ts +++ b/app/main.ts @@ -1,5 +1,4 @@ import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"; - import {AppModule} from "./app.module"; platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/dencode.css b/dencode.css index 8fadfda..261f217 100644 --- a/dencode.css +++ b/dencode.css @@ -59,6 +59,13 @@ div.wrapper { padding: 0.5em; } +div.wrapper div.message { + display: inline-block; + color: #f00; + background-color: #fff; + border: 1px solid #f00; +} + textarea.input { border-style: solid; border-width: 1px;