feat: show roles in edit list

src/app/model.ts

@@ -21,9 +21,14 @@ export class Player{
     this.setter = setter;
     this.libero = libero;
   }
-  serialize(): string[] {
-    const values = 'OOOO'
-    return [this.name, values];
+  getRoles(): string[] {
+    const roles = [];
+    if (this.outside){roles.push('OH')}
+    if (this.middle){roles.push('M')}
+    if (this.opposite){roles.push('OPP')}
+    if (this.setter){roles.push('S')}
+    if (this.libero){roles.push('L')}
+    return roles;
   }
   
   toString(): string{

src/app/screen-edit/screen-edit.component.html

@@ -19,7 +19,10 @@
   <ul class="list-group mb-3">
       @for (player of data.getPlayers(); track $index) {
         <li class="list-group-item d-flex justify-content-between">
-            <a (click)="openPlayerModal(player)" style="display: block; cursor: pointer; flex-grow: 1; text-align: left;">{{ player.name }}</a>
+            <div (click)="openPlayerModal(player)" class="player-content">
+              <div class="text-start">{{ player.name }}</div>
+              <div class="text-end">{{ player.getRoles() }}</div>
+            </div>
             <button (click)="removeItem(player)" class="btn btn-secondary btn-sm p-0 ms-2" style="width: 24px; height: 24px" >
               <i class="bi bi-x"></i>
             </button>

src/app/screen-edit/screen-edit.component.less

@@ -0,0 +1,7 @@
+.player-content{
+    cursor: pointer;
+    flex-grow: 1;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+}

src/app/screen-rotations/screen-rotations.component.ts

@@ -1,5 +1,5 @@
 // Team Generation Screen respecting volleyball roles as defined by `../model/Player`
-import { Component, inject, Input } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Player } from '../model';
 import { NgbAccordionBody, NgbAccordionCollapse, NgbAccordionHeader, NgbAccordionItem, NgbAccordionButton, NgbAccordionDirective, NgbAccordionToggle } from '@ng-bootstrap/ng-bootstrap';
@@ -11,8 +11,13 @@ import { DataService } from '../data.service';
   templateUrl: './screen-rotations.component.html',
   styleUrl: './screen-rotations.component.less'
 })
-export class ScreenRotationsComponent {
+export class ScreenRotationsComponent implements OnInit{
   data = inject(DataService);
+  ngOnInit(): void {
+    
+  }
+  // https://de.wikipedia.org/wiki/Volleyball#Spielpositionen
+  // we want 2 outside, 1 opp, 1 set and either 2*middle or middle + libero
 
   get OutsidePlayers(): Player[] {
     return this.data.getPlayers().filter(player => player.outside);