puzzle/views/main.ejs

<%- include('./static/start.ejs',{name:'main',async: true}) %>
<%- include('./header.ejs') %>
<style>
    .p_img{
        /* pointer-events: none; */
        height: 200px;
        border-radius: 10px;
        width: 290px;
        box-shadow: 0px 4px 4px 0px #00000040;
        cursor: pointer;
    }
    .proj, .new_proj{
        border: 0px;
        background-color: transparent;
    }
    .p_left{
        display: block;
    }
    .p_left div{
        font-size: calc(var(--main-font-size)/2);
    }
    .p_right{
        display: flex;
        margin-top:15px;
        justify-content: space-between;
        width: 130px;
    }
    .p_props{
        display: flex;
        justify-content: space-between;
    }
    .p_props img{
        cursor: pointer;
    }
    .main h1{
        /* font-size: --main-font-size; */
        font-weight: 100;
        margin: 0px;
        padding: 0px;
        margin-top: 10px;
    }
</style>
<!-- <script src="/lib/interact.min.js"></script> -->

<section class="main">
    <div id="projs_div">
        <button onclick="new_proj()" class="new_proj"><img class="p_img" src="/img/new_proj.png" alt=""><h1>Новый проект</h1></button>
    </div>
</section>

<!-- <script src="/lib/inter.js"></script> -->

<script>
    function load_projs(callback){
        $.post( "/get_projs")
        .done(function( res ) {
            if(res["out"] == "good"){
                // console.log(res["body"]);
                callback(res["body"]);
            }
        });
    }
    function new_proj(objs = null){
        let name = ask("Введите название проекта ",{func:(name)=>{
            objs = (objs == null)? { height:"2",width:"4"}:objs;
            if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
                $.post( "/save_proj", {proj:JSON.stringify(objs),name:name,img:"/img/proj_placeholder.webp"})
                .done(function( res ) {
                    if(res["out"] == "good"){
                        goto(`/proj/load/${name}`);
                    }
                    else if(res["out"] == "bad" && res["err"] == "proj"){
                        msg("Проект уже существует")
                    }
                })
            }
        }});
    }
    load_projs((projs)=>{
        // console.log(projs);
        if(projs.length == 0){
            setTimeout(()=>{loaded()},500);
        }
        else{
            projs.forEach(proj => {
            // console.log(proj);
            let div = document.getElementById("projs_div");
            div.innerHTML += `<button id='proj_${proj["name"]}' proj_id='${proj["id"]}' class='proj'>
                <img src='${proj["img"]}' alt='${proj["name"]}' class="p_img" onclick="goto('/proj/load/${proj["name"]}')">
                <div class="p_props">
                    <div class="p_left"  style="text-align:left">
                        <h1>${proj["name"]}</h1>
                        <div>${proj["creation_date"].split("T")[0]}</div>
                    </div>
                    <div class="p_right">
                        <img src="/img/icon/edit.svg" style="width:24px;height:24px" onclick="rename_proj('${proj["name"]}')">
                        <img src="/img/icon/copy.svg" style="width:24px;height:24px" onclick="copy_proj('${proj["name"]}')">
                        <img src="/img/icon/download.svg" style="width:24px;height:24px" onclick="downloadImg('${proj["img"]}','${proj["name"]}');msg('скачивание');">
                        <img src="/img/icon/trash.svg" style="width:24px;height:24px" onclick="del_proj('${proj["name"]}')">
                    </div>    
                </div>
                </button>`;
                setTimeout(()=>{loaded()},500);
        });
        }
    });

    function download_proj(id,name){
        $.post( "/proj/download",{id:id})
        .done(function( res ) {
            downloadTextFile(res,`${name}.json`)
        })
    }

    function del_proj(proj_name){
        msg(`удалить проект ${proj_name}?`,{type:"ask",res:(out)=>{
            if(out){
                $.post( "/proj/delete",{name:proj_name})
                .done(function( res ) {
                    if(res["out"] == "good"){
                        goto("/main")
                    }
                })
            }
        }})
    }

    function copy_proj(proj){
        $.post( "/load_proj",{name:proj})
        .done(function( res ) {
            if(res["out"] == "good"){
                let name = ask("Введите название копии проекта ",{func:(name)=>{
                    if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
                        $.post( "/save_proj", {proj:res["body"],name:name,img:"/img/proj_placeholder.webp"})
                        .done(function( res ) {
                            if(res["out"] == "good"){
                                goto(`/proj/load/${name}`);
                            }
                            else if(res["out"] == "bad" && res["err"] == "proj"){
                                msg("Проект уже существует")
                            }
                        })
                    }
                }});
            }
        })
    }


    function rename_proj(name){
        let cur_proj = document.getElementById(`proj_${name}`);
        ask(`новое имя для проекта ${name}`,{func:(new_name)=>{
            if(new_name != null){
                $.post( "/proj/rename",{name:new_name,id:cur_proj.getAttribute("proj_id")})
                .done(function( res ) {
                    if(res["out"] == "good"){
                        goto("/main");
                    }
                })
            }
        }});
    }
</script>
<%- include('./static/end.ejs',{soc:true}) %>