Create initial version of application

src/app/app.component.html

@@ -1,20 +1,13 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<app-header></app-header>
-<div style="text-align:center">
+<div class="container-fluid">
-  <h1>
+  <div class="row">
-    Welcome to {{ title }}!
+    <div class="col-sm"><app-login></app-login></div>
-  </h1>
+    <div class="col-sm-6"><app-webide></app-webide></div>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+    <div class="col-sm"><app-logs></app-logs></div>
+  </div>
+  <div class="row">
+    <div class="col-sm"><app-test-button [anchor_id]="'anchor_a'"></app-test-button></div>
+    <div class="col-sm"><app-test-button [anchor_id]="'anchor_b'"></app-test-button></div>
+    <div class="col-sm"><app-test-button [anchor_id]="'anchor_c'"></app-test-button></div>
+  </div>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-

src/app/app.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { WebSocketService } from './websocket.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'app';
+
+  constructor(private webSocketService: WebSocketService) {
+    this.webSocketService = webSocketService;
+  }
+
+  ngOnInit() {
+    this.webSocketService.connect();
+  }
 }

src/app/app.module.ts

@@ -1,18 +1,37 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { AceEditorModule } from 'ng2-ace-editor';
 
 
 import { AppComponent } from './app.component';
+import { HeaderComponent } from './header/header.component';
+import { LoginComponent } from './login/login.component';
+import { MarkdownService } from './markdown.service';
+import { WebideComponent } from './webide/webide.component';
+import { LogsComponent } from './logs/logs.component';
+import { TestButtonComponent } from './test-button/test-button.component';
+import { WebSocketService } from './websocket.service';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    LoginComponent,
+    WebideComponent,
+    LogsComponent,
+    TestButtonComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    NgbModule.forRoot(),
+    AceEditorModule,
+  ],
+  providers: [
+    MarkdownService,
+    WebSocketService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/header/header.component.html

@@ -0,0 +1,8 @@
+<div class="jumbotron text-center">
+  <h1>Tutorial framework Demo</h1>
+  <h3>
+    Powered by Angular
+    <img class="logo" width="36" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  </h3>
+</div>
+

src/app/header/header.component.scss

@@ -0,0 +1,31 @@
+@keyframes heartbeat
+{
+  0%
+  {
+    transform: scale( .75 );
+  }
+  20%
+  {
+    transform: scale( 1 );
+  }
+  40%
+  {
+    transform: scale( .75 );
+  }
+  60%
+  {
+    transform: scale( 1 );
+  }
+  80%
+  {
+    transform: scale( .75 );
+  }
+  100%
+  {
+    transform: scale( .75 );
+  }
+}
+
+.logo {
+  animation: heartbeat 1s infinite;
+}

src/app/header/header.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/login/login.component.html

@@ -0,0 +1,26 @@
+<div>
+  <form >
+    <div class="form-group">
+      <label for="email_input">Email:</label>
+      <input
+        id="email_input"
+        class="form-control"
+        type="email"
+        name="email"
+        placeholder="Enter email"
+      >
+    </div>
+    <div class="form-group">
+      <label for="password_input">Password:</label>
+      <input
+        id="password_input"
+        class="form-control"
+        type="password"
+        name="password"
+        placeholder="Password"
+      >
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </form>
+</div>
+

src/app/login/login.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/logs/logs.component.html

@@ -0,0 +1,2 @@
+<div [innerHtml]="this.markdown">
+</div>

src/app/logs/logs.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogsComponent } from './logs.component';
+
+describe('LogsComponent', () => {
+  let component: LogsComponent;
+  let fixture: ComponentFixture<LogsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LogsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/logs/logs.component.ts

@@ -0,0 +1,28 @@
+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',
+  templateUrl: './logs.component.html',
+  styleUrls: ['./logs.component.scss']
+})
+export class LogsComponent implements OnInit {
+  markdown: string;
+  constructor(private markdownService: MarkdownService) {
+    this.markdown = markdownService.convertToHtml(mdText);
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/test-button/test-button.component.html

@@ -0,0 +1,4 @@
+<p>
+  This is {{anchor_id}}. This text will change: {{text}}
+</p>
+<button type="submit" class="btn btn-outline-primary" (click)="onClick()">Submit {{anchor_id}}</button>

src/app/test-button/test-button.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestButtonComponent } from './test-button.component';
+
+describe('TestButtonComponent', () => {
+  let component: TestButtonComponent;
+  let fixture: ComponentFixture<TestButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test-button/test-button.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { WebSocketService } from '../websocket.service';
+
+@Component({
+  selector: 'app-test-button',
+  templateUrl: './test-button.component.html',
+  styleUrls: ['./test-button.component.scss']
+})
+export class TestButtonComponent implements OnInit {
+  @Input() anchor_id: string;
+  text: string;
+  constructor(private webSocketService: WebSocketService) {
+    this.text = 'babylon';
+    this.webSocketService = webSocketService;
+  }
+
+  onClick() {
+    this.webSocketService.send(this.anchor_id, this.text);
+  }
+
+  ngOnInit() {
+    this.webSocketService.observeAnchor(this.anchor_id).subscribe((event) => {
+      this.text = event.data;
+    });
+  }
+
+}

src/app/webide/webide.component.html

@@ -0,0 +1,9 @@
+<div
+  ace-editor
+  [(text)]="code"
+  [mode]="language"
+  [theme]="theme"
+  style="min-height: 200px; width:100%; overflow: auto;"
+>
+
+</div>

src/app/webide/webide.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WebideComponent } from './webide.component';
+
+describe('WebideComponent', () => {
+  let component: WebideComponent;
+  let fixture: ComponentFixture<WebideComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WebideComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WebideComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/webide/webide.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+import 'brace/mode/python';
+import 'brace/theme/monokai';
+
+const defaultSourceCode =
+  `def hello():
+      print('Hello world!')`;
+
+@Component({
+  selector: 'app-webide',
+  templateUrl: './webide.component.html',
+  styleUrls: ['./webide.component.scss']
+})
+export class WebideComponent implements OnInit {
+  code: string = defaultSourceCode;
+  language = 'python';
+  theme = 'monokai';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}