rdt-client/client/src/app/torrent-table/torrent-table.component.html

<div class="notification is-danger is-light" *ngIf="error && error.length > 0">
  An error has occured: {{ error }}<br />
  Please refresh the screen after fixing this error.
</div>
<div class="table-container">
  <table class="table is-fullwidth is-hoverable">
    <thead>
      <tr>
        <th>
          <input
            type="checkbox"
            (click)="toggleSelectAll($event)"
            [checked]="selectedTorrents.length > 0 && selectedTorrents.length === torrents.length"
          />
        </th>
        <th>Name</th>
        <th>Category</th>
        <th>Priority</th>
        <th>Files</th>
        <th>Downloads</th>
        <th>Size</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let torrent of torrents; trackBy: trackByMethod">
        <td>
          <input
            type="checkbox"
            (click)="toggleSelect(torrent.torrentId)"
            [checked]="selectedTorrents.contains(torrent.torrentId)"
          />
        </td>
        <td (click)="openTorrent(torrent.torrentId)">
          {{ torrent.rdName }}
        </td>
        <td>
          {{ torrent.category }}
        </td>
        <td>
          {{ torrent.priority }}
        </td>
        <td>
          {{ torrent.files.length | number }}
        </td>
        <td>
          {{ torrent.downloads.length | number }}
        </td>
        <td>
          {{ torrent.rdSize | filesize }}
        </td>
        <td>
          {{ torrent | status }}
        </td>
      </tr>
    </tbody>
  </table>

  <div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px">
    <button
      class="button is-danger"
      (click)="showDeleteModal()"
      [disabled]="selectedTorrents.length === 0"
      *ngIf="torrents.length > 0"
    >
      Delete Selected
    </button>

    <button
      class="button is-primary"
      (click)="showRetryModal()"
      [disabled]="selectedTorrents.length === 0"
      *ngIf="torrents.length > 0"
    >
      Retry Selected
    </button>
  </div>
</div>

<div class="modal" [class.is-active]="isDeleteModalActive">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Delete selected torrents</p>
      <button class="delete" aria-label="close" (click)="deleteCancel()"></button>
    </header>
    <section class="modal-card-body">
      <p>Are you sure you want to delete these torrent?</p>
      <div class="field">
        <label class="label"></label>
        <div class="control">
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteData" />
            Delete Torrents from client
          </label>
          <br />
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteRdTorrent" />
            Delete Torrents from provider
          </label>
          <br />
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteLocalFiles" />
            Delete local files
          </label>
        </div>
      </div>
      <div class="notification is-primary">
        Deleting a torrent from Real-Debrid will automatically delete it here too.
      </div>
      <div class="notification is-danger is-light" *ngIf="deleteError?.length > 0">
        Error deleting torrent: {{ deleteError }}
      </div>
    </section>
    <footer class="modal-card-foot">
      <button
        class="button is-success"
        (click)="deleteOk()"
        [disabled]="deleting"
        [ngClass]="{ 'is-loading': deleting }"
      >
        Delete selected
      </button>
      <button class="button" (click)="deleteCancel()" [disabled]="deleting" [ngClass]="{ 'is-loading': deleting }">
        Cancel
      </button>
    </footer>
  </div>
</div>

<div class="modal" [class.is-active]="isRetryModalActive">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Retry selected torrents</p>
      <button class="delete" aria-label="close" (click)="retryCancel()"></button>
    </header>
    <section class="modal-card-body">
      <p>Are you sure you want to retry these torrent?</p>
      <p>
        This action will delete all the torrent data + all local downloads. Then it will re-add the original magnet link
        or torrent file to the debrid provider.
      </p>
      <div class="notification is-danger is-light" *ngIf="retryError?.length > 0">
        Error retrying torrent: {{ retryError }}
      </div>
    </section>
    <footer class="modal-card-foot">
      <button
        class="button is-success"
        (click)="retryOk()"
        [disabled]="retrying"
        [ngClass]="{ 'is-loading': deleting }"
      >
        Retry selected
      </button>
      <button class="button" (click)="retryCancel()" [disabled]="retrying" [ngClass]="{ 'is-loading': deleting }">
        Cancel
      </button>
    </footer>
  </div>
</div>