Feature/profilepage (#176)

* chore: added svg's for settings and avatar

* feat: added profile page, mostly fixed contend for showcase

* fix: formatting of sections + "Statistik" headline

* feat: added statistic entrys

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

@@ -6,13 +6,15 @@ import { LoginformComponent } from './components/organisms/loginform/loginform.c
 import { SignupformComponent } from './components/organisms/signupform/signupform.component';
 import { LandingpageComponent } from './components/pages/landingpage/landingpage.component';
 import { RankingPageComponent } from './components/pages/ranking-page/ranking-page.component';
+import { ProfilepageComponent } from './components/pages/profilepage/profilepage.component';
 
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: LandingpageComponent },
   { path: 'main', component: MainpageComponent },
   { path: 'ranking', component: RankingPageComponent},
+  { path: 'profile', component: ProfilepageComponent},
   {
     path: 'auth',
     component: AuthenticationpageComponent,

frontend/src/app/app.component.ts

@@ -16,7 +16,7 @@ export class AppComponent implements OnInit{
   }
 
     hasFooter() {
-    const footerPages: string[] = ['/main', '/ranking'];
+    const footerPages: string[] = ['/main', '/ranking', '/profile'];
     return footerPages.includes(window.location.pathname);
     }
 

frontend/src/app/app.module.ts

@@ -24,6 +24,8 @@ import { FooterComponent } from './components/organisms/footer/footer.component'
 import { UserCardComponent } from './components/atoms/user-card/user-card.component';
 import { RankingTableComponent } from './components/organisms/ranking-table/ranking-table.component';
 import { RankingPageComponent } from './components/pages/ranking-page/ranking-page.component';
+import { ProfilepageComponent } from './components/pages/profilepage/profilepage.component';
+import { StatisticEntryComponent } from './components/atoms/statistic-entry/statistic-entry.component';
 
 
 
@@ -49,6 +51,8 @@ import { RankingPageComponent } from './components/pages/ranking-page/ranking-pa
     UserCardComponent,
     RankingTableComponent,
     RankingPageComponent,
+    ProfilepageComponent,
+    StatisticEntryComponent,
 
 
   ],

frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.html

@@ -0,0 +1,4 @@
+<div id="wrapper">
+    <div id="name">{{name}}<br/><br/></div>
+    <div id="value">{{value}}</div>
+</div>

frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss

@@ -0,0 +1,20 @@
+#wrapper{
+    background-color: var(--white);
+    text-align: center;
+    height: 6em;
+    color: var(--font);
+    text-indent: 0em;
+    border-radius: 1em;
+    display: flex;
+    flex-direction: column;
+    min-width: 8em;
+    padding: 0.5em;
+    div{
+        height: 40%;
+        width: 100%;
+    }
+}
+#name{
+    padding-top: 1em;
+    font-weight: bold;
+}

frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.spec.ts

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

frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input, input } from '@angular/core';
+
+@Component({
+  selector: 'app-statistic-entry',
+  templateUrl: './statistic-entry.component.html',
+  styleUrl: './statistic-entry.component.scss'
+})
+export class StatisticEntryComponent {
+  @Input() name:string = 'Distanz gelaufen';
+  @Input() value:string = '12.3 km';
+}

frontend/src/app/components/organisms/footer/footer.component.ts

@@ -10,7 +10,7 @@ export class FooterComponent {
   router: Router;
 
   constructor(router:Router){
-    this.router=router
+    this.router=router;
   }
 
   navigate(path:string){

frontend/src/app/components/pages/profilepage/profilepage.component.html

@@ -0,0 +1,19 @@
+<div id="wrapper">
+    <div id="avatar">
+        <img (click)="settings()" src="../../../../assets/icons/settings.svg" alt="settings-svg" id="settings">
+        <img src="../../../../assets/icons/avatar.svg" alt="avatar-svg" id="avatar-svg">
+    </div>
+    <div id="data" class="pf-section">
+        <h2 id="name">{{name}}</h2>
+        <p id="email">{{email}}</p>
+    </div>
+    <div id="statistics" class="pf-section">
+        <h2>Statistiken</h2>
+        <div id="entrys-wrapper">
+            <app-statistic-entry class="entry"
+            *ngFor="let statistic of statistics"
+            [name]="statistic.name"
+            [value]="statistic.value"/>
+        </div>
+    </div>   
+</div>

frontend/src/app/components/pages/profilepage/profilepage.component.scss

@@ -0,0 +1,51 @@
+#wrapper{
+    background-color: var(--background-black);
+    height: 90vh;
+    overflow-y: scroll;
+}
+#settings {
+    position: fixed;
+    top: 0.5em;
+    right: 0.5em;
+    width: 2.5em;
+    height: auto;
+}
+#avatar {
+    width: 100%;
+    height: 10em;
+    background-color: var(--white);
+}
+#avatar-svg{
+    height: 100%;
+    padding-top: 1.5em;
+    margin-top: auto;
+    margin-left: calc(50% - 80px);
+    clip-path: inset(0px 0px 1.5em 0px);
+}
+
+//sections below the avatar
+@mixin section{
+    text-indent: 1em;
+    background-color: var(--font);
+    border-radius: 2em;
+    margin: 1em;
+    h2{
+        padding-top: 1em;
+    }
+}
+
+#data{
+    @include section;
+    height: 20vh;
+}
+#statistics{
+    @include section;
+    min-height: 30vh;
+}
+#entrys-wrapper{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1em;
+    padding-bottom: 1em;
+}   

frontend/src/app/components/pages/profilepage/profilepage.component.spec.ts

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

frontend/src/app/components/pages/profilepage/profilepage.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-profilepage',
+  templateUrl: './profilepage.component.html',
+  styleUrl: './profilepage.component.scss'
+})
+export class ProfilepageComponent {
+  name: string = "David Hasselhoff";
+  email: string = "[email protected]";
+  statistics: {name: string, value: string}[] = [
+    {name: 'Distanz gelaufen', value: '12.3 km'},
+    {name: 'Zeit aktiv', value: '2:34:56'},
+    {name: 'Kalorien verbrannt', value: '1234 kcal'},
+    {name: 'Schritte', value: '12345'},
+  ];
+
+  router:Router;
+  constructor(router: Router) {
+    this.router = router;
+  }
+
+  settings(){
+    this.router.navigate(['/settings']);
+  }
+}