feat: navbar
This commit is contained in:
eneller
@@ -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>
|
||||
@@ -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))
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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 },
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -1,65 +1,75 @@
|
||||
<div class="justify-content-md-center">
|
||||
<h1>Rotations</h1>
|
||||
<div ngbAccordion>
|
||||
<div ngbAccordionItem>
|
||||
<h2 ngbAccordionHeader>
|
||||
<button ngbAccordionButton>Outside</button>
|
||||
</h2>
|
||||
<div ngbAccordionCollapse>
|
||||
<div ngbAccordionBody>
|
||||
@for (player of outsidePlayers; track $index) {
|
||||
<div ngbAccordionItem [collapsed]="false">
|
||||
<h2 ngbAccordionHeader>
|
||||
<button ngbAccordionButton>Libero: {{ LiberoPlayers.length }}</button>
|
||||
</h2>
|
||||
<div ngbAccordionCollapse>
|
||||
<div ngbAccordionBody>
|
||||
<ng-template>
|
||||
@for (player of LiberoPlayers; track $index) {
|
||||
{{ player.name }}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</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 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>
|
||||
</div>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user