nise/nise-frontend/src/app/banlist/banlist.component.html

<div class="main term mb-2">
  <div class="fade-stuff">
    <h1 class="mb-4"># recent bans</h1>
    <div class="alert mb-2 text-center">
      <p>
        just because an user appears on this list, <u>it doesn't mean they were banned for cheating.</u>
      </p>
      <p>there are more a multitude of reasons osu!support might close an account.</p>
      <p>
        all we do is check if the user exists (with their unique id) and if we get a "hey, it's missing" response (aka the <code>User not found! ;_;</code> message) we mark it as possibly banned.
      </p>
    </div>

    <ng-container *ngIf="this.isLoading">
      <div class="text-center">
        <p>Loading <app-cute-loading></app-cute-loading></p>
        <p>please be patient - the database is working hard!</p>
      </div>
    </ng-container>

    <ng-template #nullTemplate>
      <code>null</code>
    </ng-template>
    <ng-container *ngIf="this.banlist">
      <fieldset class="mb-2">
        <legend>tools</legend>
        <div class="text-center">
          <button (click)="this.downloadFilesService.downloadCSV(this.banlist.users, ['userId', 'username', 'secondsPlayed', 'pp', 'rank', 'isBanned', 'approximateBanTime', 'lastUpdate'], 'nise-banlist')">Download .csv</button>
          <button (click)="this.downloadFilesService.downloadJSON(this.banlist.users, 'nise-banlist')">Download .json</button>
          <button (click)="this.downloadFilesService.downloadXLSX(this.banlist.users, 'nise-banlist')">Download .xlsx</button>
        </div>
      </fieldset>
      <table>
        <thead>
        <tr>
          <th colspan="2">Username</th>
          <th>Time played</th>
          <th>Total PP</th>
          <th>Rank</th>
          <th>Last check</th>
          <th>Approximate ban date</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let user of this.banlist.users">
          <td>
            <img [src]="'https://a.ppy.sh/' + user.userId" class="avatar" style="width: 16px; min-height: 16px; height: 16px;" loading="lazy">
          </td>
          <td>
            <a [routerLink]="['/u', user.username]">
              {{ user.username }}
            </a>
          </td>
          <td>
            <ng-container *ngIf="user.secondsPlayed else nullTemplate">
              {{ formatDuration(user.secondsPlayed) }}
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="user.pp; else nullTemplate">
              {{ user.pp | number: '1.0-0' }}
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="user.rank; else nullTemplate">
              #{{ user.rank | number }}
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="user.lastUpdate; else nullTemplate">
              {{ calculateTimeAgo(user.lastUpdate) }}
            </ng-container>
          </td>
          <td>
            {{ user.approximateBanTime | date: 'medium' }}
          </td>
          <td>
          </td>
        </tbody>
      </table>
      <div class="text-center mt-2">
        <p>Total results: {{ this.banlist.pagination.totalResults | number }}</p>
        <p>Page: {{ this.banlist.pagination.currentPage | number }} / {{ this.banlist.pagination.totalPages | number }}</p>
        <div class="mb-2">
          <button *ngIf="this.banlist.pagination.currentPage > 5" (click)="this.getBanlist(1)" style="margin-right: 5px">1</button>
          <span *ngIf="this.banlist.pagination.currentPage > 6">... </span>
          <button *ngFor="let page of [].constructor(Math.min(this.banlist.pagination.totalPages, 10)) | calculatePageRange:this.banlist.pagination.currentPage:this.banlist.pagination.totalPages; let i = index"
                  (click)="this.getBanlist(page)"
                  [disabled]="page == this.banlist.pagination.currentPage"
                  style="margin-right: 5px">
            {{ page }}
          </button>
          <span *ngIf="this.banlist.pagination.currentPage < this.banlist.pagination.totalPages - 5">... </span>
          <button *ngIf="this.banlist.pagination.currentPage < this.banlist.pagination.totalPages - 4" (click)="this.getBanlist(this.banlist.pagination.totalPages)" style="margin-right: 5px">{{ this.banlist.pagination.totalPages }}</button>
        </div>
        <button (click)="this.getBanlist(this.banlist.pagination.currentPage - 1)" [disabled]="this.banlist.pagination.currentPage == 1">← Previous</button>
        <button (click)="this.getBanlist(this.banlist.pagination.currentPage + 1)" [disabled]="this.banlist.pagination.currentPage == this.banlist.pagination.totalPages" style="margin-left: 5px">Next →</button>
      </div>
    </ng-container>

  </div>
</div>