From e0bdf1d9ed0f18db35358a1c33e519c32056d8f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Bokros?= <balint.bokros@avatao.com>
Date: Thu, 1 Feb 2018 16:03:41 +0100
Subject: [PATCH 1/5] Remove test code

---
 src/app/logs/logs.component.html |  1 -
 src/app/logs/logs.component.ts   | 11 -----------
 2 files changed, 12 deletions(-)

diff --git a/src/app/logs/logs.component.html b/src/app/logs/logs.component.html
index 5a43abb..04f5b84 100644
--- a/src/app/logs/logs.component.html
+++ b/src/app/logs/logs.component.html
@@ -1,2 +1 @@
-<div [innerHtml]="this.markdown">
 </div>
diff --git a/src/app/logs/logs.component.ts b/src/app/logs/logs.component.ts
index 70ad32c..76574ed 100644
--- a/src/app/logs/logs.component.ts
+++ b/src/app/logs/logs.component.ts
@@ -1,15 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { MarkdownService } from '../markdown.service';
 
-const mdText =
-`# Showdown test
-
-**bold**
-
-_italic_
-
-[link](https://avatao.com)
-`;
 
 @Component({
   selector: 'app-logs',
@@ -17,9 +8,7 @@ _italic_
   styleUrls: ['./logs.component.scss']
 })
 export class LogsComponent implements OnInit {
-  markdown: string;
   constructor(private markdownService: MarkdownService) {
-    this.markdown = markdownService.convertToHtml(mdText);
   }
 
   ngOnInit() {

From 6b9c2c19e36788bf5955b40d13447a7a3b40e28a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Bokros?= <balint.bokros@avatao.com>
Date: Thu, 1 Feb 2018 16:05:15 +0100
Subject: [PATCH 2/5] Create Message class representing defined data format

---
 src/app/logs/logs.component.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/logs/logs.component.ts b/src/app/logs/logs.component.ts
index 76574ed..f88ef54 100644
--- a/src/app/logs/logs.component.ts
+++ b/src/app/logs/logs.component.ts
@@ -1,6 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { MarkdownService } from '../markdown.service';
 
+class Message {
+  originator: string;
+  timestamp: Date;
+  message: string;
+}
 
 @Component({
   selector: 'app-logs',

From 1c1bddd955374731e754a7572d523fbfdc1d6217 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Bokros?= <balint.bokros@avatao.com>
Date: Thu, 1 Feb 2018 16:08:51 +0100
Subject: [PATCH 3/5] Create initial implementation of messaging

---
 src/app/logs/logs.component.html | 10 ++++++++++
 src/app/logs/logs.component.scss | 14 ++++++++++++++
 src/app/logs/logs.component.ts   | 16 +++++++++++++++-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/app/logs/logs.component.html b/src/app/logs/logs.component.html
index 04f5b84..edea95c 100644
--- a/src/app/logs/logs.component.html
+++ b/src/app/logs/logs.component.html
@@ -1 +1,11 @@
+<div>
+<ul>
+  <li *ngFor="let message of messages">
+    <p>
+      <strong>{{message.originator}}</strong>
+      <span class="timestamp">{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</span><br>
+      <span [innerHtml]="message.message"></span>
+    </p>
+  </li>
+</ul>
 </div>
diff --git a/src/app/logs/logs.component.scss b/src/app/logs/logs.component.scss
index e69de29..3cc4d7a 100644
--- a/src/app/logs/logs.component.scss
+++ b/src/app/logs/logs.component.scss
@@ -0,0 +1,14 @@
+div {
+  display: block;
+  overflow: auto;
+  max-height: 100%;
+}
+
+ul {
+  max-height: inherit;
+  list-style-type: none;
+}
+
+.timestamp {
+  opacity: 0.37;
+}
diff --git a/src/app/logs/logs.component.ts b/src/app/logs/logs.component.ts
index f88ef54..b467282 100644
--- a/src/app/logs/logs.component.ts
+++ b/src/app/logs/logs.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { MarkdownService } from '../markdown.service';
+import { WebSocketService } from '../websocket.service';
 
 class Message {
   originator: string;
@@ -13,10 +14,23 @@ class Message {
   styleUrls: ['./logs.component.scss']
 })
 export class LogsComponent implements OnInit {
-  constructor(private markdownService: MarkdownService) {
+  messages: Message[] = [];
+  constructor(
+    private markdownService: MarkdownService,
+    private websocketService: WebSocketService
+  ) {}
+
+  convert(text: string) {
+    return this.markdownService.convertToHtml(text);
   }
 
   ngOnInit() {
+    this.websocketService.observeAnchor<Message>('message').subscribe(
+      (event) => {
+        this.messages.push(event.data);
+        event.data.message = this.convert(event.data.message);
+      }
+    );
   }
 
 }

From d5e14d0d8a8c263657728c487fea07ee63398589 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Bokros?= <balint.bokros@avatao.com>
Date: Thu, 1 Feb 2018 16:26:46 +0100
Subject: [PATCH 4/5] Move Message class to separate file

---
 src/app/logs/logs.component.ts | 6 +-----
 src/app/logs/message.ts        | 5 +++++
 2 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 src/app/logs/message.ts

diff --git a/src/app/logs/logs.component.ts b/src/app/logs/logs.component.ts
index b467282..cde596d 100644
--- a/src/app/logs/logs.component.ts
+++ b/src/app/logs/logs.component.ts
@@ -2,11 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MarkdownService } from '../markdown.service';
 import { WebSocketService } from '../websocket.service';
 
-class Message {
-  originator: string;
-  timestamp: Date;
-  message: string;
-}
+import { Message } from './message';
 
 @Component({
   selector: 'app-logs',
diff --git a/src/app/logs/message.ts b/src/app/logs/message.ts
new file mode 100644
index 0000000..c0e00af
--- /dev/null
+++ b/src/app/logs/message.ts
@@ -0,0 +1,5 @@
+export class Message {
+  originator: string;
+  timestamp: Date;
+  message: string;
+}

From eb90c66c8423834ec792efadced12f693577e669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Bokros?= <balint.bokros@avatao.com>
Date: Thu, 1 Feb 2018 16:33:25 +0100
Subject: [PATCH 5/5] Rename LogsComponent to MessagesComponent

---
 src/app/app.component.html                                | 2 +-
 src/app/app.module.ts                                     | 4 ++--
 src/app/{logs => messages}/message.ts                     | 0
 .../messages.component.html}                              | 0
 .../messages.component.scss}                              | 0
 .../logs.component.ts => messages/messages.component.ts}  | 8 ++++----
 6 files changed, 7 insertions(+), 7 deletions(-)
 rename src/app/{logs => messages}/message.ts (100%)
 rename src/app/{logs/logs.component.html => messages/messages.component.html} (100%)
 rename src/app/{logs/logs.component.scss => messages/messages.component.scss} (100%)
 rename src/app/{logs/logs.component.ts => messages/messages.component.ts} (80%)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index c7c6597..765de9e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,7 +3,7 @@
   <div class="row tfw-first-row">
     <div class="col-sm"><app-login></app-login></div>
     <div class="col-sm-6"><app-webide></app-webide></div>
-    <div class="col-sm"><app-logs></app-logs></div>
+    <div class="col-sm"><app-messages></app-messages></div>
   </div>
   <!--div class="row">
     <div class="col-sm"><app-test-button [anchor_id]="'anchor_a'"></app-test-button></div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4300de2..8d78afb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,7 +12,7 @@ import { LoginComponent } from './login/login.component';
 import { MarkdownService } from './markdown.service';
 import { TerminadoService } from './terminado.service';
 import { WebideComponent } from './webide/webide.component';
-import { LogsComponent } from './logs/logs.component';
+import { MessagesComponent } from './messages/messages.component';
 import { TestButtonComponent } from './test-button/test-button.component';
 import { WebSocketService } from './websocket.service';
 import { TerminalComponent } from './terminal/terminal.component';
@@ -25,7 +25,7 @@ import { FSMUpdateService } from './fsmupdate.service';
     HeaderComponent,
     LoginComponent,
     WebideComponent,
-    LogsComponent,
+    MessagesComponent,
     TestButtonComponent,
     TerminalComponent
   ],
diff --git a/src/app/logs/message.ts b/src/app/messages/message.ts
similarity index 100%
rename from src/app/logs/message.ts
rename to src/app/messages/message.ts
diff --git a/src/app/logs/logs.component.html b/src/app/messages/messages.component.html
similarity index 100%
rename from src/app/logs/logs.component.html
rename to src/app/messages/messages.component.html
diff --git a/src/app/logs/logs.component.scss b/src/app/messages/messages.component.scss
similarity index 100%
rename from src/app/logs/logs.component.scss
rename to src/app/messages/messages.component.scss
diff --git a/src/app/logs/logs.component.ts b/src/app/messages/messages.component.ts
similarity index 80%
rename from src/app/logs/logs.component.ts
rename to src/app/messages/messages.component.ts
index cde596d..b164f9e 100644
--- a/src/app/logs/logs.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -5,11 +5,11 @@ import { WebSocketService } from '../websocket.service';
 import { Message } from './message';
 
 @Component({
-  selector: 'app-logs',
-  templateUrl: './logs.component.html',
-  styleUrls: ['./logs.component.scss']
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.scss']
 })
-export class LogsComponent implements OnInit {
+export class MessagesComponent implements OnInit {
   messages: Message[] = [];
   constructor(
     private markdownService: MarkdownService,