116 lines
3.7 KiB
JavaScript
116 lines
3.7 KiB
JavaScript
const maxRating = 10;
|
|
|
|
window.addEventListener(
|
|
"load",
|
|
(e) => {
|
|
let config;
|
|
/**
|
|
* @type {HTMLTableElement}
|
|
*/
|
|
let table = document.querySelector("table#output");
|
|
let form = document.getElementById("movieSearch");
|
|
let textInput = form.querySelector("input");
|
|
table.hidden = true;
|
|
|
|
form.addEventListener(
|
|
"submit",
|
|
async (e) => {
|
|
e.preventDefault();
|
|
table.hidden = true;
|
|
config ??= await queryTMDb("configuration");
|
|
|
|
while (table.tBodies.length > 0) {
|
|
table.removeChild(table.tBodies[0]);
|
|
}
|
|
|
|
let result = await queryTMDb(
|
|
"search/movie",
|
|
{
|
|
include_adult: true,
|
|
language: "en-US",
|
|
query: textInput.value
|
|
});
|
|
|
|
let tBody = table.createTBody();
|
|
tBody.classList.add("align-middle");
|
|
|
|
for (let i = 0; i < result.results.length; i++) {
|
|
let movie = result.results[i];
|
|
let row = tBody.insertRow();
|
|
let title = document.createElement("a");
|
|
let poster = document.createElement("img");
|
|
|
|
title.href = `${new URL(`${movie.id}`, "https://themoviedb.org/movie/")}`;
|
|
title.classList.add("link-body-emphasis");
|
|
title.target = "_blank";
|
|
title.innerText = movie.title;
|
|
|
|
poster.src = new URL(
|
|
`./${movie.poster_path}`,
|
|
new URL(
|
|
`${config.images.poster_sizes[0]}/`,
|
|
config.images.secure_base_url).toString()).toString();
|
|
|
|
row.insertCell().innerText = `#${i + 1}`;
|
|
row.insertCell().appendChild(poster);
|
|
row.insertCell().appendChild(title);
|
|
row.insertCell().appendChild(createRating(movie.vote_average));
|
|
row.insertCell().innerText = movie.overview;
|
|
}
|
|
|
|
table.hidden = false;
|
|
console.log(config);
|
|
console.log(result);
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Queries an endpoint of the TMDb API.
|
|
*
|
|
* @param {string} endpoint
|
|
* @param {Record<string, string>} params
|
|
* The parameters to send to the API.
|
|
*/
|
|
async function queryTMDb(endpoint, params) {
|
|
let url = new URL(endpoint, "https://api.themoviedb.org/3/");
|
|
|
|
for (let param in params) {
|
|
url.searchParams.append(param, `${params[param]}`);
|
|
}
|
|
|
|
return (
|
|
await fetch(
|
|
`${url}`,
|
|
{
|
|
headers: {
|
|
Accept: "application/json"
|
|
}
|
|
})).json();
|
|
}
|
|
|
|
function createRating(rating) {
|
|
let progressBar = document.createElement("div");
|
|
let indicator = progressBar.appendChild(document.createElement("div"));
|
|
let rounded = Math.round(rating * 10) / 10;
|
|
|
|
progressBar.style.minWidth = "10rem";
|
|
progressBar.classList.add("progress");
|
|
|
|
for (
|
|
let attribute of
|
|
[
|
|
["role", "progressbar"],
|
|
["aria-label", "Rating"],
|
|
["aria-valuenow", `${rating}`],
|
|
["aria-valuemin", `${0}`],
|
|
["aria-valuemax", `${maxRating}`]
|
|
])
|
|
{
|
|
progressBar.setAttribute(attribute[0], attribute[1]);
|
|
}
|
|
|
|
indicator.classList.add("progress-bar", "text-bg-warning", "overflow-visible");
|
|
indicator.style.width = `${rating * 10}%`;
|
|
indicator.textContent = `${rounded}/${maxRating}`;
|
|
return progressBar;
|
|
} |