146 lines
4.2 KiB
JavaScript
146 lines
4.2 KiB
JavaScript
import {
|
|
getMovies, createMovie, updateMovie, deleteMovie,
|
|
} from './rest_api';
|
|
|
|
import { hideUpdateModal, showUpdateModal } from './table_modal';
|
|
|
|
import {
|
|
controls, imagePlaceholder, addTableRow,
|
|
} from './admin_panel_ui';
|
|
|
|
export async function showAllMovieEntries() {
|
|
const tableBody = document.querySelector('tbody');
|
|
console.log(tableBody);
|
|
tableBody.innerHTML = '';
|
|
|
|
const movies = await getMovies();
|
|
movies.forEach((movie, index) => {
|
|
tableBody.appendChild(
|
|
addTableRow(
|
|
movie,
|
|
index,
|
|
() => showUpdateModal(movie),
|
|
() => removeMovieObject(movie.id),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
async function addMovieObject(serializedMovieObject) {
|
|
const data = await createMovie(serializedMovieObject);
|
|
console.info("Added");
|
|
console.info(data);
|
|
|
|
showAllMovieEntries();
|
|
}
|
|
|
|
async function editMovieObject(id, serializedMovieObject) {
|
|
const data = await updateMovie(id, serializedMovieObject);
|
|
console.info("Updated");
|
|
console.info(data);
|
|
|
|
showAllMovieEntries();
|
|
}
|
|
|
|
async function removeMovieObject(id) {
|
|
if (!confirm("Do you really want to remove this item?")) {
|
|
console.info("Canceled");
|
|
return;
|
|
}
|
|
|
|
const data = await deleteMovie(id);
|
|
console.info("Removed");
|
|
console.info(data);
|
|
|
|
showAllMovieEntries();
|
|
}
|
|
|
|
async function readFile(file) {
|
|
const reader = new FileReader();
|
|
|
|
return new Promise((resolve, reject) => {
|
|
reader.onloadend = () => {
|
|
const fileContent = reader.result;
|
|
resolve(fileContent);
|
|
};
|
|
|
|
reader.onerror = () => {
|
|
reject(new Error("oops, something went wrong with the file reader."));
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
async function updateImagePreview() {
|
|
const file = controls.image.files[0];
|
|
const fileContent = await readFile(file);
|
|
|
|
controls.imagePreview.src = fileContent;
|
|
}
|
|
|
|
export function tableModal() {
|
|
showAllMovieEntries();
|
|
|
|
controls.image.addEventListener("change", () => updateImagePreview());
|
|
controls.button.addEventListener("click", () => showUpdateModal(null));
|
|
|
|
controls.form.addEventListener("submit", async (event) => {
|
|
console.info("Form onSubmit");
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
if (!controls.form.checkValidity()) {
|
|
return;
|
|
}
|
|
|
|
let imageBase64 = "";
|
|
|
|
if (controls.imagePreview.src !== imagePlaceholder) {
|
|
const result = await fetch(controls.imagePreview.src);
|
|
const blob = await result.blob();
|
|
|
|
imageBase64 = await readFile(blob);
|
|
}
|
|
|
|
const currentId = controls.lineId.value;
|
|
if (!currentId) {
|
|
await addMovieObject(
|
|
{
|
|
title: controls.title.value,
|
|
type: controls.type.value,
|
|
requiresSubscription: controls.requiresSubscription.checked,
|
|
poster: imageBase64,
|
|
description: controls.description.value,
|
|
releaseDate: controls.releaseDate.value,
|
|
country: controls.country.value,
|
|
tagline: controls.tagline.value,
|
|
director: controls.director.value,
|
|
ageRating: controls.ageRating.value,
|
|
video: controls.video.value,
|
|
},
|
|
);
|
|
} else {
|
|
await editMovieObject(
|
|
currentId,
|
|
{
|
|
title: controls.title.value,
|
|
type: controls.type.value,
|
|
requiresSubscription: controls.requiresSubscription.checked,
|
|
poster: imageBase64,
|
|
description: controls.description.value,
|
|
releaseDate: controls.releaseDate.value,
|
|
country: controls.country.value,
|
|
tagline: controls.tagline.value,
|
|
director: controls.director.value,
|
|
ageRating: controls.ageRating.value,
|
|
video: controls.video.value,
|
|
},
|
|
);
|
|
}
|
|
|
|
hideUpdateModal();
|
|
});
|
|
}
|