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

replace angular material components with bootstrap

Browse Source
This commit is contained in:
eneller
2025-01-06 15:23:05 +01:00
parent dcf25ea969
commit 4d58880493
3 changed files with 47 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -7,6 +7,7 @@
"build": "ng build", "build": "ng build",
"watch": "ng build --watch --configuration development", "watch": "ng build --watch --configuration development",
"test": "ng test", "test": "ng test",
"serve": "ng serve --host 0.0.0.0 --port 4200",
"serve:ssr:vb": "node dist/vb/server/server.mjs" "serve:ssr:vb": "node dist/vb/server/server.mjs"
}, },
"private": true, "private": true,

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

@@ -2,61 +2,59 @@
*{ *{
text-align: center; text-align: center;
} }
mat-button-toggle-group{
margin-bottom: 6px;
}
#nTeamsText{
margin-left: 6px;
}
</style> </style>
<main class="main"> <main class="main">
<mat-grid-list cols="1"> <div class="text-center">
<h1>Please select the number of teams:</h1> <h1>Please select the number of teams:</h1>
<div class="nTeams"> <div class="btn-toolbar mb-3" role="toolbar">
<!--TODO add default selection--> <div class="btn-group" id="numTeamsSelector" role="group"
<mat-button-toggle-group id="numTeamsSelector" value="2">
value="2" <input value="2" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
(change)="onNumTeamsSelector($event)" <label class="btn btn-outline-primary" for="btnradio1">Two</label>
>
<mat-button-toggle value="2">Two</mat-button-toggle> <input value="3" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<mat-button-toggle value="3">Three</mat-button-toggle> <label class="btn btn-outline-primary" for="btnradio2">Three</label>
<mat-button-toggle value="n">n</mat-button-toggle>
</mat-button-toggle-group> <input value="n" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<mat-form-field *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" > <label class="btn btn-outline-primary" for="btnradio3">n</label>
<mat-label>n Teams</mat-label>
<input matInput type="number" pattern="\d*" [(ngModel)]="nTeamsValue">
</mat-form-field>
</div> </div>
<div> <div *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" >
<mat-form-field> <label for="nTeamsField">n Teams</label>
<mat-label>Names</mat-label> <input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
<textarea matInput </div>
</div>
<form>
<div class="container">
<label for="playerNames">Names</label>
<textarea class="form-control mb-3"
rows="18" rows="18"
cols="30" cols="30"
style="text-align: left;" style="text-align: left;"
#playerNames #playerNames
id="playerNames"
></textarea> ></textarea>
</mat-form-field>
</div> </div>
<button mat-flat-button (click)="onButtonGenerate(playerNames.value)">Generate</button> <button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
<!--TODO populate with ngFor? extract list items as component? use table instead of list?--> </form>
<table mat-table [dataSource]="teamsArray"> <table class="table table-striped">
<ng-container matColumnDef="teamCount"> <thead>
<th mat-header-cell *matHeaderCellDef>Size</th> <tr>
<td mat-cell *matCellDef="let element">{{element.length}}</td> <th scope="col">Size</th>
</ng-container> <th scope="col">Names</th>
</tr>
<ng-container matColumnDef="teamNames"> </thead>
<th mat-header-cell *matHeaderCellDef>Names</th> <tbody>
<td mat-cell *matCellDef="let element">{{element}}</td> @for (team of teamsArray; track $index) {
</ng-container> <tr>
<td>{{ team.length | number }}</td>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <td>{{ team }}</td>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </tr>
}
</tbody>
</table> </table>
</mat-grid-list> </div>
</main> </main>
<router-outlet /> <router-outlet />

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

@@ -1,17 +1,13 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import {MatButtonToggleChange, MatButtonToggleModule} from '@angular/material/button-toggle'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatTableModule} from '@angular/material/table';
import {MatGridListModule} from '@angular/material/grid-list';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatTableModule, MatGridListModule, CommonModule, FormsModule], imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrl: './app.component.less' styleUrl: './app.component.less'
}) })
@@ -23,10 +19,6 @@ export class AppComponent {
teamsArray: string[][] = []; teamsArray: string[][] = [];
displayedColumns = ["teamCount", "teamNames"]; displayedColumns = ["teamCount", "teamNames"];
onNumTeamsSelector(event: MatButtonToggleChange): void{
this.numTeamsSelectorValue = event.value;
}
onButtonGenerate(textinput: string): void{ onButtonGenerate(textinput: string): void{
if(this.numTeamsSelectorValue === 'n'){ if(this.numTeamsSelectorValue === 'n'){
this.numTeamsSelected = Number(this.nTeamsValue); this.numTeamsSelected = Number(this.nTeamsValue);