eneller/vb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: navbar

Browse Source
This commit is contained in:
eneller
2026-01-31 23:02:01 +01:00
parent aaa0ab0638
commit 7c7762515b
6 changed files with 101 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/app.component.html
View File

@@ -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"> <main class="main">
<app-screen-edit></app-screen-edit> <router-outlet></router-outlet>
<app-screen-basic></app-screen-basic>
</main> </main>

17
src/app/app.component.ts
View File

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

1
src/app/app.routes.ts
View File

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

2
src/app/screen-basic/screen-basic.component.ts
View File

@@ -1,5 +1,5 @@
// Original Team Generation Screen for arbitrary size and number of teams // 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 { FormsModule } from '@angular/forms';
import { RouterOutlet, ActivatedRoute } from '@angular/router'; import { RouterOutlet, ActivatedRoute } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

126
src/app/screen-rotations/screen-rotations.component.html
View File

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

22
src/app/screen-rotations/screen-rotations.component.ts
View File

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