oslo_boating_project/boat-reservation-view/src/app/profile-page/profile-page.component.html

<div>
  <br>
  <table>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
      <th>Roles</th>
      <th>Actions</th>
    </tr>
    <tr>
      <td>{{user_info.id}}</td>
      <td>{{user_info.username}}</td>
      <td>{{user_info.email}}</td>
      <td>{{user_info.roles}}</td>
      <td>
        <button class="button change-role"
                (click)="sendEmail()"
                style="margin-left:2px; margin-right: 2px">Send Billing on Email
        </button>
        <button class="button change-role"
                (click)="deleteAccount()"
                style="margin-left:2px; margin-right: 2px">Delete User
        </button>
      </td>
    </tr>
  </table>

  <br>
  <div><b>Reservations</b></div>
  <br>

  <table>
    <tr>
      <th>ID</th>
      <th>Boat</th>
      <th>Date</th>
      <th>From</th>
      <th>To</th>
      <th>Cost</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>

    <tr *ngFor="let res of reservations_info">
      <td>{{res.id}}</td>
      <td *ngIf="isANumber(res.boatId)">⏳⌛</td>
      <td *ngIf="!isANumber(res.boatId)">{{res.boatId}}</td>
      <td>{{res.date}}</td>
      <td>{{res.startHour}}:00</td>
      <td>{{res.endHour}}:00</td>
      <td>{{res.bill.totalCost}}</td>
      <td>{{res.bill.status}}</td>
      <td>
        <button
          *ngIf="res.bill.status === 'Pending'"
          class="button change-role"
          (click)="confirmReservation(res.bill.id)"
          style="margin-left:2px; margin-right: 2px">
          Confirm
        </button>
        <button
          *ngIf="res.bill.status !== 'Cancelled' && res.bill.status !== 'Completed' && res.bill.status !== 'Active'"
          class="button change-role"
          (click)="cancelReservation(res.bill.id)"
          style="margin-left:2px; margin-right: 2px">
          Cancel
        </button>
      </td>
    </tr>
  </table>
  <br>

</div>