manuel/converter
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

externalized templates and styles (styles are still empty)

Browse source
This commit is contained in:
Manuel Friedli 2016-09-15 12:55:13 +02:00
parent 0cf6eeaedf
commit dd4ffd9989
7 changed files with 25 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
app/app.component.css Normal file
View file

3
app/app.component.html Normal file
View file

@ -0,0 +1,3 @@
<div>
<den-inputarea></den-inputarea>
</div>

8
app/app.component.ts
View file

@ -5,12 +5,10 @@ import {InputareaComponent} from "./inputarea.component";
//import { SelectorComponent } from "./selector.component"; //import { SelectorComponent } from "./selector.component";
@Component({ @Component({
moduleId: module.id,
selector: "den-app", selector: "den-app",
template: ` templateUrl: "app.component.html",
<div> styleUrls: ["app.component.css"]
<den-inputarea></den-inputarea>
</div>
`
}) })
export class AppComponent { export class AppComponent {
// private inputAreas:InputareaComponent[] = []; // private inputAreas:InputareaComponent[] = [];

2
app/conversioninput.ts
View file

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

0
app/inputarea.component.css Normal file
View file

8
app/inputarea.component.html Normal file
View file

@ -0,0 +1,8 @@
<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>

26
app/inputarea.component.ts
View file

@ -1,37 +1,31 @@
import { Component } from "@angular/core"; import {Component} from "@angular/core";
import { ConversionInput } from "./conversioninput"; import {ConversionInput} from "./conversioninput";
import { ConversionType } from "./conversiontype"; import {ConversionType} from "./conversiontype";
@Component({ @Component({
moduleId: module.id,
selector: "den-inputarea", selector: "den-inputarea",
template: ` templateUrl: "inputarea.component.html",
<div id="wrapper-{{index}}" class="wrapper"> styleUrls: ["inputarea.component.css"]
<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 { export class InputareaComponent {
public index:number = 0; public index:number = 0;
public conversions:ConversionType[] = [ConversionType.ENCODE_BASE64, ConversionType.DECODE_BASE64]; public conversions:ConversionType[] = [ConversionType.ENCODE_BASE64, ConversionType.DECODE_BASE64];
private conversion:ConversionInput; private conversion:ConversionInput;
private ConversionType:ConversionType = ConversionType; private ConversionType:ConversionType = ConversionType;
constructor() { constructor() {
console.log("Aloha, " + this.index); console.log("Aloha, " + this.index);
this.conversion = new ConversionInput(); this.conversion = new ConversionInput();
this.conversion.content = ""; this.conversion.content = "";
this.conversion.type = ConversionType.DECODE_BASE64; this.conversion.type = ConversionType.DECODE_BASE64;
} }
public update():void { public update():void {
console.log(this.conversion.content); console.log(this.conversion.content);
} }
public convert(e):void { public convert(e):void {
this.conversion.type = ConversionType.of(+e.target.selectedOptions[0].id); this.conversion.type = ConversionType.of(+e.target.selectedOptions[0].id);
console.log(this.conversion.type); console.log(this.conversion.type);
@ -47,7 +41,7 @@ export class InputareaComponent {
break; break;
} }
} }
public setIndex(index:number):void { public setIndex(index:number):void {
this.index = index; this.index = index;
} }