feat: navbar

src/app/app.component.html

@@ -1,4 +1,11 @@
+<nav>
+  <ul ngbNav [activeId]="route.fragment | async" class="nav-tabs">
+    <li ngbNavItem="/edit"><a ngbNavLink routerLink="/edit" routerLinkActive="active"><i class="bi bi-pencil-square"></i>{{ data.getPlayers().length }}</a></li>
+    <li ngbNavItem="/basic"><a ngbNavLink routerLink="/basic" routerLinkActive="active"><i class="bi bi-shuffle"></i></a></li>
+    <li ngbNavItem="/rotations"><a ngbNavLink routerLink="/rotations" routerLinkActive="active"><i class="bi bi-arrow-repeat"></i></a></li>
+  </ul>
+</nav>
+<p></p>
 <main class="main">
-    <app-screen-edit></app-screen-edit>
-    <app-screen-basic></app-screen-basic>
+    <router-outlet></router-outlet>
 </main>

src/app/app.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit} from '@angular/core';
+import { Component, inject, OnInit} from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { RouterOutlet, ActivatedRoute } from '@angular/router';
+import { RouterOutlet, ActivatedRoute, RouterLink } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { CommonModule } from '@angular/common';
@@ -9,26 +9,29 @@ import { ScreenBasicComponent } from "./screen-basic/screen-basic.component";
 import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.component';
 import { Player } from './model';
 import { ScreenEditComponent } from './screen-edit/screen-edit.component';
+import { DataService } from './data.service';
 
 @Component({
   selector: 'app-root',
-  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent, ScreenRotationsComponent, ScreenEditComponent],
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent, ScreenRotationsComponent, ScreenEditComponent, RouterLink],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
 export class AppComponent implements OnInit {
   title = 'vb';
-  players : Player[] = [];
+  data = inject(DataService);
 
-  constructor(private activatedRoute: ActivatedRoute){}
+  constructor(public route: ActivatedRoute){}
 
   ngOnInit(): void {
-    this.activatedRoute.queryParams.pipe(
+    this.route.queryParams.pipe(
       filter(params => Object.keys(params).length > 0), // Only proceed if params are not empty
       take(1)
     ).subscribe(params => {
       if (params['names']){
-        this.players = params['names'].split(',').map((name: string) => new Player(name));
+        this.data.setPlayers(
+          params['names'].split(',').map((name: string) => new Player(name))
+        );
       }
     });
   }

src/app/app.routes.ts

@@ -7,7 +7,6 @@ import { AppComponent } from './app.component';
 export const routes: Routes = [
     {
     path: '',
-    component: AppComponent,
     children: [
       { path: '', redirectTo: 'edit', pathMatch: 'full' },
       { path: 'edit', component: ScreenEditComponent },

src/app/screen-basic/screen-basic.component.ts

@@ -1,5 +1,5 @@
 // Original Team Generation Screen for arbitrary size and number of teams
-import { Component, inject, Input, OnInit} from '@angular/core';
+import { Component, inject} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterOutlet, ActivatedRoute } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

src/app/screen-rotations/screen-rotations.component.html

@@ -1,63 +1,73 @@
 <div class="justify-content-md-center">
 <h1>Rotations</h1>
 <div ngbAccordion>
-  <div ngbAccordionItem>
+	<div ngbAccordionItem [collapsed]="false">
 		<h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Outside</button>
+			<button ngbAccordionButton>Libero: {{ LiberoPlayers.length }}</button>
 		</h2>
 		<div ngbAccordionCollapse>
 			<div ngbAccordionBody>
-          @for (player of outsidePlayers; track $index) {
+				<ng-template>
+          @for (player of LiberoPlayers; track $index) {
             {{ player.name }}
           }
+				</ng-template>
 			</div>
 		</div>
 	</div>
-</div>
-<div ngbAccordion>
 	<div ngbAccordionItem>
 		<h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Middle</button>
+			<button ngbAccordionButton>Setter: {{ SetterPlayers.length }}</button>
 		</h2>
 		<div ngbAccordionCollapse>
 			<div ngbAccordionBody>
-        <ng-template>Content for the first item</ng-template>
+				<ng-template>
+          @for (player of SetterPlayers; track $index) {
+            {{ player.name }}
+          }
+				</ng-template>
 			</div>
 		</div>
 	</div>
-</div>
-<div ngbAccordion>
 	<div ngbAccordionItem>
 		<h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Opposite</button>
+			<button ngbAccordionButton>Opposite: {{ OppositePlayers.length }}</button>
 		</h2>
 		<div ngbAccordionCollapse>
 			<div ngbAccordionBody>
-        <ng-template>Content for the first item</ng-template>
+				<ng-template>
+          @for (player of OppositePlayers; track $index) {
+            {{ player.name }}
+          }
+				</ng-template>
 			</div>
 		</div>
 	</div>
-</div>
-<div ngbAccordion>
 	<div ngbAccordionItem>
 		<h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Setter</button>
+			<button ngbAccordionButton>Middle: {{ MiddlePlayers.length }}</button>
 		</h2>
 		<div ngbAccordionCollapse>
 			<div ngbAccordionBody>
-        <ng-template>Content for the first item</ng-template>
+				<ng-template>
+          @for (player of MiddlePlayers; track $index) {
+            {{ player.name }}
+          }
+				</ng-template>
 			</div>
 		</div>
 	</div>
-</div>
-<div ngbAccordion>
 	<div ngbAccordionItem>
 		<h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Libero</button>
+			<button ngbAccordionButton>Outside: {{ OutsidePlayers.length}}</button>
 		</h2>
 		<div ngbAccordionCollapse>
 			<div ngbAccordionBody>
-        <ng-template>Content for the first item</ng-template>
+				<ng-template>
+          @for (player of OutsidePlayers; track $index) {
+            {{ player.name }}
+          }
+				</ng-template>
 			</div>
 		</div>
 	</div>

src/app/screen-rotations/screen-rotations.component.ts

@@ -1,8 +1,9 @@
 // Team Generation Screen respecting volleyball roles as defined by `../model/Player`
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Player } from '../model';
 import { NgbAccordionBody, NgbAccordionCollapse, NgbAccordionHeader, NgbAccordionItem, NgbAccordionButton, NgbAccordionDirective, NgbAccordionToggle } from '@ng-bootstrap/ng-bootstrap';
+import { DataService } from '../data.service';
 
 @Component({
   selector: 'app-screen-rotations',
@@ -11,20 +12,21 @@ import { NgbAccordionBody, NgbAccordionCollapse, NgbAccordionHeader, NgbAccordio
   styleUrl: './screen-rotations.component.less'
 })
 export class ScreenRotationsComponent {
-  @Input() players!: Player[];
-  get outsidePlayers(): Player[] {
-    return this.players.filter(player => !player.outside);
+  data = inject(DataService);
+
+  get OutsidePlayers(): Player[] {
+    return this.data.getPlayers().filter(player => player.outside);
   }
-  get middlePlayers(): Player[] {
-    return this.players.filter(player => player.middle);
+  get MiddlePlayers(): Player[] {
+    return this.data.getPlayers().filter(player => player.middle);
   }
-  get oppositePlayers(): Player[] {
-    return this.players.filter(player => player.opposite);
+  get OppositePlayers(): Player[] {
+    return this.data.getPlayers().filter(player => player.opposite);
   }
   get SetterPlayers(): Player[] {
-    return this.players.filter(player => player.setter);
+    return this.data.getPlayers().filter(player => player.setter);
   }
   get LiberoPlayers(): Player[] {
-    return this.players.filter(player => player.libero);
+    return this.data.getPlayers().filter(player => player.libero);
   }
 }