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(){
        let name = ask("please enter project name");
        let objs = { height:"2",width:"4"};
        if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
            $.post( "/save_proj", {proj:JSON.stringify(objs),name:name,img:"img/img_placeholder.webp"})
            .done(function( res ) {
            if(res["out"] == "good"){
                    // console.log(scr)
                    // console.log("good");
                    // if(callback) callback(res);
                    goto(`/proj/load/${name}`);
                }
            })
        }
    }
    load_projs((projs)=>{
        console.log(projs);
        if(projs.length == 0){
            setTimeout(loaded(),1000)
        }
        else{
            projs.forEach(proj => {
            console.log(proj);
            let div = document.getElementById("projs_div");
            div.innerHTML += `<button id='proj_${proj["name"]}' 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="">
                        <img src="/img/icon/copy.svg" style="width:24px;height:24px" onclick="">
                        <img src="/img/icon/download.svg" style="width:24px;height:24px" onclick="download_proj('${proj["id"]}','${proj["name"]}')">
                        <img src="/img/icon/trash.svg" style="width:24px;height:24px" onclick="del_proj('${proj["name"]}')">
                    </div>    
                </div>
                </button>`;
            setTimeout(loaded(),1000)
        });
        }
    });

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

    function del_proj(proj_name){
        let del = confirm(`удалить проект ${proj_name}?`);
        if(del == true){
            $.post( "/proj/delete",{name:proj_name})
            .done(function( res ) {
                if(res["out"] == "good"){
                    goto("/main")
                }
            })
        }
    }
</script>
<%- include('./static/end.ejs',{soc:true}) %>