puzzle/views/admin/objects/object_groups.ejs

<style>
    #obj_group button,#obj_group select{
        /* height: 5vh; */
        margin: auto 0px;
    }
    #obj_group {
        margin-bottom: 20px;
    }
    .obj_group{
        display: flex;
    }
</style>
<div id="obj_group">
    <div style="display: flex;justify-content: space-between;">
        <div style="display: block;">
            <h1>группы товаров</h1>
            <button onclick="create_new_part()">доб. раздел</button>
        </div>
        <style>
            .group_drop{
                width: 15vw;
                padding: 2px;
                min-width: 15vw;
            }
            .group_drop *{
                pointer-events: none;
                overflow: auto;
            }
            .group_drop img{
                width: 1vw;
                height: 0.5vw;
            }
        </style>

        <div id="obj_parts" style="display: flex;justify-content: space-between; overflow: scroll;min-width: 50vw;">
        </div>
        <style>
            .group_inp{
                height: 1vw;
                width: 1vw;
                border: 0px;
                border-radius: 0.4vw;
                overflow: auto;
            }
        </style>
        <ul id="group" class="cmenu"></ul>
        <!-- <select name="" id="group_select" onchange="edit_get_objs();"></select>
        <select name="" id="part_select"></select> -->
    </div>
</div>

<script>
    // load_groups();
    function delete_group(gid,pid) {
        let name = document.getElementById("obj_group_"+gid).getAttribute("group_name");
        if(confirm(`вы уверены вы хотите удалить группу ${name}`) == true){
            $.post( "/admin/groups/delete", { gid:gid,pid:pid})
            .done(function( res ) {
                if(res["out"] == "good"){
                    // console.log(res["body"]);
                    // load_groups();
                    edit_get_objs();
                    hide_menus();
                    setTimeout(()=>{
                        parts_load();
                        alert(`группа ${name} удалена`)
                    },500)
                }
            });
        }
    }
    function create_new_group(pid) {
        let group_name = ask("название группы");
        if(group_name != null && group_name != ""){
            $.post( "/admin/groups/new", { name:group_name.replaceAll(" ","$"),pid:pid})
            .done(function( res ) {
                if(res["out"] == "good"){
                    // console.log(res["body"]);
                    // load_groups();
                    edit_get_objs();
                    hide_menus();
                    setTimeout(()=>{
                        parts_load();
                        alert(`группа ${group_name.replaceAll(" ","$")} создана`)
                    },500)
                }
            });
        }
    }

    function create_new_part() {
        let part_name = ask("название раздела");
        if(part_name != null && part_name != ""){
            $.post( "/admin/parts/new", { name:part_name.replaceAll(" ","$")})
            .done(function( res ) {
                if(res["out"] == "good"){
                    // console.log(res["body"]);
                    // load_groups();
                    hide_menus();
                    setTimeout(()=>{
                        parts_load();
                        alert(`раздел ${part_name.replaceAll(" ","$")} создан`)
                    },500)
                }
            });
        }
    }

    function parts_load(){
        load_parts((db)=>{
            let parts = document.getElementById("obj_parts");
            parts.innerHTML = "";
            Object.values(db).forEach((value)=>{
                let part = document.createElement("button")
                let part_text = document.createElement("div")
                let part_drop = document.createElement("img")
                
                part_drop.src = "/img/drop.png";
                part_drop.alt = "\/";

                part_text.innerText = `${value["name"].replaceAll("$", " ")}`;

                part.id = `group_drop-${value["id"]}`;
                part.classList.add("menu_btn")
                part.classList.add("group_drop")
                part.setAttribute("groups",`${value["groups"]}`)
                part.setAttribute("count",`${value["count"]}`)
                part.setAttribute("pid",`${value["id"]}`)

                part.append(part_text);
                part.append(part_drop);

                parts.append(part);
                console.log(value);
            })
        })
    }
    parts_load();

</script>