court-pilot/src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Pályák </ion-title>
  </ion-toolbar>
</ion-header>

<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'" class="bottom-lists">
    <ion-row>
      <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'">
          <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) {
    <ion-row>
      <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}`"
          [cdkDropListData]="umpireByCourt().get($index + 1) ? [umpireByCourt().get($index + 1)] : []"
          [cdkDropListEnterPredicate]="canDropUmpire"
          (cdkDropListDropped)="dropToUmpire($event, $index + 1)">
          @if (umpireByCourt().get($index + 1); as umpire) {

          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
            <div *cdkDragPlaceholder class="custom-ion-item primary">
              <ion-label>{{ umpire|fullname }}</ion-label>
            </div>
            <ion-label>{{ umpire|fullname }}</ion-label>
          </div>

          }
        </ion-list>
      </ion-col>
      @if (serviceJudgeEnabled()) {
      <ion-col>
        <ion-list
          [lines]="'none'"
          cdkDropList
          [id]="`court-service-judge-${$index + 1}`"
          [cdkDropListData]="serviceJudgeByCourt().get($index + 1) ? [serviceJudgeByCourt().get($index + 1)] : []"
          (cdkDropListDropped)="dropToServiceJudge($event, $index + 1)">
          @if (serviceJudgeByCourt().get($index + 1); as umpire) {

          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
            <div *cdkDragPlaceholder class="custom-ion-item primary">
              <ion-label>{{ umpire|fullname }}</ion-label>
            </div>
            <ion-label>{{ umpire|fullname }}</ion-label>
          </div>

          }
        </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)) ||
            (umpireByCourt().get($index + 1) && !serviceJudgeEnabled()) ) {
            <ion-button
              [color]="'danger'"
              (click)="showRemoveConfirmation($index + 1)">
              <ion-icon
                slot="icon-only"
                size="large"
                name="exit-outline"></ion-icon>
            </ion-button>
            } @else if ((!umpireByCourt().get($index + 1) &&
            !serviceJudgeByCourt().get($index + 1) && waitingUmpires().length &&
            waitingServiceJudges().length) || (!umpireByCourt().get($index + 1)
            && waitingUmpires().length && !serviceJudgeEnabled())) {
            <ion-button
              [color]="'success'"
              [disabled]=""
              (click)="showAddConfirmation($index + 1)">
              <ion-icon
                slot="icon-only"
                size="large"
                name="enter-outline"></ion-icon>
            </ion-button>
            }
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
    }
  </ion-grid>
  <ion-grid [fixed]="'fixed'" class="ion-margin-top bottom-lists">
    <ion-row>
      <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]="!serviceJudgeEnabled() ? 6 : 4">
        <ion-item color="medium">
          <ion-label class="ion-text-center"> Pihenők </ion-label>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-list
          [lines]="'none'"
          cdkDropList
          id="list-waiting-umpires"
          [cdkDropListData]="waitingUmpires()"
          (cdkDropListDropped)="dropToWaitingUmpire($event)">
          @for (umpire of waitingUmpires(); track umpire.id) {
          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
            <div *cdkDragPlaceholder class="custom-ion-item primary">
              <ion-label>{{ umpire|fullname }}</ion-label>
            </div>
            <ion-label>{{ umpire|fullname }}</ion-label>
          </div>
          }
        </ion-list>
      </ion-col>
      @if (serviceJudgeEnabled()) {
      <ion-col>
        <ion-list
          [lines]="'none'"
          cdkDropList
          id="list-waiting-service-judges"
          [cdkDropListData]="waitingServiceJudges()"
          (cdkDropListDropped)="dropToWaitingServiceJudge($event)">
          @for (umpire of waitingServiceJudges(); track umpire.id) {
          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
            <div *cdkDragPlaceholder class="custom-ion-item primary">
              <ion-label>{{ umpire|fullname }}</ion-label>
            </div>
            <ion-label>{{ umpire|fullname }}</ion-label>
          </div>
          }
        </ion-list>
      </ion-col>
      }
      <ion-col>
        <ion-list
          [lines]="'none'"
          cdkDropList
          cdkDropListSortingDisabled
          id="list-on-rest"
          (cdkDropListDropped)="dropToRest($event)"
          [cdkDropListData]="onRest()">
          @for (umpire of onRest(); track umpire.id) {
          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
            <div *cdkDragPlaceholder class="custom-ion-item primary">
              <ion-label>{{ umpire|fullname }}</ion-label>
            </div>
            <ion-label>{{ umpire|fullname }}</ion-label>
          </div>
          }
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>