ludovic.castglia
8 months ago
commit
b669ee07fd
@ -1,3 +1,3 @@
|
||||
<!-- <app-book-menu></app-book-menu> -->
|
||||
<app-book-menu></app-book-menu>
|
||||
|
||||
<router-outlet (activate)="onActivate($event)"></router-outlet>
|
||||
@ -1,12 +0,0 @@
|
||||
<div *ngIf="selectedBook">
|
||||
<h2>{{selectedBook.title | uppercase}}</h2>
|
||||
<div><span>id: </span>{{selectedBook.id}}</div>
|
||||
<div>
|
||||
<label for="book-author">Auteur : </label>
|
||||
{{ selectedBook.author }}
|
||||
</div>
|
||||
<div>
|
||||
<label for="book-publicationDate">Date de publication : </label>
|
||||
{{ selectedBook.publicationDate | date: 'EEEE d MMMM y' }}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,25 +0,0 @@
|
||||
import { Component} from '@angular/core';
|
||||
import { UpperCasePipe, DatePipe, NgIf} from '@angular/common';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
import { Book } from '../../models/book.model';
|
||||
import { BookService } from '../../services/book-service';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'app-book-detail',
|
||||
imports: [DatePipe, UpperCasePipe, NgIf],
|
||||
templateUrl: './book-detail.component.html',
|
||||
styles: ``
|
||||
})
|
||||
export class BookDetailComponent {
|
||||
selectedBook!: Book | undefined;
|
||||
|
||||
constructor(protected bookService: BookService, private activatedRoute: ActivatedRoute) {}
|
||||
|
||||
ngOnInit(){
|
||||
const id = this.activatedRoute.snapshot.params['id'];
|
||||
this.selectedBook = this.bookService.getBookById(id);
|
||||
console.log(this.selectedBook);
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
<section>
|
||||
<h2>Add book form</h2>
|
||||
|
||||
<form [formGroup]="bookForm">
|
||||
<div>
|
||||
<mat-form-field class="full-width">
|
||||
<mat-label>Title</mat-label>
|
||||
<input matInput type="text" formControlName="title" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-form-field class="full-width">
|
||||
<mat-label>Author</mat-label>
|
||||
<input matInput type="text" formControlName="author" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-form-field class="full-width">
|
||||
<mat-label>Publication date</mat-label>
|
||||
<input matInput [matDatepicker]="picker" type="text" formControlName="publicationDate" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button mat-flat-button color="primary" type="button" (click)="addBook()">Add</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@ -1,49 +0,0 @@
|
||||
import { Component, EventEmitter, Output } from '@angular/core';
|
||||
|
||||
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { Book } from '../../models/book.model';
|
||||
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
|
||||
@Component({
|
||||
selector: 'app-book-form',
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
MatMenuModule,
|
||||
MatDatepickerModule,
|
||||
MatNativeDateModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
templateUrl: './book-form.component.html'
|
||||
})
|
||||
export class BookFormComponent {
|
||||
@Output() addBookEvent = new EventEmitter<Book>();
|
||||
|
||||
book: Book = { id: 0, title: '', author: '', publicationDate: new Date() }
|
||||
bookForm: FormGroup = new FormGroup({
|
||||
title: new FormControl(this.book.title, Validators.required),
|
||||
author: new FormControl(this.book.author, Validators.required),
|
||||
publicationDate: new FormControl(this.book.publicationDate, Validators.required)
|
||||
});
|
||||
|
||||
addBook() {
|
||||
if (this.bookForm.invalid) {
|
||||
console.log("ERREUR");
|
||||
return;
|
||||
}
|
||||
|
||||
this.book = this.bookForm.value;
|
||||
|
||||
this.addBookEvent.emit(this.book);
|
||||
this.bookForm.reset();
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<h1>Bienvenue sur la page d'accueil du Book Shop</h1>
|
||||
@ -1,12 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-book-home',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './book-home.component.html',
|
||||
styles: ``
|
||||
})
|
||||
export class BookHomeComponent {
|
||||
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
<h2>Book list</h2>
|
||||
|
||||
<ul>
|
||||
<li *ngFor="let book of books">
|
||||
<a routerLink="/book/{{ book.id }}">{{ book.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1,23 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgFor, DatePipe } from '@angular/common';
|
||||
|
||||
import { Book } from '../../models/book.model';
|
||||
import { BookService } from '../../services/book-service'
|
||||
|
||||
@Component({
|
||||
selector: 'app-book-list',
|
||||
standalone: true,
|
||||
imports: [NgFor, DatePipe, RouterModule],
|
||||
templateUrl: './book-list.component.html'
|
||||
})
|
||||
export class BookListComponent {
|
||||
books: Book[] = [];
|
||||
|
||||
constructor(protected bookService: BookService){
|
||||
}
|
||||
|
||||
ngOnInit(){
|
||||
this.books = this.bookService.getAll();
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,16 @@
|
||||
<app-book-menu></app-book-menu>
|
||||
|
||||
<h2>{{formattedDate}}</h2>
|
||||
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>LUN</th>
|
||||
<th>MAR</th>
|
||||
<th>MER</th>
|
||||
<th>JEU</th>
|
||||
<th>VEN</th>
|
||||
<th>SAM</th>
|
||||
<th>DIM</th>
|
||||
<th *ngFor="let d of day">
|
||||
{{ d }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th *ngFor="let azerty of streaks">
|
||||
{{ azerty }}
|
||||
<th *ngFor="let streak of streaks">
|
||||
{{ streak }}
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
nav[mat-tab-nav-bar] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #333;
|
||||
padding: 10px 0
|
||||
}
|
||||
|
||||
mat-tab-link, button[mat-button] {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-color: #444;
|
||||
border: none;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
mat-tab-link:hover, button[mat-button]:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
a[mat-menu-item] {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
a[mat-menu-item]:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<a mat-menu-item routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">{{userconnecte}}</a>
|
||||
<a mat-menu-item routerLink="/accueil" routerLinkActive="active" ariaCurrentWhenActive="page">Accueil</a>
|
||||
<a mat-menu-item routerLink="/users" routerLinkActive="active" ariaCurrentWhenActive="page">Classement</a>
|
||||
<a mat-menu-item routerLink="{{route}}" routerLinkActive="active" ariaCurrentWhenActive="page">Details</a>
|
||||
<a mat-menu-item routerLink="/sudoku" routerLinkActive="active" ariaCurrentWhenActive="page">Sudoku</a>
|
||||
<a mat-menu-item>Morpion</a>
|
||||
<a mat-menu-item>Jeu de l'oie</a>
|
||||
<a mat-menu-item>Star Wars Rebellion</a>
|
||||
</mat-menu>
|
||||
|
||||
<nav mat-tab-nav-bar>
|
||||
<mat-tab-link (click)="removePseudo()" label="userconnecte" [routerLink]="['/']" routerLinkActive="active" ariaCurrentWhenActive="page">{{userconnecte}}</mat-tab-link>
|
||||
<mat-tab-link (click)="reloadPseudo()" label="Accueil" [routerLink]="['/accueil']" >Accueil</mat-tab-link>
|
||||
<mat-tab-link (click)="reloadPseudo()" label="Classement" [routerLink]="['/users']" >Classement</mat-tab-link>
|
||||
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
|
||||
</nav>
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import { Book } from "../models/book.model";
|
||||
|
||||
export const BOOKS: Book[] = [
|
||||
{ id: 1, title: 'The Lord of the Rings - The Fellowship of the Ring', author: 'J.R.R. Tolkien', publicationDate: new Date('07/29/1954') },
|
||||
{ id: 2, title: 'The Lord of the Rings - The Two Towers', author: 'J.R.R. Tolkien', publicationDate: new Date('11/11/1954') },
|
||||
{ id: 3, title: 'The Lord of the Rings - The Return of the King', author: 'J.R.R. Tolkien', publicationDate: new Date('10/20/1955') },
|
||||
{ id: 4, title: 'Dune', author: 'Frank Herbert', publicationDate: new Date('1965') },
|
||||
{ id: 5, title: 'Dune Messiah', author: 'Frank Herbert', publicationDate: new Date('1969') },
|
||||
{ id: 6, title: 'It', author: 'Stephen King', publicationDate: new Date('09/15/1986') },
|
||||
{ id: 7, title: 'Do Androids Dream of Electric Sheep?', author: 'Philip K. Dick', publicationDate: new Date('1968') }
|
||||
];
|
||||
@ -1,50 +0,0 @@
|
||||
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
||||
import { Injectable } from "@angular/core";
|
||||
import { BOOKS } from "../datas/books.stub";
|
||||
import { Book } from "../models/book.model";
|
||||
|
||||
@Injectable()
|
||||
export class BookService {
|
||||
private books: Book[];
|
||||
private readonly bookApiUrl = 'https://66e8848bb17821a9d9dcf68c.mockapi.io/books';
|
||||
|
||||
public constructor(private http: HttpClient){
|
||||
this.books = BOOKS;
|
||||
|
||||
this.http.get<Book[]>(this.bookApiUrl).subscribe(books => {
|
||||
books.forEach(b => {
|
||||
this.addBookToLocal(b);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public getAll(): Book[]{
|
||||
return this.books;
|
||||
}
|
||||
|
||||
public getBookById(id: number): Book | undefined{
|
||||
return this.books.find(b => b.id === id);
|
||||
}
|
||||
|
||||
public addBook(book: Book): void{
|
||||
this.addBookToLocal(book);
|
||||
this.addBookToApi(book);
|
||||
}
|
||||
|
||||
private addBookToLocal(book: Book): void{
|
||||
//console.log('addBookToLocal', book);
|
||||
if(book.id === 0){
|
||||
book.id = Math.max(...this.books.map(b => b.id)) + 1;
|
||||
}
|
||||
|
||||
const existedBook = this.books.find(b => b.title === book.title || b.id === Number(book.id));
|
||||
if(existedBook)
|
||||
return;
|
||||
|
||||
this.books.push(book);
|
||||
}
|
||||
|
||||
private addBookToApi(book: Book): void{
|
||||
this.http.post<Book>(this.bookApiUrl, book).subscribe();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue