feat: handle service judge setting on the UI

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> {