feat: Transferdienst hinzugefügt und in BasePage integriert

- Einen neuen Transferdienst erstellt und in die BasePage-Komponente injiziert.
- Einen neuen Button zur NavBar für die Transferfunktionalität hinzugefügt.
- CSS-Animationen für den Button angewendet, um die Benutzerinteraktion zu verbessern.
This commit is contained in:
Developer 02 2024-08-07 16:56:51 +02:00
parent ced8d30952
commit 454570b729
6 changed files with 75 additions and 6 deletions

View File

@ -107,11 +107,6 @@ html {
}
}
.scale-pulse {
display: inline-block;
transition: transform 1s ease;
}
.scale-pulse:hover {
animation: pulse 1s ease forwards;
}
@ -127,3 +122,22 @@ html {
transform: scale(1);
}
}
.move-left-right:hover {
animation: move 0.8s ease forwards;
}
@keyframes move {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
75% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}

View File

@ -37,6 +37,9 @@
<button *ngIf="isLogedIn()" class="btn">
<mat-icon class="scale-pulse" (click)="creationService.openDialog()">add_to_photos</mat-icon>
</button>
<button *ngIf="isLogedIn()" class="btn">
<mat-icon class="move-left-right" (click)="transferService.executeAll()">swap_horiz</mat-icon>
</button>
<button *ngIf="isLogedIn()" class="btn" (click)="refreshService.executeAll()">
<mat-icon class="turn-360">sync</mat-icon>
</button>

View File

@ -9,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
import { RefreshService } from '../../services/refresh.service';
import { CreationService } from '../../services/creation.service';
import { UpdateService, UpdateEvent } from '../../services/update.service';
import { TransferService } from '../../services/transfer.service';
import { MatBadgeModule } from '@angular/material/badge';
import {
MatSlideToggleModule,
@ -32,7 +33,7 @@ export class NavMenuComponent {
isChecked = true;
constructor(private dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService, public creationService: CreationService, public updateService: UpdateService) {
constructor(private dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService, public creationService: CreationService, public updateService: UpdateService, public transferService: TransferService) {
this.authService.isAuthenticated().then().catch()
this.updateActCount = this.updateService.totalCount;
this.updateService.addChangeListener(UpdateEvent.CountChange, () => {

View File

@ -2,6 +2,7 @@ import { Component, HostListener, inject } from '@angular/core';
import { RefreshService } from '../../services/refresh.service';
import { CreationService } from '../../services/creation.service';
import { UpdateService } from '../../services/update.service';
import { TransferService } from '../../services/transfer.service';
@Component({
selector: 'app-base-page',
@ -15,6 +16,7 @@ export class BasePageComponent {
protected refreshService: RefreshService = inject(RefreshService)
protected creationService: CreationService = inject(CreationService)
protected updateService: UpdateService = inject(UpdateService)
protected transferService: TransferService = inject(TransferService)
constructor() {
this.refreshService.removeAll()
@ -22,6 +24,8 @@ export class BasePageComponent {
if (this.updateService.any) {
this.updateService.executeAll().then()
}
if(this.transferService.any)
this.transferService.removeAll()
}
@HostListener('window:keydown.control.s', ['$event'])

View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { TransferService } from './transfer.service';
describe('TransferService', () => {
let service: TransferService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(TransferService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

View File

@ -0,0 +1,31 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TransferService {
constructor() { }
private actions: Array<() => void> = [];
public get count(): number {
return this.actions.length;
}
public get any(): boolean {
return this.count > 0;
}
add(action: () => void): void {
this.actions.push(action);
}
removeAll(): void {
this.actions = [];
}
executeAll(): void {
this.actions.forEach(action => action());
}
}