From 90bcb58f5e88caefa1552b324962e5f8a4691aa2 Mon Sep 17 00:00:00 2001
From: Heinrich Marks <heinrich.marks@mni.thm.de>
Date: Wed, 28 Mar 2018 16:39:10 +0200
Subject: [PATCH] Add Footer Component and first draft
---
src/app/app.component.html | 1 +
src/app/app.module.ts | 4 +-
.../fragments/footer/footer.component.html | 46 +++++++++++++++++++
.../fragments/footer/footer.component.scss | 29 ++++++++++++
.../fragments/footer/footer.component.spec.ts | 25 ++++++++++
.../fragments/footer/footer.component.ts | 37 +++++++++++++++
6 files changed, 141 insertions(+), 1 deletion(-)
create mode 100644 src/app/components/fragments/footer/footer.component.html
create mode 100644 src/app/components/fragments/footer/footer.component.scss
create mode 100644 src/app/components/fragments/footer/footer.component.spec.ts
create mode 100644 src/app/components/fragments/footer/footer.component.ts
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 49832c88f..b86ef90e2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,4 +3,5 @@
<div fxFlex class="app-component">
<router-outlet></router-outlet>
</div>
+ <app-footer></app-footer>
</div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cdb2b87b8..3f0f8f92b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -78,6 +78,7 @@ import { ContentTextParticipantComponent } from './components/fragments/content-
import { ContentTextCreatorComponent } from './components/fragments/content-text-creator/content-text-creator.component';
import { AuthenticationInterceptor } from './interceptors/authentication.interceptor';
import { HeaderComponent } from './components/fragments/header/header.component';
+import { FooterComponent } from './components/fragments/footer/footer.component';
@NgModule({
declarations: [
@@ -110,7 +111,8 @@ import { HeaderComponent } from './components/fragments/header/header.component'
ContentTextParticipantComponent,
StatisticsComponent,
ContentTextCreatorComponent,
- HeaderComponent
+ HeaderComponent,
+ FooterComponent
],
entryComponents: [
RegisterComponent,
diff --git a/src/app/components/fragments/footer/footer.component.html b/src/app/components/fragments/footer/footer.component.html
new file mode 100644
index 000000000..e277068a9
--- /dev/null
+++ b/src/app/components/fragments/footer/footer.component.html
@@ -0,0 +1,46 @@
+<footer>
+
+ <div class="flex-container">
+ <div>
+ <h5>Box1</h5>
+ <ul>
+ <li>
+ <a target="_blank" href="https://www.thm.de/site/impressum.html">Impressum</a>
+ </li>
+ <li>test</li>
+ <li>test</li>
+ </ul>
+ </div>
+
+ <div>
+ <h5>Box2</h5>
+ <ul>
+ <li>test2</li>
+ <li>test2</li>
+ <li>test2</li>
+ </ul>
+ </div>
+
+ <!--
+ <div>
+ <h5>MatBox</h5>
+ <mat-list role="list">
+ <mat-list-item role="listitem">Item 1</mat-list-item>
+ <mat-list-item role="listitem">Item 2</mat-list-item>
+ <mat-list-item role="listitem">Item 3</mat-list-item>
+ </mat-list>
+ </div>
+ -->
+ </div>
+
+
+
+
+ <div class="bottomline">
+ <span class="example-fill-remaining-space"></span>
+ <a>© Copyright SWTP WS17/18</a>
+ <span class="example-fill-remaining-space"></span>
+ </div>
+
+</footer>
+<!-- (click)="goToHomepage()" -->
\ No newline at end of file
diff --git a/src/app/components/fragments/footer/footer.component.scss b/src/app/components/fragments/footer/footer.component.scss
new file mode 100644
index 000000000..3ff1ae3a4
--- /dev/null
+++ b/src/app/components/fragments/footer/footer.component.scss
@@ -0,0 +1,29 @@
+footer {
+ background-color: rgb(223, 223, 223);
+ text-align: center;
+}
+
+ul {
+ list-style: none
+}
+
+.bottomline {
+ background-color: rgb(201, 201, 201);
+ color: white;
+ font-size: 12px;
+ padding: 0.5%
+}
+
+.flex-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;;
+}
+
+.example-fill-remaining-space {
+ /* This fills the remaining space, by using flexbox.
+ Every toolbar row uses a flexbox row layout. */
+ flex: 1 1 auto;
+}
+
diff --git a/src/app/components/fragments/footer/footer.component.spec.ts b/src/app/components/fragments/footer/footer.component.spec.ts
new file mode 100644
index 000000000..2ca6c4543
--- /dev/null
+++ b/src/app/components/fragments/footer/footer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+ let component: FooterComponent;
+ let fixture: ComponentFixture<FooterComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FooterComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/fragments/footer/footer.component.ts b/src/app/components/fragments/footer/footer.component.ts
new file mode 100644
index 000000000..f5f086564
--- /dev/null
+++ b/src/app/components/fragments/footer/footer.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { UserRole } from '../../../models/user-roles.enum';
+import { Router } from '@angular/router';
+import { User } from '../../../models/user';
+
+@Component({
+ selector: 'app-footer',
+ templateUrl: './footer.component.html',
+ styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+ user: User;
+
+ constructor(
+ public router: Router
+ ) { }
+
+ ngOnInit() {
+ }
+
+ goToHomepage() {
+ const role: UserRole = this.user !== undefined ? this.user.role : undefined;
+ let route: string;
+
+ switch (role) {
+ case UserRole.PARTICIPANT:
+ route = '/participant';
+ break;
+ case UserRole.CREATOR:
+ route = '/creator';
+ break;
+ default:
+ route = '/';
+ }
+ this.router.navigate([route]);
+ }
+}
--
GitLab