Add alert box which does another request to HTML

MoviesClient/web/index.html

@@ -9,28 +9,39 @@
 
         const MOVIES_RESOURCE_URL = "http://localhost:8080/movieservice/resources/movie";
 
-        let loadNews = function () {
-            let options = {
-                mode: "cors",
-                headers: {
-                    "Accept": "application/json",
-                    "Authorization": "Basic " + btoa("moviesuser:topsecret")
-                }
-            };
+        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>`)
+                         <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>