Set up some basic web components and basically format a track card #25

Merged
savanni merged 4 commits from track-formatting into main 2023-03-01 14:20:59 +00:00
6 changed files with 38 additions and 20 deletions
Showing only changes of commit db43e125b7 - Show all commits

View File

@ -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>

View File

@ -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");
}
}

View File

@ -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");
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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,
})
}