92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
$(document).ready(async function() {
|
|
await loadmovie();
|
|
});
|
|
|
|
async function loadmovie() {
|
|
await $.get("/api/movies", rendermovie);
|
|
}
|
|
|
|
function splitByTitle(movies) {
|
|
result = movies.reduce(function (r, a) {
|
|
var letter = a.title[0].toUpperCase();
|
|
r[letter] = r[letter] || [];
|
|
r[letter].push(a);
|
|
return r;
|
|
}, Object.create(null));
|
|
|
|
return result;
|
|
}
|
|
|
|
function splitByDate(movies) {
|
|
result = movies.reduce(function (r, a) {
|
|
var year = new Date(a.released).getFullYear();
|
|
r[year] = r[year] || [];
|
|
r[year].push(a);
|
|
return r;
|
|
}, Object.create(null));
|
|
|
|
return result;
|
|
}
|
|
|
|
function createMElement(movie) {
|
|
var row = document.createElement("div");
|
|
row.className = "col";
|
|
|
|
row.innerHTML = "<div class='card shadow-sm'>"+
|
|
"<img class='card-img-top' src="+ movie.webImg + " width='100%'>" +
|
|
"<div class='card-body'>" +
|
|
"<h5 class='card-title'>"+ movie.title + "</h5>" +
|
|
"<p class='card-text'>"+ movie.released + "</p>" +
|
|
// "<p class='card-text'>"+ movie.genre + "</p>" +
|
|
"</div>" +
|
|
"</div>";
|
|
|
|
return row;
|
|
}
|
|
|
|
function createHeader(title) {
|
|
var row = document.createElement("div");
|
|
row.className = "row";
|
|
|
|
row.innerHTML = "<div class='col'>" +
|
|
"<h2 class='text-center'>" + title + "</h2>" +
|
|
"</div>";
|
|
|
|
return row;
|
|
}
|
|
|
|
|
|
function sortMoviesAlphabetically(movies) {
|
|
movies.sort(function(a, b) {
|
|
return a.title.localeCompare(b.title);
|
|
});
|
|
}
|
|
|
|
function sortMoviesByDate(movies) {
|
|
movies.sort(function(a, b) {
|
|
aJ = Date.parse(a.released);
|
|
bJ = Date.parse(b.released);
|
|
return bJ - aJ;
|
|
});
|
|
}
|
|
|
|
function rendermovie(movies) {
|
|
split = splitByTitle(movies);
|
|
|
|
for (var key in split) {
|
|
|
|
var header = createHeader(key);
|
|
$("#movie_tbody").append(header);
|
|
|
|
movies = document.createElement("div");
|
|
movies.className = "row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3";
|
|
|
|
split[key].forEach(function(movie) {
|
|
var row = createMElement(movie);
|
|
movies.append(row);
|
|
});
|
|
|
|
$("#movie_tbody").append(movies);
|
|
}
|
|
|
|
} |