testfelix.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meal Planner</title>
    <link rel="stylesheet" href="./style.css" />
    <script>
        var baseUrl = "http://localhost:8082";
        function toonAlleMealPlans(){
            getRequest(printAllMealPlans, "allmealplans");
        }
        function getRequest(callback, url){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
//                console.log(this.responseText);
                if(this.readyState == 4){
                    var result = JSON.parse(this.responseText);
                    printAllMealPlans(result);
                }
            }
            xhr.open("get", baseUrl+"/"+url, true);
            xhr.send();
        }
        function printAllMealPlans(mealPlans){
            gebi("toonMealplans").innerHTML ="";
            console.log(mealPlans);
            mealPlans.forEach(element => gebi("toonMealplans").innerHTML += "<br>"+element.start);
        }
        function maakMealPlanAan(){
            var mealPlan = {};
            mealPlan.start = gebi("startdate").value;
            mealPlan.end = gebi("enddate").value;
            mealPlanJSON = JSON.stringify(mealPlan);
            postObject(mealPlanJSON, "addmealplan");
        }
        function postObject(objJSON, url){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                console.log(this.responseText);
            }
            xhr.open("post", baseUrl+"/"+url, true);
            xhr.setRequestHeader("Content-Type","application/json");
            xhr.send(objJSON);            
        }
        function gebi(id){
            return document.getElementById(id);
        }

    </script>
</head>

<body>


    <button onclick=toonAlleMealPlans()>toonAlleMealPlans</button>

    <div id="recipe-name"></div>
    <hr>
    startdate<input type="date" id="startdate" type=text><br>
    enddate<input type="date" id="enddate" type=text><br>
    <button onclick=maakMealPlanAan()>Maak MealPlan</button>
    <hr>
    <button onclick=toonAlleMealPlans()>Toon Alle Mealplans</button>
    <div id=toonMealplans>
        De mealplans
    </div>
</body>

</html>