diff --git a/src/app/app.component.html b/src/app/app.component.html index 281de12..c127571 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,11 @@ + +

- - +
\ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5ad76e4..5d2164f 100644 --- a/src/app/app.component.ts +++ b/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)) + ); } }); } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 9dd2521..482d17e 100644 --- a/src/app/app.routes.ts +++ b/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 }, diff --git a/src/app/screen-basic/screen-basic.component.ts b/src/app/screen-basic/screen-basic.component.ts index 9b2a70a..dbb0ea3 100644 --- a/src/app/screen-basic/screen-basic.component.ts +++ b/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'; diff --git a/src/app/screen-rotations/screen-rotations.component.html b/src/app/screen-rotations/screen-rotations.component.html index a16e415..3f74f69 100644 --- a/src/app/screen-rotations/screen-rotations.component.html +++ b/src/app/screen-rotations/screen-rotations.component.html @@ -1,65 +1,75 @@

Rotations

-
-

- -

-
-
- @for (player of outsidePlayers; track $index) { +
+

+ +

+
+
+ + @for (player of LiberoPlayers; track $index) { {{ player.name }} } -
-
+ +
+
+
+
+

+ +

+
+
+ + @for (player of SetterPlayers; track $index) { + {{ player.name }} + } + +
+
+
+
+

+ +

+
+
+ + @for (player of OppositePlayers; track $index) { + {{ player.name }} + } + +
+
+
+
+

+ +

+
+
+ + @for (player of MiddlePlayers; track $index) { + {{ player.name }} + } + +
+
+
+
+

+ +

+
+
+ + @for (player of OutsidePlayers; track $index) { + {{ player.name }} + } + +
+
+
-
-
-
-

- -

-
-
- Content for the first item -
-
-
-
-
-
-

- -

-
-
- Content for the first item -
-
-
-
-
-
-

- -

-
-
- Content for the first item -
-
-
-
-
-
-

- -

-
-
- Content for the first item -
-
-
-
-
+ \ No newline at end of file diff --git a/src/app/screen-rotations/screen-rotations.component.ts b/src/app/screen-rotations/screen-rotations.component.ts index be8a5f5..f7c5485 100644 --- a/src/app/screen-rotations/screen-rotations.component.ts +++ b/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); } } \ No newline at end of file