From a5780eef2884689577dce0d848b75cf88a4025c0 Mon Sep 17 00:00:00 2001 From: Justin Hubert <135236159+Jstn2004@users.noreply.github.com> Date: Fri, 10 May 2024 18:55:30 +0200 Subject: [PATCH] feat: new loader and loaderService (#172) * feat: implement laoder component and loader service * fix: margin-top for the roadmap --- frontend/src/app/app.component.html | 3 +- frontend/src/app/app.component.ts | 14 ++- .../atoms/loader/loader.component.html | 9 +- .../atoms/loader/loader.component.scss | 97 +++++++++---------- .../atoms/loader/loader.component.ts | 5 +- .../ranking-table.component.spec.ts | 3 +- .../organisms/roadmap/roadmap.component.scss | 2 +- .../pages/mainpage/mainpage.component.html | 1 - .../pages/mainpage/mainpage.component.ts | 15 ++- .../ranking-page.component.spec.ts | 4 +- .../src/app/services/loader.service.spec.ts | 16 +++ frontend/src/app/services/loader.service.ts | 19 ++++ 12 files changed, 129 insertions(+), 59 deletions(-) create mode 100644 frontend/src/app/services/loader.service.spec.ts create mode 100644 frontend/src/app/services/loader.service.ts diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index ad89891..6fafe4b 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,3 +1,4 @@ - + + \ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 1afe705..798363e 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,10 +1,22 @@ import { Component } from '@angular/core'; +import { OnInit } from '@angular/core'; +import { LoaderService } from './services/loader.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrl: './app.component.scss' }) -export class AppComponent { +export class AppComponent implements OnInit{ title = 'duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf'; + isLoading: boolean = false; + constructor(private loaderService: LoaderService) { + + } + + ngOnInit(): void { + this.loaderService.isLoading.subscribe((value) => { + this.isLoading = value; + }); + } } diff --git a/frontend/src/app/components/atoms/loader/loader.component.html b/frontend/src/app/components/atoms/loader/loader.component.html index f2394e5..a1739ea 100644 --- a/frontend/src/app/components/atoms/loader/loader.component.html +++ b/frontend/src/app/components/atoms/loader/loader.component.html @@ -1,2 +1,7 @@ - - +
+
+ + + +
+
diff --git a/frontend/src/app/components/atoms/loader/loader.component.scss b/frontend/src/app/components/atoms/loader/loader.component.scss index 4211f51..9232199 100644 --- a/frontend/src/app/components/atoms/loader/loader.component.scss +++ b/frontend/src/app/components/atoms/loader/loader.component.scss @@ -1,51 +1,50 @@ -.loader { - width: 10px; - height: 10px; - border-radius: 50%; - display: block; - margin: 15px auto; - position: relative; - color: #fff; - left: -100px; - box-sizing: border-box; - animation: shadowRolling 2s linear infinite; -} -@keyframes shadowRolling { - 0% { - box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), - 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); - } - 12% { - box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), - 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); - } - 25% { - box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), - 0px 0 rgba(255, 255, 255, 0); - } - 36% { - box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, - 0px 0 rgba(255, 255, 255, 0); - } - 50% { - box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white; - } - 62% { - box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, - 110px 0 white; - } - 75% { - box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), - 130px 0 white, 120px 0 white; - } - 87% { - box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), - 200px 0 rgba(255, 255, 255, 0), 130px 0 white; - } - 100% { - box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), - 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0); - } -} +.center-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + + .main + { + position: absolute; + z-index: 5; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + max-width: 428px; + background-color: var(--background-black); + margin: 0; + padding: 0; + top: 0; + display: flex; + justify-content: center; + align-items: center; + + .loader { + position: relative; + width: 100px; + height: 100px; + } + + .loader:before , .loader:after{ + content: ''; + border-radius: 50%; + position: absolute; + inset: 0; + box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset; + } + .loader:after { + box-shadow: 0 2px 0 var(--green) inset; + animation: rotate 2s linear infinite; + } + + @keyframes rotate { + 0% { transform: rotate(0)} + 100% { transform: rotate(360deg)} + } + } +} \ No newline at end of file diff --git a/frontend/src/app/components/atoms/loader/loader.component.ts b/frontend/src/app/components/atoms/loader/loader.component.ts index 8cb81dc..22f1e6d 100644 --- a/frontend/src/app/components/atoms/loader/loader.component.ts +++ b/frontend/src/app/components/atoms/loader/loader.component.ts @@ -1,8 +1,11 @@ import { Component } from '@angular/core'; + @Component({ selector: 'app-loader', templateUrl: './loader.component.html', styleUrl: './loader.component.scss', }) -export class LoaderComponent {} +export class LoaderComponent{ + +} diff --git a/frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts b/frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts index c42977b..ea555a1 100644 --- a/frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts +++ b/frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts @@ -1,6 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RankingTableComponent } from './ranking-table.component'; +import { UserCardComponent } from 'app/components/atoms/user-card/user-card.component'; describe('RankingTableComponent', () => { let component: RankingTableComponent; @@ -8,7 +9,7 @@ describe('RankingTableComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [RankingTableComponent] + declarations: [RankingTableComponent, UserCardComponent] }) .compileComponents(); diff --git a/frontend/src/app/components/organisms/roadmap/roadmap.component.scss b/frontend/src/app/components/organisms/roadmap/roadmap.component.scss index ca45bf9..fabbcd6 100644 --- a/frontend/src/app/components/organisms/roadmap/roadmap.component.scss +++ b/frontend/src/app/components/organisms/roadmap/roadmap.component.scss @@ -1,5 +1,5 @@ .map { - margin-top: 90px; + margin-top: 130px; height: 75vh; display: flex; flex-direction: column; diff --git a/frontend/src/app/components/pages/mainpage/mainpage.component.html b/frontend/src/app/components/pages/mainpage/mainpage.component.html index 1bfcf13..1c4079d 100644 --- a/frontend/src/app/components/pages/mainpage/mainpage.component.html +++ b/frontend/src/app/components/pages/mainpage/mainpage.component.html @@ -1,7 +1,6 @@
-
diff --git a/frontend/src/app/components/pages/mainpage/mainpage.component.ts b/frontend/src/app/components/pages/mainpage/mainpage.component.ts index 4684921..b1b9569 100644 --- a/frontend/src/app/components/pages/mainpage/mainpage.component.ts +++ b/frontend/src/app/components/pages/mainpage/mainpage.component.ts @@ -1,10 +1,23 @@ import { Component } from '@angular/core'; +import { OnInit } from '@angular/core'; +import { LoaderService } from 'app/services/loader.service'; @Component({ selector: 'app-mainpage', templateUrl: './mainpage.component.html', styleUrl: './mainpage.component.scss' }) -export class MainpageComponent { +export class MainpageComponent implements OnInit{ + + constructor(private LoaderService: LoaderService) { } + + ngOnInit(): void { + this.LoaderService.show(); + + //Simulate a html request + setTimeout(() => { + this.LoaderService.hide(); + }, 2000); + } } diff --git a/frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts b/frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts index 2ea28be..ce84d27 100644 --- a/frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts +++ b/frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts @@ -1,6 +1,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RankingPageComponent } from './ranking-page.component'; +import { RankingTableComponent } from 'app/components/organisms/ranking-table/ranking-table.component'; +import { UserCardComponent } from 'app/components/atoms/user-card/user-card.component'; describe('RankingPageComponent', () => { let component: RankingPageComponent; @@ -8,7 +10,7 @@ describe('RankingPageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [RankingPageComponent] + declarations: [RankingPageComponent, RankingTableComponent, UserCardComponent] }) .compileComponents(); diff --git a/frontend/src/app/services/loader.service.spec.ts b/frontend/src/app/services/loader.service.spec.ts new file mode 100644 index 0000000..aef6961 --- /dev/null +++ b/frontend/src/app/services/loader.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { LoaderService } from './loader.service'; + +describe('LoaderService', () => { + let service: LoaderService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(LoaderService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/services/loader.service.ts b/frontend/src/app/services/loader.service.ts new file mode 100644 index 0000000..771bc20 --- /dev/null +++ b/frontend/src/app/services/loader.service.ts @@ -0,0 +1,19 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class LoaderService { + public isLoading = new BehaviorSubject(false); + + constructor() {} + + show() { + this.isLoading.next(true); + } + + hide() { + this.isLoading.next(false); + } +}