feat(umpires): move umpires between 3 lists by drag-and-drop

src/app/tab1/tab1.page.html

@@ -1,17 +1,97 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-title> Pályák </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
+      <ion-title size="large">Pályák</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+  <ion-grid [fixed]="'fixed'">
+    <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-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-row>
+    }
+  </ion-grid>
+  <ion-grid [fixed]="'fixed'" class="ion-margin-top">
+    <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-row>
+    <ion-row>
+      <ion-col>
+        <ion-list
+          [lines]="'none'"
+          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) {
+          <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>
+      <ion-col>
+        <ion-list
+          [lines]="'none'"
+          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) {
+          <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>
+      <ion-col>
+        <ion-list
+          [lines]="'none'"
+          cdkDropList
+          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) {
+          <ion-item cdkDrag [cdkDragData]="umpire">
+            <ion-label>{{ umpire|fullname }}</ion-label>
+          </ion-item>
+          }
+        </ion-list>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>