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

basic ui alignment, add nTeams

Browse Source
This commit is contained in:
eneller
2024-11-27 23:40:34 +01:00
parent 97f01f924a
commit d2090f30d4
2 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,30 +2,40 @@
*{ *{
text-align: center; text-align: center;
} }
.main{
display: block;
}
</style> </style>
<main class="main"> <main class="main">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style"> <mat-grid-list cols="1">
<h1>Please select the number of teams:</h1>
<div>
<!--TODO add default selection-->
<mat-button-toggle-group id="numTeamsSelector"
value="2"
(change)="onNumTeamsSelector($event)"
>
<mat-button-toggle value="2">Two</mat-button-toggle> <mat-button-toggle value="2">Two</mat-button-toggle>
<mat-button-toggle value="3">Three</mat-button-toggle> <mat-button-toggle value="3">Three</mat-button-toggle>
<mat-button-toggle value="n">n</mat-button-toggle> <mat-button-toggle value="n">n</mat-button-toggle>
</mat-button-toggle-group> </mat-button-toggle-group>
<mat-form-field id="nTeamsText" [style.display]="numTeamsSelected === 'n' ? 'inline' : 'none'">
<mat-label>n</mat-label>
<input matInput type="number" pattern="\d*" value="4">
</mat-form-field>
</div>
<div>
<mat-form-field> <mat-form-field>
<mat-label>Names</mat-label> <mat-label>Names</mat-label>
<textarea matInput></textarea> <textarea matInput rows="18" cols="30"></textarea>
</mat-form-field> </mat-form-field>
</div>
<button mat-flat-button>Generate</button> <button mat-flat-button >Generate</button>
<!--TODO replace with ngFor? extract list items as component?--> <!--TODO populate with ngFor? extract list items as component? use table instead of list?-->
<mat-list> <mat-list>
<mat-list-item>Team1</mat-list-item> <mat-list-item>Team1</mat-list-item>
<mat-list-item>Team2</mat-list-item> <mat-list-item>Team2</mat-list-item>
<mat-list-item>Team3</mat-list-item> <mat-list-item>Team3</mat-list-item>
</mat-list> </mat-list>
</mat-grid-list>
</main> </main>
<router-outlet /> <router-outlet />

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

@@ -1,17 +1,22 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatButtonToggleChange, MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatButtonModule} from '@angular/material/button'; import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input'; import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field'; import {MatFormFieldModule} from '@angular/material/form-field';
import {MatListModule} from '@angular/material/list'; import {MatListModule} from '@angular/material/list';
import {MatGridListModule} from '@angular/material/grid-list';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatListModule], imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatListModule, MatGridListModule],
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrl: './app.component.less' styleUrl: './app.component.less'
}) })
export class AppComponent { export class AppComponent {
title = 'vb'; title = 'vb';
numTeamsSelected = "2";
onNumTeamsSelector(event: MatButtonToggleChange): void{
this.numTeamsSelected = event.value;
}
} }