From 2de5b804afb288142e5fde7ebe03a264db894776 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 17:00:23 +0100 Subject: [PATCH 01/17] Components: fix some components being double nested --- src/app/app.component.ts | 2 +- .../create-edit-modal/create-edit-modal.component.css | 0 .../create-edit-modal/create-edit-modal.component.html | 0 .../create-edit-modal.component.spec.ts | 0 .../create-edit-modal/create-edit-modal.component.ts | 10 +++++----- .../toast-container.component.css | 0 .../toast-container.component.html | 0 .../toast-container.component.spec.ts | 0 .../{toast-container => }/toast-container.component.ts | 2 +- src/pages/shows/shows.component.ts | 2 +- 10 files changed, 8 insertions(+), 8 deletions(-) rename src/components/{create-modal => }/create-edit-modal/create-edit-modal.component.css (100%) rename src/components/{create-modal => }/create-edit-modal/create-edit-modal.component.html (100%) rename src/components/{create-modal => }/create-edit-modal/create-edit-modal.component.spec.ts (100%) rename src/components/{create-modal => }/create-edit-modal/create-edit-modal.component.ts (90%) rename src/components/toast-container/{toast-container => }/toast-container.component.css (100%) rename src/components/toast-container/{toast-container => }/toast-container.component.html (100%) rename src/components/toast-container/{toast-container => }/toast-container.component.spec.ts (100%) rename src/components/toast-container/{toast-container => }/toast-container.component.ts (84%) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2e9431a..1ff2e6e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; -import {ToastContainerComponent} from '../components/toast-container/toast-container/toast-container.component'; +import {ToastContainerComponent} from '../components/toast-container/toast-container.component'; import {NgbCollapse} from '@ng-bootstrap/ng-bootstrap'; import {routes} from './app.routes'; diff --git a/src/components/create-modal/create-edit-modal/create-edit-modal.component.css b/src/components/create-edit-modal/create-edit-modal.component.css similarity index 100% rename from src/components/create-modal/create-edit-modal/create-edit-modal.component.css rename to src/components/create-edit-modal/create-edit-modal.component.css diff --git a/src/components/create-modal/create-edit-modal/create-edit-modal.component.html b/src/components/create-edit-modal/create-edit-modal.component.html similarity index 100% rename from src/components/create-modal/create-edit-modal/create-edit-modal.component.html rename to src/components/create-edit-modal/create-edit-modal.component.html diff --git a/src/components/create-modal/create-edit-modal/create-edit-modal.component.spec.ts b/src/components/create-edit-modal/create-edit-modal.component.spec.ts similarity index 100% rename from src/components/create-modal/create-edit-modal/create-edit-modal.component.spec.ts rename to src/components/create-edit-modal/create-edit-modal.component.spec.ts diff --git a/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts similarity index 90% rename from src/components/create-modal/create-edit-modal/create-edit-modal.component.ts rename to src/components/create-edit-modal/create-edit-modal.component.ts index caeac9d..586c624 100644 --- a/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -1,12 +1,12 @@ import {Component, inject} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; -import {ShowsApiService} from '../../../services/shows/shows-api.service'; -import {ShowsApiCreation} from '../../../interfaces/shows-api-creation'; -import {ToastService} from '../../../services/toast/toast.service'; -import {Show} from '../../../interfaces/show'; +import {ShowsApiService} from '../../services/shows/shows-api.service'; +import {ShowsApiCreation} from '../../interfaces/shows-api-creation'; +import {ToastService} from '../../services/toast/toast.service'; +import {Show} from '../../interfaces/show'; import {formatDate} from '@angular/common'; -import {ShowsApiDeletionEdit} from '../../../interfaces/shows-api-deletion-edit'; +import {ShowsApiDeletionEdit} from '../../interfaces/shows-api-deletion-edit'; @Component({ selector: 'app-create-edit-modal', diff --git a/src/components/toast-container/toast-container/toast-container.component.css b/src/components/toast-container/toast-container.component.css similarity index 100% rename from src/components/toast-container/toast-container/toast-container.component.css rename to src/components/toast-container/toast-container.component.css diff --git a/src/components/toast-container/toast-container/toast-container.component.html b/src/components/toast-container/toast-container.component.html similarity index 100% rename from src/components/toast-container/toast-container/toast-container.component.html rename to src/components/toast-container/toast-container.component.html diff --git a/src/components/toast-container/toast-container/toast-container.component.spec.ts b/src/components/toast-container/toast-container.component.spec.ts similarity index 100% rename from src/components/toast-container/toast-container/toast-container.component.spec.ts rename to src/components/toast-container/toast-container.component.spec.ts diff --git a/src/components/toast-container/toast-container/toast-container.component.ts b/src/components/toast-container/toast-container.component.ts similarity index 84% rename from src/components/toast-container/toast-container/toast-container.component.ts rename to src/components/toast-container/toast-container.component.ts index c1eac7a..6538dea 100644 --- a/src/components/toast-container/toast-container/toast-container.component.ts +++ b/src/components/toast-container/toast-container.component.ts @@ -1,5 +1,5 @@ import {Component, inject} from '@angular/core'; -import {ToastService} from '../../../services/toast/toast.service'; +import {ToastService} from '../../services/toast/toast.service'; import {NgbToast} from '@ng-bootstrap/ng-bootstrap'; @Component({ diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 6c1eefb..ae944f0 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -5,7 +5,7 @@ import {ShowsApiResponse} from '../../interfaces/shows-api-response'; import {Toast} from '../../interfaces/toast'; import {ToastService} from '../../services/toast/toast.service'; import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap'; -import {CreateEditModalComponent} from '../../components/create-modal/create-edit-modal/create-edit-modal.component'; +import {CreateEditModalComponent} from '../../components/create-edit-modal/create-edit-modal.component'; import {DatePipe} from '@angular/common'; import {DeleteModalComponent} from '../../components/delete-modal/delete-modal.component'; From 58bb2cb3ca9d49f116cad5ef855df3e78c15ba9e Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 17:25:02 +0100 Subject: [PATCH 02/17] Components/create-edit-modal: don't add date form control separately --- .../create-edit-modal.component.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts index 586c624..3570ebc 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -31,18 +31,18 @@ export class CreateEditModalComponent { private initForm() { let formattedDate: string - this.newShowForm = new FormGroup({ - title: new FormControl(this.show?.title, Validators.required), - seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]), - episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]), - description: new FormControl(this.show?.description, Validators.required) - }) if (this.show?.date !== undefined) { formattedDate = formatDate(this.show?.date, "YYYY-MM-dd", "en") } else { formattedDate = "" } - this.newShowForm.addControl("date", new FormControl(formattedDate, Validators.required)) + this.newShowForm = new FormGroup({ + title: new FormControl(this.show?.title, Validators.required), + seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]), + date: new FormControl(formattedDate, Validators.required), + episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]), + description: new FormControl(this.show?.description, Validators.required) + }) } protected dismiss() { From aec0a34f71d24d7aca235cedd20ab98c9fa5ecdd Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 18:20:50 +0100 Subject: [PATCH 03/17] Components/create-edit-modal: add floating labels --- .../create-edit-modal.component.html | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/create-edit-modal/create-edit-modal.component.html b/src/components/create-edit-modal/create-edit-modal.component.html index 951fd1b..b8db797 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.html +++ b/src/components/create-edit-modal/create-edit-modal.component.html @@ -10,26 +10,25 @@
- -
+
+ -
-
+
+ -
-
+
+ -
-
+
+ -
-
+
+ -
From b2cfda8c321670fe28f06ec05768a26e443e794d Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 18:42:26 +0100 Subject: [PATCH 04/17] Components/create-edit-modal: add controls for adding and removing images --- .../create-edit-modal.component.html | 22 +++++++++++++++++++ .../create-edit-modal.component.ts | 17 ++++++++++++-- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/src/components/create-edit-modal/create-edit-modal.component.html b/src/components/create-edit-modal/create-edit-modal.component.html index b8db797..2f6eb15 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.html +++ b/src/components/create-edit-modal/create-edit-modal.component.html @@ -30,6 +30,28 @@
+ +
+
    + @for (imageControl of images.controls; track imageControl) { +
  • +
    +
    + + +
    + +
    +
    • + } +
  • + +
    • +
+
diff --git a/src/components/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts index 3570ebc..87bec2c 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -1,6 +1,6 @@ import {Component, inject} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; -import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; +import {FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {ShowsApiService} from '../../services/shows/shows-api.service'; import {ShowsApiCreation} from '../../interfaces/shows-api-creation'; import {ToastService} from '../../services/toast/toast.service'; @@ -41,14 +41,27 @@ export class CreateEditModalComponent { seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]), date: new FormControl(formattedDate, Validators.required), episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]), - description: new FormControl(this.show?.description, Validators.required) + description: new FormControl(this.show?.description, Validators.required), + images: new FormArray([]) }) } + get images(): FormArray { + return this.newShowForm.get("images") as FormArray + } + protected dismiss() { this.activeModal.dismiss() } + protected addImageControl() { + this.images.push(new FormControl("")) + } + + protected removeImageControl(index: number) { + this.images.removeAt(index) + } + protected formSubmitted(form: FormGroup) { let show: Show = { title: form.get("title")?.value, From f839706d05d0c5052c19569a7f1e2bc5333f4436 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 18:45:45 +0100 Subject: [PATCH 05/17] Components/create-edit-modal: add validation to image controls --- .../create-edit-modal/create-edit-modal.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts index 87bec2c..b00c501 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -55,7 +55,8 @@ export class CreateEditModalComponent { } protected addImageControl() { - this.images.push(new FormControl("")) + const urlRegex: string = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?' + this.images.push(new FormControl("", [Validators.required, Validators.pattern(urlRegex)])) } protected removeImageControl(index: number) { From 455e2869a5430d24d461ad0b76579f455bcb7a68 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 19:01:54 +0100 Subject: [PATCH 06/17] Components/create-edit-modal: make first image mandatory --- .../create-edit-modal/create-edit-modal.component.html | 7 +++++-- .../create-edit-modal/create-edit-modal.component.ts | 2 ++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/create-edit-modal/create-edit-modal.component.html b/src/components/create-edit-modal/create-edit-modal.component.html index 2f6eb15..0ccba84 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.html +++ b/src/components/create-edit-modal/create-edit-modal.component.html @@ -40,8 +40,11 @@
- + @if (!$first) { + + }
} diff --git a/src/components/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts index b00c501..91864f8 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -44,6 +44,8 @@ export class CreateEditModalComponent { description: new FormControl(this.show?.description, Validators.required), images: new FormArray([]) }) + + this.addImageControl() } get images(): FormArray { From cae2fd1e097c0c38e356d29d2fc0712ae12d5c45 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 19:17:18 +0100 Subject: [PATCH 07/17] Interfaces/show: add images --- src/interfaces/show.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/interfaces/show.ts b/src/interfaces/show.ts index bdb1933..a81e707 100644 --- a/src/interfaces/show.ts +++ b/src/interfaces/show.ts @@ -7,4 +7,5 @@ export interface Show { episodes: number description: string genres: string[] + images: string[] } From a52a76b6d0b28a8ad2ab957a559722ceaf1b5596 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 19:17:51 +0100 Subject: [PATCH 08/17] Components/create-edit-modal: send and recieve images from api --- .../create-edit-modal.component.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts index 91864f8..2700659 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -45,7 +45,13 @@ export class CreateEditModalComponent { images: new FormArray([]) }) - this.addImageControl() + if (this.show?.images !== undefined) { + this.show?.images.forEach((imageUrl: string) => { + this.addImageControl(imageUrl) + }) + } else { + this.addImageControl() + } } get images(): FormArray { @@ -56,9 +62,9 @@ export class CreateEditModalComponent { this.activeModal.dismiss() } - protected addImageControl() { + protected addImageControl(value: string = "") { const urlRegex: string = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?' - this.images.push(new FormControl("", [Validators.required, Validators.pattern(urlRegex)])) + this.images.push(new FormControl(value, [Validators.required, Validators.pattern(urlRegex)])) } protected removeImageControl(index: number) { @@ -72,11 +78,11 @@ export class CreateEditModalComponent { seasons: form.get("seasons")?.value, episodes: form.get("episodes")?.value, description: form.get("description")?.value, + images: form.get("images")?.value, //TODO: Allow user to specify genres genres: [] } - if (!this.editMode) { this.showsService.sendShow(show).subscribe({ next: (response: ShowsApiCreation) => { From 1c9b1487de4aafdf7c031ec09d6db9177a303300 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 19:52:37 +0100 Subject: [PATCH 09/17] Components/create-edit-modal: change url validation regex --- src/components/create-edit-modal/create-edit-modal.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts index 2700659..7dbc938 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -63,7 +63,7 @@ export class CreateEditModalComponent { } protected addImageControl(value: string = "") { - const urlRegex: string = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?' + const urlRegex = "(https?:\\/\\/(?:www\\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\.[^\\s]{2,}|www\\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\.[^\\s]{2,}|https?:\\/\\/(?:www\\.|(?!www))[a-zA-Z0-9]+\\.[^\\s]{2,}|www\\.[a-zA-Z0-9]+\\.[^\\s]{2,})" this.images.push(new FormControl(value, [Validators.required, Validators.pattern(urlRegex)])) } From 13153fc9d4c67f001a118ac37338ef3126303ce6 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 20:12:08 +0100 Subject: [PATCH 10/17] Pages/shows: fix card grid --- src/pages/shows/shows.component.html | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/pages/shows/shows.component.html b/src/pages/shows/shows.component.html index 8f6cc94..6cefc1d 100644 --- a/src/pages/shows/shows.component.html +++ b/src/pages/shows/shows.component.html @@ -1,17 +1,19 @@
-
+
@for (show of shows; track show._id) { -
- -
-
{{ show.title }}
-

{{ show.date | date }}

- - +
+
+ +
+
{{ show.title }}
+

{{ show.date | date }}

+ + +
} From 747e7335745aa20524e62b6893ace1c31dae82b9 Mon Sep 17 00:00:00 2001 From: Toast Date: Fri, 7 Feb 2025 14:12:05 +0100 Subject: [PATCH 11/17] Pages: make genres page --- src/app/app.routes.ts | 5 +++++ src/pages/genres/genres.component.css | 0 src/pages/genres/genres.component.html | 1 + src/pages/genres/genres.component.spec.ts | 23 +++++++++++++++++++++++ src/pages/genres/genres.component.ts | 11 +++++++++++ 5 files changed, 40 insertions(+) create mode 100644 src/pages/genres/genres.component.css create mode 100644 src/pages/genres/genres.component.html create mode 100644 src/pages/genres/genres.component.spec.ts create mode 100644 src/pages/genres/genres.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index e6930b8..9001451 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,5 +1,6 @@ import {Routes} from '@angular/router'; import {ShowsComponent} from '../pages/shows/shows.component'; +import {GenresComponent} from '../pages/genres/genres.component'; export const routes: Routes = [ { @@ -10,5 +11,9 @@ export const routes: Routes = [ { path: 'shows', component: ShowsComponent + }, + { + path: 'genres', + component: GenresComponent } ]; diff --git a/src/pages/genres/genres.component.css b/src/pages/genres/genres.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/genres/genres.component.html b/src/pages/genres/genres.component.html new file mode 100644 index 0000000..924eeba --- /dev/null +++ b/src/pages/genres/genres.component.html @@ -0,0 +1 @@ +

genres works!

diff --git a/src/pages/genres/genres.component.spec.ts b/src/pages/genres/genres.component.spec.ts new file mode 100644 index 0000000..40327a5 --- /dev/null +++ b/src/pages/genres/genres.component.spec.ts @@ -0,0 +1,23 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; + +import {GenresComponent} from './genres.component'; + +describe('CategoriesComponent', () => { + let component: GenresComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [GenresComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GenresComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pages/genres/genres.component.ts b/src/pages/genres/genres.component.ts new file mode 100644 index 0000000..8ac0f86 --- /dev/null +++ b/src/pages/genres/genres.component.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'app-genres', + imports: [], + templateUrl: './genres.component.html', + styleUrl: './genres.component.css' +}) +export class GenresComponent { + +} From b44fe2e51d43161f6581e91f83792295540da029 Mon Sep 17 00:00:00 2001 From: Toast Date: Fri, 7 Feb 2025 14:26:15 +0100 Subject: [PATCH 12/17] Interfaces: add genre --- src/interfaces/genre.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/interfaces/genre.ts diff --git a/src/interfaces/genre.ts b/src/interfaces/genre.ts new file mode 100644 index 0000000..c1e9d6e --- /dev/null +++ b/src/interfaces/genre.ts @@ -0,0 +1,6 @@ +export interface Genre { + // ID is assigned by the DB, so I don't want to have to specify it + _id?: string + name: string + showIDs: string[] +} From 1dd0333bc38336980b272b297b52b4c89310adc4 Mon Sep 17 00:00:00 2001 From: Toast Date: Fri, 7 Feb 2025 18:28:28 +0100 Subject: [PATCH 13/17] Interfaces: make names generic --- .../create-edit-modal.component.ts | 8 +++--- ...i-creation.ts => api-creation-response.ts} | 2 +- src/interfaces/api-deletion-edit-response.ts | 4 +++ ...-api-id-response.ts => api-id-response.ts} | 2 +- ...{shows-api-response.ts => api-response.ts} | 2 +- src/interfaces/shows-api-deletion-edit.ts | 4 --- src/pages/shows/shows.component.ts | 4 +-- src/services/shows/shows-api.service.ts | 28 +++++++++---------- 8 files changed, 27 insertions(+), 27 deletions(-) rename src/interfaces/{shows-api-creation.ts => api-creation-response.ts} (57%) create mode 100644 src/interfaces/api-deletion-edit-response.ts rename src/interfaces/{shows-api-id-response.ts => api-id-response.ts} (62%) rename src/interfaces/{shows-api-response.ts => api-response.ts} (70%) delete mode 100644 src/interfaces/shows-api-deletion-edit.ts diff --git a/src/components/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts index 7dbc938..625b6e1 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -2,11 +2,11 @@ import {Component, inject} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {ShowsApiService} from '../../services/shows/shows-api.service'; -import {ShowsApiCreation} from '../../interfaces/shows-api-creation'; +import {ApiCreationResponse} from '../../interfaces/api-creation-response'; import {ToastService} from '../../services/toast/toast.service'; import {Show} from '../../interfaces/show'; import {formatDate} from '@angular/common'; -import {ShowsApiDeletionEdit} from '../../interfaces/shows-api-deletion-edit'; +import {ApiDeletionEditResponse} from '../../interfaces/api-deletion-edit-response'; @Component({ selector: 'app-create-edit-modal', @@ -85,7 +85,7 @@ export class CreateEditModalComponent { if (!this.editMode) { this.showsService.sendShow(show).subscribe({ - next: (response: ShowsApiCreation) => { + next: (response: ApiCreationResponse) => { show._id = response.newId }, error: err => { this.showToast(true, "created") @@ -100,7 +100,7 @@ export class CreateEditModalComponent { // I add it here show._id = this.show?._id this.showsService.updateShow(show).subscribe({ - next: (response: ShowsApiDeletionEdit) => { + next: (response: ApiDeletionEditResponse) => { // Do nothing }, error: err => { this.showToast(true, "edited") diff --git a/src/interfaces/shows-api-creation.ts b/src/interfaces/api-creation-response.ts similarity index 57% rename from src/interfaces/shows-api-creation.ts rename to src/interfaces/api-creation-response.ts index bf97065..3493889 100644 --- a/src/interfaces/shows-api-creation.ts +++ b/src/interfaces/api-creation-response.ts @@ -1,4 +1,4 @@ -export interface ShowsApiCreation { +export interface ApiCreationResponse { status: string message: string newId: string diff --git a/src/interfaces/api-deletion-edit-response.ts b/src/interfaces/api-deletion-edit-response.ts new file mode 100644 index 0000000..abc7095 --- /dev/null +++ b/src/interfaces/api-deletion-edit-response.ts @@ -0,0 +1,4 @@ +export interface ApiDeletionEditResponse { + status: string + message: string +} diff --git a/src/interfaces/shows-api-id-response.ts b/src/interfaces/api-id-response.ts similarity index 62% rename from src/interfaces/shows-api-id-response.ts rename to src/interfaces/api-id-response.ts index 85307d7..415fa72 100644 --- a/src/interfaces/shows-api-id-response.ts +++ b/src/interfaces/api-id-response.ts @@ -1,6 +1,6 @@ import {Show} from './show'; -export interface ShowsApiIdResponse { +export interface ApiIdResponse { status: string show: Show } diff --git a/src/interfaces/shows-api-response.ts b/src/interfaces/api-response.ts similarity index 70% rename from src/interfaces/shows-api-response.ts rename to src/interfaces/api-response.ts index f0bf994..80645c0 100644 --- a/src/interfaces/shows-api-response.ts +++ b/src/interfaces/api-response.ts @@ -1,6 +1,6 @@ import {Show} from './show'; -export interface ShowsApiResponse { +export interface ApiResponse { status: string shows: Show[] totalShows: number diff --git a/src/interfaces/shows-api-deletion-edit.ts b/src/interfaces/shows-api-deletion-edit.ts deleted file mode 100644 index a39c6ca..0000000 --- a/src/interfaces/shows-api-deletion-edit.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface ShowsApiDeletionEdit { - status: string - message: string -} diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index ae944f0..57708b6 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -1,7 +1,7 @@ import {Component, inject} from '@angular/core'; import {ShowsApiService} from '../../services/shows/shows-api.service'; import {Show} from '../../interfaces/show'; -import {ShowsApiResponse} from '../../interfaces/shows-api-response'; +import {ApiResponse} from '../../interfaces/api-response'; import {Toast} from '../../interfaces/toast'; import {ToastService} from '../../services/toast/toast.service'; import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap'; @@ -29,7 +29,7 @@ export class ShowsComponent { let loadToast: Toast = {body: "Loading shows..."}; this.toastService.show(loadToast); this.api.getShows().subscribe({ - next: (response: ShowsApiResponse) => { + next: (response: ApiResponse) => { this.shows = response.shows; }, error: (err: any) => { console.error("Error: ", err); diff --git a/src/services/shows/shows-api.service.ts b/src/services/shows/shows-api.service.ts index c8c91d9..8d2fbd2 100644 --- a/src/services/shows/shows-api.service.ts +++ b/src/services/shows/shows-api.service.ts @@ -1,11 +1,11 @@ import {inject, Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs'; -import {ShowsApiResponse} from '../../interfaces/shows-api-response'; -import {ShowsApiCreation} from '../../interfaces/shows-api-creation'; -import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response'; -import {ShowsApiDeletionEdit} from '../../interfaces/shows-api-deletion-edit'; +import {ApiResponse} from '../../interfaces/api-response'; +import {ApiIdResponse} from '../../interfaces/api-id-response'; +import {ApiDeletionEditResponse} from '../../interfaces/api-deletion-edit-response'; import {Show} from '../../interfaces/show'; +import {ApiCreationResponse} from '../../interfaces/api-creation-response'; @Injectable({ providedIn: 'root' @@ -22,23 +22,23 @@ export class ShowsApiService { this.idEndpoint = this.showsEndpoint + "id/" } - getShows(): Observable { - return this.http.get(this.showsEndpoint) + getShows(): Observable { + return this.http.get(this.showsEndpoint) } - getShow(id: string): Observable { - return this.http.get(this.idEndpoint + id) + getShow(id: string): Observable { + return this.http.get(this.idEndpoint + id) } - sendShow(newShow: Show): Observable { - return this.http.post(this.showsEndpoint, newShow) + sendShow(newShow: Show): Observable { + return this.http.post(this.showsEndpoint, newShow) } - deleteShw(id: string): Observable { - return this.http.delete(this.idEndpoint + id) + deleteShw(id: string): Observable { + return this.http.delete(this.idEndpoint + id) } - updateShow(show: Show): Observable { - return this.http.put(this.idEndpoint + show._id, show) + updateShow(show: Show): Observable { + return this.http.put(this.idEndpoint + show._id, show) } } From 70f7738966b3c3e53ef55b643fa2938dc7090f04 Mon Sep 17 00:00:00 2001 From: Toast Date: Fri, 7 Feb 2025 18:34:35 +0100 Subject: [PATCH 14/17] Interfaces: add genres to api responses --- src/interfaces/api-id-response.ts | 4 +++- src/interfaces/api-response.ts | 4 +++- src/pages/shows/shows.component.ts | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/interfaces/api-id-response.ts b/src/interfaces/api-id-response.ts index 415fa72..e667657 100644 --- a/src/interfaces/api-id-response.ts +++ b/src/interfaces/api-id-response.ts @@ -1,6 +1,8 @@ import {Show} from './show'; +import {Genre} from './genre'; export interface ApiIdResponse { status: string - show: Show + show?: Show + genre?: Genre } diff --git a/src/interfaces/api-response.ts b/src/interfaces/api-response.ts index 80645c0..dfede6f 100644 --- a/src/interfaces/api-response.ts +++ b/src/interfaces/api-response.ts @@ -1,7 +1,9 @@ import {Show} from './show'; +import {Genre} from './genre'; export interface ApiResponse { status: string - shows: Show[] + shows?: Show[] + genres?: Genre[] totalShows: number } diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 57708b6..65cd046 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -30,7 +30,7 @@ export class ShowsComponent { this.toastService.show(loadToast); this.api.getShows().subscribe({ next: (response: ApiResponse) => { - this.shows = response.shows; + this.shows = response.shows ?? []; }, error: (err: any) => { console.error("Error: ", err); }, complete: () => { From d7c9e892d49422e6de2c81af81d0983b5082603a Mon Sep 17 00:00:00 2001 From: Toast Date: Fri, 7 Feb 2025 18:53:29 +0100 Subject: [PATCH 15/17] Services: add genre service --- src/services/genres/genres.service.spec.ts | 16 +++++++++ src/services/genres/genres.service.ts | 40 ++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 src/services/genres/genres.service.spec.ts create mode 100644 src/services/genres/genres.service.ts diff --git a/src/services/genres/genres.service.spec.ts b/src/services/genres/genres.service.spec.ts new file mode 100644 index 0000000..8d71cf8 --- /dev/null +++ b/src/services/genres/genres.service.spec.ts @@ -0,0 +1,16 @@ +import {TestBed} from '@angular/core/testing'; + +import {GenresService} from './genres.service'; + +describe('GenresService', () => { + let service: GenresService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(GenresService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/services/genres/genres.service.ts b/src/services/genres/genres.service.ts new file mode 100644 index 0000000..251d305 --- /dev/null +++ b/src/services/genres/genres.service.ts @@ -0,0 +1,40 @@ +import {inject, Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; +import {Observable} from 'rxjs'; +import {ApiResponse} from '../../interfaces/api-response'; +import {ApiIdResponse} from '../../interfaces/api-id-response'; +import {Show} from '../../interfaces/show'; +import {ApiCreationResponse} from '../../interfaces/api-creation-response'; +import {ApiDeletionEditResponse} from '../../interfaces/api-deletion-edit-response'; + +@Injectable({ + providedIn: 'root' +}) +export class GenresService { + + private readonly url: string = "https://shows.everest.tailscale/api/"; + private genresEndpoint: string + private idEndpoint: string + private http: HttpClient = inject(HttpClient); + + constructor() { + this.genresEndpoint = this.url + "genres/" + this.idEndpoint = this.genresEndpoint + "id/" + } + + getGenres(): Observable { + return this.http.get(this.genresEndpoint) + } + + getGenre(id: string): Observable { + return this.http.get(this.idEndpoint + id) + } + + sendGenre(newShow: Show): Observable { + return this.http.post(this.genresEndpoint, newShow) + } + + updateGenre(show: Show): Observable { + return this.http.put(this.idEndpoint + show._id, show) + } +} From c2c008c95291484faa57f18d4dbfd3b201937abb Mon Sep 17 00:00:00 2001 From: Toast Date: Fri, 7 Feb 2025 18:59:27 +0100 Subject: [PATCH 16/17] Components/create-edit-modal: change number of required images --- .../create-edit-modal/create-edit-modal.component.html | 2 +- .../create-edit-modal/create-edit-modal.component.ts | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/create-edit-modal/create-edit-modal.component.html b/src/components/create-edit-modal/create-edit-modal.component.html index 0ccba84..145dbe0 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.html +++ b/src/components/create-edit-modal/create-edit-modal.component.html @@ -40,7 +40,7 @@
- @if (!$first) { + @if ($index >= requiredImages) { diff --git a/src/components/create-edit-modal/create-edit-modal.component.ts b/src/components/create-edit-modal/create-edit-modal.component.ts index 625b6e1..6681b39 100644 --- a/src/components/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-edit-modal/create-edit-modal.component.ts @@ -24,8 +24,10 @@ export class CreateEditModalComponent { protected editMode: boolean = false protected show?: Show + protected requiredImages: number constructor() { + this.requiredImages = 3 this.initForm() } @@ -50,7 +52,11 @@ export class CreateEditModalComponent { this.addImageControl(imageUrl) }) } else { - this.addImageControl() + let i: number = this.requiredImages + do { + this.addImageControl() + i-- + } while (i != 0) } } From a09d4ee75d834ce6cea7db09116394298e54d27b Mon Sep 17 00:00:00 2001 From: Toast Date: Fri, 7 Feb 2025 21:51:12 +0100 Subject: [PATCH 17/17] Services: change api url --- src/services/genres/genres.service.ts | 2 +- src/services/shows/shows-api.service.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/services/genres/genres.service.ts b/src/services/genres/genres.service.ts index 251d305..c8e1c7f 100644 --- a/src/services/genres/genres.service.ts +++ b/src/services/genres/genres.service.ts @@ -12,7 +12,7 @@ import {ApiDeletionEditResponse} from '../../interfaces/api-deletion-edit-respon }) export class GenresService { - private readonly url: string = "https://shows.everest.tailscale/api/"; + private readonly url: string = "https://shows.toast003.xyz/api/"; private genresEndpoint: string private idEndpoint: string private http: HttpClient = inject(HttpClient); diff --git a/src/services/shows/shows-api.service.ts b/src/services/shows/shows-api.service.ts index 8d2fbd2..36c46c3 100644 --- a/src/services/shows/shows-api.service.ts +++ b/src/services/shows/shows-api.service.ts @@ -12,7 +12,7 @@ import {ApiCreationResponse} from '../../interfaces/api-creation-response'; }) export class ShowsApiService { - private readonly url: string = "https://shows.everest.tailscale/api/"; + private readonly url: string = "https://shows.toast003.xyz/api/"; private showsEndpoint: string private idEndpoint: string private http: HttpClient = inject(HttpClient);