Untitled

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="~{fragments/head}"></th:block>
    <meta charset="UTF-8">
</head>
<body>
<div class="container-fluid">
    <header>
        <th:block th:include="~{fragments/navbar}"></th:block>
    </header>
    <div class="container-fluid">
        <form class="form-inline">
            <div class="mr-5">
                <h1 id="selector">Your choice</h1>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio"
                       name="virusesFetchRadio" id="virusesFetchRadio" value="option1">
                <label class="form-check-label" for="virusesFetchRadio">Viruses</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio"
                       name="capitalsFetchRadio" id="capitalsFetchRadio" value="option2">
                <label class="form-check-label" for="capitalsFetchRadio">Capitals</label>
            </div>
        </form>
        <div id="selectMessage" style="text-align: center;">
            <h1>Select what data you want to visualize!</h1>
        </div>
    </div>

    <script>

        $("#capitalsFetchRadio").click(() => {
            if ($("#virusesFetchRadio").prop("checked") || !($("#capitalsFetchRadio").prop("checked") && $("#virusesFetchRadio").prop("checked"))) {

                $("#tableBody").empty();
                $("#tableHead").empty();
                $("#headerText").empty();

                $("#virusesFetchRadio").prop("checked", false);
                $("#selectMessage").remove();
                $("#headerText").append("All Capitals");

                const tableHeaders =
                    "<tr> <th scope=\"col\">#</th>" +
                    "<th scope=\"col\">Name</th>" +
                    "<th scope=\"col\">Latitude</th>" +
                    "<th scope=\"col\">Longitude</th>" + "</tr>";

                $("#tableHead").append(tableHeaders);
                fetch("http://localhost:8000/capitals/fetch")
                    .then((response) => response.json())
                    .then((json) => json.forEach((capital) => {

                        const capitalDetails =
                            "<tr>" +
                            "<td>" + capital.id + "</td>" +
                            "<td>" + capital.name + "</td>" +
                            "<td>" + capital.latitude + "</td>" +
                            "<td>" + capital.longitude + "</td>" +
                            "</tr>";

                        $("#tableBody").append(capitalDetails);
                    }));
            }
        });
    </script>

    <script>
        $("#virusesFetchRadio").click(() => {
            if ($("#capitalsFetchRadio").prop("checked") || !($("#capitalsFetchRadio").prop("checked") && $("#virusesFetchRadio").prop("checked"))) {

                $("#tableBody").empty();
                $("#tableHead").empty();
                $("#headerText").empty();

                $("#capitalsFetchRadio").prop("checked", false);
                $("#selectMessage").remove();
                $("#headerText").append("All Viruses");

                const tableHeaders =
                    "<tr> <th scope=\"col\">#</th>" +
                    "<th scope=\"col\">Name</th>" +
                    " <th scope=\"col\">Magnitude</th>" +
                    " <th scope=\"col\">Released On</th>" +
                    " <th scope=\"col\"></th>" +
                    " <th scope=\"col\"></th>" +
                    +"</tr>";

                $("#tableHead").append(tableHeaders);
                fetch("http://localhost:8000/viruses/fetch")
                    .then((response) => response.json())
                    .then((json) => json.forEach((capital) => {

                        const capitalDetails =
                            "<tr>" +
                            "<td>" + capital.id + "</td>" +
                            "<td>" + capital.name + "</td>" +
                            "<td>" + capital.latitude + "</td>" +
                            "<td>" + capital.longitude + "</td>"
                            + "</tr>";

                        $("#tableBody").append(capitalDetails);
                    }));
            }
        });
    </script>


    <div class="container mt-4">
        <h1 id="headerText"></h1>
        <table id="showTable" class="table">
            <thead id="tableHead">
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
    </div>
</div>
</body>
</html>