library/frontend/files/records/app.js

169 lines
4.2 KiB
JavaScript
Raw Normal View History

var sortState = {
sortBy: "sortArtist",
sortOrder: "asc",
};
function init() {
fetch("/api/records")
.then((response) => response.json())
.then((records) => {
// prepare response
records.forEach(apiResponseParsing);
document.getElementById("search").addEventListener("input", (e) => {
renderTable(search(records, e.target.value));
});
renderTable(records);
});
}
function renderTable(records, sortField) {
if (sortField) {
if (sortState.sortBy === sortField && sortState.sortOrder === "asc") {
sortState.sortOrder = "desc";
} else {
sortState.sortOrder = "asc";
}
sortState.sortBy = sortField;
}
records.sort((one, two) =>
(one[sortState.sortBy] + one["sortName"]).localeCompare(
two[sortState.sortBy] + two["sortName"]
)
);
if (sortState.sortOrder === "desc") {
records.reverse();
}
records.forEach((e, i) => (e.rowNumber = i)); // re-key
// rendering
var recordElement = document.getElementById("records");
recordElement.innerHTML = TableTemplate(records);
2023-02-12 04:00:38 +00:00
var recordCount = document.getElementById("recordCount");
recordCount.innerHTML = `${records.length} records`;
// add listeners for selecting record to view
Array.from(recordElement.querySelectorAll("tbody tr"))
.slice(1) // remove header from Array
.forEach((row) => {
row.addEventListener("click", (e) => {
// add listener to swap current record
document.getElementById("current").innerHTML = RecordTemplate(
records[e.currentTarget.id]
);
});
});
// add sorting callbacks
Array.from(
recordElement.querySelectorAll("tbody tr th[data-sort-by]")
).forEach((row) => {
row.addEventListener("click", function (e) {
renderTable(records, e.target.dataset.sortBy); // only add callback when there's a sortBy attribute
});
});
// mark currently active column
recordElement
.querySelector("tbody tr th[data-sort-by=" + sortState.sortBy + "]")
.classList.add(sortState.sortOrder);
}
function apiResponseParsing(record) {
record.sortName = titleCleaner(record.name);
2022-04-02 21:21:02 +00:00
record.artists = record.artists.map((artist) => {
return artist.replace(/ \([0-9]+\)$/, "");
});
2022-04-03 16:29:24 +00:00
record.label = record.label.replace(/ \([0-9]+\)$/, "");
2022-04-02 21:21:02 +00:00
record.sortArtist = record.artists.reduce((acc, curr) => {
return (
acc +
curr
.replace(/^(An?|The)\s/i, "")
.toLowerCase()
.replaceAll('"', "")
.replaceAll(":", "")
.replaceAll("'", "")
.replaceAll(" ", "")
);
}, "");
return record;
}
function search(records, searchBy) {
searchBy = searchCleaner(searchBy);
if (searchBy !== "") {
records = records.filter(({ name, artists, genre, label, year }) => {
return Object.values({
name,
artists: artists.join(" "),
genre,
label,
year,
}).find((field) => searchCleaner(field).indexOf(searchBy) !== -1);
});
}
return records;
}
function titleCleaner(title) {
return title
.replace('"', "")
.replace(":", "")
.replace(/^(An?|The)\s/i, "");
}
function searchCleaner(str) {
return str
.toLowerCase()
.replaceAll('"', "")
.replaceAll(":", "")
.replaceAll("'", "")
.replaceAll(" ", "");
}
function RecordTemplate({
name,
artists,
coverURL,
format,
genre,
identifier,
label,
year,
2022-04-02 21:21:02 +00:00
discogsURL,
}) {
return `${coverURL ? `<img src="${coverURL}" loading="lazy"/>` : ""}
<h1>${name}</h1>
<h2>${artists.join(", ")}</h2>
<span>${identifier}</span><br/>
<span>${genre}, ${label}, ${year}</span><br/>
2022-04-03 16:33:15 +00:00
<span>${format}</span><br/>
2022-04-03 16:29:24 +00:00
<span>
2022-04-02 21:21:02 +00:00
<a
target="_blank"
href="${discogsURL}"
>
Data provided by Discogs.
</a>
2022-04-03 16:29:24 +00:00
</span>`;
}
2023-02-12 04:00:38 +00:00
function TableRowTemplate({ name, coverURL, discogsURL }) {
2022-04-04 00:26:16 +00:00
return `<div class="record">
<img class="cover" src="${coverURL}" loading="lazy"/>
2022-04-04 00:26:16 +00:00
<span class="name">${name}</span>
2023-02-12 04:00:38 +00:00
<a
target="_blank"
href="${discogsURL}"
class="discogsLink"
>
Data provided by Discogs.
</a>
2022-04-04 00:26:16 +00:00
</div>`;
}
function TableTemplate(records) {
2022-04-04 00:26:16 +00:00
return `<div class="flow">${records.reduce((acc, record) => {
return acc.concat(TableRowTemplate(record));
}, "")} </div>`;
}