generated from nhcarrigan/template
Naomi Carrigan
23243278e4
All checks were successful
Node.js CI / Lint and Test (push) Successful in 48s
### Explanation _No response_ ### Issue _No response_ ### Attestations - [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [x] I have pinned the dependencies to a specific patch version. ### Style - [x] I have run the linter and resolved any errors. - [x] My pull request uses an appropriate title, matching the conventional commit standards. - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: #1 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
/**
|
|
* @copyright nhcarrigan
|
|
* @license Naomi's Public License
|
|
* @author Naomi Carrigan
|
|
*/
|
|
|
|
import { CommonModule } from "@angular/common";
|
|
import { Component, inject, input, signal } from "@angular/core";
|
|
import { ActivatedRoute, RouterModule } from "@angular/router";
|
|
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
|
|
import { faLeftLong, faRightLong } from "@fortawesome/free-solid-svg-icons";
|
|
import { ComicService } from "../comic-service.js";
|
|
|
|
@Component({
|
|
imports: [ CommonModule, RouterModule, FontAwesomeModule ],
|
|
selector: "app-comic",
|
|
styleUrl: "./comic.css",
|
|
templateUrl: "./comic.html",
|
|
})
|
|
export class Comic {
|
|
public comicId = signal("");
|
|
public readonly id = input<string | undefined>("id");
|
|
// eslint-disable-next-line stylistic/max-len -- I dunno.
|
|
public comic: { number: number; title: string; date: string } | undefined;
|
|
public error: string | undefined;
|
|
public previousComicId: string | undefined;
|
|
public nextComicId: string | undefined;
|
|
public readonly backIcon = faLeftLong;
|
|
public readonly forwardIcon = faRightLong;
|
|
private readonly activatedRoute = inject(ActivatedRoute);
|
|
|
|
public constructor(private readonly comicService: ComicService) {
|
|
this.comicService.
|
|
loadComics().
|
|
then(() => {
|
|
this.activatedRoute.params.subscribe((parameters_) => {
|
|
const parameters: Record<string, string> = parameters_;
|
|
console.log(`FoundID: ${parameters["id"]}`);
|
|
this.comicId.set(
|
|
parameters["id"] ?? this.comicService.getLatestComicId(),
|
|
);
|
|
this.previousComicId = this.comicService.
|
|
getComicById(String(Number.parseInt(this.comicId(), 10) - 1))?.
|
|
number.toString();
|
|
this.nextComicId = this.comicService.
|
|
getComicById(String(Number.parseInt(this.comicId(), 10) + 1))?.
|
|
number.toString();
|
|
|
|
// Load the comic data for the new ID
|
|
this.comic = this.comicService.getComicById(this.comicId());
|
|
if (this.comic) {
|
|
// Clear any previous error
|
|
this.error = undefined;
|
|
} else {
|
|
this.error = `Cannot find comic with ID ${this.comicId()}.`;
|
|
}
|
|
});
|
|
}).
|
|
catch((error: unknown) => {
|
|
this.error = `Failed to load comics: ${
|
|
error instanceof Error
|
|
? error.message
|
|
: "Please check the browser console for more details."
|
|
}`;
|
|
console.error("Error loading comics:", error);
|
|
});
|
|
}
|
|
}
|