Added navigation and page to add accounts

Mamoth/Mamoth.njsproj

@@ -43,8 +43,10 @@
     <Content Include="src\app\app.component.html" />
     <Content Include="src\app\components\left-side-bar\left-side-bar.component.css" />
     <Content Include="src\app\components\left-side-bar\left-side-bar.component.html" />
-    <Content Include="src\app\components\streams-main-display\streams-main-display.component.css" />
-    <Content Include="src\app\components\streams-main-display\streams-main-display.component.html" />
+    <Content Include="src\app\pages\register-new-account\register-new-account.component.css" />
+    <Content Include="src\app\pages\register-new-account\register-new-account.component.html" />
+    <Content Include="src\app\pages\streams-main-display\streams-main-display.component.css" />
+    <Content Include="src\app\pages\streams-main-display\streams-main-display.component.html" />
     <Content Include="src\app\components\streams-selection-footer\streams-selection-footer.component.css" />
     <Content Include="src\app\components\streams-selection-footer\streams-selection-footer.component.html" />
     <Content Include="src\app\components\stream\stream.component.css" />
@@ -71,11 +73,13 @@
     <Folder Include="src\app\" />
     <Folder Include="src\app\components\left-side-bar\" />
     <Folder Include="src\app\components\" />
-    <Folder Include="src\app\components\streams-main-display\" />
+    <Folder Include="src\app\pages\register-new-account\" />
+    <Folder Include="src\app\pages\streams-main-display\" />
     <Folder Include="src\app\components\streams-selection-footer\" />
     <Folder Include="src\app\components\stream\" />
     <Folder Include="src\app\components\toot\" />
     <Folder Include="src\app\models\" />
+    <Folder Include="src\app\pages\" />
     <Folder Include="src\app\services\" />
     <Folder Include="src\assets\" />
     <Folder Include="src\environments\" />
@@ -88,8 +92,10 @@
     <TypeScriptCompile Include="src\app\app.module.ts" />
     <TypeScriptCompile Include="src\app\components\left-side-bar\left-side-bar.component.spec.ts" />
     <TypeScriptCompile Include="src\app\components\left-side-bar\left-side-bar.component.ts" />
-    <TypeScriptCompile Include="src\app\components\streams-main-display\streams-main-display.component.spec.ts" />
-    <TypeScriptCompile Include="src\app\components\streams-main-display\streams-main-display.component.ts" />
+    <TypeScriptCompile Include="src\app\pages\register-new-account\register-new-account.component.spec.ts" />
+    <TypeScriptCompile Include="src\app\pages\register-new-account\register-new-account.component.ts" />
+    <TypeScriptCompile Include="src\app\pages\streams-main-display\streams-main-display.component.spec.ts" />
+    <TypeScriptCompile Include="src\app\pages\streams-main-display\streams-main-display.component.ts" />
     <TypeScriptCompile Include="src\app\components\streams-selection-footer\streams-selection-footer.component.spec.ts" />
     <TypeScriptCompile Include="src\app\components\streams-selection-footer\streams-selection-footer.component.ts" />
     <TypeScriptCompile Include="src\app\components\stream\stream.component.spec.ts" />

Mamoth/src/app/app.component.css

@@ -2,7 +2,7 @@ app-left-side-bar {
   
 }
 
-app-streams-main-display {
+#display-zone {
   position: absolute;
   top: 0;
   right: 0;

Mamoth/src/app/app.component.html

@@ -1,8 +1,13 @@
 <app-left-side-bar>
 </app-left-side-bar>
 
-<app-streams-main-display>
-</app-streams-main-display>
+<!--<app-streams-main-display>
+</app-streams-main-display>-->
+
+<div id="display-zone">
+  <router-outlet>
+  </router-outlet>
+</div>
 
 <app-streams-selection-footer>
 </app-streams-selection-footer>

Mamoth/src/app/app.module.ts

@@ -1,15 +1,23 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from "@angular/router";
 
 import { NgxElectronModule } from 'ngx-electron';
 
 import { AppComponent } from './app.component';
 import { LeftSideBarComponent } from './components/left-side-bar/left-side-bar.component';
-import { StreamsMainDisplayComponent } from './components/streams-main-display/streams-main-display.component';
+import { StreamsMainDisplayComponent } from './pages/streams-main-display/streams-main-display.component';
 import { StreamComponent } from './components/stream/stream.component';
 import { StreamsSelectionFooterComponent } from './components/streams-selection-footer/streams-selection-footer.component';
 import { TootComponent } from './components/toot/toot.component';
+import { RegisterNewAccountComponent } from './pages/register-new-account/register-new-account.component';
 
+const routes: Routes = [
+  { path: "", redirectTo: "home", pathMatch: "full" },
+  { path: "home", component: StreamsMainDisplayComponent },
+  { path: "register", component: RegisterNewAccountComponent}, 
+  { path: "**", redirectTo: "home" }
+];
 
 @NgModule({
   declarations: [
@@ -18,11 +26,13 @@ import { TootComponent } from './components/toot/toot.component';
     StreamsMainDisplayComponent,
     StreamComponent,
     StreamsSelectionFooterComponent,
-    TootComponent
+    TootComponent,
+    RegisterNewAccountComponent
   ],
   imports: [
     BrowserModule, 
-    NgxElectronModule
+    NgxElectronModule,
+    RouterModule.forRoot(routes)
   ],
   providers: [],
   bootstrap: [AppComponent]

Mamoth/src/app/components/left-side-bar/left-side-bar.component.html

@@ -8,7 +8,7 @@
   </div>
 
   <div id="mam-account-add">
-    <a href title="add new account" (click)="addNewAccount()">+</a>
+    <a href title="add new account" [routerLink]="['/register']">+</a>
   </div>
 
 

Mamoth/src/app/pages/register-new-account/register-new-account.component.html

@@ -0,0 +1,6 @@
+<p>
+  register-new-account works!
+
+  <a href title="close" [routerLink]="['/home']">close</a>
+
+</p>

Mamoth/src/app/pages/register-new-account/register-new-account.component.spec.ts

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

Mamoth/src/app/pages/register-new-account/register-new-account.component.ts

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