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) &&
-            serviceJudgeByCourt().get($index + 1)) {
+            @if ( (umpireByCourt().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'"