Frontend extra

frontend/kaiser/package.json

@@ -11,7 +11,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.3.0",
-    "@angular/cdk": "^13.3.8",
+    "@angular/cdk": "^13.3.9",
     "@angular/common": "~13.3.0",
     "@angular/compiler": "~13.3.0",
     "@angular/core": "~13.3.0",

frontend/kaiser/src/app/anime/anime.component.html

@@ -0,0 +1,17 @@
+<!-- <p>anime works!</p> -->
+<p-table [value]="anime">
+  <ng-template pTemplate="header">
+    <tr>
+      <th>Name</th>
+      <th>Release Date</th>
+      <th>Rating</th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-anime>
+    <tr>
+      <td>{{anime.name}}</td>
+      <td>{{anime.releaseDate}}</td>
+      <td>{{anime.rating}}</td>
+    </tr>
+  </ng-template>
+</p-table>

frontend/kaiser/src/app/anime/anime.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnimeComponent } from './anime.component';
+
+describe('AnimeComponent', () => {
+  let component: AnimeComponent;
+  let fixture: ComponentFixture<AnimeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AnimeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnimeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/kaiser/src/app/anime/anime.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { AnimeService, Anime } from '../service/anime.service';
+
+@Component({
+  selector: 'app-anime',
+  templateUrl: './anime.component.html',
+  styleUrls: ['./anime.component.css']
+})
+export class AnimeComponent implements OnInit {
+
+  anime: Anime[];
+  constructor(private animeService: AnimeService) { }
+
+  ngOnInit(): void {
+    this.animeService.getAnime().
+      then(anime => this.anime = anime);
+  }
+
+}

frontend/kaiser/src/app/app-routing.module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AnimeComponent } from './anime/anime.component';
 import { BookDataComponent } from './book-data/book-data.component';
+import { MovieComponent } from './movie/movie.component';
 
 const routes: Routes = [
-  { path: 'books', component: BookDataComponent }
+  { path: 'books', component: BookDataComponent },
+  { path: 'anime', component: AnimeComponent },
+  { path: 'movie', component: MovieComponent}
 ];
 
 @NgModule({

frontend/kaiser/src/app/app.module.ts

@@ -7,11 +7,15 @@ import { BookDataComponent } from './book-data/book-data.component';
 import {TableModule} from 'primeng/table';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { AnimeComponent } from './anime/anime.component';
+import { MovieComponent } from './movie/movie.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    BookDataComponent
+    BookDataComponent,
+    AnimeComponent,
+    MovieComponent
   ],
   imports: [
     BrowserModule,

frontend/kaiser/src/app/movie/movie.component.html

@@ -0,0 +1,17 @@
+<p>movie works!</p>
+<p-table [value]="movie">
+    <ng-template pTemplate="header">
+      <tr>
+        <th>Name</th>
+        <th>Release Date</th>
+        <th>Rating</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-movie>
+      <tr>
+        <td>{{movie.name}}</td>
+        <td>{{movie.releaseDate}}</td>
+        <td>{{movie.rating}}</td>
+      </tr>
+    </ng-template>
+  </p-table>

frontend/kaiser/src/app/movie/movie.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MovieComponent } from './movie.component';
+
+describe('MovieComponent', () => {
+  let component: MovieComponent;
+  let fixture: ComponentFixture<MovieComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MovieComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MovieComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/kaiser/src/app/movie/movie.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Movie, MovieService } from '../service/movie.service';
+
+@Component({
+  selector: 'app-movie',
+  templateUrl: './movie.component.html',
+  styleUrls: ['./movie.component.css']
+})
+export class MovieComponent implements OnInit {
+
+  movie: Movie[];
+  constructor(private movieService: MovieService) { }
+
+  ngOnInit(): void {
+    this.movieService.getMovie().
+      then(movie => this.movie = movie);
+  }
+
+}

frontend/kaiser/src/app/service/anime.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+export interface Anime {
+  name;
+  releaseDate;
+  rating;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnimeService {
+
+  constructor(private http: HttpClient) {}
+
+  getAnime() {
+    return this.http.get<any>('assets/anime.json')
+      .toPromise()
+      .then(res => <Anime[]>res.data)
+      .then(data => { return data; });
+    }
+}

frontend/kaiser/src/app/service/book.service.ts

@@ -16,6 +16,7 @@ export class BookService {
 
   getBooks() {
     return this.http.get<any>('assets/books.json')
+
       .toPromise()
       .then(res => <Book[]>res.data)
       .then(data => { return data; });

frontend/kaiser/src/app/service/movie.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+export interface Movie {
+  name;
+  releaseDate;
+  rating;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MovieService {
+
+  constructor(private http: HttpClient) {}
+
+  getMovie() {
+    return this.http.get<any>('assets/movie.json')
+      .toPromise()
+      .then(res => <Movie[]>res.data)
+      .then(data => { return data; });
+    }
+}

frontend/kaiser/src/assets/anime.json

@@ -0,0 +1,6 @@
+{
+    "data": [
+        {"name": "TFate Stay Night", "releaseDate": "2006/6/17", "rating": "7.28"},
+        {"name": "Mobile Suit Gundam SEED", "releaseDate": "2003/9/27", "rating": "7.75"}
+    ]
+}

frontend/kaiser/src/assets/movie.json

@@ -0,0 +1,6 @@
+{
+    "data": [
+        {"name": "Black Panther: Wakanda Forever", "releaseDate": "2022", "rating": "7.4"},
+        {"name": "Top Gun Maverick", "releaseDate": "2022", "rating": "8.4"}
+    ]
+}