changeset 1:44c99e3cb108

App skelton generated with angular-cli, as well as a few experiments (to be deleted).

--- a/src/app/app.component.css	Tue Oct 25 11:40:57 2016 +0100
+++ b/src/app/app.component.css	Tue Oct 25 14:42:26 2016 +0100
@@ -0,0 +1,3 @@
+app-simple-form {
+  margin-bottom: 10px;
+}

--- a/src/app/app.component.html	Tue Oct 25 11:40:57 2016 +0100
+++ b/src/app/app.component.html	Tue Oct 25 14:42:26 2016 +0100
@@ -1,3 +1,18 @@
 <h1>
   {{title}}
 </h1>
+<div>
+  <ul>
+    <li *ngFor="let message of mail.messages">{{message.text}}</li>
+  </ul>
+
+  <ul>
+    <app-simple-form
+      *ngFor="let message of mail.messages"
+      [message]="message.text"
+      (update)="onUpdate(message.id, $event.text)"
+    >{{message}}</app-simple-form>
+  </ul>
+  <hr>
+  {{serverUri}}
+</div>

--- a/src/app/app.component.ts	Tue Oct 25 11:40:57 2016 +0100
+++ b/src/app/app.component.ts	Tue Oct 25 14:42:26 2016 +0100
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, Inject} from '@angular/core';
+import {MailService} from "./mail.service";
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,13 @@
 })
 export class AppComponent {
   title = 'app works!';
+
+  constructor(
+    private mail: MailService,
+    @Inject('piper-server-uri') private serverUri
+  ) {}
+
+  onUpdate(id, text) {
+    this.mail.update(id, text);
+  }
 }

--- a/src/app/app.module.ts	Tue Oct 25 11:40:57 2016 +0100
+++ b/src/app/app.module.ts	Tue Oct 25 14:42:26 2016 +0100
@@ -4,17 +4,25 @@
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import { SimpleFormComponent } from './simple-form/simple-form.component';
+import {MailService} from "./mail.service";
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SimpleFormComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule
   ],
-  providers: [],
+  providers: [
+    MailService,
+    {provide: 'piper-server-uri', useValue: 'ws://not/a/real/path'}
+  ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+
+}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/mail.service.spec.ts	Tue Oct 25 14:42:26 2016 +0100
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { MailService } from './mail.service';
+
+describe('Service: Mail', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MailService]
+    });
+  });
+
+  it('should ...', inject([MailService], (service: MailService) => {
+    expect(service).toBeTruthy();
+  }));
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/mail.service.ts	Tue Oct 25 14:42:26 2016 +0100
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MailService {
+
+  messages = [
+    {id: 0, text: `You've got mail!`},
+    {id: 1, text: `No Mail!`},
+    {id: 2, text: `Spam!`}
+  ];
+
+  constructor() { }
+
+  update(id, text) {
+    this.messages = this.messages.map(message =>
+      message.id === id
+        ? {id, text}
+        : message
+    )
+  }
+
+}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/simple-form/simple-form.component.spec.ts	Tue Oct 25 14:42:26 2016 +0100
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { SimpleFormComponent } from './simple-form.component';
+
+describe('SimpleFormComponent', () => {
+  let component: SimpleFormComponent;
+  let fixture: ComponentFixture<SimpleFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SimpleFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SimpleFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/simple-form/simple-form.component.ts	Tue Oct 25 14:42:26 2016 +0100
@@ -0,0 +1,54 @@
+import {
+  Component, OnInit, Input, Output, EventEmitter,
+  ViewEncapsulation
+} from '@angular/core';
+
+@Component({
+  encapsulation: ViewEncapsulation.Emulated,
+  selector: 'app-simple-form',
+  template: `
+    <input #myInput type="text" 
+      [(ngModel)]="message"
+      [ngClass]="{mousedown: isMousedown}"
+      (mousedown)="isMousedown = true"
+      (mouseup)="isMousedown = false"
+      (mouseleave)="isMousedown = false"
+    />
+    <button (click)="update.emit({text:message})">Click me!</button>
+  `,
+  styles: [`
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+.mousedown {
+  border: 2px solid green;
+}
+
+input:focus {
+  font-weight: bold;
+  outline: none;
+}
+
+button {
+  border: none;
+}
+`]
+})
+export class SimpleFormComponent implements OnInit {
+
+  isMousedown;
+
+  @Input() message;
+
+  @Output() update = new EventEmitter();
+
+  constructor() {
+    // setInterval(() => this.message = Math.random().toString(), 1000);
+  }
+
+  ngOnInit() {
+  }
+
+}