add navigation and fetching of sports

kontor-angular/src/app/app.component.css

@@ -4,6 +4,6 @@ h1 {
 
 .app {
   font-family: Arial, Helvetica, sans-serif;
-  max-width: 500px;
+  /* max-width: 500px; */
   margin: auto;
 }

kontor-angular/src/app/app.config.ts

@@ -2,11 +2,13 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChang
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes)
+    provideRouter(routes),
+    provideHttpClient(),
   ]
 };

kontor-angular/src/app/app.routes.ts

@@ -1,14 +1,21 @@
 import { Routes } from '@angular/router';
 import { KontorComponent } from './kontor/kontor.component';
 import { Login } from './common/login/login';
-import { ComicsListComponent } from './comic/comics/comics-list.component';
-import { PublisherListComponent } from './comic/publisher/publisher-list.component';
-import { ArtistListComponent } from './comic/artist/artist-list.component';
 import { ComicOverviewComponent } from './comic/comic-overview/comic-overview.component';
 import { MediaOverviewComponent } from './media/media-overview/media-overview.component';
-import { MediaFilesListComponent } from './media/media-files-list/media-files-list.component';
+import { ArtistListComponent } from './comic/artist/artist-list/artist-list.component';
-import { MediaActorsListComponent } from './media/media-actors-list/media-actors-list.component';
+import { ComicListComponent } from './comic/comic/comic-list/comic-list.component';
-import { MediaVideosListComponent } from './media/media-videos-list/media-videos-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, },
@@ -16,19 +23,30 @@ export const routes: Routes = [
   {
     path: 'comic', component: ComicOverviewComponent,
     children: [
-      { path: '', component: ComicsListComponent},
+      { path: '', component: ComicListComponent},
-      { path: 'comics', component: ComicsListComponent},
+      { path: 'comics', component: ComicListComponent},
       { path: 'publisher', component: PublisherListComponent},
       { path: 'artist', component: ArtistListComponent},
     ],
   },
+  {
+    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: 'media', component: MediaOverviewComponent,
     children: [
-      { path: '', component: MediaFilesListComponent},
+      { path: '', component: MediaFileListComponent},
-      { path: 'mediafiles', component: MediaFilesListComponent},
+      { path: 'mediafiles', component: MediaFileListComponent},
-      { path: 'mediaactors', component: MediaActorsListComponent},
+      { path: 'mediaactors', component: MediaActorListComponent},
-      { path: 'mediavideos', component: MediaVideosListComponent},
+      { path: 'mediavideos', component: MediaVideoListComponent},
     ],
   },
 ];

kontor-angular/src/app/comic/artist/artist-list.component.html

@@ -1 +0,0 @@
-<p>artist works!</p>

kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html

@@ -0,0 +1 @@
+<p>artist-list works!</p>

kontor-angular/src/app/comic/artist/artist-list/artist-list.component.spec.ts

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

kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'kontor-artist-list',
+  selector: 'app-artist-list',
   imports: [],
   templateUrl: './artist-list.component.html',
   styleUrl: './artist-list.component.css'

kontor-angular/src/app/comic/comic-overview/comic-overview.component.html

@@ -1,10 +1,16 @@
-<p>comic-overview works!</p>
+<!-- <p>comic-overview works!</p>
-<div>
+<div class="subnav">
   <ul>
-    <li><a routerLink="/comic/comics">Comics</a></li>
+    <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>

kontor-angular/src/app/comic/comic-overview/comic-overview.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'app-comic-overview',
-  imports: [RouterLink, RouterOutlet],
+  imports: [RouterLink, RouterOutlet, RouterLinkActive],
   templateUrl: './comic-overview.component.html',
   styleUrl: './comic-overview.component.css'
 })

kontor-angular/src/app/comic/comic/comic-list/comic-list.component.html

@@ -0,0 +1 @@
+<p>comic-list works!</p>

kontor-angular/src/app/comic/comic/comic-list/comic-list.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ComicsListComponent } from './comics-list.component';
+import { ComicListComponent } from './comic-list.component';
 
-describe('Comics', () => {
+describe('ComicListComponent', () => {
-  let component: ComicsListComponent;
+  let component: ComicListComponent;
-  let fixture: ComponentFixture<ComicsListComponent>;
+  let fixture: ComponentFixture<ComicListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ComicsListComponent]
+      imports: [ComicListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ComicsListComponent);
+    fixture = TestBed.createComponent(ComicListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

kontor-angular/src/app/comic/comic/comic-list/comic-list.component.ts

@@ -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 {
+
+}

kontor-angular/src/app/comic/comics/comics-list.component.html

@@ -1 +0,0 @@
-<p>comics works!</p>

kontor-angular/src/app/comic/comics/comics-list.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'kontor-comics-list',
-  imports: [],
-  templateUrl: './comics-list.component.html',
-  styleUrl: './comics-list.component.css'
-})
-export class ComicsListComponent {
-
-}

kontor-angular/src/app/comic/publisher/publisher-list.component.html

@@ -1 +0,0 @@
-<p>publisher works!</p>

kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.html

@@ -0,0 +1 @@
+<p>publisher-list works!</p>

kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.spec.ts

@@ -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();
+  });
+});

kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'kontor-publisher-list',
+  selector: 'app-publisher-list',
   imports: [],
   templateUrl: './publisher-list.component.html',
   styleUrl: './publisher-list.component.css'

kontor-angular/src/app/kontor/footer/footer.component.css

@@ -0,0 +1,7 @@
+/* Footer */
+a {
+  padding: 20px;
+  text-align: center;
+  background: #ddd;
+  margin-top: 20px;
+}

kontor-angular/src/app/kontor/footer/footer.component.html

@@ -1,3 +1,3 @@
-  <footer>
+<div>
-    <a href="{{ footerUrl }}">{{ footerLink }}</a>
+  <a href="{{ footerUrl }}">{{ footerLink }}</a>
-  </footer>
+</div>

kontor-angular/src/app/kontor/header/header.component.css

@@ -0,0 +1,11 @@
+/* Header/Blog Title */
+.header {
+  padding: 30px;
+  text-align: center;
+  background-color: lightblue;
+}
+
+.header h1 {
+  font-size: 50px;
+}
+

kontor-angular/src/app/kontor/header/header.component.html

@@ -1,13 +1,19 @@
-<header>
+<header class="header">
   <section>
     <h1>{{ title() }}</h1>
   </section>
-  <nav>
+  <!-- <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>
+  </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>

kontor-angular/src/app/kontor/header/header.component.ts

@@ -1,9 +1,9 @@
 import { Component, signal } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'kontor-header',
-  imports: [RouterLink],
+  imports: [RouterLink, RouterLinkActive],
   templateUrl: './header.component.html',
   styleUrl: './header.component.css'
 })

kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.html

@@ -0,0 +1 @@
+<p>media-actor-list works!</p>

kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MediaFilesListComponent } from './media-files-list.component';
+import { MediaActorListComponent } from './media-actor-list.component';
 
-describe('MediaFilesList', () => {
+describe('MediaActorListComponent', () => {
-  let component: MediaFilesListComponent;
+  let component: MediaActorListComponent;
-  let fixture: ComponentFixture<MediaFilesListComponent>;
+  let fixture: ComponentFixture<MediaActorListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MediaFilesListComponent]
+      imports: [MediaActorListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MediaFilesListComponent);
+    fixture = TestBed.createComponent(MediaActorListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

kontor-angular/src/app/media/media-actor/media-actor-list/media-actor-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-actor-list',
+  imports: [],
+  templateUrl: './media-actor-list.component.html',
+  styleUrl: './media-actor-list.component.css'
+})
+export class MediaActorListComponent {
+
+}

kontor-angular/src/app/media/media-actors-list/media-actors-list.component.html

@@ -1 +0,0 @@
-<p>media-actors-list works!</p>

kontor-angular/src/app/media/media-actors-list/media-actors-list.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-actors-list',
-  imports: [],
-  templateUrl: './media-actors-list.component.html',
-  styleUrl: './media-actors-list.component.css'
-})
-export class MediaActorsListComponent {
-
-}

kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.html

@@ -0,0 +1 @@
+<p>media-file-list works!</p>

kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.spec.ts

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

kontor-angular/src/app/media/media-file/media-file-list/media-file-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-file-list',
+  imports: [],
+  templateUrl: './media-file-list.component.html',
+  styleUrl: './media-file-list.component.css'
+})
+export class MediaFileListComponent {
+
+}

kontor-angular/src/app/media/media-files-list/media-files-list.component.html

@@ -1 +0,0 @@
-<p>media-files-list works!</p>

kontor-angular/src/app/media/media-files-list/media-files-list.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-files-list',
-  imports: [],
-  templateUrl: './media-files-list.component.html',
-  styleUrl: './media-files-list.component.css'
-})
-export class MediaFilesListComponent {
-
-}

kontor-angular/src/app/media/media-overview/media-overview.component.html

@@ -1,4 +1,4 @@
-<p>media-overview works!</p>
+<!-- <p>media-overview works!</p>
 <div>
   <ul>
     <li><a routerLink="/media/mediafiles">MediaFiles</a></li>
@@ -7,4 +7,10 @@
   </ul>
   <h4>Child Routes Result</h4>
   <router-outlet></router-outlet>
+</div> -->
+<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>
+<router-outlet></router-outlet>

kontor-angular/src/app/media/media-overview/media-overview.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'kontor-media-overview',
-  imports: [RouterOutlet, RouterLink],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './media-overview.component.html',
   styleUrl: './media-overview.component.css'
 })

kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.html

@@ -0,0 +1 @@
+<p>media-video-list works!</p>

kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MediaActorsListComponent } from './media-actors-list.component';
+import { MediaVideoListComponent } from './media-video-list.component';
 
-describe('MediaActorsList', () => {
+describe('MediaVideoListComponent', () => {
-  let component: MediaActorsListComponent;
+  let component: MediaVideoListComponent;
-  let fixture: ComponentFixture<MediaActorsListComponent>;
+  let fixture: ComponentFixture<MediaVideoListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MediaActorsListComponent]
+      imports: [MediaVideoListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MediaActorsListComponent);
+    fixture = TestBed.createComponent(MediaVideoListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

kontor-angular/src/app/media/media-video/media-video-list/media-video-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-media-video-list',
+  imports: [],
+  templateUrl: './media-video-list.component.html',
+  styleUrl: './media-video-list.component.css'
+})
+export class MediaVideoListComponent {
+
+}

kontor-angular/src/app/media/media-videos-list/media-videos-list.component.html

@@ -1 +0,0 @@
-<p>media-videos-list works!</p>

kontor-angular/src/app/media/media-videos-list/media-videos-list.component.spec.ts

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

kontor-angular/src/app/media/media-videos-list/media-videos-list.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-media-videos-list',
-  imports: [],
-  templateUrl: './media-videos-list.component.html',
-  styleUrl: './media-videos-list.component.css'
-})
-export class MediaVideosListComponent {
-
-}

kontor-angular/src/app/shared/error.service.ts

@@ -0,0 +1,19 @@
+import { Injectable, signal } from "@angular/core";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ErrorService {
+  private _error = signal('');
+
+  error = this._error.asReadonly();
+
+  showError(message: string) {
+    console.log(message);
+    this._error.set(message);
+  }
+
+  clearError() {
+    this._error.set('');
+  }
+}

kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.html

@@ -0,0 +1 @@
+<p>cardset-list works!</p>

kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.spec.ts

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

kontor-angular/src/app/tysc/cardset/cardset-list/cardset-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-cardset-list',
+  imports: [],
+  templateUrl: './cardset-list.component.html',
+  styleUrl: './cardset-list.component.css'
+})
+export class CardsetListComponent {
+
+}

kontor-angular/src/app/tysc/player/player-list/player-list.component.html

@@ -0,0 +1 @@
+<p>player-list works!</p>

kontor-angular/src/app/tysc/player/player-list/player-list.component.spec.ts

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

kontor-angular/src/app/tysc/player/player-list/player-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-player-list',
+  imports: [],
+  templateUrl: './player-list.component.html',
+  styleUrl: './player-list.component.css'
+})
+export class PlayerListComponent {
+
+}

kontor-angular/src/app/tysc/position/position-list/position-list.component.html

@@ -0,0 +1 @@
+<p>position-list works!</p>

kontor-angular/src/app/tysc/position/position-list/position-list.component.spec.ts

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

kontor-angular/src/app/tysc/position/position-list/position-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-position-list',
+  imports: [],
+  templateUrl: './position-list.component.html',
+  styleUrl: './position-list.component.css'
+})
+export class PositionListComponent {
+
+}

kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.html

@@ -0,0 +1,8 @@
+<p>sport-list works!</p>
+<ul>
+  @for (sport of sports(); track sport.id) {
+  <li>
+    <h3>{{ sport.name }}</h3>
+  </li>
+  }
+</ul>

kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.spec.ts

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

kontor-angular/src/app/tysc/sport/sport-list/sport-list.component.ts

@@ -0,0 +1,38 @@
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { Sport } from '../sport.model';
+import { SportService } from '../sport.service';
+
+@Component({
+  selector: 'app-sport-list',
+  imports: [],
+  templateUrl: './sport-list.component.html',
+  styleUrl: './sport-list.component.css'
+})
+export class SportListComponent implements OnInit {
+  sports = signal<Sport[] | undefined>(undefined);
+  isFetching = signal(false);
+  error = signal('');
+  private sportService = inject(SportService);
+  private destroyRef = inject(DestroyRef);
+
+
+  ngOnInit() {
+    this.isFetching.set(true);
+    const subscription = this.sportService.loadSports().subscribe({
+      next: (sports) => {
+        this.sports.set(sports);
+      },
+      error: (error: Error) => {
+        this.error.set(error.message);
+      },
+      complete: () => {
+        this.isFetching.set(false);
+      },
+    });
+
+    this.destroyRef.onDestroy(() => {
+      subscription.unsubscribe();
+    });
+  }
+
+}

kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.html

@@ -0,0 +1 @@
+<p>sport-selector works!</p>

kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.spec.ts

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

kontor-angular/src/app/tysc/sport/sport-selector/sport-selector.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sport-selector',
+  imports: [],
+  templateUrl: './sport-selector.component.html',
+  styleUrl: './sport-selector.component.css'
+})
+export class SportSelectorComponent {
+
+}

kontor-angular/src/app/tysc/sport/sport.model.ts

@@ -0,0 +1,4 @@
+export interface Sport {
+  id: string;
+  name: string;
+}

kontor-angular/src/app/tysc/sport/sport.service.ts

@@ -0,0 +1,30 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable, signal } from "@angular/core";
+import { Sport } from "./sport.model";
+import { catchError, map, throwError } from "rxjs";
+import { ErrorService } from "../../shared/error.service";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SportService {
+  private errorService = inject(ErrorService);
+  private httpClient = inject(HttpClient);
+  private sports = signal<Sport[]>([]);
+
+  loadedSports = this.sports.asReadonly();
+
+  loadSports() {
+    return this.fetchSports('http://127.0.0.1:8800/api/tysc/sports', 'Someting went wrong fetching sports. Please try again later-');
+  }
+
+  private fetchSports(url: string, errorMessage: string) {
+    return this.httpClient.get<Sport[]>(url).pipe(
+      map((resData) => resData),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
+}

kontor-angular/src/app/tysc/team/team-list/team-list.component.html

@@ -0,0 +1 @@
+<p>team-list works!</p>

kontor-angular/src/app/tysc/team/team-list/team-list.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Publisher } from './publisher-list.component';
+import { TeamListComponent } from './team-list.component';
 
-describe('Publisher', () => {
+describe('TeamListComponent', () => {
-  let component: Publisher;
+  let component: TeamListComponent;
-  let fixture: ComponentFixture<Publisher>;
+  let fixture: ComponentFixture<TeamListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Publisher]
+      imports: [TeamListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(Publisher);
+    fixture = TestBed.createComponent(TeamListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

kontor-angular/src/app/tysc/team/team-list/team-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-team-list',
+  imports: [],
+  templateUrl: './team-list.component.html',
+  styleUrl: './team-list.component.css'
+})
+export class TeamListComponent {
+
+}

kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.html

@@ -0,0 +1,8 @@
+<div class="subnav">
+  <a routerLink="/tysc/team" routerLinkActive="active">Team</a>
+  <a routerLink="/tysc/player" routerLinkActive="active">Player</a>
+  <a routerLink="/tysc/position" routerLinkActive="active">Position</a>
+  <a routerLink="/tysc/cadset" routerLinkActive="active">CardSets</a>
+  <a routerLink="/tysc/vendor" routerLinkActive="active">Vendor</a>
+</div>
+<router-outlet></router-outlet>

kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Artist } from './artist-list.component';
+import { TyscMenuComponent } from './tysc-menu.component';
 
-describe('Artist', () => {
+describe('TyscMenuComponent', () => {
-  let component: Artist;
+  let component: TyscMenuComponent;
-  let fixture: ComponentFixture<Artist>;
+  let fixture: ComponentFixture<TyscMenuComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Artist]
+      imports: [TyscMenuComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(Artist);
+    fixture = TestBed.createComponent(TyscMenuComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

kontor-angular/src/app/tysc/tysc-menu/tysc-menu.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-tysc-menu',
+  imports: [RouterLink, RouterLinkActive, RouterOutlet],
+  templateUrl: './tysc-menu.component.html',
+  styleUrl: './tysc-menu.component.css'
+})
+export class TyscMenuComponent {
+
+}

kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.html

@@ -0,0 +1 @@
+<p>vendor-list works!</p>

kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.spec.ts

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

kontor-angular/src/app/tysc/vendor/vendor-list/vendor-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-vendor-list',
+  imports: [],
+  templateUrl: './vendor-list.component.html',
+  styleUrl: './vendor-list.component.css'
+})
+export class VendorListComponent {
+
+}

kontor-angular/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>KontorAngular</title>
+  <title>Kontor</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

kontor-angular/src/styles.css

@@ -1 +1,69 @@
 /* You can add global styles to this file, and also import other style files */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial;
+  padding: 0px;
+  background: lightgrey;
+}
+
+/* Style the top navigation bar */
+.topnav {
+  overflow: hidden;
+  background-color: darkgrey;
+}
+
+/* Style the topnav links */
+.topnav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+/* Change color on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.subnav {
+  overflow: hidden;
+  background-color: grey;
+}
+
+.subnav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+a {
+  display: inline-block;
+  color: white;
+  background-color: dodgerblue;
+  text-align: center;
+  padding: 10px;
+  text-decoration: none;
+  border-radius: 10px;
+  margin-left: 20px;
+}
+
+/* Change the color of links on mouse-over */
+a:hover {
+  background-color: royalblue;
+  color: white;
+}
+
+/* Add a color to the active/current link */
+a.active {
+  background-color: royalblue;
+  color: white;
+}

kontor-api/src/main.py

@@ -4,6 +4,7 @@ from contextlib import asynccontextmanager
 
 from fastapi import FastAPI
 from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
 
 from src.apis.base import api_router
 from src.core.log_conf import LOGGING_CONFIG, logger
@@ -27,6 +28,15 @@ def include_router(app: FastAPI):
 def configure_static(app: FastAPI):
     app.mount("/static", StaticFiles(directory="src/static"), name="static")
 
+def add_middle_ware(app: FastAPI):
+    app.add_middleware(
+        CORSMiddleware, 
+        allow_origins=['*'],
+        allow_credentials=True,
+        allow_methods=['*'],
+        allow_headers=['*'],
+    )
+
 def create_tables():
     Base.metadata.create_all(bind=engine)
 
@@ -35,6 +45,7 @@ def start_application(log):
     app = FastAPI(title=settings.PROJECT_NAME, version=settings.PROJECT_VERSION, lifespan=lifespan)
     include_router(app)
     configure_static(app)
+    add_middle_ware(app)
     create_tables()
     return app