Added main display zones

Mamoth/Mamoth.njsproj

@@ -41,6 +41,10 @@
     <Content Include="README.md" />
     <Content Include="src\app\app.component.css" />
     <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\assets\.gitkeep" />
     <Content Include="src\favicon.ico" />
     <Content Include="src\index.html" />
@@ -59,6 +63,10 @@
     <Folder Include="e2e\" />
     <Folder Include="src\" />
     <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\services\" />
     <Folder Include="src\assets\" />
     <Folder Include="src\environments\" />
   </ItemGroup>
@@ -68,6 +76,10 @@
     <TypeScriptCompile Include="src\app\app.component.spec.ts" />
     <TypeScriptCompile Include="src\app\app.component.ts" />
     <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\environments\environment.prod.ts" />
     <TypeScriptCompile Include="src\environments\environment.ts" />
     <TypeScriptCompile Include="src\main.ts" />

Mamoth/src/app/app.component.css

@@ -0,0 +1,11 @@
+app-left-side-bar {
+  
+}
+
+app-streams-main-display {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 50px;
+}

Mamoth/src/app/app.component.html

@@ -1,7 +1,13 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<app-left-side-bar>
-<div style="text-align:center">
+</app-left-side-bar>
+
+<app-streams-main-display>
+</app-streams-main-display>
+
+
+<!--<div style="text-align:center">
   <h1>
     Welcome to {{ title }}!
   </h1>  
   <button (click)="launchWindow()">Launch Window</button>
-</div>
+</div>-->

Mamoth/src/app/app.module.ts

@@ -4,11 +4,15 @@ import { NgModule } from '@angular/core';
 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';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    LeftSideBarComponent,
+    StreamsMainDisplayComponent
   ],
   imports: [
     BrowserModule, 

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

@@ -0,0 +1,6 @@
+#mam-left-bar {
+  width: 50px;
+  height: calc(100%);
+  background: green;
+  outline: 1px dotted red;
+}

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

@@ -0,0 +1,4 @@
+<div id="mam-left-bar">
+
+
+</div>

Mamoth/src/app/components/left-side-bar/left-side-bar.component.spec.ts

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

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

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

Mamoth/src/app/components/streams-main-display/streams-main-display.component.css

@@ -0,0 +1,6 @@
+#mam-main-display {
+  width: calc(100%);
+  height: calc(100%);
+  background: blue;
+  outline: 1px dotted red;
+}

Mamoth/src/app/components/streams-main-display/streams-main-display.component.html

@@ -0,0 +1,4 @@
+<div id="mam-main-display">
+
+
+</div>

Mamoth/src/app/components/streams-main-display/streams-main-display.component.spec.ts

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

Mamoth/src/app/components/streams-main-display/streams-main-display.component.ts

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

Mamoth/src/index.html

@@ -9,6 +9,8 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+  <app-root>
+    loading...
+  </app-root>
 </body>
 </html>

Mamoth/src/styles.css

@@ -1 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
+html, body {
+  background-color: lightcoral;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+}