Finished the skeleton code for navigating Kavita.

All UIs need to be reworked and major code cleanup.

src/app/_models/series.ts

@@ -6,5 +6,6 @@ export interface Series {
     originalName: string;
     sortName: string;
     summary: string;
+    coverImage: string;
     volumes: Volume[];
 }

src/app/_models/volume.ts

@@ -1,5 +1,6 @@
 export interface Volume {
     id: number;
     number: string;
-    files: Array<string>; // In future, we can refactor this to be a type with extra metadata around it
+    files: Array<string>;
+    coverImage: string;
 }

src/app/_services/series.service.ts

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from 'src/environments/environment';
 import { Series } from '../_models/series';
+import { Volume } from '../_models/volume';
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +13,15 @@ export class SeriesService {
 
   constructor(private httpClient: HttpClient) { }
 
-  getSeries(libraryId: number) {
+  getSeriesForLibrary(libraryId: number) {
     return this.httpClient.get<Series[]>(this.baseUrl + 'library/series?libraryId=' + libraryId);
   }
+
+  getSeries(seriesId: number) {
+    return this.httpClient.get<Series>(this.baseUrl + 'series/' + seriesId);
+  }
+
+  getVolumes(seriesId: number) {
+    return this.httpClient.get<Volume[]>(this.baseUrl + 'series/volumes?seriesId=' + seriesId);
+  }
 }

src/app/library-detail/library-detail.component.html

@@ -1,6 +1,12 @@
-<h2>Title (Manga/Recently Added)</h2>
-<div class="row">
-    <div class="col-md-2" *ngFor="let series of series">
-        <app-card-item [title]="series.name" (clicked)="seriesClicked(series)"></app-card-item>
+<div class="container">
+    <h2>Title (Manga/Recently Added)</h2>
+    <div class="row">
+        <div class="col-md-2" *ngFor="let manga of series">
+            <app-card-item [title]="manga.name" (clicked)="seriesClicked(manga)"></app-card-item>
+        </div>
     </div>
+    <ng-container *ngIf="series.length === 0">
+        <!-- Put a cricket here -->
+        Nothing here....
+    </ng-container>
 </div>

src/app/library-detail/library-detail.component.ts

@@ -23,7 +23,7 @@ export class LibraryDetailComponent implements OnInit {
       return;
     }
     this.libraryId = parseInt(routeId, 10);
-    this.seriesService.getSeries(this.libraryId).subscribe(series => {
+    this.seriesService.getSeriesForLibrary(this.libraryId).subscribe(series => {
       this.series = series;
     });
   }

src/app/series-detail/series-detail.component.html

@@ -1,20 +1,29 @@
-<div class="container">
+<div class="container" *ngIf="series !== undefined">
     <div class="row">
-        <div class="col-md-6">
-            <div class="card">
-                <!-- <img src="{{series.coverImage === null ? 'image-placeholder.jpg' : series.coverImage}}"> -->
-                <p>title</p>
-            </div>
+        <div class="col-md-2">
+            <app-card-item [imageUrl]="series.coverImage === null ? 'assets/images/image-placeholder.jpg' : series.coverImage"></app-card-item>
+            <button class="btn btn-primary">Read</button>
         </div>
-        <div class="col-md-6">
-            <h2>Title</h2>
-            <button class="btn btn-primary">Read/Continue Reading</button>
-            (metadata here)
+        <div class="col-md-10">
+            <h2>{{series.name | titlecase}}</h2>
+            <div class="row">
+                <ngb-rating></ngb-rating>
+            </div>
+            <div class="row">
+                
+            </div>
+            <div class="row">
+                <p>{{series?.summary}}</p>
+            </div>
+            
         </div>
     </div>
 
+    <h4 class="mt-3">Volumes</h4>
     <div class="row mt-3">
-        Volumes here
+        <div class="col-md-2" *ngFor="let volume of volumes">
+            <app-card-item [entity]="volume" [title]="'Volume ' + volume.number" (click)="openVolume(volume)"></app-card-item>
+        </div>
     </div>
 
 </div>

src/app/series-detail/series-detail.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Series } from '../_models/series';
+import { Volume } from '../_models/volume';
+import { SeriesService } from '../_services/series.service';
 
 @Component({
   selector: 'app-series-detail',
@@ -9,10 +12,29 @@ import { Series } from '../_models/series';
 export class SeriesDetailComponent implements OnInit {
 
   series: Series | undefined;
+  volumes: Volume[] = [];
 
-  constructor() { }
+  constructor(private route: ActivatedRoute, private seriesService: SeriesService) { }
 
   ngOnInit(): void {
+
+    const routeId = this.route.snapshot.paramMap.get('id');
+    if (routeId === null) {
+      console.error('No library id was passed. Redirecting to home');
+      //this.router.navigateByUrl('/home');
+      return;
+    }
+    const seriesId = parseInt(routeId, 10);
+    this.seriesService.getSeries(seriesId).subscribe(series => {
+      this.series = series;
+      this.seriesService.getVolumes(this.series.id).subscribe(volumes => {
+        this.volumes = volumes;
+      });
+    });
+  }
+
+  openVolume(volume: Volume) {
+    alert('TODO: Let user read Manga');
   }
 
 }

src/app/shared/card-item/card-item.component.html

@@ -1,7 +1,7 @@
 <div class="card" style="width: 18rem;">
     <img (click)="handleClick()" class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}">
 
-    <div class="card-body text-center">
+    <div class="card-body text-center" *ngIf="title.length > 0 || actions.length > 0">
         <h5 class="card-title" (click)="handleClick()">{{title}}</h5>
         <ng-container *ngIf="actions.length > 0">
             <div class="col">

src/app/shared/card-item/card-item.component.ts

@@ -15,7 +15,7 @@ export class CardItemComponent implements OnInit {
 
   @Input() imageUrl = '';
   @Input() title = '';
-  @Input() actions: CardItemAction[] = [];
+  @Input() actions: CardItemAction[] = []; // TODO: Create a factory that generates actions based on if admin, etc. for each card type.
   @Input() entity: any; // This is the entity we are representing. It will be returned if an action is executed. 
   @Output() clicked = new EventEmitter<string>();