feat: handle service judge setting on the UI

src/app/tab1/tab1.page.html

@@ -24,11 +24,13 @@
           <ion-label class="ion-text-center"> Játékvezető </ion-label>
         </ion-item>
       </ion-col>
+      @if (serviceJudgeEnabled()) {
       <ion-col>
         <ion-item [lines]="'none'">
           <ion-label class="ion-text-center"> Adogatásbíró </ion-label>
         </ion-item>
       </ion-col>
+      }
       <ion-col size="2" sizeLg="1"></ion-col>
     </ion-row>
     @for (item of [].constructor(settings()?.numberOfCourts); track $index) {
@@ -58,6 +60,7 @@
           }
         </ion-list>
       </ion-col>
+      @if (serviceJudgeEnabled()) {
       <ion-col>
         <ion-list
           [lines]="'none'"
@@ -77,11 +80,13 @@
           }
         </ion-list>
       </ion-col>
+      }
       <ion-col size="2" sizeLg="1">
         <ion-list>
           <ion-item lines="none">
-            @if (umpireByCourt().get($index + 1) &&
+            @if ( (umpireByCourt().get($index + 1) &&
-            serviceJudgeByCourt().get($index + 1)) {
+            serviceJudgeByCourt().get($index + 1)) ||
+            (umpireByCourt().get($index + 1) && !serviceJudgeEnabled()) ) {
             <ion-button
               [color]="'danger'"
               (click)="showRemoveConfirmation($index + 1)">
@@ -90,9 +95,10 @@
                 size="large"
                 name="exit-outline"></ion-icon>
             </ion-button>
-            } @else if (!umpireByCourt().get($index + 1) &&
+            } @else if ((!umpireByCourt().get($index + 1) &&
             !serviceJudgeByCourt().get($index + 1) && waitingUmpires().length &&
-            waitingServiceJudges().length) {
+            waitingServiceJudges().length) || (!umpireByCourt().get($index + 1)
+            && waitingUmpires().length && !serviceJudgeEnabled())) {
             <ion-button
               [color]="'success'"
               [disabled]=""
@@ -111,17 +117,19 @@
   </ion-grid>
   <ion-grid [fixed]="'fixed'" class="ion-margin-top bottom-lists">
     <ion-row>
-      <ion-col [size]="4">
+      <ion-col [size]="!serviceJudgeEnabled() ? 6 : 4">
         <ion-item color="primary">
           <ion-label class="ion-text-center"> Játékvezetők </ion-label>
         </ion-item>
       </ion-col>
+      @if (serviceJudgeEnabled()) {
       <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-col [size]="!serviceJudgeEnabled() ? 6 : 4">
         <ion-item color="medium">
           <ion-label class="ion-text-center"> Pihenők </ion-label>
         </ion-item>
@@ -145,6 +153,7 @@
           }
         </ion-list>
       </ion-col>
+      @if (serviceJudgeEnabled()) {
       <ion-col>
         <ion-list
           [lines]="'none'"
@@ -162,6 +171,7 @@
           }
         </ion-list>
       </ion-col>
+      }
       <ion-col>
         <ion-list
           [lines]="'none'"

src/app/tab1/tab1.page.ts

@@ -270,6 +270,13 @@ export class Tab1Page {
     return Array.from({ length: count }, (_, i) => i + 1);
   });
 
+  /**
+   * Is service judge functionality enabled in settings.
+   */
+  readonly serviceJudgeEnabled = computed(() => {
+    return this.settings()?.withServiceJudge ?? false;
+  });
+
   dropToRest(event: CdkDragDrop<Umpire[]>) {
     if (event.previousContainer === event.container) {
       return;
@@ -378,7 +385,10 @@ export class Tab1Page {
     const umpire = this.umpireByCourt().get(courtNo);
     const serviceJudge = this.serviceJudgeByCourt().get(courtNo);
 
-    if (typeof umpire === 'undefined' || typeof serviceJudge === 'undefined') {
+    if (
+      typeof umpire === 'undefined' ||
+      (typeof serviceJudge === 'undefined' && this.serviceJudgeEnabled())
+    ) {
       return;
     }
 
@@ -389,9 +399,9 @@ export class Tab1Page {
 
     const alert = await this.alertController.create({
       header: `Pálya ${courtNo}`,
-      subHeader: 'Biztos leveszed őket pályáról?',
+      subHeader: `Biztos leveszed ${serviceJudge ? 'őket' : 'őt'} a pályáról?`,
       cssClass: 'wide',
-      message: `${this.fullnamePipe.transform(umpire)} - ${this.fullnamePipe.transform(serviceJudge)}`,
+      message: `${this.fullnamePipe.transform(umpire)} ${serviceJudge ? '- ' : ''} ${this.fullnamePipe.transform(serviceJudge)}`,
       buttons: [
         {
           text: 'Nem',
@@ -401,7 +411,12 @@ export class Tab1Page {
           text: 'Igen',
           role: 'confirm',
           handler: () => {
+            if (this.serviceJudgeEnabled()) {
               this.removeUmpiresFromCourt(courtNo);
+              return;
+            }
+
+            this.removeUmpireFromCourt(courtNo);
           }
         }
       ]
@@ -410,6 +425,9 @@ export class Tab1Page {
     await alert.present();
   }
 
+  /**
+   * This is for removing both umpire and service judge from the court (when service judge is enabled).
+   */
   private async removeUmpiresFromCourt(courtNo: number) {
     const umpire = this.umpireByCourt().get(courtNo);
     const serviceJudge = this.serviceJudgeByCourt().get(courtNo);
@@ -424,25 +442,46 @@ export class Tab1Page {
     await this.waitingServiceJudgeService.add(umpire.id);
   }
 
+  /**
+   * This is for removing 1 umpire only (when service judge is not enabled).
+   */
+  private async removeUmpireFromCourt(courtNo: number) {
+    const umpire = this.umpireByCourt().get(courtNo);
+
+    if (typeof umpire === 'undefined') {
+      return;
+    }
+
+    await this.courtUmpireService.removeByUmpireId(umpire.id);
+    await this.waitingUmpireService.add(umpire.id);
+  }
+
   public async showAddConfirmation(courtNo: number) {
     const umpire = await this.waitingUmpireService.getCurrentUmpire();
     const serviceJudge =
       await this.waitingServiceJudgeService.getCurrentUmpire();
 
-    if (typeof umpire === 'undefined' || typeof serviceJudge === 'undefined') {
+    if (
+      typeof umpire === 'undefined' ||
+      (typeof serviceJudge === 'undefined' && this.serviceJudgeEnabled())
+    ) {
       return;
     }
 
     if (!this.settings()?.showAlert) {
+      if (this.serviceJudgeEnabled() && serviceJudge) {
         this.addUmpiresToCourt(courtNo, umpire, serviceJudge);
         return;
       }
+      this.addUmpireToCourt(courtNo, umpire);
+      return;
+    }
 
     const alert = await this.alertController.create({
       header: `Pálya ${courtNo}`,
       cssClass: 'wide',
-      subHeader: 'Biztos pályára küldöd őket?',
+      subHeader: `Biztos pályára küldöd ${serviceJudge ? 'őket' : 'őt'}?`,
-      message: `${this.fullnamePipe.transform(umpire)} - ${this.fullnamePipe.transform(serviceJudge)}`,
+      message: `${this.fullnamePipe.transform(umpire)} ${serviceJudge ? ' - ' : ''} ${this.fullnamePipe.transform(serviceJudge)}`,
       buttons: [
         {
           text: 'Nem',
@@ -452,7 +491,11 @@ export class Tab1Page {
           text: 'Igen',
           role: 'confirm',
           handler: () => {
+            if (this.serviceJudgeEnabled() && serviceJudge) {
               this.addUmpiresToCourt(courtNo, umpire, serviceJudge);
+            } else {
+              this.addUmpireToCourt(courtNo, umpire);
+            }
           }
         }
       ]
@@ -475,4 +518,9 @@ export class Tab1Page {
     await this.waitingUmpireService.removeByUmpireId(umpire.id);
     await this.waitingServiceJudgeService.removeByUmpireId(serviceJudge.id);
   }
+
+  private async addUmpireToCourt(courtNo: number, umpire: Umpire) {
+    await this.courtUmpireService.save({ courtNo, umpireId: umpire.id });
+    await this.waitingUmpireService.removeByUmpireId(umpire.id);
+  }
 }

src/app/tab3/tab3.page.ts

@@ -15,6 +15,8 @@ import {
 import { SettingsService } from '../services/settings-service';
 import { CourtUmpireService } from '../services/court.umpire.service';
 import { CourtServiceJudgeService } from '../services/court.service.judge.service';
+import { CourtServiceJudge } from 'db';
+import { WaitingServiceJudgesService } from '../services/waiting-service-judges.service';
 
 @Component({
   selector: 'app-tab3',
@@ -38,6 +40,7 @@ export class Tab3Page {
   readonly settingsService = inject(SettingsService);
   readonly courtUmpireService = inject(CourtUmpireService);
   readonly courtServiceJudgeService = inject(CourtServiceJudgeService);
+  readonly waitingServiceJudgeService = inject(WaitingServiceJudgesService);
 
   readonly settings = this.settingsService.settings;
 
@@ -69,6 +72,17 @@ export class Tab3Page {
     await this.settingsService.update({
       withServiceJudge: event.detail.checked
     });
+
+    if (!event.detail.checked) {
+      this.courtServiceJudgeService.umpires().map((csj: CourtServiceJudge) => {
+        this.courtServiceJudgeService.delete(csj.id);
+      });
+
+
+      this.waitingServiceJudgeService.waitingServiceJudges().map((wsj) => {
+        this.waitingServiceJudgeService.remove(wsj.id);
+      });
+    }
   }
 
   async updateShowAlert(event: CustomEvent): Promise<void> {