restructuring of node & web application

web/angular-cli.json

@@ -18,18 +18,23 @@
       "prefix": "app",
       "mobile": false,
       "styles": [
-        "styles.css"
+        "../node_modules/codemirror/lib/codemirror.css",
+        "styles.scss",
+        "theme.scss"
+      ],
+      "scripts": [
       ],
-      "scripts": [],
       "environments": {
         "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
     }
   ],
-  "addons": [],
-  "packages": [],
+  "addons": [
+  ],
+  "packages": [
+  ],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
@@ -41,7 +46,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
     "prefixInterfaces": false,
     "inline": {
       "style": false,

web/package.json

@@ -18,16 +18,21 @@
     "@angular/core": "^2.3.1",
     "@angular/forms": "^2.3.1",
     "@angular/http": "^2.3.1",
+    "@angular/material": "^2.0.0-beta.1",
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
+    "codemirror": "^5.22.0",
     "core-js": "^2.4.1",
+    "hammerjs": "^2.0.8",
+    "ng2-codemirror": "^1.0.1",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.2"
   },
   "devDependencies": {
     "@angular/compiler-cli": "^2.3.1",
+    "@types/hammerjs": "^2.0.33",
     "@types/jasmine": "2.5.38",
     "@types/node": "^6.0.42",
     "angular-cli": "1.0.0-beta.24",

web/src/app/app.component.html

@@ -1,3 +1 @@
-<h1>
-  {{title}}
-</h1>
+<app-viewport></app-viewport>

web/src/app/app.component.ts

@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app works!';
+
 }

web/src/app/app.module.ts

@@ -2,19 +2,42 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { MaterialModule } from '@angular/material';
+
+import { CodemirrorModule } from 'ng2-codemirror';
+
+import 'codemirror';
+import 'hammerjs';
 
 import { AppComponent } from './app.component';
+import { DialogContentComponent } from './shared/dialog-content/dialog-content.component';
+import { ViewportComponent } from './viewport/viewport.component';
+import { HeaderComponent } from './header/header.component';
+import { EditorComponent } from './editor/editor.component';
+import { PreviewComponent } from './preview/preview.component';
+import { SidenavComponent } from './sidenav/sidenav.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    DialogContentComponent,
+    ViewportComponent,
+    HeaderComponent,
+    EditorComponent,
+    PreviewComponent,
+    SidenavComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    CodemirrorModule,
+    MaterialModule.forRoot()
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [
+    DialogContentComponent
+  ]
 })
 export class AppModule { }

web/src/app/editor/editor.component.html

@@ -0,0 +1,114 @@
+
+<md-card>
+  <codemirror [(ngModel)]="code" [config]="cmOptions"></codemirror>
+</md-card>
+
+<md-card>
+  <button md-button>FLAT</button>
+  <button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
+  <button md-raised-button color="primary">PRIMARY RAISED</button>
+  <button md-raised-button color="accent">ACCENT RAISED</button>
+</md-card>
+
+<md-card>
+  <md-checkbox>Unchecked</md-checkbox>
+  <md-checkbox [checked]="true">Checked</md-checkbox>
+  <md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
+  <md-checkbox [disabled]="true">Disabled</md-checkbox>
+</md-card>
+
+<md-card>
+  <md-radio-button name="symbol">Alpha</md-radio-button>
+  <md-radio-button name="symbol">Beta</md-radio-button>
+  <md-radio-button name="symbol" disabled>Gamma</md-radio-button>
+</md-card>
+
+<md-card class="app-input-section">
+  <md-input placeholder="First name"></md-input>
+
+  <md-input #nickname placeholder="Nickname" maxlength="50">
+    <md-hint align="end">
+      {{nickname.characterCount}} / 50
+    </md-hint>
+  </md-input>
+
+  <md-input>
+    <md-placeholder>
+      <i class="material-icons app-input-icon">android</i> Favorite phone
+    </md-placeholder>
+  </md-input>
+
+  <md-input placeholder="Motorcycle model">
+    <span md-prefix>
+          <i class="material-icons app-input-icon">motorcycle</i>
+          &nbsp;
+        </span>
+  </md-input>
+</md-card>
+
+<md-card>
+  <md-list class="app-list">
+    <md-list-item *ngFor="let food of foods">
+      <h3 md-line>{{food.name}}</h3>
+      <p md-line class="demo-secondary-text">{{food.rating}}</p>
+    </md-list-item>
+  </md-list>
+</md-card>
+
+<md-card>
+  <md-spinner class="app-spinner"></md-spinner>
+  <md-spinner color="accent" class="app-spinner"></md-spinner>
+</md-card>
+
+<md-card>
+  <label>
+        Indeterminate progress-bar
+        <md-progress-bar
+            class="app-progress"
+            mode="indeterminate"
+            aria-label="Indeterminate progress-bar example"></md-progress-bar>
+      </label>
+
+  <label>
+        Determinate progress bar - {{progress}}%
+        <md-progress-bar
+            class="app-progress"
+            color="accent"
+            mode="determinate"
+            [value]="progress"
+            aria-label="Determinate progress-bar example"></md-progress-bar>
+      </label>
+</md-card>
+
+<md-card>
+  <md-tab-group>
+    <md-tab label="Earth">
+      <p>EARTH</p>
+    </md-tab>
+    <md-tab label="Fire">
+      <p>FIRE</p>
+    </md-tab>
+  </md-tab-group>
+</md-card>
+
+<md-card>
+  <md-icon>build</md-icon>
+</md-card>
+
+<md-card>
+  <button md-button [md-menu-trigger-for]="menu">
+    MENU
+  </button>
+</md-card>
+
+<md-menu #menu="mdMenu">
+  <button md-menu-item>Lemon</button>
+  <button md-menu-item>Lime</button>
+  <button md-menu-item>Banana</button>
+</md-menu>
+
+<md-card>
+  <p>Last dialog result: {{lastDialogResult}}</p>
+  <button md-raised-button (click)="openDialog()">DIALOG</button>
+  <button md-raised-button (click)="showSnackbar()">SNACKBAR</button>
+</md-card>

web/src/app/editor/editor.component.spec.ts

@@ -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 { EditorComponent } from './editor.component';
+
+describe('EditorComponent', () => {
+  let component: EditorComponent;
+  let fixture: ComponentFixture<EditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/editor/editor.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import 'codemirror/mode/javascript/javascript';
+
+@Component({
+  selector: 'app-editor',
+  templateUrl: './editor.component.html',
+  styleUrls: ['./editor.component.scss']
+})
+export class EditorComponent implements OnInit {
+
+  public code:String = "";
+  public cmOptions:Object = {}; 
+
+  constructor() {
+    this.cmOptions =  {
+      lineNumbers: true,
+      mode: {
+        name: 'javascript',
+        json: true
+      }
+    };
+
+  }
+
+  ngOnInit() {
+  }
+
+}

web/src/app/header/header.component.html

@@ -0,0 +1,10 @@
+<md-toolbar color="primary">
+  <button class="app-icon-button" (click)="sidenav.toggle()">
+    <i class="material-icons app-toolbar-menu">menu</i>
+  </button> 
+  Scaffolding-all: Scaffold Documnetation
+  <span class="app-toolbar-filler"></span>
+  <!--<button md-button (click)="isDarkTheme = !isDarkTheme">
+    TOGGLE DARK THEME
+  </button>-->
+</md-toolbar>

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

@@ -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 { 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();
+  });
+});

web/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() {
+  }
+
+}

web/src/app/preview/preview.component.html

@@ -0,0 +1,3 @@
+<p>
+  preview works!
+</p>

web/src/app/preview/preview.component.spec.ts

@@ -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 { PreviewComponent } from './preview.component';
+
+describe('PreviewComponent', () => {
+  let component: PreviewComponent;
+  let fixture: ComponentFixture<PreviewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PreviewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});