Revert "move Kontor related components to subfolder kontor"

This reverts commit 9ee1a04a5c.
2025-09-18 22:13:39 +02:00
parent 9ee1a04a5c
commit fcfe9a2c08
164 changed files with 597 additions and 1045 deletions
@@ -15,6 +15,7 @@
          "options": {
            "browser": "src/main.ts",
            "polyfills": [
+              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
@@ -1,6 +1,5 @@
 <div class="app">
  <kontor-header />
-  <app-kontor-navigation />
  <main>
    <router-outlet />
  </main>
@@ -2,11 +2,10 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { KontorHeaderComponent } from "./kontor/header/header.component";
 import { KontorFooterComponent } from './kontor/footer/footer.component';
-import { KontorNavigationComponent } from "./kontor/navigation/kontor-navigation/kontor-navigation.component";

@Component({
  selector: 'app-root',
-  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent, KontorNavigationComponent],
+  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
 })
@@ -1,4 +1,4 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection, provideZonelessChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';

 import { routes } from './app.routes';
@@ -7,8 +7,7 @@ import { provideHttpClient } from '@angular/common/http';
 export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
-    provideZonelessChangeDetection(),
-    // provideZoneChangeDetection({ eventCoalescing: true }),
+    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(),
  ]
@@ -1,27 +1,52 @@
 import { Routes } from '@angular/router';
-import { routes as comicRoutes } from './kontor/comic/comic.routes';
-import { routes as tyscRoutes } from './kontor/tysc/tysc.routes';
-import { routes as mediaRoutes } from './kontor/media/media.routes';
-import { TyscSectionComponent } from './kontor/tysc/tysc-section.component';
-import { ComicSectionComponent } from './kontor/comic/comic-section.component';
-import { MediaComponent } from './kontor/media/media.component';
-import { KontorHomeComponent } from './kontor/home/kontor-home/kontor-home.component';
+import { KontorComponent } from './kontor/kontor.component';
+import { Login } from './common/login/login';
+import { ComicOverviewComponent } from './comic/comic-overview/comic-overview.component';
+import { MediaOverviewComponent } from './media/media-overview/media-overview.component';
+import { ArtistListComponent } from './comic/artist/artist-list/artist-list.component';
+import { ComicListComponent } from './comic/comic/comic-list/comic-list.component';
+import { MediaFileListComponent } from './media/media-file/media-file-list/media-file-list.component';
+import { MediaActorListComponent } from './media/media-actor/media-actor-list/media-actor-list.component';
+import { MediaVideoListComponent } from './media/media-video/media-video-list/media-video-list.component';
+import { PublisherListComponent } from './comic/publisher/publisher-list/publisher-list.component';
+import { TyscMenuComponent } from './tysc/tysc-menu/tysc-menu.component';
+import { TeamListComponent } from './tysc/team/team-list/team-list.component';
+import { VendorListComponent } from './tysc/vendor/vendor-list/vendor-list.component';
+import { CardsetListComponent } from './tysc/cardset/cardset-list/cardset-list.component';
+import { PositionListComponent } from './tysc/position/position-list/position-list.component';
+import { PlayerListComponent } from './tysc/player/player-list/player-list.component';
+import { SportListComponent } from './tysc/sport/sport-list/sport-list.component';

 export const routes: Routes = [
+  { path: '', component: KontorComponent, },
+  { path: 'login', component: Login, },
  {
-    path: '',
-    component: KontorHomeComponent,
+    path: 'comic', component: ComicOverviewComponent,
+    children: [
+      { path: '', component: ComicListComponent},
+      { path: 'comics', component: ComicListComponent},
+      { path: 'publisher', component: PublisherListComponent},
+      { path: 'artist', component: ArtistListComponent},
+    ],
  },
  {
-    path: 'comic', component: ComicSectionComponent,
-    children: comicRoutes,
+    path: 'tysc', component: TyscMenuComponent,
+    children: [
+      { path: '', component: SportListComponent},
+      { path: 'team', component: TeamListComponent},
+      { path: 'player', component: PlayerListComponent},
+      { path: 'position', component: PositionListComponent},
+      { path: 'cardset', component: CardsetListComponent},
+      { path: 'vendor', component: VendorListComponent},
+    ],
  },
  {
-    path: 'tysc', component: TyscSectionComponent,
-    children: tyscRoutes,
-  },
-  {
-    path: 'media', component: MediaComponent,
-    children: mediaRoutes,
+    path: 'media', component: MediaOverviewComponent,
+    children: [
+      { path: '', component: MediaFileListComponent},
+      { path: 'mediafiles', component: MediaFileListComponent},
+      { path: 'mediaactors', component: MediaActorListComponent},
+      { path: 'mediavideos', component: MediaVideoListComponent},
+    ],
  },
 ];
@@ -0,0 +1,5 @@
+div {
+  border-radius: 6px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="[artist().id]" routerLinkActive="active">
+    <span>{{ artist().name }}</span>
+  </a>
+</div>
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

-import { ComicDetailsComponent } from './comic-details.component';
+import { ArtistDetailComponent } from './artist-detail.component';

-describe('ComicDetailsComponent', () => {
-  let component: ComicDetailsComponent;
-  let fixture: ComponentFixture<ComicDetailsComponent>;
+describe('ArtistDetailComponent', () => {
+  let component: ArtistDetailComponent;
+  let fixture: ComponentFixture<ArtistDetailComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [ComicDetailsComponent]
+      imports: [ArtistDetailComponent]
    })
    .compileComponents();

-    fixture = TestBed.createComponent(ComicDetailsComponent);
+    fixture = TestBed.createComponent(ArtistDetailComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
@@ -0,0 +1,14 @@
+import { Component, input, signal } from '@angular/core';
+import { Artist } from '../artist.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-artist-detail',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './artist-detail.component.html',
+  styleUrl: './artist-detail.component.css'
+})
+export class ArtistDetailComponent {
+  artist = input.required<Artist>();
+
+}
@@ -1,7 +1,7 @@
 <ul>
  @for (artist of artists(); track artist.id) {
    <li>
-      <app-artist [artist]="artist"/>
+      <app-artist-detail [artist]="artist"/>
    </li>
  }
 </ul>
@@ -1,11 +1,11 @@
-import { ArtistComponent } from './../artist/artist.component';
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { Artist } from '../artist.model';
-import { ArtistsService } from '../artists.service';
+import { ArtistService } from '../artist.service';
+import { ArtistDetailComponent } from "../artist-detail/artist-detail.component";

@Component({
  selector: 'app-artist-list',
-  imports: [ArtistComponent],
+  imports: [ArtistDetailComponent],
  templateUrl: './artist-list.component.html',
  styleUrl: './artist-list.component.css'
 })
@@ -13,12 +13,12 @@ export class ArtistListComponent implements OnInit {
  artists = signal<Artist[] | undefined>(undefined);
  isFetching = signal(false);
  error = signal('');
-  private artistsService = inject(ArtistsService);
+  private artistService = inject(ArtistService);
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    this.isFetching.set(true);
-    const subscription = this.artistsService.loadArtists().subscribe({
+    const subscription = this.artistService.loadArtists().subscribe({
      next: (artists) => {
        this.artists.set(artists);
      },
@@ -27,11 +27,12 @@ export class ArtistListComponent implements OnInit {
      },
      complete: () => {
        this.isFetching.set(false);
-      }
+      },
    });

    this.destroyRef.onDestroy(() => {
      subscription.unsubscribe();
-    })
+    });
  }
+
 }
@@ -1,19 +1,21 @@
-import { HttpClient } from "@angular/common/http";
 import { inject, Injectable, signal } from "@angular/core";
+import { ErrorService } from "../../shared/error.service";
+import { HttpClient } from "@angular/common/http";
 import { Artist } from "./artist.model";
 import { catchError, map, throwError } from "rxjs";

@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
-export class ArtistsService {
+export class ArtistService {
+  private errorService = inject(ErrorService);
  private httpClient = inject(HttpClient);
  private artists = signal<Artist[]>([]);

  loadedArtists = this.artists.asReadonly();

  loadArtists() {
-    return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching artists. Please try again later.');
+    return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching artists. Please try again later-');
  }

  private fetchArtists(url: string, errorMessage: string) {
@@ -0,0 +1,16 @@
+<!-- <p>comic-overview works!</p>
+<div class="subnav">
+  <ul>
+    <li><a routerLink="/comic/comics" routerLinkActive>Comics</a></li>
+    <li><a routerLink="/comic/publisher">Publisher</a></li>
+    <li><a routerLink="/comic/artist">Artists</a></li>
+  </ul>
+  <h4>Child Routes Result</h4>
+  <router-outlet></router-outlet>
+</div> -->
+<div class="subnav">
+  <a routerLink="/comic/comics" routerLinkActive="active">Comics</a>
+  <a routerLink="/comic/publisher" routerLinkActive="active">Publisher</a>
+  <a routerLink="/comic/artist" routerLinkActive="active">Artists</a>
+</div>
+<router-outlet></router-outlet>
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

-import { TeamsComponent } from './teams.component';
+import { ComicOverview } from './comic-overview.component';

-describe('TeamsComponent', () => {
-  let component: TeamsComponent;
-  let fixture: ComponentFixture<TeamsComponent>;
+describe('ComicOverview', () => {
+  let component: ComicOverview;
+  let fixture: ComponentFixture<ComicOverview>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [TeamsComponent]
+      imports: [ComicOverview]
    })
    .compileComponents();

-    fixture = TestBed.createComponent(TeamsComponent);
+    fixture = TestBed.createComponent(ComicOverview);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-overview',
+  imports: [RouterLink, RouterOutlet, RouterLinkActive],
+  templateUrl: './comic-overview.component.html',
+  styleUrl: './comic-overview.component.css'
+})
+export class ComicOverviewComponent {
+
+}
@@ -0,0 +1 @@
+<p>comic-list works!</p>
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-comic-list',
+  imports: [],
+  templateUrl: './comic-list.component.html',
+  styleUrl: './comic-list.component.css'
+})
+export class ComicListComponent {
+
+}
@@ -0,0 +1 @@
+<p>publisher-list works!</p>
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PublisherListComponent } from './publisher-list.component';
+
+describe('PublisherListComponent', () => {
+  let component: PublisherListComponent;
+  let fixture: ComponentFixture<PublisherListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PublisherListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PublisherListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-publisher-list',
+  imports: [],
+  templateUrl: './publisher-list.component.html',
+  styleUrl: './publisher-list.component.css'
+})
+export class PublisherListComponent {
+
+}
@@ -1,5 +0,0 @@
-<div>
-  <a [routerLink]="['/', 'comic', 'artists', artist().id]" routerLinkActive="active">
-    <span>{{ artist().name }}</span>
-  </a>
-</div>
@@ -1,13 +0,0 @@
-import { Component, input } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { Artist } from '../artist.model';
-
-@Component({
-  selector: 'app-artist',
-  imports: [RouterLink, RouterLinkActive],
-  templateUrl: './artist.component.html',
-  styleUrl: './artist.component.css'
-})
-export class ArtistComponent {
-  artist = input.required<Artist>();
-}
@@ -1,7 +0,0 @@
-<p>artists works!</p>
-<div>
-  <app-artist-list />
-</div>
-<div>
-  <h2>Artist Details</h2>
-</div>
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { ArtistListComponent } from "./artist-list/artist-list.component";
-
-@Component({
-  selector: 'app-artists',
-  imports: [ArtistListComponent],
-  templateUrl: './artists.component.html',
-  styleUrl: './artists.component.css'
-})
-export class ArtistsComponent {
-
-}
@@ -1,5 +0,0 @@
-<div class="subnav">
-  <a routerLink="/comic/comics" routerLinkActive="active">Comics</a>
-  <a routerLink="/comic/publishers" routerLinkActive="active">Publisher</a>
-  <a routerLink="/comic/artists" routerLinkActive="active">Artists</a>
-</div>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ComicNavigationComponent } from './comic-navigation.component';
-
-describe('ComicNavigationComponent', () => {
-  let component: ComicNavigationComponent;
-  let fixture: ComponentFixture<ComicNavigationComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ComicNavigationComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ComicNavigationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'app-comic-navigation',
-  imports: [RouterLink, RouterLinkActive],
-  templateUrl: './comic-navigation.component.html',
-  styleUrl: './comic-navigation.component.css'
-})
-export class ComicNavigationComponent {
-
-}
@@ -1,2 +0,0 @@
-<app-comic-navigation />
-<router-outlet></router-outlet>
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { ComicNavigationComponent } from "./comic-navigation/comic-navigation.component";
-
-@Component({
-  selector: 'app-comic-section',
-  imports: [RouterOutlet, ComicNavigationComponent],
-  templateUrl: './comic-section.component.html',
-  styleUrl: './comic-section.component.css'
-})
-export class ComicSectionComponent {
-
-}
@@ -1,39 +0,0 @@
-import { Routes } from "@angular/router";
-import { ArtistsComponent } from "./artists/artists.component";
-import { PublishersComponent } from "./publishers/publishers.component";
-import { ComicDetailsComponent } from "./comics/comic-details/comic-details.component";
-import { ComicSectionComponent } from "./comic-section.component";
-import { ComicsComponent } from "./comics/comics.component";
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: ComicSectionComponent,
-    children: [
-      {
-        path: 'comics',
-        component: ComicsComponent,
-      },
-      {
-        path: 'comics/:comicId',
-        component: ComicDetailsComponent,
-      },
-      {
-        path: 'artists',
-        component: ArtistsComponent,
-      },
-      {
-        path: 'artists/:artistId',
-        component: ArtistsComponent,
-      },
-      {
-        path: 'publishers',
-        component: PublishersComponent,
-      },
-      {
-        path: 'publishers/:publisherId',
-        component: PublishersComponent,
-      },
-    ],
-  },
-];
@@ -1,7 +0,0 @@
-<p>comic-details works!</p>
-<div>
-  <app-comic-list />
-</div>
-<div>
-  <h2>Comic Title</h2>
-</div>
@@ -1,13 +0,0 @@
-import { Component, input } from '@angular/core';
-import { ComicListComponent } from "../comic-list/comic-list.component";
-import { Comic } from '../comic.model';
-
-@Component({
-  selector: 'app-comic-details',
-  imports: [ComicListComponent],
-  templateUrl: './comic-details.component.html',
-  styleUrl: './comic-details.component.css'
-})
-export class ComicDetailsComponent {
-  comic = input.required<Comic>();
-}
@@ -1,8 +0,0 @@
-<p>comic-list works!</p>
-<ul>
-  @for (comic of comics(); track comic.id) {
-    <li>
-      <app-comic [comic]="comic"/>
-    </li>
-  }
-</ul>
@@ -1,38 +0,0 @@
-import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Comic } from '../comic.model';
-import { ComicComponent } from "../comic/comic.component";
-import { ComicsService } from '../comics.service';
-
-@Component({
-  selector: 'app-comic-list',
-  imports: [ComicComponent],
-  templateUrl: './comic-list.component.html',
-  styleUrl: './comic-list.component.css'
-})
-export class ComicListComponent implements OnInit {
-  comics = signal<Comic[] | undefined>(undefined);
-  isFetching = signal(false);
-  error = signal('');
-  private comicsService = inject(ComicsService);
-  private destroyRef = inject(DestroyRef);
-
-  ngOnInit() {
-    this.isFetching.set(true);
-    const subscription = this.comicsService.loadComics().subscribe({
-      next: (comics) => {
-        this.comics.set(comics);
-      },
-      error: (error: Error) => {
-        this.error.set(error.message);
-      },
-      complete: () => {
-        this.isFetching.set(false);
-      }
-    });
-
-    this.destroyRef.onDestroy(() => {
-      subscription.unsubscribe();
-    })
-  }
-
-}
@@ -1,5 +0,0 @@
-export interface Comic {
-  id: string;
-  title: string;
-  completed: boolean;
-}
@@ -1,6 +0,0 @@
-<p>comic works!</p>
-<div>
-  <a [routerLink]="['/', 'comic', 'comics', comic().id]" routerLinkActive="active">
-    <span>{{ comic().title }}</span>
-  </a>
-</div>
@@ -1,13 +0,0 @@
-import { Component, input } from '@angular/core';
-import { Comic } from '../comic.model';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'app-comic',
-  imports: [RouterLink, RouterLinkActive],
-  templateUrl: './comic.component.html',
-  styleUrl: './comic.component.css'
-})
-export class ComicComponent {
-  comic = input.required<Comic>();
-}
@@ -1,4 +0,0 @@
-<p>comics works!</p>
-<div>
-  <app-comic-list />
-</div>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ComicsComponent } from './comics.component';
-
-describe('ComicsComponent', () => {
-  let component: ComicsComponent;
-  let fixture: ComponentFixture<ComicsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ComicsComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ComicsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,12 +0,0 @@
-import { Component, signal } from '@angular/core';
-import { ComicListComponent } from "./comic-list/comic-list.component";
-import { ComicDetailsComponent } from './comic-details/comic-details.component';
-
-@Component({
-  selector: 'app-comics',
-  imports: [ComicListComponent],
-  templateUrl: './comics.component.html',
-  styleUrl: './comics.component.css'
-})
-export class ComicsComponent {
-}
@@ -1,29 +0,0 @@
-import { HttpClient } from "@angular/common/http";
-import { inject, Injectable, signal } from "@angular/core";
-import { Comic } from "./comic.model";
-import { catchError, map, throwError } from "rxjs";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ComicsService {
-  private httpClient = inject(HttpClient);
-  private comics = signal<Comic[]>([]);
-
-  loadedComics = this.comics.asReadonly();
-
-  loadComics() {
-    return this.fetchComics('http://127.0.0.1:8800/api/comics/comics', 'Someting went wrong fetching comics. Please try again later.');
-  }
-
-  private fetchComics(url: string, errorMessage: string) {
-    return this.httpClient.get<Comic[]>(url).pipe(
-      map((resData) => resData),
-      catchError((error) => {
-        console.log(error);
-        return throwError(() => new Error(errorMessage));
-      })
-    );
-  }
-}
-
@@ -1 +0,0 @@
-<p>publishers works!</p>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PublishersComponent } from './publishers.component';
-
-describe('PublishersComponent', () => {
-  let component: PublishersComponent;
-  let fixture: ComponentFixture<PublishersComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PublishersComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PublishersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-publishers',
-  imports: [],
-  templateUrl: './publishers.component.html',
-  styleUrl: './publishers.component.css'
-})
-export class PublishersComponent {
-
-}
@@ -1,9 +0,0 @@
-footer {
-  padding: 30px;
-  text-align: center;
-  background-color: lightblue;
-}
-
-footer div {
-  font-size: 20px;
-}
@@ -1,3 +0,0 @@
-<footer>
-  <div>Kontor Footer</div>
-</footer>
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-kontor-footer',
-  imports: [],
-  templateUrl: './kontor-footer.component.html',
-  styleUrl: './kontor-footer.component.css'
-})
-export class KontorFooterComponent {
-
-}
@@ -2,4 +2,18 @@
  <section>
    <h1>{{ title() }}</h1>
  </section>
+  <!-- <nav>
+    <ul>
+      <li><a routerLink="/">Kontor</a></li>
+      <li><a routerLink="/comic">Comics</a></li>
+      <li><a routerLink="/tysc">TradeYourSportsCards</a></li>
+      <li><a routerLink="/media">Media</a></li>
+    </ul>
+  </nav> -->
 </header>
+<div class="topnav">
+  <a routerLink="/" routerLinkActive="active">Kontor</a>
+  <a routerLink="/comic"  routerLinkActive="active">Comics</a>
+  <a routerLink="/tysc"  routerLinkActive="active">TradeYourSportsCards</a>
+  <a routerLink="/media"  routerLinkActive="active">Media</a>
+</div>
@@ -3,7 +3,7 @@ import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'kontor-header',
-  imports: [],
+  imports: [RouterLink, RouterLinkActive],
  templateUrl: './header.component.html',
  styleUrl: './header.component.css'
 })
@@ -1,9 +0,0 @@
-.header {
-  padding: 30px;
-  text-align: center;
-  background-color: lightblue;
-}
-
-.header h1 {
-  font-size: 50px;
-}
@@ -1,5 +0,0 @@
-<header class="header">
-  <section>
-    <h1>{{ title() }}</h1>
-  </section>
-</header>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { KontorHeaderComponent } from './kontor-header.component';
-
-describe('KontorHeaderComponent', () => {
-  let component: KontorHeaderComponent;
-  let fixture: ComponentFixture<KontorHeaderComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [KontorHeaderComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(KontorHeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component, signal } from '@angular/core';
-
-@Component({
-  selector: 'app-kontor-header',
-  imports: [],
-  templateUrl: './kontor-header.component.html',
-  styleUrl: './kontor-header.component.css'
-})
-export class KontorHeaderComponent {
-  protected readonly title = signal('Kontor');
-}
@@ -1 +0,0 @@
-<p>kontor-home works!</p>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { KontorHomeComponent } from './kontor-home.component';
-
-describe('KontorHomeComponent', () => {
-  let component: KontorHomeComponent;
-  let fixture: ComponentFixture<KontorHomeComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [KontorHomeComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(KontorHomeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-kontor-home',
-  imports: [],
-  templateUrl: './kontor-home.component.html',
-  styleUrl: './kontor-home.component.css'
-})
-export class KontorHomeComponent {
-
-}
@@ -1 +0,0 @@
-<p>media-actors works!</p>
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-actors',
-  imports: [],
-  templateUrl: './media-actors.component.html',
-  styleUrl: './media-actors.component.css'
-})
-export class MediaActorsComponent {
-
-}
@@ -1 +0,0 @@
-<p>media-files works!</p>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediaFilesComponent } from './media-files.component';
-
-describe('MediaFilesComponent', () => {
-  let component: MediaFilesComponent;
-  let fixture: ComponentFixture<MediaFilesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MediaFilesComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediaFilesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-files',
-  imports: [],
-  templateUrl: './media-files.component.html',
-  styleUrl: './media-files.component.css'
-})
-export class MediaFilesComponent {
-
-}
@@ -1,5 +0,0 @@
-<div class="subnav">
-  <a routerLink="/media/mediafiles" routerLinkActive="active">MediaFiles</a>
-  <a routerLink="/media/mediaactors" routerLinkActive="active">MediaActors</a>
-  <a routerLink="/media/mediavideos" routerLinkActive="active">MediaVideos</a>
-</div>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediaNavigationComponent } from './media-navigation.component';
-
-describe('MediaNavigationComponent', () => {
-  let component: MediaNavigationComponent;
-  let fixture: ComponentFixture<MediaNavigationComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MediaNavigationComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediaNavigationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'app-media-navigation',
-  imports: [RouterLink, RouterLinkActive],
-  templateUrl: './media-navigation.component.html',
-  styleUrl: './media-navigation.component.css'
-})
-export class MediaNavigationComponent {
-
-}
@@ -1 +0,0 @@
-<p>media-videos works!</p>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediaVideosComponent } from './media-videos.component';
-
-describe('MediaVideosComponent', () => {
-  let component: MediaVideosComponent;
-  let fixture: ComponentFixture<MediaVideosComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MediaVideosComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediaVideosComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-videos',
-  imports: [],
-  templateUrl: './media-videos.component.html',
-  styleUrl: './media-videos.component.css'
-})
-export class MediaVideosComponent {
-
-}
@@ -1,2 +0,0 @@
-<app-media-navigation />
-<router-outlet></router-outlet>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediaComponent } from './media.component';
-
-describe('MediaComponent', () => {
-  let component: MediaComponent;
-  let fixture: ComponentFixture<MediaComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MediaComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediaComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { MediaNavigationComponent } from "./media-navigation/media-navigation.component";
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-media',
-  imports: [MediaNavigationComponent, RouterOutlet],
-  templateUrl: './media.component.html',
-  styleUrl: './media.component.css'
-})
-export class MediaComponent {
-
-}
@@ -1,26 +0,0 @@
-import { Routes } from "@angular/router";
-import { MediaComponent } from "./media.component";
-import { MediaFilesComponent } from "./media-files/media-files.component";
-import { MediaActorsComponent } from "./media-actors/media-actors.component";
-import { MediaVideosComponent } from "./media-videos/media-videos.component";
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: MediaComponent,
-    children: [
-      {
-        path: 'mediafiles',
-        component: MediaFilesComponent,
-      },
-      {
-        path: 'mediaactors',
-        component: MediaActorsComponent,
-      },
-      {
-        path: 'mediavideos',
-        component: MediaVideosComponent,
-      },
-    ],
-  },
-];
@@ -1 +0,0 @@
-/* Style the top navigation bar */
@@ -1,6 +0,0 @@
-<div class="topnav">
-  <a routerLink="/">Kontor</a>
-  <a routerLink="/comic" routerLinkActive="active">Comic</a>
-  <a routerLink="/tysc" routerLinkActive="active">TradeYourSportsCard</a>
-  <a routerLink="/media" routerLinkActive="active">Media</a>
-</div>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { KontorNavigationComponent } from './kontor-navigation.component';
-
-describe('KontorNavigationComponent', () => {
-  let component: KontorNavigationComponent;
-  let fixture: ComponentFixture<KontorNavigationComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [KontorNavigationComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(KontorNavigationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-
-@Component({
-  selector: 'app-kontor-navigation',
-  imports: [RouterLink, RouterLinkActive],
-  templateUrl: './kontor-navigation.component.html',
-  styleUrl: './kontor-navigation.component.css'
-})
-export class KontorNavigationComponent {
-
-}
@@ -1 +0,0 @@
-<p>cardsets works!</p>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CardsetsComponent } from './cardsets.component';
-
-describe('CardsetsComponent', () => {
-  let component: CardsetsComponent;
-  let fixture: ComponentFixture<CardsetsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CardsetsComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(CardsetsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-cardsets',
-  imports: [],
-  templateUrl: './cardsets.component.html',
-  styleUrl: './cardsets.component.css'
-})
-export class CardsetsComponent {
-
-}
@@ -1 +0,0 @@
-<p>players works!</p>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PlayersComponent } from './players.component';
-
-describe('PlayersComponent', () => {
-  let component: PlayersComponent;
-  let fixture: ComponentFixture<PlayersComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PlayersComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PlayersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-players',
-  imports: [],
-  templateUrl: './players.component.html',
-  styleUrl: './players.component.css'
-})
-export class PlayersComponent {
-
-}
@@ -1 +0,0 @@
-<p>positions works!</p>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PositionsComponent } from './positions.component';
-
-describe('PositionsComponent', () => {
-  let component: PositionsComponent;
-  let fixture: ComponentFixture<PositionsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PositionsComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PositionsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-positions',
-  imports: [],
-  templateUrl: './positions.component.html',
-  styleUrl: './positions.component.css'
-})
-export class PositionsComponent {
-
-}
@@ -1 +0,0 @@
-<p>sports works!</p>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SportsComponent } from './sports.component';
-
-describe('SportsComponent', () => {
-  let component: SportsComponent;
-  let fixture: ComponentFixture<SportsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SportsComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SportsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-sports',
-  imports: [],
-  templateUrl: './sports.component.html',
-  styleUrl: './sports.component.css'
-})
-export class SportsComponent {
-
-}
@@ -1 +0,0 @@
-<p>teams works!</p>
--- a/Show More
+++ b/Show More