From db43e125b7e502c0468ee076f48c88ac9790c015 Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Tue, 28 Feb 2023 00:42:25 -0500
Subject: [PATCH] Start styling the track card

---
 music-player/client/index.html           |  6 ++++--
 music-player/client/src/blocks/track.ts  | 19 +++++++++++++------
 music-player/client/src/main.ts          | 13 ++++++++-----
 music-player/client/styles.css           | 10 ++++++++--
 music-player/server/src/bin/server.rs    |  5 +----
 music-player/server/src/music_scanner.rs |  5 ++++-
 6 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/music-player/client/index.html b/music-player/client/index.html
index dec9b55..c9c6439 100644
--- a/music-player/client/index.html
+++ b/music-player/client/index.html
@@ -11,6 +11,7 @@
     <div class="controls"><button class="play-pause">Pause</button></div>
 
     <div class="track-list">
+        <!--
         <div class="track-list__grouping">
             <ul class="bulletless-list">
                 <li> By Artist </li>
@@ -19,9 +20,10 @@
                 <li> Dance Music </li>
             </ul>
         </div>
+        -->
 
-        <div class="track-list__tracks">
-            <ul>
+        <div>
+            <ul class="track-list__tracks bulletless-list">
             </ul>
         </div>
     </div>
diff --git a/music-player/client/src/blocks/track.ts b/music-player/client/src/blocks/track.ts
index 43e61c5..0f65d15 100644
--- a/music-player/client/src/blocks/track.ts
+++ b/music-player/client/src/blocks/track.ts
@@ -1,16 +1,23 @@
 import { TrackInfo } from "../client";
 
 export class TrackCard extends HTMLElement {
-  track_info: TrackInfo | null;
+  track_info: TrackInfo;
 
-  constructor() {
+  constructor(info: TrackInfo) {
     super();
-    this.track_info = null;
+    this.track_info = info;
   }
 
   connectedCallback() {
-    if (this.track_info) {
-      this.innerHTML = this.track_info.id;
-    }
+    const container = document.createElement("div");
+    container.classList.add("track-card");
+    this.appendChild(container);
+
+    this.track_info.name &&
+      container.appendChild(document.createTextNode(this.track_info.name));
+  }
+
+  updateContent() {
+    console.log("updateContent");
   }
 }
diff --git a/music-player/client/src/main.ts b/music-player/client/src/main.ts
index 5674cbe..a118ba7 100644
--- a/music-player/client/src/main.ts
+++ b/music-player/client/src/main.ts
@@ -53,14 +53,17 @@ const formatTrack = (track: TrackInfo) => {
 */
 
 const updateTrackList = (tracks: TrackInfo[]) => {
-  const track_list = document.querySelector(".track-list__tracks ul");
+  const track_list = document.querySelector(".track-list__tracks");
   if (track_list) {
     let track_formats = _.map(tracks, (info) => {
-      const card = new TrackCard();
-      card.track_info = info;
-      return card;
+      return new TrackCard(info);
+    });
+    _.map(track_formats, (trackCard) => {
+      let listItem = document.createElement("li");
+      listItem.classList.add("track-list__row");
+      listItem.appendChild(trackCard);
+      track_list.appendChild(listItem);
     });
-    _.map(track_formats, (trackinfo) => track_list.appendChild(trackinfo));
   } else {
     console.log("track_list does not exist");
   }
diff --git a/music-player/client/styles.css b/music-player/client/styles.css
index 420ac1d..0837335 100644
--- a/music-player/client/styles.css
+++ b/music-player/client/styles.css
@@ -26,9 +26,10 @@ body {
 }
 
 .track-list__row {
-    background-color: rgb(10, 10, 10);
+    margin-top: 32px;
 }
 
+/*
 .track-list__row:nth-child(even) {
     background-color: rgb(255, 255, 255);
 }
@@ -36,7 +37,12 @@ body {
 .track-list__row:nth-child(odd) {
     background-color: rgb(200, 200, 200);
 }
+*/
 
-.track-list__cell {
+.track-card {
+    border: 1px solid black;
+    border-radius: 5px;
     padding: 8px;
+    width: 300px;
+    height: 100px;
 }
diff --git a/music-player/server/src/bin/server.rs b/music-player/server/src/bin/server.rs
index 005a31d..2532edb 100644
--- a/music-player/server/src/bin/server.rs
+++ b/music-player/server/src/bin/server.rs
@@ -131,9 +131,6 @@ pub async fn main() {
     let routes = root.or(assets).or(track_list);
     let server = warp::serve(routes);
     server
-        .run(SocketAddr::new(
-            IpAddr::V4(Ipv4Addr::new(127, 0, 0, 1)),
-            8002,
-        ))
+        .run(SocketAddr::new(IpAddr::V4(Ipv4Addr::new(0, 0, 0, 0)), 8002))
         .await;
 }
diff --git a/music-player/server/src/music_scanner.rs b/music-player/server/src/music_scanner.rs
index 8db6338..dddcc63 100644
--- a/music-player/server/src/music_scanner.rs
+++ b/music-player/server/src/music_scanner.rs
@@ -46,7 +46,10 @@ impl FileIterator {
             id: TrackId::from(path.to_str().unwrap().to_owned()),
             album: None,
             artist: None,
-            name: None,
+            name: path
+                .file_stem()
+                .and_then(|s| s.to_str())
+                .map(|s| s.to_owned()),
             track_number: None,
         })
     }