wip: player modal

src/app/app.component.html

@@ -1,5 +1,5 @@
 <main class="main">
-<app-screen-basic></app-screen-basic>
+<app-screen-rotations></app-screen-rotations>
 </main>
 
 <router-outlet />

src/app/app.component.ts

@@ -6,10 +6,11 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CommonModule } from '@angular/common';
 import { filter, take } from 'rxjs';
 import { ScreenBasicComponent } from "./screen-basic/screen-basic.component";
+import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.component';
 
 @Component({
   selector: 'app-root',
-  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent],
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent, ScreenRotationsComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })

src/app/modal-rotations/modal-rotations.component.html

@@ -0,0 +1,85 @@
+<ng-template #rotationsModal let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title">Edit Player Roles</h4>
+    <button
+      type="button"
+      class="btn-close"
+      (click)="modal.dismiss()"
+      aria-label="Close"
+    ></button>
+  </div>
+  <div class="modal-body">
+    <form>
+      <div class="mb-3">
+        <label class="form-label">{{ player.name }}</label>
+      </div>
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          [(ngModel)]="player.outside"
+          name="outside"
+          id="outside"
+        />
+        <label class="form-check-label" for="outside">Outside</label>
+      </div>
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          [(ngModel)]="player.middle"
+          name="middle"
+          id="middle"
+        />
+        <label class="form-check-label" for="middle">Middle</label>
+      </div>
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          [(ngModel)]="player.opposite"
+          name="opposite"
+          id="opposite"
+        />
+        <label class="form-check-label" for="opposite">Opposite</label>
+      </div>
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          [(ngModel)]="player.setter"
+          name="setter"
+          id="setter"
+        />
+        <label class="form-check-label" for="setter">Setter</label>
+      </div>
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          [(ngModel)]="player.libero"
+          name="libero"
+          id="libero"
+        />
+        <label class="form-check-label" for="libero">Libero</label>
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-secondary"
+      (click)="modal.dismiss()"
+    >
+      Cancel
+    </button>
+    <button
+      type="button"
+      class="btn btn-primary"
+      (click)="savePlayer(); modal.close()"
+    >
+      Save
+    </button>
+  </div>
+</ng-template>
+

src/app/modal-rotations/modal-rotations.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalRotationsComponent } from './modal-rotations.component';
+
+describe('ModalRotationsComponent', () => {
+  let component: ModalRotationsComponent;
+  let fixture: ComponentFixture<ModalRotationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModalRotationsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ModalRotationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Player} from '../model';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-modal-rotations',
+  imports: [FormsModule],
+  templateUrl: './modal-rotations.component.html',
+  styleUrl: './modal-rotations.component.less'
+})
+export class ModalRotationsComponent {
+ @Input() player!: Player;
+
+  constructor(public activeModal: NgbActiveModal) {}
+
+  savePlayer() {
+    // You can emit an event or handle the save logic here
+    this.activeModal.close(this.player);
+  }
+}

src/app/model.ts

@@ -0,0 +1,11 @@
+export class Player{
+  name: string;
+  outside: boolean = false;
+  middle: boolean = false;
+  opposite: boolean = false;
+  setter: boolean = false;
+  libero: boolean = false;
+  constructor( name: string){
+    this.name = name;
+  }
+}

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

@@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-screen-basic',
-  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent],
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
   templateUrl: './screen-basic.component.html',
   styleUrl: './screen-basic.component.less'
 })

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

@@ -0,0 +1,33 @@
+<div class="row justify-content-md-center">
+    <div class="container mt-4">
+  <h2>Players</h2>
+  <ul class="list-group mb-3">
+      @for (player of players; track $index) {
+        <li class="list-group-item">{{ player.name }}</li>
+        <button
+        class="btn btn-sm btn-primary"
+        (click)="openPlayerDialog(player)"
+      >
+        Edit Roles
+      </button>
+      }
+  </ul>
+  <div class="input-group mb-3">
+    <input
+      type="text"
+      [(ngModel)]="newItem"
+      class="form-control"
+      placeholder="Enter a name..."
+      (keyup.enter)="addItem()"
+    />
+    <button
+      class="btn btn-outline-secondary"
+      type="button"
+      (click)="addItem()"
+    >
+      <i class="bi bi-plus-lg"></i> Add
+    </button>
+  </div>
+</div>
+
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScreenRotationsComponent } from './screen-rotations.component';
+
+describe('ScreenRotationsComponent', () => {
+  let component: ScreenRotationsComponent;
+  let fixture: ComponentFixture<ScreenRotationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScreenRotationsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ScreenRotationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Player } from '../model';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ModalRotationsComponent } from '../modal-rotations/modal-rotations.component';
+
+@Component({
+  selector: 'app-screen-rotations',
+  imports: [FormsModule],
+  templateUrl: './screen-rotations.component.html',
+  styleUrl: './screen-rotations.component.less'
+})
+export class ScreenRotationsComponent {
+  players: Player[] = [];
+  newItem: string = "";
+
+  constructor(private modalService: NgbModal) {}
+
+  addItem() {
+    if (this.newItem.trim()) {
+      this.players.push( new Player(this.newItem));
+      this.newItem = "";
+    }
+  }
+
+  openPlayerDialog(player: Player) {
+    const modalRef = this.modalService.open(ModalRotationsComponent);
+    modalRef.componentInstance.player = player;
+
+    modalRef.result.then((updatedPlayer) => {
+      // Handle the updated player data if needed
+      console.log('Player updated:', updatedPlayer);
+    }).catch((error) => {
+      console.log('Modal dismissed');
+    });
+  }
+
+}