generated from nhcarrigan/template
141 lines
2.9 KiB
Markdown
141 lines
2.9 KiB
Markdown
# Frontend Service Usage Examples
|
|
|
|
## Auth Service
|
|
|
|
```typescript
|
|
import { Component, inject } from '@angular/core';
|
|
import { AuthService } from './services/auth.service';
|
|
|
|
@Component({
|
|
selector: 'app-header',
|
|
template: `
|
|
<div>
|
|
@if (authService.user(); as user) {
|
|
<p>Welcome, {{ user.username }}!</p>
|
|
@if (user.isAdmin) {
|
|
<button (click)="logout()">Logout</button>
|
|
}
|
|
} @else {
|
|
<button (click)="login()">Login with Discord</button>
|
|
}
|
|
</div>
|
|
`
|
|
})
|
|
export class HeaderComponent {
|
|
authService = inject(AuthService);
|
|
|
|
login() {
|
|
this.authService.login();
|
|
}
|
|
|
|
logout() {
|
|
this.authService.logout().subscribe();
|
|
}
|
|
}
|
|
```
|
|
|
|
## Games Service
|
|
|
|
```typescript
|
|
import { Component, OnInit, inject, signal } from '@angular/core';
|
|
import { GamesService } from './services/games.service';
|
|
import { AuthService } from './services/auth.service';
|
|
import { Game } from '@library/shared-types';
|
|
|
|
@Component({
|
|
selector: 'app-games',
|
|
template: `
|
|
<div>
|
|
<h2>My Games</h2>
|
|
|
|
@if (authService.isAdmin()) {
|
|
<button (click)="showAddForm = true">Add Game</button>
|
|
}
|
|
|
|
<div class="games-grid">
|
|
@for (game of games(); track game.id) {
|
|
<div class="game-card">
|
|
<h3>{{ game.title }}</h3>
|
|
<p>{{ game.platform }}</p>
|
|
<p>Status: {{ game.status }}</p>
|
|
|
|
@if (authService.isAdmin()) {
|
|
<button (click)="editGame(game)">Edit</button>
|
|
<button (click)="deleteGame(game.id)">Delete</button>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class GamesComponent implements OnInit {
|
|
gamesService = inject(GamesService);
|
|
authService = inject(AuthService);
|
|
|
|
games = signal<Game[]>([]);
|
|
showAddForm = false;
|
|
|
|
ngOnInit() {
|
|
this.loadGames();
|
|
}
|
|
|
|
loadGames() {
|
|
this.gamesService.getAllGames().subscribe(games => {
|
|
this.games.set(games);
|
|
});
|
|
}
|
|
|
|
deleteGame(id: string) {
|
|
if (confirm('Are you sure?')) {
|
|
this.gamesService.deleteGame(id).subscribe(() => {
|
|
this.loadGames();
|
|
});
|
|
}
|
|
}
|
|
|
|
editGame(game: Game) {
|
|
// Navigate to edit form or open modal
|
|
}
|
|
}
|
|
```
|
|
|
|
## Books Service
|
|
|
|
```typescript
|
|
// Similar pattern to games
|
|
import { BooksService } from './services/books.service';
|
|
|
|
// In component
|
|
booksService = inject(BooksService);
|
|
books = signal<Book[]>([]);
|
|
|
|
ngOnInit() {
|
|
this.booksService.getAllBooks().subscribe(books => {
|
|
this.books.set(books);
|
|
});
|
|
}
|
|
|
|
addBook(book: CreateBookDto) {
|
|
this.booksService.createBook(book).subscribe(() => {
|
|
this.loadBooks();
|
|
});
|
|
}
|
|
```
|
|
|
|
## Music Service
|
|
|
|
```typescript
|
|
// Similar pattern
|
|
import { MusicService } from './services/music.service';
|
|
|
|
musicService = inject(MusicService);
|
|
|
|
// Filter by type example
|
|
getAlbums() {
|
|
this.musicService.getAllMusic().subscribe(music => {
|
|
const albums = music.filter(m => m.type === 'album');
|
|
this.albums.set(albums);
|
|
});
|
|
}
|
|
``` |