RIFFMASTER: FRONTEND: add displaying list of riffs and song info on selecting RiffMaster file

Backend/Spring/.idea/workspace.xml

@@ -10,30 +10,9 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="8315de53-8c15-472c-a710-45938463dc02" name="Changes" comment="RIFFMASTER: add frontend files">
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/0.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/0.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/1.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/1.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/10.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/10.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/11.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/11.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/12.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/12.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/2.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/2.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/3.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/3.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/4.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/4.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/5.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/5.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/6.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/6.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/7.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/7.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/8.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/8.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/9.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/9.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack.old" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack.old" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/node_modules/.package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/node_modules/.package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/song.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/song.service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.module.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/models/song.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/models/song.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -6,9 +6,6 @@
   <component name="ChangeListManager">
     <list default="true" id="d91bc08d-d968-4797-8fb3-ef602a37db2a" name="Changes" comment="RIFFMASTER: add frontend business logic (riff, song)">
       <change beforePath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SongController.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SongController.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/SongController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/SongController.class" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/SongController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/SongController.class" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -100,7 +97,7 @@
       <workItem from="1686820564623" duration="521000" />
       <workItem from="1686836939723" duration="5206000" />
       <workItem from="1686898660229" duration="4682000" />
-      <workItem from="1686909264196" duration="1683000" />
+      <workItem from="1686909264196" duration="2289000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

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

@@ -83,3 +83,26 @@
   <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>

Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts

@@ -66,30 +66,25 @@ export class MainPageComponent implements OnInit {
   onFileSelected(event: any) {
     this.selectedFile = event.target.files[0];
     this.selectedFileName = this.selectedFile.name;
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const xmlContent = reader.result as string;
+      this.songService.parseXmlToSong(xmlContent).subscribe(// Parse the XML content to obtain the song object
+        (song: Song) => {
+          this.selectedSong = song;
+          console.log('Selected song:', this.selectedSong);
+        },
+        (error: any) => {
+          console.log('Error parsing XML:', error);
+        }
+      );
+    };
+    reader.readAsText(this.selectedFile);
   }
 
   upload() {
     if (this.selectedFile) {
-      const fileReader = new FileReader();
-
-      fileReader.onload = (event: any) => {
-        const xmlContent = event.target.result;
-
-        this.songService.parseXmlToSong(xmlContent).subscribe(
-          (song: Song) => {
-            // Handle the parsed song object
-            console.log('Parsed song:', song);
-            // You can assign the parsed song object to the selected song or perform any other action with it
-            this.selectedSong = song;
-          },
-          (error: any) => {
-            // Handle the error if parsing fails
-            console.error('Error parsing XML to song:', error);
-          }
-        );
-      };
-
-      fileReader.readAsText(this.selectedFile);
+
     }
   }