project page fixes

2023-06-30 01:57:12 +05:00 · 2023-06-30 01:57:12 +05:00 · de5879069b
commit de5879069b
parent 73630d4bb6
8 changed files with 214 additions and 61 deletions
--- a/index.js
+++ b/index.js
@ -140,7 +140,7 @@ app.post("/sid_log",(req,res) =>{
        func.check_sid(cook,(include,id) => {
            if (include){
                if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") console.log("good boy "+ id["uuid"]+" logged in by sid logs from " + id["sid"]);
-                res.send({out:"goto",url:"/main"});
+                res.send({out:"good",url:"/main"});
            }
            else if (!include){
                if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") console.log("bad boy "+ id["uuid"]+" tried to login by sid but sid expired from " + id["sid"]);
@ -219,8 +219,8 @@ app.post("/save_proj", (req,res) => {
                console.log(`${udata["uuid"]} saved project ${projin["name"]} from ${cook["sid"]}`);
                // console.log("proj in");
            }
+            res.send({out:"good"});
        })
-
    })
 })

--- a/public/lib/fn.js
+++ b/public/lib/fn.js
@ -66,7 +66,7 @@ function log_by_sid() {
    $.post( "/sid_log")
    .done(function( res ) {
        console.log("ping");
-        if(res["out"] == "goto"){
+        if(res["out"] == "good"){
            goto(res["url"]);
        }
        else if (res["out"] == "bad"){
--- a/public/lib/inter.js
+++ b/public/lib/inter.js
@ -1,36 +1,45 @@
-window.dragMoveListener = dragMoveListener
+window.dragMoveListener = dragMoveListener;
 let root = document.getElementById("drags");
-var objs = {};
+let objs = {};

-function add(obj){
-    if (objs[obj] == null) objs[obj] = {};
-    if ((objs[obj]["count"] == null)){(objs[obj]["count"] = 0)}
-    let count = Object.keys(objs[obj]).length -1;
-    // console.log(obj,objs[obj+"_count"],objs[obj+"_s"]);
-    root.innerHTML += "<div class='"+obj+" drag' id="+obj+"_"+count+">"+obj+"</div>";
-    objs[obj][obj+"_"+count] = {};
-    // objs[obj]["count"]+=1;
-    console.log(objs);
+function get_count(clas){
+    if (objs[clas] == null) objs[clas] = {};
+    let count = Object.keys(objs[clas]).length;
+    return count;
 }

-function create(clas,obj,x,y,inside){
-    if (inside == null || inside == "") inside = "[]";
-    root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+inside+"</div>";
-    let obj_doc = document.getElementById(obj);
-    console.log(obj_doc.classList);
-    set_pos(obj_doc,x,y);
+function create(clas,x,y,body,id){
+    // console.log(clas,x,y,body,parent);
+    // console.log(id);
+    if (body == null || body == "") body = "[]";
+    // root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+body+"</div>";
+    let obj = document.createElement("div");
+    obj.id = id;
+    clas= clas.split(" ");
+    clas.forEach(cl => {
+        obj.classList.add(cl);
+    });
+    obj.innerHTML = body;
+    // parent.append(obj);
+    root.append(obj);
+    set_pos(obj,x,y);
+    // let obj_doc = document.getElementById(obj);
+    // console.log(obj_doc.classList);
 }

-function load_local(objs){
+function load_local(objss){
    // objs = JSON.parse($.cookie("objs"));
-    console.log(objs);
-    globalThis.objs = objs;
+    // console.log(objs);
+    objs = objss;
    Object.entries(objs).forEach(([keys, values]) => {
        // console.log(keys,values);
        Object.entries(values).forEach(([key, value]) => {
-            if(key != "count"){
-                // console.log(key,value);
-                create(keys,key,value["x"],value["y"],value["body"]);
+            if(key != "class"){
+                // console.log(key,keys);
+                // console.log(keys,value["x"],value["y"],value["body"]);
+                // let count = Object.keys(objs[keys]).length;
+                // console.log(count);
+                create(keys+" drag",value["x"],value["y"],value["body"],key);
            }
        })
    });
@ -40,20 +49,18 @@ function load_proj(){
    $.post( "/load_proj",{name:proj_name})
    .done(function( res ) {
        if(res["out"] == "good"){
-            console.log("good");
+            // console.log("good");
            // console.log(JSON.parse(`'${res["body"]}'`));
            // console.log(JSON.parse(res["body"]));
            // $.cookie("objs",res["body"]);
            load_local(JSON.parse(res["body"]));
+            drag_start();
        }
    })
 }

 function save(){
-    // let proj_name = document.getElementById("proj_name").value;
-    // $.cookie("objs",JSON.stringify(objs));
-    console.log(objs);
-    // // console.log(objs);
+    // console.log(objs);
    $.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name})
    .done(function( res ) {
        if(res["out"] == "good"){
@ -91,10 +98,11 @@ interact('.trash').dropzone({
    ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target; zone.classList.add('drop-target');drag.classList.add('can-drop');},
    ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
    ondrop: function (event) {
-        var drag = event.relatedTarget
+        var drag = event.relatedTarget;
+        // console.log(drag.id);
        delete objs[drag.classList[0]][drag.id];
        drag.remove();
-        console.log(objs);
+        // console.log(objs);
        drag.classList.add('in_zone')
        drag.classList.remove('can-drop')
    },
@ -105,14 +113,63 @@ interact('.dropzone').dropzone({
    accept: '.drag',
    overlap: 0.5,

-    ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.add('drop-target');drag.classList.add('can-drop');},
+    ondragenter: function (event) {
+        var drag = event.relatedTarget;
+        var zone = event.target;
+        if(drag.id == "none") drag.id = get_id(drag.classList[0]);
+        zone.classList.add('drop-target');
+        drag.classList.add('can-drop');
+    },
    ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
    ondrop: function (event) {
        var drag = event.relatedTarget
+        // console.log(drag.classList[0]);
+        if (objs[drag.classList[0]] == null) objs[drag.classList[0]] = {};
        objs[drag.classList[0]][drag.id] = {y:drag.getAttribute('data-y'),x:drag.getAttribute('data-x'),body:drag.innerHTML};
+        // console.log(objs);
        // $.cookie("objs",JSON.stringify(objs));
        drag.classList.add('in_zone')
        drag.classList.remove('can-drop')
    },
    ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
 })
+
+interact('.createzone').dropzone({
+    accept: '.spawn',
+    overlap: 0.2,
+
+    ondragenter: function (event) {
+        var drag = event.relatedTarget;
+        var zone = event.target;zone.classList.add('drop-target');
+        drag.classList.add('can-drop');
+    },
+    ondragleave: function (event) {
+        var drag = event.relatedTarget;
+        var zone = event.target;
+        zone.classList.remove('drop-target');
+        drag.classList.remove('spawn');
+        let x = zone.getBoundingClientRect().left + window.scrollX - 15;
+        let y = zone.getBoundingClientRect().top + window.scrollY - 20;
+        create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
+    },
+    ondrop: function (event) {var drag = event.relatedTargetdrag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+    ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+})
+
+function drag_start() {
+    let zones = document.getElementsByClassName("createzone");
+    Object.entries(zones).forEach(([key, zone]) => {
+        let x = zone.getBoundingClientRect().left - 15;
+        let y = zone.getBoundingClientRect().top - 20;
+        // console.log(x,y);
+        create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
+    });
+}
+
+function get_id(clas){
+    if(objs[clas] == null){  return `${clas}_0`}
+    else{
+        let count = Object.keys(objs[clas]).length;
+        return `${clas}_${count}`;
+    }
+}
--- a/views/admin.ejs
+++ b/views/admin.ejs
@ -1,13 +1,11 @@
-<style>
-    iframe{
-        width: 100%;
-    }
-</style>
-
 <%- include('./static/start.ejs',{name:"admin",async: true}) %>
 <%- include('./header.ejs') %>

+    <section class="main">
        <h1>hello admin</h1>
-    <iframe src="/reg" frameborder="0"></iframe>
+
+    </section>
+    <!-- <iframe src="/reg" frameborder="0"></iframe> -->
+<%- include('./reg.ejs') %>

 <%- include('./static/end.ejs') %>
--- a/views/main.ejs
+++ b/views/main.ejs
@ -44,9 +44,10 @@
 <%- include('./header.ejs') %>
 <!-- <script src="/lib/interact.min.js"></script> -->

+<section class="main">
    <div id="projs_div"></div>
-
    <button >new project</button>
+</section>

 <script>
    load_projs((projs)=>{
--- a/views/project.ejs
+++ b/views/project.ejs
@ -4,6 +4,7 @@
        width: 50px;
        position: absolute;
        text-align: center;
+        margin: auto;
    }

    .dropzone {
@ -16,6 +17,20 @@
        width: 80%;
        transition: background-color 0.3s;
    }
+    body {
+    height: 100%;
+    overflow-y: hidden;
+    }
+    .createzone {
+        background-color: #bfe4ff;
+        border: dashed 4px transparent;
+        border-radius: 4px;
+        height: 10px;
+        margin: 10px;
+        padding: 10px;
+        width: 10px;
+        transition: background-color 0.3s;
+    }

    .trash {
        background-color: #bfe4ff;
@ -28,6 +43,13 @@
        transition: background-color 0.3s;
        z-index: -1;
    }
+    .czones{
+        display: flex;
+        margin: auto;
+        /* justify-content: space-around; */
+        flex-wrap: wrap;
+        width: 80%;
+    }

    .drop-active {
        border-color: #aaa;
@ -56,23 +78,76 @@
 <%- include('./header.ejs') %>
 <script src="/lib/interact.min.js"></script>

+
+<div id="drags">
+    <!-- <div class="cube drag spawn" id="cube_0" style="transform: translate(197.7px, 57.8667px);" data-x="197.6999969482422" data-y="57.866668701171875" >cube</div>     -->
+</div>
+<section class="main">
    <div id="proj_top">
+    <button onclick="save()">save</button>  
        <input id="proj_name"></input>
    </div>
-<div id="drags"></div>
+</section>
+
    
    <div class="dropzone"></div>
 <div class="trash"></div>

-<button onclick="add('cube')">add</button>
-<button onclick="save()">save</button>
-
+<div class="czones">
+    <div class="cube createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+    <div class="buble createzone"></div>
+</div>

 <script src="/lib/inter.js"></script>
 <script>
    let proj_name = "<%= proj_name %>";
-    load_proj();
    // console.log(proj_name);
    document.getElementById("proj_name").value = proj_name;
+    // drag_start();
+    load_proj();
 </script>
 <%- include('./static/end.ejs') %>
--- a/views/reg.ejs
+++ b/views/reg.ejs
@ -1,11 +1,26 @@
+<style>
+    .main_sec{
+        margin: auto;
+        /* display: flex; */
+        text-align: center;
+    }
+    #reg_form{
+        width: 80vw;
+        margin: auto;
+    }
+</style>
+
 <%- include('./static/start.ejs',{name:"reg",async: true}) %>

-<form action="" method="get" onsubmit="return false;">
+<form action="" method="get" onsubmit="return false;" id="reg_form">
+    <h1>user registration</h1>
+    <section class="main_sec">
        <input type="text" id="login" name="login">
        <input type="password" id="pass" name="pass">
        <input type="checkbox" name="admin" value='false' id="admin_check">
        <button onclick='reg();'>reg</button>
        <div id="reg_response"></div>
+    </section>
    <script>
        function reg(){
            console.log("reg");
--- a/views/static/start.ejs
+++ b/views/static/start.ejs
@ -11,5 +11,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> <%= name %> </title>
    <!-- <script> document.querySelector("title").innerHTML += $.cookie("uuid"); </script> -->
+    <style>
+        .main{
+            width: 80vw;
+            margin: auto;
+            padding-block: 20px;
+        }
+    </style>
 </head>
 <body>