Set up some basic web components and basically format a track card #25
|
@ -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>
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue