47 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movies App</title>
<script>
"use strict";
const STUDIOS_RESOURCE_URL = "http://localhost:8080/movieservice/resources/studio";
const options = {
mode: "cors",
headers: {
"Accept": "application/json",
"Authorization": "Basic " + btoa("moviesuser:topsecret")
}
};
let loadStudioList = function () {
fetch(STUDIOS_RESOURCE_URL, options)
.then(response => response.json())
.then(function (studioList) {
document.getElementById("content").innerHTML = studioList.map(studio =>
`<h2>${studio.name} <button onclick="alertStudioDetails(${studio.id})">Get more info</button></h2>`)
.join("");
})
.catch(error => document.getElementById("content").innerHTML = `Error: ${error}`);
};
let alertStudioDetails = function (id) {
fetch(STUDIOS_RESOURCE_URL + `/${id}`, options) // TODO: Ugly URL building
.then(response => response.json())
.then(function (studio) {
alert("Country code: " + studio.countrycode + "\n" + "Post code: " + studio.postcode)
})
.catch(error => document.getElementById("content").innerHTML = `Error: ${error}`);
};
document.addEventListener("DOMContentLoaded", loadStudioList);
</script>
</head>
<body>
<h1>Studios</h1>
<div id="content"></div>
</body>
</html>