puzzle/views/admin/objects/object_edit.ejs

<style>
    .object{
        background-color: #bfe4ff;
        border: dashed 4px transparent;
        border-radius: 4px;
        height: 55px;
        width: 55px;
        margin: 5px;
        margin-top: 0px;
        margin-bottom: 20px;
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }
    #objs_in_group,#founded_objs_list{
        display: flex;
        flex-wrap: wrap;
        padding: 0px;
    }
    #find_obj_btns{
        /* display: flex; */
        margin: auto 0px;
        /* height: 25px; */
    }
</style>

<div style="display: flex;justify-content: space-between;">
    <h1>изменение объектов</h1>
    <div id="find_obj_btns">
        <button onclick="edit_get_objs(true)">найти по имени</button>
        <button onclick='document.getElementById("objs_in_group").innerHTML = "";'>очистить</button>
    </div>
</div>
<div>
    <div id="objs_in_group"></div>
</div>

<div class="cmenu" id="object_edit_menu">
    <button  onclick="obj_del()">удалить объект</button>
    <button onclick="set_edit()">редактирование объекта</button>
</div>

<script>
    // load_groups(()=>{
    //     edit_get_objs();
    // });

    function set_edit(){
        let menu = document.getElementById("object_edit_menu");
        set_obj_edit_params(menu.getAttribute("obj_img"),menu.getAttribute("obj_name").split("/")[0],menu.getAttribute("obj_description"),menu.getAttribute("obj_height"),menu.getAttribute("obj_width"),menu.getAttribute("obj_cost"),menu.getAttribute("obj_gid"));
    }

    function edit_get_objs(by_name){
        document.getElementById("objs_in_group").innerHTML = "";
        set_obj_edit_params();
        edit_load_objs((data)=>{
            data.forEach(value => {
                // console.log(value);
                // // console.log($.cookie("cache"));
                edit_load_obj(value["name"],"`img`",(odata)=>{
                    make_obj(odata["img"],value,"objs_in_group");
                })           
            });
        },by_name)
    }

    function gids_change(){
        let last = gids.at(-1)
        gids = [last];
        edit_get_objs();
        hide_menus();
    }

    function obj_del(){
        // let select = document.getElementById("group_select");
        let menu = document.getElementById("object_edit_menu");
        if (confirm(`вы точно хотите удалить ${menu.getAttribute("obj_name").split("/")[0]}?`)){
            $.post( "/admin/objects/delete", { id:menu.getAttribute(`obj_id`),})
            .done(function( res ) {
                if(res["out"] == "good"){
                    edit_get_objs();
                }
            });
        }
    }

    function save_edited_obj(){
        let gid = gids[0];
        let menu = document.getElementById("object_edit_menu");
        let attributes = ["name","description","img","height","width","cost"];
        let cur_atts = {
            name : document.getElementById("nobj_name").value,
            description : document.getElementById("nobj_description").value,
            height : document.getElementById("obj_height").value,
            width : document.getElementById("obj_width").value,
            img : document.querySelector('#img_prev').src,
            cost : document.getElementById("obj_cost").value
        }
        let changes = {}
        attributes.forEach(element => {
            // console.log(cur_atts[element],menu.getAttribute(`obj_${element}`));
            if(element != attributes.at(-1)){
                check_change(element);
                // console.log(element);
            }
            else{
                check_change(element);
                // console.log(changes);
                if(Object.keys(changes).length > 0){
                    make_obj_save(changes);
                    // console.log(changes);
                }
            }
        });
        function check_change(element){
            if(element == "name" && cur_atts[element] != menu.getAttribute(`obj_${element}`).split("/")[0]){
                changes[element] = cur_atts[element];
            }
            else if (element != "name" && cur_atts[element] != menu.getAttribute(`obj_${element}`)){
                changes[element] = cur_atts[element];
            }
        }
        function make_obj_save(){
            load_group(gid,(group_db)=>{
                if(changes["name"]) changes["name"] = (changes["name"]+"/g/"+group_db["name"].replace(" ","$"));
                document.getElementById("obj_resp").innerHTML = "сохранение товара";
                $.post( "/admin/objects/edit", { id:menu.getAttribute(`obj_id`),changes:JSON.stringify(changes),gid:gid})
                .done(function( res ) {
                    // console.log(res);
                    if(res["out"] == "good"){
                        document.getElementById("obj_resp").innerHTML = "товар сохранён";
                        setTimeout(()=>{
                            edit_get_objs();
                            set_obj_edit_params();
                            if(res["name_err"]){
                                document.getElementById("obj_resp").innerHTML = ("название товара не было изменино поскольку оно занято");
                            }
                        },1000)
                        setTimeout(()=>{
                            document.getElementById("obj_resp").innerHTML = "";
                        },3000)
                    }
                });
            })
        }
    }

    function edit_load_obj(name,key,callback){
        $.post( "/get_obj",{name:name,key:key})
        .done(function( res ) {
            if(res["out"] == "good"){
                // console.log(res["body"]);
                callback(res["body"]);
            }
        });
    }
        
    function edit_load_objs(callback,by_name = false){
        // let select = document.getElementById("group_select");
        if(!by_name){
            gids.forEach(gid => {
                $.post( "/get_objs",{gid:gid})
                .done(function( res ) {
                    if(res["out"] == "good"){
                        // console.log(res["body"]);
                        // res["body"].forEach(object => {
                        //     // objs_store[`${element["name"]}`] = {description:element["description"],height:element["height"],width:element["width"],id:element["id"],name:element["name"]}
                        //     let obj_main = document.createElement("div");
                        // });
                        callback(res["body"]);
                    }
                });
            });
        }
        else{
            let name = ask("название");
            if(name != "")[
                $.post( "/admin/objects/find", { name:name.replace(" ","$")})
                .done(function( res ) {
                    if(res["out"] == "good"){
                        // console.log(res["body"]);
                        callback(res["body"])
                    }
                })
            ]
        }
    }

        function make_obj(img,value,list_id){
            let obj_list = document.getElementById(list_id);
            let obj =  document.createElement('div');
            let name_text =  document.createElement('div');
            let img_elm =  document.createElement('img');
            obj.title = `название:${value["name"].split("/")[0].replace("$"," ")}\nцена:${value["cost"]}\nширена:${value["width"]}\nвысота${value["height"]}\nописание:${value["description"]}`;
            obj.id = "object_menu";
            obj.classList.add(value["name"]);
            obj.classList.add("object");
            obj.setAttribute("name",value["name"].split("/")[0].replace("$"," "))
            obj.setAttribute("description",value["description"])
            obj.setAttribute("src",img)
            obj.setAttribute("height",value["height"])
            obj.setAttribute("width",value["width"])
            obj.setAttribute("obj_id",value["id"])
            obj.setAttribute("cost",value["cost"])
            obj.setAttribute("gid",value["gid"])
            name_text.innerText = value["name"].split("/")[0].replace("$"," ");
            img_elm.src = img;
            obj.append(img_elm)
            obj.append(name_text)
            obj_list.append(obj)

            console.log("obj");
        }              
</script>