Start styling the track card

This commit is contained in:
Savanni D'Gerinel 2023-02-28 00:42:25 -05:00
parent 9ea761cc7c
commit db43e125b7
6 changed files with 38 additions and 20 deletions

View File

@ -11,6 +11,7 @@
<div class="controls"><button class="play-pause">Pause</button></div> <div class="controls"><button class="play-pause">Pause</button></div>
<div class="track-list"> <div class="track-list">
<!--
<div class="track-list__grouping"> <div class="track-list__grouping">
<ul class="bulletless-list"> <ul class="bulletless-list">
<li> By Artist </li> <li> By Artist </li>
@ -19,9 +20,10 @@
<li> Dance Music </li> <li> Dance Music </li>
</ul> </ul>
</div> </div>
-->
<div class="track-list__tracks"> <div>
<ul> <ul class="track-list__tracks bulletless-list">
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -1,16 +1,23 @@
import { TrackInfo } from "../client"; import { TrackInfo } from "../client";
export class TrackCard extends HTMLElement { export class TrackCard extends HTMLElement {
track_info: TrackInfo | null; track_info: TrackInfo;
constructor() { constructor(info: TrackInfo) {
super(); super();
this.track_info = null; this.track_info = info;
} }
connectedCallback() { connectedCallback() {
if (this.track_info) { const container = document.createElement("div");
this.innerHTML = this.track_info.id; container.classList.add("track-card");
} this.appendChild(container);
this.track_info.name &&
container.appendChild(document.createTextNode(this.track_info.name));
}
updateContent() {
console.log("updateContent");
} }
} }

View File

@ -53,14 +53,17 @@ const formatTrack = (track: TrackInfo) => {
*/ */
const updateTrackList = (tracks: 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) { if (track_list) {
let track_formats = _.map(tracks, (info) => { let track_formats = _.map(tracks, (info) => {
const card = new TrackCard(); return new TrackCard(info);
card.track_info = info; });
return card; _.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 { } else {
console.log("track_list does not exist"); console.log("track_list does not exist");
} }

View File

@ -26,9 +26,10 @@ body {
} }
.track-list__row { .track-list__row {
background-color: rgb(10, 10, 10); margin-top: 32px;
} }
/*
.track-list__row:nth-child(even) { .track-list__row:nth-child(even) {
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }
@ -36,7 +37,12 @@ body {
.track-list__row:nth-child(odd) { .track-list__row:nth-child(odd) {
background-color: rgb(200, 200, 200); background-color: rgb(200, 200, 200);
} }
*/
.track-list__cell { .track-card {
border: 1px solid black;
border-radius: 5px;
padding: 8px; padding: 8px;
width: 300px;
height: 100px;
} }

View File

@ -131,9 +131,6 @@ pub async fn main() {
let routes = root.or(assets).or(track_list); let routes = root.or(assets).or(track_list);
let server = warp::serve(routes); let server = warp::serve(routes);
server server
.run(SocketAddr::new( .run(SocketAddr::new(IpAddr::V4(Ipv4Addr::new(0, 0, 0, 0)), 8002))
IpAddr::V4(Ipv4Addr::new(127, 0, 0, 1)),
8002,
))
.await; .await;
} }

View File

@ -46,7 +46,10 @@ impl FileIterator {
id: TrackId::from(path.to_str().unwrap().to_owned()), id: TrackId::from(path.to_str().unwrap().to_owned()),
album: None, album: None,
artist: None, artist: None,
name: None, name: path
.file_stem()
.and_then(|s| s.to_str())
.map(|s| s.to_owned()),
track_number: None, track_number: None,
}) })
} }