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

3
package.json
View File

@@ -7,6 +7,7 @@
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve": "ng serve --host 0.0.0.0 --port 4200",
"serve:ssr:vb": "node dist/vb/server/server.mjs"
},
"private": true,
@@ -48,4 +49,4 @@
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.6.2"
}
}
}

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

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

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

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