From f91bb407709f2ed96d5d688ddd9d3d1dd655b8b8 Mon Sep 17 00:00:00 2001 From: wwwLuis <91529471+wwwLuis@users.noreply.github.com> Date: Tue, 14 May 2024 09:09:34 +0200 Subject: [PATCH] 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 | 2 + frontend/src/app/app.component.ts | 2 +- frontend/src/app/app.module.ts | 4 ++ .../statistic-entry.component.html | 4 ++ .../statistic-entry.component.scss | 20 ++++++++ .../statistic-entry.component.spec.ts | 23 +++++++++ .../statistic-entry.component.ts | 11 ++++ .../organisms/footer/footer.component.ts | 2 +- .../profilepage/profilepage.component.html | 19 +++++++ .../profilepage/profilepage.component.scss | 51 +++++++++++++++++++ .../profilepage/profilepage.component.spec.ts | 23 +++++++++ .../profilepage/profilepage.component.ts | 27 ++++++++++ frontend/src/assets/icons/avatar.svg | 2 + frontend/src/assets/icons/settings.svg | 17 +++++++ 14 files changed, 205 insertions(+), 2 deletions(-) create mode 100644 frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.html create mode 100644 frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss create mode 100644 frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.spec.ts create mode 100644 frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.ts create mode 100644 frontend/src/app/components/pages/profilepage/profilepage.component.html create mode 100644 frontend/src/app/components/pages/profilepage/profilepage.component.scss create mode 100644 frontend/src/app/components/pages/profilepage/profilepage.component.spec.ts create mode 100644 frontend/src/app/components/pages/profilepage/profilepage.component.ts create mode 100644 frontend/src/assets/icons/avatar.svg create mode 100644 frontend/src/assets/icons/settings.svg diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index fe4ab54..360f70d 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -6,6 +6,7 @@ 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 = [ @@ -13,6 +14,7 @@ const routes: Routes = [ { path: 'home', component: LandingpageComponent }, { path: 'main', component: MainpageComponent }, { path: 'ranking', component: RankingPageComponent}, + { path: 'profile', component: ProfilepageComponent}, { path: 'auth', component: AuthenticationpageComponent, diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index b3486e5..6c46b5e 100644 --- a/frontend/src/app/app.component.ts +++ b/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); } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index a0ce3b7..b610901 100644 --- a/frontend/src/app/app.module.ts +++ b/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, ], diff --git a/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.html b/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.html new file mode 100644 index 0000000..2b35fc1 --- /dev/null +++ b/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.html @@ -0,0 +1,4 @@ +
+
{{name}}

+
{{value}}
+
\ No newline at end of file diff --git a/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss b/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss new file mode 100644 index 0000000..260f6ca --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.spec.ts b/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.spec.ts new file mode 100644 index 0000000..291f89f --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [StatisticEntryComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(StatisticEntryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.ts b/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.ts new file mode 100644 index 0000000..d2e9afc --- /dev/null +++ b/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'; +} diff --git a/frontend/src/app/components/organisms/footer/footer.component.ts b/frontend/src/app/components/organisms/footer/footer.component.ts index b4345f3..ba6f765 100644 --- a/frontend/src/app/components/organisms/footer/footer.component.ts +++ b/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){ diff --git a/frontend/src/app/components/pages/profilepage/profilepage.component.html b/frontend/src/app/components/pages/profilepage/profilepage.component.html new file mode 100644 index 0000000..09c89dc --- /dev/null +++ b/frontend/src/app/components/pages/profilepage/profilepage.component.html @@ -0,0 +1,19 @@ +
+
+ settings-svg + avatar-svg +
+
+

{{name}}

+

{{email}}

+
+
+

Statistiken

+
+ +
+
+
\ No newline at end of file diff --git a/frontend/src/app/components/pages/profilepage/profilepage.component.scss b/frontend/src/app/components/pages/profilepage/profilepage.component.scss new file mode 100644 index 0000000..bb37ce1 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/frontend/src/app/components/pages/profilepage/profilepage.component.spec.ts b/frontend/src/app/components/pages/profilepage/profilepage.component.spec.ts new file mode 100644 index 0000000..62623e5 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ProfilepageComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProfilepageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/pages/profilepage/profilepage.component.ts b/frontend/src/app/components/pages/profilepage/profilepage.component.ts new file mode 100644 index 0000000..f36651c --- /dev/null +++ b/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 = "david.hasselhoff@duo-gradus.de"; + 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']); + } +} diff --git a/frontend/src/assets/icons/avatar.svg b/frontend/src/assets/icons/avatar.svg new file mode 100644 index 0000000..c2d6446 --- /dev/null +++ b/frontend/src/assets/icons/avatar.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/frontend/src/assets/icons/settings.svg b/frontend/src/assets/icons/settings.svg new file mode 100644 index 0000000..9b8a117 --- /dev/null +++ b/frontend/src/assets/icons/settings.svg @@ -0,0 +1,17 @@ + + + + + settings + Created with Sketch Beta. + + + + + + + + + + + \ No newline at end of file