Create header component

* Move existing header code into own component.
* Change location of logo sources to assets/logos.
* Make background of header white to avoid render issues for poor mooc.house logo.
* Add visual cues for header
* Underline the currently selected data source(s).
* Add variables for piping selected data later.

See #4 and #5

src/app/app.component.html

@@ -1,9 +1,6 @@
 
 
-<div style="height:100px; margin: 20px 0 50px 0;">
-    <img src="https://open.hpi.de/assets/logo_openhpi-155a11eefd46841c38fb009a2d9b84d28550a0c920fbf50b591b3aa1f7c0190c.png" style="display: block;
-    margin: 0 auto; width:350px;" />
-</div>
+<jenz-header></jenz-header>
 
 <world-map></world-map>
 <div class="container">

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { CoursesComponent } from './courses/courses.component';
 
 import { CourseService } from './courses/course.service';
 import { ReviewCardComponent } from './review-card/review-card.component';
+import { HeaderComponent } from './header/header.component';
 
 @NgModule({
   declarations: [
@@ -30,7 +31,8 @@ import { ReviewCardComponent } from './review-card/review-card.component';
     WorldMapComponent,
     StatisticsComponent,
     CoursesComponent,
-    ReviewCardComponent
+    ReviewCardComponent,
+    HeaderComponent
   ],
   imports: [
     BrowserModule,

src/app/header/header.component.css

@@ -0,0 +1,11 @@
+img {
+  margin-right: 3rem;
+  height: 100px;
+  cursor: pointer;
+}
+.section {
+  background-color: white;
+}
+.selected {
+  border-bottom: 1rem solid #67DE91;
+}

src/app/header/header.component.html

@@ -0,0 +1,18 @@
+<div class="section center-align">
+  <!-- DISCLAIMER -->
+  <!-- This code is super hacky and ugly,
+       and I really wish that we find something
+       prettier and more sophisticated. -->
+  <img [class.selected]="openhpi"
+       (click)="openhpi = !openhpi"
+       src="../assets/logos/OpenHPI-logo.png" />
+  <img [class.selected]="opensap"
+       (click)="opensap = !opensap"
+       src="../assets/logos/OpenSAP-logo.png" />
+  <img [class.selected]="moochouse"
+       (click)="moochouse = !moochouse"
+       src="../assets/logos/mooc-house-logo.png" />
+  <img [class.selected]="openwho"
+       (click)="openwho = !openwho"
+       src="../assets/logos/OpenWHO-logo.png" />
+</div>

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 be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/header/header.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'jenz-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent {
+  openhpi: boolean;
+  opensap: boolean;
+  moochouse: boolean;
+  openwho: boolean;
+
+  constructor() {
+    this.openhpi = true;
+    this.opensap = true;
+    this.moochouse = false;
+    this.openwho = false;
+  }
+
+}