52 lines
1.7 KiB
HTML
52 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Movies App</title>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
const MOVIES_RESOURCE_URL = "http://localhost:8080/movieservice/resources/movie";
|
|
|
|
const options = {
|
|
mode: "cors",
|
|
headers: {
|
|
"Accept": "application/json",
|
|
"Authorization": "Basic " + btoa("moviesuser:topsecret")
|
|
}
|
|
};
|
|
|
|
let loadNews = function () {
|
|
// Studios: ID dranhängen -> 2. Aufruf -> Alert dranhängen
|
|
fetch(MOVIES_RESOURCE_URL, options)
|
|
.then(response => response.json())
|
|
.then(function (moviesList) {
|
|
let html = moviesList.map(movie =>
|
|
`<h2>${movie.title}</h2>
|
|
<p>${movie.description}</p>
|
|
<button onclick="displayDetails(${movie.id})">Get more info</button>`)
|
|
.join("");
|
|
|
|
document.getElementById("content").innerHTML = html;
|
|
})
|
|
.catch(error => document.getElementById("content").innerHTML = `Error: ${error}`);
|
|
};
|
|
|
|
let displayDetails = function (id) {
|
|
fetch(MOVIES_RESOURCE_URL + "/" + id, options) // TODO: Ugly URL building
|
|
.then(response => response.json())
|
|
.then(function (movie) {
|
|
alert(movie.length)
|
|
})
|
|
.catch(error => document.getElementById("content").innerHTML = `Error: ${error}`);
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", loadNews);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Movies in JavaScript</h1>
|
|
<div id="content"></div>
|
|
</body>
|
|
</html> |