project page fixes

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"});
         })
-
     })
 })
 

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"){

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){
+function get_count(clas){
-    if (objs[obj] == null) objs[obj] = {};
+    if (objs[clas] == null) objs[clas] = {};
-    if ((objs[obj]["count"] == null)){(objs[obj]["count"] = 0)}
+    let count = Object.keys(objs[clas]).length;
-    let count = Object.keys(objs[obj]).length -1;
+    return count;
-    // 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 create(clas,obj,x,y,inside){
+function create(clas,x,y,body,id){
-    if (inside == null || inside == "") inside = "[]";
+    // console.log(clas,x,y,body,parent);
-    root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+inside+"</div>";
+    // console.log(id);
-    let obj_doc = document.getElementById(obj);
+    if (body == null || body == "") body = "[]";
-    console.log(obj_doc.classList);
+    // root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+body+"</div>";
-    set_pos(obj_doc,x,y);
+    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);
+    // console.log(objs);
-    globalThis.objs = objs;
+    objs = objss;
     Object.entries(objs).forEach(([keys, values]) => {
         // console.log(keys,values);
         Object.entries(values).forEach(([key, value]) => {
-            if(key != "count"){
+            if(key != "class"){
-                // console.log(key,value);
+                // console.log(key,keys);
-                create(keys,key,value["x"],value["y"],value["body"]);
+                // 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;
+    // console.log(objs);
-    // $.cookie("objs",JSON.stringify(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}`;
+    }
+}

views/admin.ejs

@@ -1,13 +1,11 @@
-<style>
-    iframe{
-        width: 100%;
-    }
-</style>
-
 <%- include('./static/start.ejs',{name:"admin",async: true}) %>
 <%- include('./header.ejs') %>
 
-    <h1>hello admin</h1>
+    <section class="main">
-    <iframe src="/reg" frameborder="0"></iframe>
+        <h1>hello admin</h1>
+
+    </section>
+    <!-- <iframe src="/reg" frameborder="0"></iframe> -->
+<%- include('./reg.ejs') %>
 
 <%- include('./static/end.ejs') %>

views/main.ejs

@@ -44,9 +44,10 @@
 <%- include('./header.ejs') %>
 <!-- <script src="/lib/interact.min.js"></script> -->
 
-<div id="projs_div"></div>
+<section class="main">
-
+    <div id="projs_div"></div>
-<button >new project</button>
+    <button >new project</button>
+</section>
 
 <script>
     load_projs((projs)=>{

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="proj_top">
-    <input id="proj_name"></input>
-</div>
-<div id="drags"></div>
 
-<div class="dropzone"></div>
+<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>
+</section>
+
+    
+    <div class="dropzone"></div>
 <div class="trash"></div>
 
-<button onclick="add('cube')">add</button>
+<div class="czones">
-<button onclick="save()">save</button>
+    <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') %>

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">
-    <input type="text" id="login" name="login">
+    <h1>user registration</h1>
-    <input type="password" id="pass" name="pass">
+    <section class="main_sec">
-    <input type="checkbox" name="admin" value='false' id="admin_check">
+        <input type="text" id="login" name="login">
-    <button onclick='reg();'>reg</button>
+        <input type="password" id="pass" name="pass">
-    <div id="reg_response"></div>
+        <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");

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>