diff --git a/apps/got/src/app/app.component.html b/apps/got/src/app/app.component.html index 0f4018b6..891a1d24 100644 --- a/apps/got/src/app/app.component.html +++ b/apps/got/src/app/app.component.html @@ -1 +1,19 @@ - +
+

Welcome to {{ title }}!

+
+
+ +
+ +
+ +
+ + diff --git a/apps/got/src/app/app.component.ts b/apps/got/src/app/app.component.ts index 128f5456..9ecad8f7 100644 --- a/apps/got/src/app/app.component.ts +++ b/apps/got/src/app/app.component.ts @@ -1,14 +1,146 @@ import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { NxWelcomeComponent } from './nx-welcome.component'; +import { BreadcrumbComponent, BreadcrumbItemDirective } from 'xng-breadcrumb'; @Component({ standalone: true, - imports: [NxWelcomeComponent, RouterModule], + imports: [RouterModule, BreadcrumbComponent, BreadcrumbItemDirective], selector: 'app-root', templateUrl: './app.component.html', - styles: ``, + styles: ` + +:host { + display: block; + font-family: sans-serif; + min-width: 300px; + max-width: 600px; + margin: 50px auto; +} + +.gutter-left { + margin-left: 9px; +} + +.col-span-2 { + grid-column: span 2; +} + +.flex { + display: flex; + align-items: center; + justify-content: center; +} + +header { + background-color: #143055; + color: white; + padding: 5px; + border-radius: 3px; +} + +main { + padding: 0 36px; +} + +p { + text-align: center; +} + +h1 { + text-align: center; + margin-left: 18px; + font-size: 24px; +} + +h2 { + text-align: center; + font-size: 20px; + margin: 40px 0 10px 0; +} + +.resources { + text-align: center; + list-style: none; + padding: 0; + display: grid; + grid-gap: 9px; + grid-template-columns: 1fr 1fr; +} + +.resource { + color: #0094ba; + height: 36px; + background-color: rgba(0, 0, 0, 0); + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 3px 9px; + text-decoration: none; +} + +.resource:hover { + background-color: rgba(68, 138, 255, 0.04); +} + +pre { + padding: 9px; + border-radius: 4px; + background-color: black; + color: #eee; +} + +details { + border-radius: 4px; + color: #333; + background-color: rgba(0, 0, 0, 0); + border: 1px solid rgba(0, 0, 0, 0.12); + padding: 3px 9px; + margin-bottom: 9px; +} + +summary { + cursor: pointer; + outline: none; + height: 36px; + line-height: 36px; +} + +.github-star-container { + margin-top: 12px; + line-height: 20px; +} + +.github-star-container a { + display: flex; + align-items: center; + text-decoration: none; + color: #333; +} + +.github-star-badge { + color: #24292e; + display: flex; + align-items: center; + font-size: 12px; + padding: 3px 10px; + border: 1px solid rgba(27, 31, 35, 0.2); + border-radius: 3px; + background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); + margin-left: 4px; + font-weight: 600; +} + +.github-star-badge:hover { + background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%); + border-color: rgba(27, 31, 35, 0.35); + background-position: -0.5em; +} +.github-star-badge .material-icons { + height: 16px; + width: 16px; + margin-right: 4px; +} +`, }) export class AppComponent { - title = 'game-of-thrones'; + title = 'Game Of Thrones'; } diff --git a/apps/got/src/app/app.config.ts b/apps/got/src/app/app.config.ts index ed404941..72622d28 100644 --- a/apps/got/src/app/app.config.ts +++ b/apps/got/src/app/app.config.ts @@ -1,7 +1,9 @@ import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { appRoutes } from './app.routes'; +import { DataService } from './data.service'; +import { provideHttpClient } from '@angular/common/http'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(appRoutes)], + providers: [provideHttpClient(), DataService, provideRouter(appRoutes)], }; diff --git a/apps/got/src/app/app.routes.ts b/apps/got/src/app/app.routes.ts index 8762dfe2..6b756c9f 100644 --- a/apps/got/src/app/app.routes.ts +++ b/apps/got/src/app/app.routes.ts @@ -1,3 +1,26 @@ import { Route } from '@angular/router'; +import { BookComponent } from './book/book.component'; +import { BooksComponent } from './books/books.component'; +import { CharacterComponent } from './character/character.component'; +import { HousesComponent } from './houses/houses.component'; -export const appRoutes: Route[] = []; +export const appRoutes: Route[] = [ + { + path: 'books', + component: BooksComponent, + }, + { + path: 'books/:bookId', + component: BookComponent, + children: [ + { + path: 'characters/:id', + component: CharacterComponent, + }, + ], + }, + { + path: 'houses', + component: HousesComponent, + }, +]; diff --git a/apps/got/src/app/book/book.component.html b/apps/got/src/app/book/book.component.html new file mode 100644 index 00000000..08297a91 --- /dev/null +++ b/apps/got/src/app/book/book.component.html @@ -0,0 +1,8 @@ +
+ +
+loading ... diff --git a/apps/got/src/app/book/book.component.ts b/apps/got/src/app/book/book.component.ts new file mode 100644 index 00000000..335e0b64 --- /dev/null +++ b/apps/got/src/app/book/book.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; +import { DataService } from '../data.service'; +import { Observable } from 'rxjs'; +import { ActivatedRoute, RouterLink } from '@angular/router'; +import { NgIf, NgFor, AsyncPipe } from '@angular/common'; + +@Component({ + selector: 'app-book', + templateUrl: './book.component.html', + standalone: true, + imports: [NgIf, NgFor, RouterLink, AsyncPipe], +}) +export class BookComponent implements OnInit { + book$: Observable<{ characters: string[] }>; + constructor(private dataService: DataService, private route: ActivatedRoute) {} + + ngOnInit(): void { + this.book$ = this.dataService.getBook(this.route.snapshot.paramMap.get('bookId')); + } +} diff --git a/apps/got/src/app/books/books.component.html b/apps/got/src/app/books/books.component.html new file mode 100644 index 00000000..fd0230b1 --- /dev/null +++ b/apps/got/src/app/books/books.component.html @@ -0,0 +1,10 @@ + + +
+ +
+loading ... diff --git a/apps/got/src/app/books/books.component.ts b/apps/got/src/app/books/books.component.ts new file mode 100644 index 00000000..325a93bf --- /dev/null +++ b/apps/got/src/app/books/books.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; +import { DataService } from '../data.service'; +import { Observable } from 'rxjs'; +import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { RouterOutlet, RouterLink } from '@angular/router'; + +@Component({ + selector: 'app-books', + templateUrl: './books.component.html', + standalone: true, + imports: [RouterOutlet, NgIf, NgFor, RouterLink, AsyncPipe], +}) +export class BooksComponent implements OnInit { + books$: Observable<{ url: string; numberOfPages: string; name: string }[]>; + constructor(private dataService: DataService) {} + + ngOnInit(): void { + this.books$ = this.dataService.getBooks(); + } +} diff --git a/apps/got/src/app/character/character.component.html b/apps/got/src/app/character/character.component.html new file mode 100644 index 00000000..f81c6900 --- /dev/null +++ b/apps/got/src/app/character/character.component.html @@ -0,0 +1 @@ +

character works!

diff --git a/apps/got/src/app/character/character.component.ts b/apps/got/src/app/character/character.component.ts new file mode 100644 index 00000000..4b2be43d --- /dev/null +++ b/apps/got/src/app/character/character.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-character', + templateUrl: './character.component.html', + standalone: true, +}) +export class CharacterComponent {} diff --git a/apps/got/src/app/data.service.ts b/apps/got/src/app/data.service.ts new file mode 100644 index 00000000..c75da0a2 --- /dev/null +++ b/apps/got/src/app/data.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) +export class DataService { + private API = `https://www.anapioficeandfire.com/api`; + + constructor(private http: HttpClient) {} + + getBooks(): Observable<{ url: string; numberOfPages: string; name: string }[]> { + return this.http.get<{ url: string; numberOfPages: string; name: string }[]>(`${this.API}/books`); + } + + getBook(id: string): Observable<{ characters: string[] }> { + return this.http.get<{ characters: string[] }>(`${this.API}/books/${id}`); + } + + getCharacters(): Observable { + return this.http.get(`${this.API}/characters`); + } + + getHouses(): Observable<{ name: string }[]> { + return this.http.get<{ name: string }[]>(`${this.API}/houses`); + } +} diff --git a/apps/got/src/app/houses/houses.component.html b/apps/got/src/app/houses/houses.component.html new file mode 100644 index 00000000..e57fc99a --- /dev/null +++ b/apps/got/src/app/houses/houses.component.html @@ -0,0 +1,8 @@ +
+
    +
  • + {{ house.name }} +
  • +
+
+loading ... diff --git a/apps/got/src/app/houses/houses.component.ts b/apps/got/src/app/houses/houses.component.ts new file mode 100644 index 00000000..8edbe76a --- /dev/null +++ b/apps/got/src/app/houses/houses.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { DataService } from '../data.service'; +import { NgIf, NgFor, AsyncPipe } from '@angular/common'; + +@Component({ + selector: 'app-houses', + templateUrl: './houses.component.html', + standalone: true, + imports: [NgIf, NgFor, AsyncPipe], +}) +export class HousesComponent implements OnInit { + houses$: Observable<{ name: string }[]>; + constructor(private dataService: DataService) {} + + ngOnInit(): void { + this.houses$ = this.dataService.getHouses(); + } +} diff --git a/apps/got/src/app/nx-welcome.component.ts b/apps/got/src/app/nx-welcome.component.ts deleted file mode 100644 index 88d29df0..00000000 --- a/apps/got/src/app/nx-welcome.component.ts +++ /dev/null @@ -1,725 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@Component({ - selector: 'app-nx-welcome', - standalone: true, - imports: [CommonModule], - template: ` - - -
-
- -
-

- Hello there, - Welcome game-of-thrones 👋 -

-
- -
-
-

- - - - You're up and running -

- What's next? -
-
- - - -
-
- - - -
-

Next steps

-

Here are some things you can do with Nx:

-
- - - - - Add UI library - -
# Generate UI lib
-nx g @nx/angular:lib ui
-# Add a component
-nx g @nx/angular:component ui/src/lib/button
-
-
- - - - - View project details - -
nx show project game-of-thrones --web
-
-
- - - - - View interactive project graph - -
nx graph
-
-
- - - - - Run affected commands - -
# see what's been affected by changes
-nx affected:graph
-# run tests for current changes
-nx affected:test
-# run e2e tests for current changes
-nx affected:e2e
-
-
-

- Carefully crafted with - - - -

-
-
- `, - styles: [], - encapsulation: ViewEncapsulation.None, -}) -export class NxWelcomeComponent {} diff --git a/apps/got/src/styles.css b/apps/got/src/styles.css index 90d4ee00..f0e509b0 100644 --- a/apps/got/src/styles.css +++ b/apps/got/src/styles.css @@ -1 +1,5 @@ /* You can add global styles to this file, and also import other style files */ +.list-item { + list-style: none; + padding: 8px 0; +} diff --git a/apps/got/tsconfig.json b/apps/got/tsconfig.json index a28fec9a..27e0a99b 100644 --- a/apps/got/tsconfig.json +++ b/apps/got/tsconfig.json @@ -4,7 +4,7 @@ "useDefineForClassFields": false, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, - "strict": true, + "strict": false, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true,