feat: use URL query parameters to initialize textarea

?names parameter is now used to initialize the playerNames textarea
chore: npm audit fix
2025-02-02 15:15:35 +01:00 · 2025-02-02 13:21:59 +01:00 · 2025-02-02 09:45:13 +01:00 · 2025-01-16 07:55:05 +01:00
25 changed files with 1156 additions and 1311 deletions
--- a/README.md
+++ b/README.md
@@ -1,8 +1,11 @@
 # Vb
+A Team Randomizer built using Angular and Bootstrap, installable as a progressive web app (PWA).
+Supports setting names using URL query parameters:
+```url
+https://vb.example.org?names=Me,Myself,I
+```

-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.2.
-
-## Development server
+## Development

 To start a local development server, run:

@@ -12,18 +15,10 @@ ng serve

 Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.

-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+Alternatively, to open the server to the network instead of just localhost, use

 ```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
+npm run serve
 ```

 ## Building
@@ -34,26 +29,5 @@ To build the project run:
 ng build
 ```

-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+This will compile your project and store the build artifacts in the `dist/` directory.
+As this is a static site, simply move the contents of `dist/vb/browser/` to a directory that can be served by nginx or apache.
--- a/angular.json
+++ b/angular.json
@@ -21,7 +21,8 @@
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
-              "zone.js"
+              "zone.js",
+              "@angular/localize/init"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "less",
@@ -32,7 +33,7 @@
              }
            ],
            "styles": [
-              "@angular/material/prebuilt-themes/azure-blue.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.less"
            ],
            "scripts": [],
@@ -56,7 +57,8 @@
                  "maximumError": "8kB"
                }
              ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
            },
            "development": {
              "optimization": false,
@@ -86,7 +88,8 @@
          "options": {
            "polyfills": [
              "zone.js",
-              "zone.js/testing"
+              "zone.js/testing",
+              "@angular/localize/init"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "less",
@@ -97,7 +100,6 @@
              }
            ],
            "styles": [
-              "@angular/material/prebuilt-themes/azure-blue.css",
              "src/styles.less"
            ],
            "scripts": []
--- a/index.html
+++ b/index.html
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html><head>
-<meta http-equiv="content-type" content="text/html; charset=windows-1252">
-        <title>Volleyball Team Randomizer</title>
-        <link rel="stylesheet" href="style.css"> 
-        <script src="script.js"></script>
-    </head>
-    <body>    
-        
-        
-        <h1>Please select the number of teams:</h1>
-            
-            
-            <label class="radioButtons" for="twoTeams">
-                <input class="radioButtons" type="radio" name="teams" id="twoTeams" checked="checked">
-                Two teams
-            </label>
-            
-            
-            <label class="radioButtons" for="threeTeams">
-                <input class="radioButtons" type="radio" name="teams" id="threeTeams">
-                Three teams
-            </label>
-
-            <label class="radioButtons" for="nTeams">
-                <input class="radioButtons" type="radio" name="teams" id="nTeams">
-                n Teams
-                
-            </label>
-            <input  id="nTeamsTextField" style="display: none;" type="number" value=4>
-
-            <br>
-            <h1>Enter player names (each row represents one player)</h1>
-
-                <textarea rows="18" cols="30" name="playerNames" required="required" id="playerNames"></textarea>
-            
-            <br>
-            <button id="generateTeams" onclick="randomizeTeams()">Generate Teams</button>
-            
-
-            <p id="teamOutput"></p>
-        
-
-
-
-
-
-
-
-
-    
-</body></html>
--- a/ngsw-config.json
+++ b/ngsw-config.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.csr.html",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -7,31 +7,36 @@
    "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,
  "dependencies": {
-    "@angular/animations": "^19.0.0",
+    "@angular/animations": "^19.0.5",
    "@angular/cdk": "~19.0.1",
-    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/material": "~19.0.1",
-    "@angular/platform-browser": "^19.0.0",
-    "@angular/platform-browser-dynamic": "^19.0.0",
-    "@angular/platform-server": "^19.0.0",
-    "@angular/router": "^19.0.0",
-    "@angular/ssr": "^19.0.2",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
+    "@angular/forms": "^19.0.5",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/platform-server": "^19.0.5",
+    "@angular/router": "^19.0.5",
+    "@angular/service-worker": "^19.0.5",
+    "@angular/ssr": "^19.0.6",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.2",
-    "@angular/cli": "^19.0.2",
-    "@angular/compiler-cli": "^19.0.0",
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
+    "@angular/localize": "^19.0.5",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
@@ -43,4 +48,4 @@
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.6.2"
  }
-}
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icons/icon-128x128.png
+++ b/public/icons/icon-128x128.png
--- a/public/icons/icon-144x144.png
+++ b/public/icons/icon-144x144.png
--- a/public/icons/icon-152x152.png
+++ b/public/icons/icon-152x152.png
--- a/public/icons/icon-192x192.png
+++ b/public/icons/icon-192x192.png
--- a/public/icons/icon-384x384.png
+++ b/public/icons/icon-384x384.png
--- a/public/icons/icon-512x512.png
+++ b/public/icons/icon-512x512.png
--- a/public/icons/icon-72x72.png
+++ b/public/icons/icon-72x72.png
--- a/public/icons/icon-96x96.png
+++ b/public/icons/icon-96x96.png
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -0,0 +1,59 @@
+{
+  "name": "vb",
+  "short_name": "vb",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
--- a/script.js
+++ b/script.js
@@ -1,68 +0,0 @@
-
-
-function randomizeTeams() {
-    let teamCount = 2;
-    if(document.getElementById("threeTeams").checked){
-        teamCount = 3;
-    }
-    if(document.getElementById("nTeams").checked){
-        teamCount = document.getElementById("nTeamsTextField").value;
-    }
-    const outputField = document.getElementById("teamOutput");
-    let textinput = document.getElementById("playerNames").value;
-    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)];
-    
-    teams = Array.from({ length: teamCount }, () => []);
-    playersPerTeam = Math.floor(names.length / teamCount);
-
-    let nameslen = names.length;
-    iterator = iter(teams);
-    for(let i =0; i < nameslen; i++){
-        index = Math.floor(Math.random()* names.length);
-        n = names[index]; 
-        names.splice(index,1);
-        team = iterator.next().value;
-        team.push(n);
-
-    }
-    
-    outputField.innerHTML = teamstotext(teams)
-}
-function teamstotext(teams){
-    textinput = "";
-    for(let i =0; i < teams.length; i++){
-        textinput += `Team${i+1}(${teams[i].length}) :${teamtotext(teams[i])} <br>`;
-    }
-    return textinput;
-}
-
-function teamtotext(team){
-    return team;
-}
-
-function* iter(list){
-    let index = 0;
-    while(true){
-        yield list[index % list.length];
-        index++;
-    }
-}
-
-function textchangelistener(){
-    let elem = document.getElementById("nTeamsTextField");
-    if(this.checked && this.id ==  "nTeams"){
-        elem.style.display = "block";
-    }
-    else {
-        elem.style.display = "none";
-    }
-}
-document.addEventListener('DOMContentLoaded', () => {
-    buttons = document.querySelectorAll("input[type='radio']");
-    buttons.forEach((x) => x.addEventListener("change", textchangelistener));
-});
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,30 +2,62 @@
  *{
    text-align: center;
  }
-  .main{
-    display: block;
-  }
 </style>
 <main class="main">
-  <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-    <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>
+  <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>

-  <mat-form-field>
-    <mat-label>Names</mat-label>
-    <textarea matInput></textarea>
-  </mat-form-field>
+    <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>

-  <button mat-flat-button>Generate</button>
-  
-  <!--TODO replace with ngFor? extract list items as component?-->
-  <mat-list>
-    <mat-list-item>Team1</mat-list-item>
-    <mat-list-item>Team2</mat-list-item>
-    <mat-list-item>Team3</mat-list-item>
-   </mat-list>
+    <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 [(ngModel)]="playerNamesValue"
+      class="form-control mb-3"
+      rows="18" 
+      cols="30"
+      style="text-align: left;" 
+      name="playerNames"
+      #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 />
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,17 +1,69 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import {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 {MatListModule} from '@angular/material/list';
+import {  AfterViewInit, Component, OnInit} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterOutlet, ActivatedRoute } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
-  imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatListModule],
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.less'
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
  title = 'vb';
+  playerNamesValue = "";
+  numTeamsSelectorValue = "2";
+  numTeamsSelected = 2;
+  nTeamsValue = "4";
+  teamsArray: string[][] = [];
+  displayedColumns = ["teamCount", "teamNames"];
+
+  constructor(private activatedRoute: ActivatedRoute){}
+
+  ngOnInit(): void {
+    //consiedr using Angular's ActivatedRoute here instead
+    const params = new URLSearchParams(window.location.search);
+    const names = params.get('names')?.replaceAll(',', '\n');
+    if (names) this.playerNamesValue = names;
+  }
+
+  onButtonGenerate(textinput: string): void{
+    if(this.numTeamsSelectorValue === 'n'){
+      this.numTeamsSelected  = Number(this.nTeamsValue);
+    }
+    else{
+      this.numTeamsSelected = Number(this.numTeamsSelectorValue);
+    }
+    let names = this.playerNamesValue
+        .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;
+  }
+
 }
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,10 +1,14 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+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')]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay()), provideAnimationsAsync('noop'), provideServiceWorker('ngsw-worker.js', {
+            enabled: !isDevMode(),
+            registrationStrategy: 'registerWhenStable:30000'
+          })]
 };
--- a/src/index.html
+++ b/src/index.html
@@ -6,10 +6,11 @@
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <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>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,5 @@
+/// <reference types="@angular/localize" />
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
--- a/style.css
+++ b/style.css
@@ -1,47 +0,0 @@
-*{
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    background-color: aquamarine;
-}
-
-textarea{
-    font-size: 1vh;
-    width: 100%;
-    height:50vh;
-    padding:0;
-}
-h1{
-    text-align: center;
-    font-size: 2vh;
-}
-.radioButtons, #nTeamsTextField{
-    height:2vh;
-    font-size: 2vh;
-    line-height: 2vh;
-    display: grid;
-    grid-template-columns: 1em auto;
-    gap: 0.5em;
-}
-#teamOutput{
-    
-    margin-top:10vh;
-    text-align: center;
-    font-size: 2vh;
-    line-height: 4.5vh;
- }
-button{
-    position: absolute;
-    left:50%;
-    margin-top: 5vh;
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    height: 5vh;
-    font-size: 2vh;
-    padding-left: 10%;
-    padding-right: 10%;
-    font-weight:bold;
-}
-
-
-
-
-
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -5,7 +5,8 @@
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
-      "node"
+      "node",
+      "@angular/localize"
    ]
  },
  "files": [
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -5,7 +5,8 @@
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
    ]
  },
  "include": [
Author	SHA1	Message	Date
eneller	8e04cc97ba	feat: use URL query parameters to initialize textarea ?names parameter is now used to initialize the playerNames textarea	2025-02-02 15:15:35 +01:00
eneller	5b66e1907c	chore: npm audit fix	2025-02-02 13:21:59 +01:00
eneller	55bea1a923	doc: README.md	2025-02-02 09:45:13 +01:00
eneller	83bfe51282	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	2025-01-16 07:55:05 +01:00