index

<%--
  Created by IntelliJ IDEA.
  User: jsardoy
  Date: 2019-04-24
  Time: 11:24
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta name="layout" content="main"/>
    <title></title>

    <script type="text/javascript">
        function getCategories(site){
            var URL = "${createLink(controller: 'Client', action: 'showCategories', params: ['site': ""])}"+site
            $.ajax({
                url: URL,
                success: function(resp){
                    var cat_head = document.getElementById("category_head");
                    console.log(site)
                    cat_head.innerText = resp.name
                    var subcats_element = document.getElementById("subcategories");
                    while(subcats_element.firstChild){
                        subcats_element.removeChild(subcats_element.firstChild);
                    }
                    var col_div = document.createElement("div");
                    col_div.setAttribute("class", "col-md-2");
                    resp.forEach(function(category){
                        var button_element = document.createElement("button");
                        button_element.innerText = category.name;
                        button_element.style = "display: block; width:100%; font-size: 10px";
                        console.log(category.id);
                        var function_call = "getSubCategories(this, '"+category.id+ "')";
                        button_element.setAttribute("onclick", function_call);
                        col_div.appendChild(button_element)
                    })
                    subcats_element.appendChild(col_div)
                }
            })
        };
        function getSubCategories(element, category_id){

            var URL = "${createLink(controller: 'Client', action: 'showSubCategories', params: ['category_id': ""])}"+category_id;
            $.ajax({
                url: URL,
                success: function(resp){
                    if (resp.children_categories.length > 0){
                        var current_section = element.parentElement;
                        var subcats_element = document.getElementById("subcategories");
                        while(subcats_element.lastChild !== current_section){
                            subcats_element.removeChild(subcats_element.lastChild);
                        }
                        var col_div = document.createElement("div");
                        col_div.setAttribute("class", "col-md-2");
                        resp.children_categories.forEach(function(category){
                            var button_element = document.createElement("button");
                            button_element.innerText = category.name;
                            button_element.style = "display: block; width:100%; font-size: 10px";
                            console.log(category.id);
                            var function_call = "getSubCategories(this, '"+category.id+ "')";
                            button_element.setAttribute("onclick", function_call);
                            col_div.appendChild(button_element)
                        })
                        subcats_element.appendChild(col_div)

                    }
                    else{
                        console.log("CAVIPOOOOOO")
                        alert(resp.id)

                    }
                }
            })

        };
    </script>
</head>

<body>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Sites
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <g:each var="site" in="${result}">
            <button class="dropdown-item" onclick="getCategories('${site.id}')">${site.name}</button>
        </g:each>
    </div>
</div>

<div class="container-fluid">
    <h2 id="category_head"></h2>
    <div class="row" id="subcategories">
    </div>
</div>


</body>
</html>