intermediate commit

app/app.component.ts

@@ -1,11 +1,22 @@
 import { Component } from "@angular/core";
 
+import { InputareaComponent } from "./inputarea.component";
+import {ConversionType} from "./conversiontype";
+//import { SelectorComponent } from "./selector.component";
+
 @Component({
-    "selector":"dencode-app",
+    selector: "den-app",
-    "template": `
+    template: `
-    <h1>dencode.org</h1>
+    <div>
-    `
+    <den-inputarea></den-inputarea>
+    </div>
+    `,
+    directives: [InputareaComponent]
 })
 export class AppComponent {
+    private inputAreas:InputareaComponent[] = [];
 
+    constructor() {
+        this.inputAreas.push(new InputareaComponent());
+    }
 }

app/conversioninput.ts

@@ -0,0 +1,6 @@
+import { ConversionType} from "./conversiontype";
+
+export class ConversionInput {
+    public content:string;
+    public type:ConversionType;
+}

app/conversiontype.ts

@@ -0,0 +1,28 @@
+export enum ConversionType {
+    ENCODE_BASE64,
+    DECODE_BASE64
+}
+
+export namespace ConversionType {
+    export function getName(type:ConversionType):string {
+        switch (type) {
+            case ConversionType.DECODE_BASE64:
+                return "Decode BASE64";
+            case ConversionType.ENCODE_BASE64:
+                return "Encode BASE64";
+            default:
+                return "Unknown";
+        }
+    }
+
+    export function of(id:number):ConversionType {
+        switch (id) {
+            case 0:
+                return ConversionType.ENCODE_BASE64;
+            case 1:
+                return ConversionType.DECODE_BASE64;
+            default:
+                return undefined;
+        }
+    }
+}

app/inputarea.component.ts

@@ -0,0 +1,54 @@
+import { Component } from "@angular/core";
+import { ConversionInput } from "./conversioninput";
+import { ConversionType } from "./conversiontype";
+
+
+@Component({
+    selector: "den-inputarea",
+    template: `
+        <div id="wrapper-{{index}}" class="wrapper">
+            <textarea id="input-{{index}}" class="input" (change)="update()" placeholder="Please enter your input ..." [(ngModel)]="conversion.content">{{conversion.content}}</textarea>
+            <select id="type-{{index}}" class="conversion" (change)="convert($event)">
+                <option id="-1">Select conversion ...</option>
+                <option *ngFor="let c of conversions" id="{{c}}">Type {{ConversionType[c]}}</option>
+            </select>
+        </div>
+    `
+})
+export class InputareaComponent {
+    public index:number = 0;
+    public conversions:ConversionType[] = [ConversionType.ENCODE_BASE64, ConversionType.DECODE_BASE64];
+    private conversion:ConversionInput;
+    private ConversionType:ConversionType = ConversionType;
+
+    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);
+    }
+
+    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 = "Base 64 encode";
+                break;
+            default:
+                this.conversion.content = "Unknown: " + this.conversion.type;
+                break;
+        }
+    }
+
+    public setIndex(index:number):void {
+        this.index = index;
+    }
+}

app/option.component._t_s_

@@ -0,0 +1,12 @@
+//import {Component} from "@angular/core";
+//
+//@Component({
+//    selector: "den-option",
+//    template: `
+//    <option id="{{id}}">{{displayName}}</option>
+//    `
+//})
+//export class OptionComponent {
+//    public id:string;
+//    public displayName:string;
+//}

app/selector.component._t_s_

@@ -0,0 +1,19 @@
+//import {Component} from "@angular/core";
+//
+//import {OptionComponent} from "./option.component";
+//
+//@Component({
+//    selector: "den-selector",
+//    template: `
+//    <select>
+//    <span *ngFor="#option of options">
+//        <option id="{{option.id}}">{{option.displayName}}</option>
+//    </span>
+//    </select>
+//    `,
+//    directives: [OptionComponent]
+//})
+//export class SelectorComponent {
+//    private options:OptionComponent[];
+//
+//}

index.html

@@ -27,6 +27,8 @@
     it requires you to <strong>enable Javascript</strong> to do so. So please turn it on in your
     Browser. You won't regret it!
 </noscript>
-<dencode-app>Please hold on, we're starting the turbines ...</dencode-app>
+<den-app>
+    <div style="text-align:center;">Please hold on, we're starting the turbines ...</div>
+</den-app>
 </body>
 </html>