puzzle/views/admin/objects/object_creation.ejs

<style>
    .nobj{
        display: flex;
        justify-content: space-between;
        margin: auto;
        /* margin-bottom: 50px; */
    }
    #img_file{
        text-overflow:ellipsis;
        max-width:100px;
    }
    .img_preview{
        /* width: 50px;
        height: 20px; */
        display: flex;
    }
    #img_prev{
        height: 200px;
        width: 200px;
    }
</style>

<div style="display: flex;justify-content: space-between;">
    <h1>object</h1>
    <h1 id="object_edit_type">creation</h1>
</div>
<div class="nobj">
    <div>
        <div class="img_preview">
            <label for="img_file"><%= lang("img max size") %></label><br>
            <input type="file" id="img_file" onchange="previewFile()"  accept="image/*" value="" maxlength="1"><br>

        </div>
        <div style="width: 200px; height: 200px;">
            <img src="" id="img_prev" height="100" alt="<%= lang('Image preview') %>">
        </div>
    </div>
    <textarea id="nobj_description" cols="30" rows="5" placeholder="<%= lang("object description") %>"></textarea>
    <div>
        <div class="nobj_options">
            <input type="text" id="nobj_name" placeholder="<%= lang("object name") %>">
            <button onclick="create_obj()" id="obj_apply_btn"><%= lang("create object")%></button>
            <div id="obj_resp"></div>
        </div>
        <div id="obj_input">
            <div>
                <div style="display: flex;width: 100%;justify-content: space-between;">
                    <label for="obj_height"><%= lang("height") %> </label>
                    <div id="obj_height_value">100см</div>
                </div>
                <input style="width: 100%;" type="range" step="1" min="1" max="100" id="obj_height" value="100" oninput="obj_size_change('height')"> 
            </div>
            <div>
                <div style="display: flex;width: 100%;justify-content: space-between;">
                    <label for="obj_width"><%= lang("width") %></label>
                    <div id="obj_width_value">100см</div>
                </div>
                <input style="width: 100%;" type="range" step="1" min="1" max="100" id="obj_width" value="100" oninput="obj_size_change('width')"> 
            </div>
        </div>
        <div>
            <button onclick="set_obj_edit_params()">clear parameters</button>
        </div>
    </div>
</div>

<script>
    function obj_size_change(type){
        if(type == "height"){
            let img = document.getElementById('img_prev');
            let range = document.getElementById('obj_height');
            let text = document.getElementById('obj_height_value');
            img.style.height = `${range.value * 2}px`;
            text.innerHTML = `${range.value}см`;
        }else if (type == "width"){
            let img = document.getElementById('img_prev');
            let range = document.getElementById('obj_width');
            let text = document.getElementById('obj_width_value');
            img.style.width = `${range.value * 2}px`;
            text.innerHTML = `${range.value}см`;

        }
    }

    function set_obj_edit_params(img = "",name = "",description="",height = 100,width = 100){
        if(img ==""&&name ==""&&description == ""){
            document.getElementById("object_edit_type").innerText = "creation";
            document.getElementById("obj_apply_btn").innerText = "create object";
            document.getElementById("obj_apply_btn").setAttribute("onclick","create_obj()");
        }else {
            document.getElementById("object_edit_type").innerText = "edit";
            document.getElementById("obj_apply_btn").innerText = "save edited object";
            document.getElementById("obj_apply_btn").setAttribute("onclick","save_edited_obj()");
        }

        let img_file = document.getElementById("img_file");
        let img_prev = document.getElementById("img_prev");
        let name_div = document.getElementById("nobj_name");
        let description_div = document.getElementById("nobj_description");

        let height_slider = document.getElementById("obj_height");
        let height_text = document.getElementById("obj_height_value");
        let width_slider = document.getElementById("obj_width");
        let width_text = document.getElementById("obj_width_value");

        name_div.value = name;
        img_file.value = null;
        img_prev.src = img;
        img_prev.style.height = `${height*2}px`;
        img_prev.style.width = `${width*2}px`;
        description_div.value = description;

        height_slider.value = height;
        width_slider.value = width;
        height_text.innerText = `${height}см`;
        width_text.innerText = `${width}см`;
    }

    function previewFile() {
        var preview = document.querySelector('img');
        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }

    function new_obj(name,img,height,width,description,callback){
        let select = document.getElementById("group_select");
        $.post( "/admin/obj/new", { name:name,img:img,desc:description,height:height,width:width,gid:select.options[select.selectedIndex].getAttribute("gid")})
        .done(function( res ) {
            // if(res["out"] == "good"){
            //     console.log(res["body"]);
            // }
            callback(res);
        });
    }

    function create_obj(){
        let name = document.getElementById("nobj_name").value;
        let description = document.getElementById("nobj_description").value;
        let height = document.getElementById("obj_height").value;
        let width = document.getElementById("obj_width").value;
        var img = document.querySelector('#img_prev').src;
        name = name.replace(" ","$");
        if (img != "http://n0rsrv2:3002/admin"){
            document.getElementById("obj_resp").innerHTML = "creating object";
            new_obj(name,img,height,width,description,(res)=>{
                if(res["out"] == "bad" && res["err"] == "name"){
                    document.getElementById("obj_resp").innerHTML = "object already exist";
                }
                else if(res["out"] == "good"){
                    document.getElementById("obj_resp").innerHTML = "object created";
                    setTimeout(()=>{
                        edit_get_objs();
                    },1000)
                    setTimeout(()=>{
                        document.getElementById("obj_resp").innerHTML = "";
                    },3000)
                }
            });
        }
        else{
            document.getElementById("obj_resp").innerHTML = "image not selected";
        }
    }
</script>