RIFFMASTER: FRONTEND: add color preview for groupColor in list of riffs

Backend/Spring/.idea/workspace.xml

@@ -11,8 +11,9 @@
   <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/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" 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/models/riff.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/models/riff.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.css" 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" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -215,7 +216,8 @@
       <workItem from="1686820558130" duration="622000" />
       <workItem from="1686836941887" duration="14004000" />
       <workItem from="1686898654444" duration="1889000" />
-      <workItem from="1686909268841" duration="15333000" />
+      <workItem from="1686909268841" duration="15817000" />
+      <workItem from="1686937489475" duration="603000" />
     </task>
     <task id="LOCAL-00001" summary="add basic hello world and transfering data to server">
       <created>1679575346987</created>

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -6,7 +6,8 @@
   <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/domain/Riff.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/domain/Riff.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/domain/Riff.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/domain/Riff.class" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/domain/Riff.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/domain/Riff.class" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -98,7 +99,8 @@
       <workItem from="1686820564623" duration="521000" />
       <workItem from="1686836939723" duration="5206000" />
       <workItem from="1686898660229" duration="4682000" />
-      <workItem from="1686909264196" duration="8088000" />
+      <workItem from="1686909264196" duration="8471000" />
+      <workItem from="1686937499471" duration="774000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

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

@@ -87,3 +87,15 @@ body {
   margin-left: 10px; /* Adjust the margin as needed */
 }
 
+.color-container {
+  display: flex;
+  align-items: center;
+}
+
+.color-box {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+

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

@@ -111,9 +111,15 @@
 
         <ng-container matColumnDef="groupColor">
           <th mat-header-cell *matHeaderCellDef>GroupColor</th>
-          <td mat-cell *matCellDef="let riff">{{ riff.groupColor }}</td>
+          <td mat-cell *matCellDef="let riff">
+            <div class="color-container">
+              <span class="color-box" [style.backgroundColor]="getValidColor(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>

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

@@ -114,6 +114,11 @@ export class MainPageComponent implements OnInit {
     }
   }
 
+  getValidColor(color: string): string {
+    const validColor = color.startsWith("#") ? color.slice(0, 7) : "";
+    return validColor;
+  }
+
 
   generatePdf() {
     // Implement your PDF generation logic here