RiffMaster_WPFaT2023_Project/Frontend/RiffMasterFront/src/app/main-page/main-page.component.html

<!-- app.component.html -->

<div class="container">
  <!-- ----------------------------------------------------------------------------------------------------col1 -->
  <div class="margin-column">
    <!-- Add the remove button here -->
    <button mat-raised-button color="warn" *ngIf="canRemoveSongs()" (click)="removeSelectedSong()" [disabled]="!selectedSong">
      <mat-icon>delete</mat-icon>
      Remove Song
    </button>
  </div>
  <!-- ----------------------------------------------------------------------------------------------------col2 -->
  <div class="col-left">

    <mat-card class="song-list-card">

      <mat-card-header>
        <mat-card-title class="card-title">Song List</mat-card-title>
      </mat-card-header>

      <mat-card-content>

        <mat-form-field appearance="fill">
          <mat-label>Search songs</mat-label>
          <input matInput type="text" placeholder="Search songs" [(ngModel)]="searchQuery">
        </mat-form-field>

        <div class="song-list">
          <mat-radio-group class="vertical-radio-group" [(ngModel)]="selectedSong" (change)="displaySongInformation(selectedSong)">
            <mat-radio-button *ngFor="let song of filteredSongs" [value]="song">
              {{ song.name }}
            </mat-radio-button>
          </mat-radio-group>
        </div>

      </mat-card-content>

    </mat-card>

  </div>

  <!-- ----------------------------------------------------------------------------------------------------col3 -->

  <div class="col-right">
    <div class="buttons-container">
      <!--      ##################################################################_ROW 1-->
      <div class="button-row">

        <button mat-raised-button  (click)="download()">
          <mat-icon>cloud_download</mat-icon>
          Download
        </button>

        <button mat-raised-button color="accent" (click)="upload()" [disabled]="!selectedFileName">
          <mat-icon>cloud_upload</mat-icon>
          Upload
        </button>
      </div>

      <!--      ##################################################################_ROW 2-->
      <div class="button-row">
        <button mat-raised-button color="primary" (click)="generatePdf()">
          <mat-icon>picture_as_pdf</mat-icon>
          Generate PDF summary
        </button>
      </div>


      <!--      ##################################################################_ROW 3-->

      <div class="button-row">
        <input type="file" (change)="onFileSelected($event)" class="file-input">
      </div>
      <!--      ##################################################################_ROW 4-->

      <div class="text-block-row">
        <div class="text-block">
          <p>uploaded: {{ selectedSong?.uploadDate | date:'short'}} ({{ selectedSong?.userId }})</p>
          <p>last update: {{ selectedSong?.updateDate | date:'short' }} ({{ selectedSong?.lastUpdateUserId }})</p>
          <p>Selected Song: {{ selectedSong?.name }}</p> <!-- Display selected song name -->
          <!-- You can display other song information as needed -->
        </div>
      </div>

    </div>
  </div>

  <!-- ----------------------------------------------------------------------------------------------------col4 -->
  <div class="margin-column"></div> <!-- Second margin column -->

</div>

<div class="riff-list-container" *ngIf="selectedSong?.riffs && selectedSong.riffs.length > 0; else noRiffsMessage">
  <mat-card class="riff-list-card">

    <mat-card-header>
      <mat-card-title class="card-title">Riff List</mat-card-title>
    </mat-card-header>

    <mat-card-content>
      <table mat-table [dataSource]="selectedSong?.riffs || []">

        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>Riff Name</th>
          <td mat-cell *matCellDef="let riff">{{ riff.name }}</td>
        </ng-container>

        <ng-container matColumnDef="startMs">
          <th mat-header-cell *matHeaderCellDef>Start (ms)</th>
          <td mat-cell *matCellDef="let riff">{{ riff.startMs }}</td>
        </ng-container>

        <ng-container matColumnDef="endMs">
          <th mat-header-cell *matHeaderCellDef>End (ms)</th>
          <td mat-cell *matCellDef="let riff">{{ riff.endMs }}</td>
        </ng-container>

        <ng-container matColumnDef="groupColor">
          <th mat-header-cell *matHeaderCellDef>GroupColor</th>
          <td mat-cell *matCellDef="let riff">
            <div class="color-container">
              <span [ngClass]="{'color-box': riff.groupColor !== 'Transparent', 'empty-color-box': riff.groupColor === 'Transparent'}" [style.backgroundColor]="riff.groupColor"></span>
              <span>{{ riff.groupColor }}</span>
            </div>
          </td>
        </ng-container>


        <tr mat-header-row *matHeaderRowDef="['name', 'startMs', 'endMs', 'groupColor']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['name', 'startMs', 'endMs', 'groupColor']"></tr>
      </table>
    </mat-card-content>

  </mat-card>
</div>
<ng-template #noRiffsMessage>
  <p>No riffs found for this song.</p>
</ng-template>