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

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

<div class="container">
  <!-- ----------------------------------------------------------------------------------------------------col1 -->
  <div class="margin-column"></div> <!-- First margin column -->
  <!-- ----------------------------------------------------------------------------------------------------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)">
      </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">
  <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>
      <div class="riff-list">
        <mat-list>
          <mat-list-item *ngFor="let riff of selectedSong?.riffs">
            <span mat-line>{{ riff.name }}</span>
            <span mat-line class="riff-details">
              Start: {{ riff.startMs }} ms | End: {{ riff.endMs }} ms
            </span>
          </mat-list-item>
        </mat-list>
      </div>
    </mat-card-content>

  </mat-card>
</div>