Squashed commit of the following:

commit 6596d30bd6
Author: eneller <erikneller@gmx.de>
Date:   Mon Jan 6 18:32:41 2025 +0100

    center nTeamsSelector

commit 497b64fe3f
Author: eneller <erikneller@gmx.de>
Date:   Mon Jan 6 15:25:24 2025 +0100

    remove angular material completely

commit 4d58880493
Author: eneller <erikneller@gmx.de>
Date:   Mon Jan 6 15:23:05 2025 +0100

    replace angular material components with bootstrap

commit dcf25ea969
Author: eneller <erikneller@gmx.de>
Date:   Mon Jan 6 13:13:05 2025 +0100

    add ng-bootstrap

commit 48bbdab308
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 11:07:07 2024 +0100

    implement nTeams

commit f7f8482bc9
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 09:12:38 2024 +0100

    update icons

commit e0a319b32a
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 08:48:14 2024 +0100

    make pwa for offline usage

commit 4be3649d43
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 00:53:27 2024 +0100

    add padding to nTeamsToggle

commit 2a596b15c8
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 00:32:41 2024 +0100

    fully functional using angular

commit d2090f30d4
Author: eneller <erikneller@gmx.de>
Date:   Wed Nov 27 23:40:34 2024 +0100

    basic ui alignment, add nTeams

commit 97f01f924a
Author: eneller <erikneller@gmx.de>
Date:   Wed Nov 27 22:37:29 2024 +0100

    add basic ui elements

commit 102f589869
Author: eneller <erikneller@gmx.de>
Date:   Wed Nov 27 22:01:32 2024 +0100

    add angular material

commit 7f5978b226
Author: eneller <erikneller@gmx.de>
Date:   Wed Nov 27 20:15:11 2024 +0100

    Initial Angular Commit

src/app/app.component.html

@@ -0,0 +1,60 @@
+<style>
+  *{
+    text-align: center;
+  }
+</style>
+<main class="main">
+  <div class="row justify-content-md-center">
+    <h1>Please select the number of teams:</h1>
+  <div class="btn-toolbar mb-3 col justify-content-center" role="toolbar">
+  <div class="btn-group me-2" 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" class="col-md-auto">
+    <label for="nTeamsField">n Teams</label>
+    <input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
+  </div>
+</div>
+  <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>
+    </div>
+  <button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
+  
+  </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>
+
+</div>
+</main>
+
+<router-outlet />

src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'vb' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('vb');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, vb');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterOutlet } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-root',
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.less'
+})
+export class AppComponent {
+  title = 'vb';
+  numTeamsSelectorValue = "2";
+  numTeamsSelected = 2;
+  nTeamsValue = "4";
+  teamsArray: string[][] = [];
+  displayedColumns = ["teamCount", "teamNames"];
+
+  onButtonGenerate(textinput: string): void{
+    if(this.numTeamsSelectorValue === 'n'){
+      this.numTeamsSelected  = Number(this.nTeamsValue);
+    }
+    else{
+      this.numTeamsSelected = Number(this.numTeamsSelectorValue);
+    }
+    let names = textinput
+        .split('\n')
+        .map(function(str){return str.trim();})
+        .filter(function(str){return str}); // boolean interpretation is same as non-empty
+    // remove duplicates by using a Set
+    names = [...new Set(names)];
+    
+    var teams = Array.from({ length: this.numTeamsSelected }, () => []);
+    var playersPerTeam = Math.floor(names.length / this.numTeamsSelected);
+
+    let nameslen = names.length;
+    function* iter(list: any){
+        let index = 0;
+        while(true){
+            yield list[index % list.length];
+            index++;
+        }
+    }
+    var iterator = iter(teams);
+    for(let i =0; i < nameslen; i++){
+        var index = Math.floor(Math.random()* names.length);
+        var n = names[index]; 
+        names.splice(index,1);
+        var team = iterator.next().value;
+        team.push(n);
+
+    }
+    this.teamsArray = teams;
+  }
+
+}

src/app/app.config.server.ts

@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(),
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.config.ts

@@ -0,0 +1,14 @@
+import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideServiceWorker } from '@angular/service-worker';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay()), provideAnimationsAsync('noop'), provideServiceWorker('ngsw-worker.js', {
+            enabled: !isDevMode(),
+            registrationStrategy: 'registerWhenStable:30000'
+          })]
+};

src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

src/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Volleyball Team Randomizer</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
+</head>
+<body>
+  <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
+</body>
+</html>

src/main.server.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;

src/main.ts

@@ -0,0 +1,8 @@
+/// <reference types="@angular/localize" />
+
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

src/server.ts

@@ -0,0 +1,65 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine, isMainModule } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import bootstrap from './main.server';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+
+const app = express();
+const commonEngine = new CommonEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: 'index.html'
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  const { protocol, originalUrl, baseUrl, headers } = req;
+
+  commonEngine
+    .render({
+      bootstrap,
+      documentFilePath: indexHtml,
+      url: `${protocol}://${headers.host}${originalUrl}`,
+      publicPath: browserDistFolder,
+      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    })
+    .then((html) => res.send(html))
+    .catch((err) => next(err));
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}

src/styles.less

@@ -0,0 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }