Add team site

frontend/angular.json

@@ -25,7 +25,8 @@
             "aot": false,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/robots.txt"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

frontend/src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import {NotfoundComponent} from './containers/notfound/notfound.component';
 import {SearchComponent} from './containers/search/search.component';
 import {RegionDetailsComponent} from './containers/region-details/region-details.component';
 import {BookmarkListComponent} from './containers/bookmark-list/bookmark-list.component';
+import {TeamComponent} from './containers/team/team.component';
 
 
 const routes: Routes = [
@@ -12,6 +13,7 @@ const routes: Routes = [
   {path: 'search', component: SearchComponent},
   {path: 'region/:id', component: RegionDetailsComponent},
   {path: 'bookmark', component: BookmarkListComponent},
+  {path: 'team', component: TeamComponent},
   {path: '', redirectTo: 'home', pathMatch: 'full'},
   {path: '**', component: NotfoundComponent}
 ];

frontend/src/app/app.component.html

@@ -7,17 +7,17 @@
 <mat-drawer-container class="content">
   <mat-drawer #drawer class="drawer">
     <div class="nav">
-      <a mat-button routerLink="home" (click)="drawer.close()">
+      <a (click)="drawer.close()" mat-button routerLink="home" routerLinkActive="active">
         <mat-icon>home</mat-icon>
         <span>Home</span>
       </a>
-      <a (click)="drawer.close()" mat-button routerLink="bookmark">
+      <a (click)="drawer.close()" mat-button routerLink="bookmark" routerLinkActive="active">
         <mat-icon>bookmark</mat-icon>
         <span>Your bookmarks</span>
       </a>
-      <a mat-button routerLink="impressum" (click)="drawer.close()">
-        <mat-icon>subject</mat-icon>
-        <span>Impressum</span>
+      <a (click)="drawer.close()" mat-button routerLink="team" routerLinkActive="active">
+        <mat-icon>group</mat-icon>
+        <span>About us</span>
       </a>
     </div>
   </mat-drawer>

frontend/src/app/app.component.scss

@@ -26,12 +26,20 @@
     display: flex;
     flex-direction: column;
 
-    >a {
+    a {
       margin-bottom: 0.5rem;
       text-align: start;
 
-      >span {
-        padding-left: 2rem;
+      mat-icon {
+        margin-right: 0.75rem;
+      }
+
+      span {
+
+      }
+
+      &.active {
+        color: #00ae00;
       }
     }
   }

frontend/src/app/app.module.ts

@@ -32,6 +32,7 @@ import {BookmarkButtonComponent} from './components/bookmark-button/bookmark-but
 import {BookmarkListComponent} from './containers/bookmark-list/bookmark-list.component';
 import {ShareButtonComponent} from './components/share-button/share-button.component';
 import {ShareDialogComponent} from './dialogs/share-dialog/share-dialog.component';
+import {TeamComponent} from './containers/team/team.component';
 
 
 @NgModule({
@@ -49,7 +50,8 @@ import {ShareDialogComponent} from './dialogs/share-dialog/share-dialog.componen
     BookmarkButtonComponent,
     BookmarkListComponent,
     ShareButtonComponent,
-    ShareDialogComponent
+    ShareDialogComponent,
+    TeamComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/containers/region-details/region-details.component.scss

@@ -9,6 +9,7 @@
   object-fit: cover;
   height: 10rem;
   margin-bottom: 1.5rem;
+  align-self: center;
 }
 
 .region-details-header {

frontend/src/app/containers/team/team.component.html

@@ -0,0 +1,21 @@
+<h1>Team</h1>
+<div class="team-member-container">
+  <mat-card *ngFor="let member of team" class="member">
+    <img [alt]="member.imageUrl ? 'Image of ' + member.name : 'Placeholder'"
+         [src]="member.imageUrl ||'assets/placeholder.jpg'" class="image">
+    <div class="name-pos-container">
+      <span class="position">{{member.position}}</span>
+      <span class="name">{{member.name}}</span>
+    </div>
+    <table class="table">
+      <tr>
+        <td><span class="property">Course:</span></td>
+        <td>{{member.course}}</td>
+      </tr>
+      <tr>
+        <td><span class="property">Semester:</span></td>
+        <td>{{member.semester}}</td>
+      </tr>
+    </table>
+  </mat-card>
+</div>

frontend/src/app/containers/team/team.component.scss

@@ -0,0 +1,49 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+.team-member-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+
+  .member {
+
+    margin: 1rem 0;
+
+    .image {
+      width: 15rem;
+      margin-bottom: 1rem;
+    }
+
+    .name-pos-container {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 1rem;
+
+      .name {
+        font-weight: bold;
+        font-size: 1.2rem;
+      }
+
+      .position {
+        text-transform: uppercase;
+        font-size: 0.75rem;
+      }
+
+    }
+
+    .table {
+      .property {
+        margin-right: 0.5rem;
+      }
+
+      font-size: 0.75rem;
+    }
+
+  }
+
+
+}

frontend/src/app/containers/team/team.component.spec.ts

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

frontend/src/app/containers/team/team.component.ts

@@ -0,0 +1,69 @@
+import {Component, OnInit} from '@angular/core';
+
+export interface TeamMember {
+  name: string;
+  position: string;
+  course: string;
+  semester: number;
+  imageUrl?: string;
+}
+
+@Component({
+  selector: 'app-team',
+  templateUrl: './team.component.html',
+  styleUrls: ['./team.component.scss']
+})
+export class TeamComponent implements OnInit {
+
+  readonly team: TeamMember[] = [
+    {
+      name: 'Patrick Gebhardt',
+      position: 'Frontend Developer',
+      course: 'Software Engineering (SEB)',
+      semester: 6
+    },
+    {
+      name: 'Lucas Hinderberger',
+      position: 'Operations',
+      course: 'Software Engineering (SEB)',
+      semester: 6
+    },
+    {
+      name: 'Timo John',
+      position: 'Backend Developer',
+      course: 'Software Engineering (SEB)',
+      semester: 6
+    },
+    {
+      name: 'Timo Volkmann',
+      position: 'Backend Developer',
+      course: 'Software Engineering (SEB)',
+      semester: 6
+    },
+    {
+      name: 'Yannick von Hofen',
+      position: 'Management',
+      course: 'Transport und Logistik (MTL)',
+      semester: 3
+    },
+    {
+      name: 'Thomas Schapper',
+      position: 'Management',
+      course: 'Transport und Logistik (MTL)',
+      semester: 3
+    },
+    {
+      name: 'Nicolas Karon',
+      position: 'Management',
+      course: 'Transport und Logistik (MTL)',
+      semester: 3
+    }
+  ];
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

frontend/src/assets/i18n/en.json

@@ -5,14 +5,14 @@
   "sun_hours": "Sunny hours",
   "precipitation": "Precipitation",
   "humidity": "Humidity",
-  "alcohol_costs": "Alcohol costs",
-  "food_costs": "Food costs",
-  "water_costs": "Water costs",
+  "alcohol_costs": "Alcohol",
+  "food_costs": "Food ",
+  "water_costs": "Water",
   "cheap_alcohol": "Cheap alcohol",
   "local_transportation_costs": "Public transport",
-  "average_per_day_costs": "Average total costs",
-  "entertainment_costs": "Entertainment costs",
-  "accommodation_costs": "Accommodation costs",
+  "average_per_day_costs": "Total costs",
+  "entertainment_costs": "Entertainment",
+  "accommodation_costs": "Accommodation",
   "cheap_food": "Cheap food",
   "cheap_water": "Cheap water",
   "cheap_transportations": "Cheap public transport",

frontend/src/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: *