umpires can be added to courts as umpires (removal also)

db.ts

@@ -1,5 +1,4 @@
 import Dexie, { type EntityTable } from 'dexie';
-import { settings } from 'ionicons/icons';
 
 export interface Umpire {
   id: number;
@@ -7,13 +6,19 @@ export interface Umpire {
   lastName: string;
   country: string;
   gender: string;
+  courtNo?: number;
 }
 
-export interface Court {
+export interface CourtUmpire {
   id: number;
   umpireId: number | null;
-  serviceJudgeId: number | null;
-  order: number;
+  courtNo: number;
+}
+
+export interface CourtServiceJudge {
+  id: number;
+  umpireId: number | null;
+  courtNo: number;
 }
 
 export interface WaitingAsUmpire {
@@ -36,7 +41,8 @@ export interface Settings {
 
 const db = new Dexie('CourtPilot') as Dexie & {
   umpires: EntityTable<Umpire, 'id'>;
-  courts: EntityTable<Court, 'id'>;
+  courtUmpires: EntityTable<CourtUmpire, 'id'>;
+  courtServiceJudges: EntityTable<CourtServiceJudge, 'id'>;
   settings: EntityTable<Settings, 'id'>;
   waitingUmpires: EntityTable<WaitingAsUmpire, 'id'>;
   waitingServiceJudges: EntityTable<WaitingAsServiceJudge, 'id'>;
@@ -44,7 +50,8 @@ const db = new Dexie('CourtPilot') as Dexie & {
 
 db.version(1).stores({
   umpires: '++id, lastName',
-  courts: '++id, umpireId, serviceJudgeId',
+  courtUmpires: '++id, courtNo, umpireId',
+  courtServiceJudges: '++id, courtNo, umpireId',
   settings: '++id',
   waitingUmpires: '++id, order, umpireId',
   waitingServiceJudges: '++id, order, serviceJudgeId'

src/app/fullname-pipe.ts

@@ -6,7 +6,10 @@ import { Umpire } from 'db';
   standalone: true
 })
 export class FullnamePipe implements PipeTransform {
-  transform(value: Umpire, ...args: unknown[]): string {
+  transform(value: Umpire | undefined, ...args: unknown[]): string {
+    if (typeof value === 'undefined') {
+      return '';
+    }
     // TODO: in case of multilang, change here
     return value.lastName + ' ' + value.firstName;
   }

src/app/services/court.service.judge.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CourtServiceJudgeService } from './court.service.judge.service';
+
+describe('CourtServiceJudgeService', () => {
+  let service: CourtServiceJudgeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CourtServiceJudgeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/court.service.judge.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { CourtServiceJudge, db } from 'db';
+import { liveQuery } from 'dexie';
+import { from } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CourtServiceJudgeService {
+  /**
+   * All service judges (reactive)
+   */
+  readonly umpires = toSignal(
+    from(liveQuery(() => db.courtServiceJudges.orderBy('courtNo').toArray())),
+    { initialValue: [] }
+  );
+
+  /**
+   * Get by court number (reactive)
+   */
+  getByCourtNo(courtNo: number) {
+    return toSignal<CourtServiceJudge | undefined>(
+      liveQuery(() =>
+        db.courtServiceJudges.where('courtNo').equals(courtNo).first()
+      ),
+      { initialValue: undefined }
+    );
+  }
+
+  /**
+   * Create / update
+   */
+  async save(item: Omit<CourtServiceJudge, 'id'>): Promise<number> {
+    return db.courtServiceJudges.add(item as CourtServiceJudge);
+  }
+
+  async update(
+    id: number,
+    changes: Partial<CourtServiceJudge>
+  ): Promise<number> {
+    return db.courtServiceJudges.update(id, changes);
+  }
+
+  async delete(id: number): Promise<void> {
+    await db.courtServiceJudges.delete(id);
+  }
+}

src/app/services/court.umpire.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CourtUmpireService } from './court.umpire.service';
+
+describe('CourtUmpireService', () => {
+  let service: CourtUmpireService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CourtUmpireService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/court.umpire.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { CourtUmpire, db } from 'db';
+import { liveQuery } from 'dexie';
+import { from } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CourtUmpireService {
+  /**
+   * All court umpires (reactive)
+   */
+  readonly umpires = toSignal(
+    from(liveQuery(() => db.courtUmpires.orderBy('courtNo').toArray())),
+    { initialValue: [] }
+  );
+
+  /**
+   * Get by court number (reactive single)
+   */
+  getByCourtNo(courtNo: number) {
+    return toSignal<CourtUmpire | undefined>(
+      liveQuery(() => db.courtUmpires.where('courtNo').equals(courtNo).first()),
+      { initialValue: undefined }
+    );
+  }
+
+  /**
+   * Create / update
+   */
+  async save(item: Omit<CourtUmpire, 'id'>): Promise<number> {
+    return db.courtUmpires.add(item as CourtUmpire);
+  }
+
+  async update(id: number, changes: Partial<CourtUmpire>): Promise<number> {
+    return db.courtUmpires.update(id, changes);
+  }
+
+  async delete(id: number): Promise<void> {
+    await db.courtUmpires.delete(id);
+  }
+
+  async removeByUmpireId(umpireId: number): Promise<void> {
+    const item = await db.courtUmpires
+      .where('umpireId')
+      .equals(umpireId)
+      .first();
+
+    if (!item?.id) {
+      return;
+    }
+
+    await db.courtUmpires.delete(item.id);
+  }
+}

src/app/tab1/tab1.page.html

@@ -4,32 +4,72 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" cdkDropListGroup>
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">Pályák</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <ion-grid [fixed]="'fixed'">
+  <ion-grid [fixed]="'fixed'" class="bottom-lists">
     <ion-row>
-      <ion-col [size]="1">Pálya</ion-col>
-      <ion-col>Játékvezető</ion-col>
-      <ion-col>Adogatásbíró</ion-col>
+      <ion-col [size]="1" class="ion-display-none ion-display-xl-block">
+        <ion-item [lines]="'none'">Pálya</ion-item>
+      </ion-col>
+      <ion-col [size]="1" class="ion-display-xl-none">
+        <ion-item [lines]="'none'">P</ion-item>
+      </ion-col>
+      <ion-col><ion-item [lines]="'none'">Játékvezető</ion-item></ion-col>
+      <ion-col><ion-item [lines]="'none'">Adogatásbíró</ion-item></ion-col>
     </ion-row>
     @for (item of [].constructor(settings()?.numberOfCourts); track $index) {
     <ion-row>
-      <ion-col [size]="1">{{ $index + 1 }}.</ion-col>
-      <ion-col>név1</ion-col>
-      <ion-col>név2</ion-col>
+      <ion-col [size]="1">
+        <ion-list>
+          <ion-item [lines]="'none'"> {{ $index + 1 }}. </ion-item>
+        </ion-list>
+      </ion-col>
+      <ion-col>
+        <ion-list
+          [lines]="'none'"
+          cdkDropList
+          [id]="`court-umpire-${$index + 1}`"
+          cdkDropListSortingDisabled
+          [cdkDropListData]="waitingServiceJudges()"
+          (cdkDropListDropped)="dropToUmpire($event, $index + 1)"
+          [cdkDropListConnectedTo]="['list-on-rest', 'list-waiting-umpires']">
+          @if (umpireByCourt().get($index + 1); as umpire) {
+
+          <ion-item cdkDrag [cdkDragData]="umpire">
+            <ion-label>{{ umpire | fullname }}</ion-label>
+          </ion-item>
+
+          }
+        </ion-list>
+      </ion-col>
+      <ion-col>
+        <ion-item [lines]="'none'"> aaa </ion-item>
+      </ion-col>
     </ion-row>
     }
   </ion-grid>
-  <ion-grid [fixed]="'fixed'" class="ion-margin-top">
+  <ion-grid [fixed]="'fixed'" class="ion-margin-top bottom-lists">
     <ion-row>
-      <ion-col [size]="4">Játékvezetők</ion-col>
-      <ion-col [size]="4">Adogatásbírók</ion-col>
-      <ion-col [size]="4">Pihenők</ion-col>
+      <ion-col [size]="4">
+        <ion-item color="primary">
+          <ion-label class="ion-text-center"> Játékvezetők </ion-label>
+        </ion-item>
+      </ion-col>
+      <ion-col [size]="4">
+        <ion-item color="primary">
+          <ion-label class="ion-text-center"> Adogatásbírók </ion-label>
+        </ion-item>
+      </ion-col>
+      <ion-col [size]="4">
+        <ion-item color="primary">
+          <ion-label class="ion-text-center"> Pihenők </ion-label>
+        </ion-item>
+      </ion-col>
     </ion-row>
     <ion-row>
       <ion-col>
@@ -38,19 +78,12 @@
           cdkDropList
           cdkDropListSortingDisabled
           id="list-waiting-umpires"
-          [cdkDropListData]="waitingUmpires"
-          (cdkDropListDropped)="dropToWaitingUmpire($event)"
-          [cdkDropListConnectedTo]="['list-on-rest', 'list-waiting-service-judges']">
-          @for (umpire of waitingUmpires; track umpire.id) {
+          [cdkDropListData]="waitingUmpires()"
+          (cdkDropListDropped)="dropToWaitingUmpire($event)">
+          @for (umpire of waitingUmpires(); track umpire.id) {
           <ion-item cdkDrag [cdkDragData]="umpire">
             <ion-label>{{ umpire|fullname }}</ion-label>
           </ion-item>
-          } @empty {
-          <ion-item>
-            <ion-label class="ion-text-center">
-              <ion-icon [color]="'primary'" name="add"></ion-icon>
-            </ion-label>
-          </ion-item>
           }
         </ion-list>
       </ion-col>
@@ -60,19 +93,12 @@
           cdkDropList
           cdkDropListSortingDisabled
           id="list-waiting-service-judges"
-          [cdkDropListData]="waitingServiceJudges"
-          (cdkDropListDropped)="dropToWaitingServiceJudge($event)"
-          [cdkDropListConnectedTo]="['list-on-rest', 'list-waiting-umpires']">
-          @for (umpire of waitingServiceJudges; track umpire.id) {
+          [cdkDropListData]="waitingServiceJudges()"
+          (cdkDropListDropped)="dropToWaitingServiceJudge($event)">
+          @for (umpire of waitingServiceJudges(); track umpire.id) {
           <ion-item cdkDrag [cdkDragData]="umpire">
             <ion-label>{{ umpire|fullname }}</ion-label>
           </ion-item>
-          } @empty {
-          <ion-item>
-            <ion-label class="ion-text-center">
-              <ion-icon [color]="'primary'" name="add"></ion-icon>
-            </ion-label>
-          </ion-item>
           }
         </ion-list>
       </ion-col>
@@ -83,9 +109,8 @@
           cdkDropListSortingDisabled
           id="list-on-rest"
           (cdkDropListDropped)="dropToRest($event)"
-          [cdkDropListData]="onRest"
-          [cdkDropListConnectedTo]="['list-waiting-service-judges', 'list-waiting-umpires']">
-          @for (umpire of onRest; track umpire.id) {
+          [cdkDropListData]="onRest()">
+          @for (umpire of onRest(); track umpire.id) {
           <ion-item cdkDrag [cdkDragData]="umpire">
             <ion-label>{{ umpire|fullname }}</ion-label>
           </ion-item>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,3 @@
+.bottom-lists ion-list {
+    min-height: 64px;
+}

src/app/tab1/tab1.page.ts

@@ -1,4 +1,4 @@
-import { Component, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject } from '@angular/core';
 import {
   IonHeader,
   IonToolbar,
@@ -25,15 +25,14 @@ import {
   DragDropModule
 } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
-import { addIcons } from 'ionicons';
-import { add } from 'ionicons/icons';
+import { CourtUmpireService } from '../services/court.umpire.service';
+import { CourtServiceJudgeService } from '../services/court.service.judge.service';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   imports: [
-    IonIcon,
     IonLabel,
     IonItem,
     IonList,
@@ -56,63 +55,207 @@ export class Tab1Page {
   readonly umpireService = inject(UmpireService);
   readonly waitingUmpireService = inject(WaitingUmpiresService);
   readonly waitingServiceJudgeService = inject(WaitingServiceJudgesService);
+  readonly courtUmpireService = inject(CourtUmpireService);
+  readonly courtServiceJudgeService = inject(CourtServiceJudgeService);
 
-  public readonly settings = this.settingsService.settings;
-  public readonly _umpires = this.umpireService.umpires;
-  public readonly _waitingUmpires = this.waitingUmpireService.waitingUmpires;
-  public readonly _waitingServiceJudges =
+  /**
+   * Raw signals from services
+   */
+  readonly settings = this.settingsService.settings;
+
+  readonly _umpires = this.umpireService.umpires;
+
+  readonly _waitingUmpires = this.waitingUmpireService.waitingUmpires;
+
+  readonly _waitingServiceJudges =
     this.waitingServiceJudgeService.waitingServiceJudges;
 
-  public onRest: Umpire[] = [];
-  public waitingUmpires: Umpire[] = [];
-  public waitingServiceJudges: Umpire[] = [];
+  readonly _courtUmpires = this.courtUmpireService.umpires;
 
-  constructor() {
-    addIcons({ add });
+  readonly _courtServiceJudges = this.courtServiceJudgeService.umpires;
 
-    effect(() => {
-      this.onRest = this._umpires().filter((umpire) => {
-        return (
-          !this.isUmpireOnCourt(umpire) &&
-          !this.isWaitingUmpire(umpire) &&
-          !this.isWaitingServiceJudge(umpire)
-        );
-      });
+  /**
+   * Fast O(1) umpire lookup
+   */
+  readonly umpireMap = computed(() => {
+    return new Map<number, Umpire>(this._umpires().map((u) => [u.id, u]));
+  });
 
-      this.waitingUmpires = this._waitingUmpires()
-        .map((_wa) => {
-          return this._umpires().find((u) => u.id === _wa.umpireId);
-        })
-        .filter((u) => typeof u !== 'undefined');
+  /**
+   * Waiting umpire IDs
+   */
+  readonly waitingUmpireIds = computed(() => {
+    return new Set(this._waitingUmpires().map((w) => w.umpireId));
+  });
 
-      this.waitingServiceJudges = this._waitingServiceJudges()
-        .map((_wsj) => {
-          return this._umpires().find((u) => u.id === _wsj.serviceJudgeId);
-        })
-        .filter((u) => typeof u !== 'undefined');
+  /**
+   * Waiting service judge IDs
+   */
+  readonly waitingServiceJudgeIds = computed(() => {
+    return new Set(this._waitingServiceJudges().map((w) => w.serviceJudgeId));
+  });
+
+  /**
+   * Court umpire IDs
+   */
+  readonly courtUmpireIds = computed(() => {
+    return new Set(
+      this._courtUmpires()
+        .map((c) => c.umpireId)
+        .filter((id): id is number => id !== null)
+    );
+  });
+
+  /**
+   * Court service judge IDs
+   */
+  readonly courtServiceJudgeIds = computed(() => {
+    return new Set(
+      this._courtServiceJudges()
+        .map((c) => c.umpireId)
+        .filter((id): id is number => id !== null)
+    );
+  });
+
+  /**
+   * Umpires waiting as umpire
+   */
+  readonly waitingUmpires = computed(() => {
+    const umpireMap = this.umpireMap();
+
+    return this._waitingUmpires()
+      .map((wu) => umpireMap.get(wu.umpireId))
+      .filter((u): u is Umpire => !!u);
+  });
+
+  /**
+   * Umpires waiting as service judge
+   */
+  readonly waitingServiceJudges = computed(() => {
+    const umpireMap = this.umpireMap();
+
+    return this._waitingServiceJudges()
+      .map((wsj) => umpireMap.get(wsj.serviceJudgeId))
+      .filter((u): u is Umpire => !!u);
+  });
+
+  /**
+   * Court umpires
+   */
+  readonly courtUmpires = computed(() => {
+    const umpireMap = this.umpireMap();
+
+    return this._courtUmpires()
+      .map((cu) => {
+        if (cu.umpireId == null) {
+          return undefined;
+        }
+
+        return umpireMap.get(cu.umpireId);
+      })
+      .filter((u): u is Umpire => !!u);
+  });
+
+  /**
+   * Court service judges
+   */
+  readonly courtServiceJudges = computed(() => {
+    const umpireMap = this.umpireMap();
+
+    return this._courtServiceJudges()
+      .map((csj) => {
+        if (csj.umpireId == null) {
+          return undefined;
+        }
+
+        return umpireMap.get(csj.umpireId);
+      })
+      .filter((u): u is Umpire => !!u);
+  });
+
+  /**
+   * Umpires resting
+   */
+  readonly onRest = computed(() => {
+    const waitingUmpireIds = this.waitingUmpireIds();
+
+    const waitingServiceJudgeIds = this.waitingServiceJudgeIds();
+
+    const courtUmpireIds = this.courtUmpireIds();
+
+    const courtServiceJudgeIds = this.courtServiceJudgeIds();
+
+    return this._umpires().filter((umpire) => {
+      return (
+        !waitingUmpireIds.has(umpire.id) &&
+        !waitingServiceJudgeIds.has(umpire.id) &&
+        !courtUmpireIds.has(umpire.id) &&
+        !courtServiceJudgeIds.has(umpire.id)
+      );
     });
-  }
+  });
 
-  private isUmpireOnCourt(umpire: Umpire): boolean {
-    return false;
-  }
+  /**
+   * Court -> umpire map
+   */
+  readonly umpireByCourt = computed(() => {
+    const map = new Map<number, Umpire>();
 
-  private isWaitingUmpire(umpire: Umpire): boolean {
-    return (
-      typeof this._waitingUmpires().find((wu) => wu.umpireId === umpire.id) !==
-      'undefined'
-    );
-  }
+    const umpireMap = this.umpireMap();
 
-  private isWaitingServiceJudge(umpire: Umpire): boolean {
-    return (
-      typeof this._waitingServiceJudges().find(
-        (wsj) => wsj.serviceJudgeId === umpire.id
-      ) !== 'undefined'
-    );
-  }
+    for (const item of this._courtUmpires()) {
+      if (item.umpireId == null) {
+        continue;
+      }
+
+      const umpire = umpireMap.get(item.umpireId);
+
+      if (!umpire) {
+        continue;
+      }
+
+      map.set(item.courtNo, umpire);
+    }
+
+    return map;
+  });
+
+  /**
+   * Court -> service judge map
+   */
+  readonly serviceJudgeByCourt = computed(() => {
+    const map = new Map<number, Umpire>();
+
+    const umpireMap = this.umpireMap();
+
+    for (const item of this._courtServiceJudges()) {
+      if (item.umpireId == null) {
+        continue;
+      }
+
+      const umpire = umpireMap.get(item.umpireId);
+
+      if (!umpire) {
+        continue;
+      }
+
+      map.set(item.courtNo, umpire);
+    }
+
+    return map;
+  });
+
+  /**
+   * Court indexes for template
+   */
+  readonly courtIndexes = computed(() => {
+    const count = this.settings()?.numberOfCourts ?? 0;
+
+    return Array.from({ length: count }, (_, i) => i + 1);
+  });
 
   dropToRest(event: CdkDragDrop<Umpire[]>) {
+    console.log('drop to rest');
     if (event.previousContainer === event.container) {
       return;
     } else {
@@ -126,6 +269,10 @@ export class Tab1Page {
       if ('list-waiting-umpires' === comingFrom) {
         this.waitingUmpireService.removeByUmpireId(umpireToMove.id);
       }
+
+      if (comingFrom.startsWith('court-umpire')) {
+        this.courtUmpireService.removeByUmpireId(umpireToMove.id);
+      }
     }
   }
 
@@ -140,6 +287,10 @@ export class Tab1Page {
       if ('list-waiting-umpires' === comingFrom) {
         this.waitingUmpireService.removeByUmpireId(umpireToMove.id);
       }
+
+      if (comingFrom.startsWith('court-umpire')) {
+        this.courtUmpireService.removeByUmpireId(umpireToMove.id);
+      }
     }
   }
 
@@ -161,6 +312,26 @@ export class Tab1Page {
         // Remove from waiting service judges
         this.waitingServiceJudgeService.removeByUmpireId(umpireToMove.id);
       }
+
+      if (comingFrom.startsWith('court-umpire')) {
+        this.courtUmpireService.removeByUmpireId(umpireToMove.id);
+      }
+    }
+  }
+
+  dropToUmpire(event: CdkDragDrop<Umpire[]>, courtNo: number) {
+    // TODO: stop dropping if there is already another umpire
+
+    const comingFrom = event.previousContainer.id;
+    const umpireToMove = event.item.data;
+    this.courtUmpireService.save({ umpireId: umpireToMove.id, courtNo });
+
+    if ('list-waiting-service-judges' === comingFrom) {
+      this.waitingServiceJudgeService.removeByUmpireId(umpireToMove.id);
+    }
+
+    if ('list-waiting-umpires' === comingFrom) {
+      this.waitingUmpireService.removeByUmpireId(umpireToMove.id);
     }
   }
 }

src/theme/variables.scss

@@ -1,2 +1,3 @@
 // For information on how to create your own theme, please refer to:
 // https://ionicframework.com/docs/theming/
+@import '@ionic/angular/css/palettes/dark.always.css';