added object creation

index.js

@@ -214,12 +214,13 @@ app.post("/save_proj", (req,res) => {
                 // console.log(pname,udata["id"],proj);
                 console.log(`${udata["uuid"]} created project ${pname} from ${cook["sid"]}`);
                 db.nr("projects","`uid`,`name`,`body`",`'${udata["id"]}','${pname}','${proj}'`);
+                res.send({out:"good"});
             } else if (projin != null){
                 db.sv("projects","body",proj,"id",projin["id"],()=>{});
                 console.log(`${udata["uuid"]} saved project ${projin["name"]} from ${cook["sid"]}`);
                 // console.log("proj in");
+                res.send({out:"good"});
             }
-            res.send({out:"good"});
         })
     })
 })
@@ -270,6 +271,42 @@ app.post("/get_projs", (req,res) => {
 app.post("/new_obj", (req,res) => {
     let inp = req.body;
     let cook = req.cookies;
+    if(cook['sid'] != null && cook['uuid'] != null){
+        // console.log(inp["name"],inp["img"]);
+        db.cv("objects","name",inp["name"],(include)=>{
+            if(include){
+                res.send({out:"bad",err:"name"});
+            }
+            else if (!include){
+                db.nr("objects","`name`,`img`,`height`,`width`,`description`",`'${inp["name"]}','${inp["img"]}','1','1','desc'`);
+                res.send({out:"good"});
+            }
+        })
+    }
+})
+
+app.post("/get_objs", (req,res) => {
+    let inp = req.body;
+    let cook = req.cookies;
+    // console.log(inp["name"]);
+    if(cook['sid'] != null && cook['uuid'] != null){
+        db.gv("objects","gid",0,(odata)=>{
+            // console.log(odata);
+            res.send({out:"good",body:odata});
+        })
+    }
+})
+
+app.post("/get_obj", (req,res) => {
+    let inp = req.body;
+    let cook = req.cookies;
+    // console.log(inp["name"]);
+    if(cook['sid'] != null && cook['uuid'] != null){
+        db.gv("objects","name",`'${inp["name"]}'`,(odata)=>{
+            // console.log(odata);
+            res.send({out:"good",body:odata[0]});
+        })
+    }
 })
 
 // app.post("/set_cr_uuid", (req,res) => {

public/lib/fn.js

@@ -122,27 +122,14 @@ function ask() {
     }
 }
 
-function wall_size_change(type){
+// function goto_proj(name){
-    let wall = document.getElementsByClassName("wall")[0];
+//     $.post( "/proj/"+name, { name:hostname })
-    let scroll;
+//     .done(function( res ) {
-    if(type != null && type == "x") {
+//         // if(res["out"] == "good"){
-        scroll = document.getElementById("wall_x");
+//         //     console.log(res["body"]);
-        wall.style.width = `${scroll.value * 200}px`;
+//         // }
-    }
+//     });
-    if(type != null && type == "y") {
+// }
-        scroll = document.getElementById("wall_y");
-        wall.style.height = `${scroll.value * 200}px`;
-    }            
-}
-
-function goto_proj(name){
-    $.post( "/proj/"+name, { name:hostname })
-    .done(function( res ) {
-        // if(res["out"] == "good"){
-        //     console.log(res["body"]);
-        // }
-    });
-}
 
 function get_sid(hostname){
     $.post( "/get_sid", { name:hostname })
@@ -153,8 +140,14 @@ function get_sid(hostname){
     });
 }
 
-function new_obj(){
+function new_obj(name,img,height,width,description,callback){
-
+    $.post( "/new_obj", { name:name,img:img })
+    .done(function( res ) {
+        // if(res["out"] == "good"){
+        //     console.log(res["body"]);
+        // }
+        callback(res);
+    });
 }
 
 function load_projs(callback){

public/lib/inter.js

@@ -1,6 +1,6 @@
 window.dragMoveListener = dragMoveListener;
 let root = document.getElementById("drags");
-let objs = {};
+let objs = { height:"2",width:"4"};
 
 function get_count(clas){
     if (objs[clas] == null) objs[clas] = {};
@@ -9,22 +9,65 @@ function get_count(clas){
 }
 
 function create(clas,x,y,body,id){
-    // console.log(clas,x,y,body,parent);
+    let main_clas = clas.split(" ")[0];
-    // console.log(id);
+    // if (body == null || body == "") body = "[]";
-    if (body == null || body == "") body = "[]";
+    try{
-    // root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+body+"</div>";
+        load_obj(main_clas,(db_data)=>{
-    let obj = document.createElement("div");
+            // let data = db_data;
-    obj.id = id;
+            // body = data["img"];
-    clas= clas.split(" ");
+            // console.log(data["img"].toString());
-    clas.forEach(cl => {
+            // console.log(db_data[0]);
-        obj.classList.add(cl);
+            // console.log(clas,x,y,body,parent);
-    });
+            // console.log(id);
-    obj.innerHTML = body;
+            // root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+body+"</div>";
-    // parent.append(obj);
+            // let img = document.createElement("img");
-    root.append(obj);
+            let obj = document.createElement("img");
-    set_pos(obj,x,y);
+            obj.id = id;
-    // let obj_doc = document.getElementById(obj);
+            clas= clas.split(" ");
-    // console.log(obj_doc.classList);
+            clas.forEach(cl => {
+                obj.classList.add(cl);
+            });
+            if (db_data == null) {
+                delete objs[main_clas][id];
+                save(()=>{
+                    goto("/proj/"+proj_name);
+                });
+            }
+            else{
+                obj.src = db_data["img"];
+                obj.title = `${db_data["name"]} \n ${db_data["description"]}`;
+            }
+            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);
+        })
+    }catch{}
+}
+
+function wall_size_change(type,value){
+    let wall = document.getElementsByClassName("wall")[0];
+    let scroll;
+    if(type != null && type == "width") {
+        if (value == null) scroll = document.getElementById("wall_width").value;
+        else scroll = value;
+        document.getElementById("wall_width_value").innerHTML = scroll;
+
+        // console.log(scroll);
+        wall.style.width = `${scroll * 200}px`;
+        objs["width"] = scroll;
+    }
+    if(type != null && type == "height") {
+        if (value == null) scroll = document.getElementById("wall_height").value;
+        else scroll = value;        
+        document.getElementById("wall_height_value").innerHTML = scroll;
+        
+        // console.log(scroll);
+        wall.style.height = `${scroll * 200}px`;
+        objs["height"] = scroll;
+    }            
 }
 
 function load_local(objss){
@@ -33,15 +76,21 @@ function load_local(objss){
     objs = objss;
     Object.entries(objs).forEach(([keys, values]) => {
         // console.log(keys,values);
-        Object.entries(values).forEach(([key, value]) => {
+        if (keys != "width" && keys != "height"){
-            if(key != "class"){
+            Object.entries(values).forEach(([key, value]) => {
-                // console.log(key,keys);
+                if(key != "class"){
-                // console.log(keys,value["x"],value["y"],value["body"]);
+                    // console.log(key,keys);
-                // let count = Object.keys(objs[keys]).length;
+                    // console.log(keys,value["x"],value["y"],value["body"]);
-                // console.log(count);
+                    // let count = Object.keys(objs[keys]).length;
-                create(keys+" drag",value["x"],value["y"],value["body"],key);
+                    // console.log(count);
-            }
+                    create(keys+" drag",value["x"],value["y"],value["body"],key);
-        })
+                }
+            })
+        }
+        else {
+            document.getElementById(`wall_${keys}`).value = values;
+            wall_size_change(keys,values);
+        }
     });
 }
 
@@ -76,6 +125,26 @@ function save(callback){
     })
 }
 
+function load_objs(callback){
+    $.post( "/get_objs")
+    .done(function( res ) {
+        if(res["out"] == "good"){
+            // console.log(res["body"]);
+            callback(res["body"]);
+        }
+    });
+}
+
+function load_obj(name,callback){
+    $.post( "/get_obj",{name:name})
+    .done(function( res ) {
+        if(res["out"] == "good"){
+            // console.log(res["body"]);
+            callback(res["body"]);
+        }
+    });
+}
+
 function set_pos(obj,x,y){
     obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
     obj.setAttribute('data-x', x)
@@ -156,7 +225,7 @@ interact('.createzone').dropzone({
         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;
+        let y = zone.getBoundingClientRect().top + window.scrollY - 30;
         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');},
@@ -167,7 +236,7 @@ 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;
+        let y = zone.getBoundingClientRect().top - 30;
         // console.log(x,y);
         create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
     });

views/admin.ejs

@@ -13,13 +13,14 @@
         <h1>hello admin</h1>
         <div class="nobj">
             <div class="img_preview">
-                <input type="file" onchange="previewFile()" value=""><br>
+                <input type="file" onchange="previewFile()" value="" maxlength="1"><br>
                 <img src="" height="100" alt="Image preview...">
             </div>
             <textarea name="" id="nobj_description" cols="30" rows="5" placeholder="object description"></textarea>
             <div class="nobj_options">
                 <input type="text" id="nobj_name" placeholder="object name">
-                <button >create object</button>
+                <button onclick="create_obj()">create object</button>
+                <div id="obj_resp"></div>
             </div>
         </div>
     </section>
@@ -40,26 +41,50 @@
             }
         }
 
-        async function img(){
+        // async function toblob(callback){
-            var preview = document.querySelector('img').src;
+        //     var preview = document.querySelector('img').src;
-            console.log(preview);
+        //     // console.log(preview);
-            fetch(preview)
+        //     fetch(preview)
-            .then(res => res.blob())
+        //     .then(res => res.blob())
-            .then(blob => {
+        //     .then(blob => {
-                let dataUrl = blobToDataUrl(blob);
+        //         // let dataUrl = blobToDataUrl(blob);
-                console.log(blob)
+        //         console.log(blob)
-                console.log(dataUrl)
+        //         callback(blob);
-            })
+        //         // console.log(dataUrl)
-        }
+        //     })
-        function blobToDataUrl(blob) {
+        // }
-            let reader = new FileReader()
+
-            reader.readAsDataURL(blob)
+        function create_obj(){
-            reader.onload = function(){
+            let name = document.getElementById("nobj_name").value;
-                dataUrl = reader.result
+            let description = document.getElementById("nobj_description").value;
-                console.log(dataUrl)    //DataURL
+            var img = document.querySelector('img').src;
-                return dataUrl;
+            new_obj(name,img,0,0,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";
+                }
+            });
         }
+
+        // load_obj("asd",(data)=>{
+        //     console.log(data);
+        //     // let dataUrl = blobToDataUrl(data["img"]);
+        //     // console.log(data["img"]["data"].getBlob());
+        //     console.
+        //     // document.querySelector('img').src = data["img"];
+        // })
+
+        // function blobToDataUrl(blob) {
+        //     let reader = new FileReader()
+        //     reader.readAsDataURL(blob)
+        //     reader.onload = function(){
+        //         dataUrl = reader.result
+        //         // console.log(dataUrl)    //DataURL
+        //         return dataUrl;
+        //     }
+        // }
     </script>
     <!-- <iframe src="/reg" frameborder="0"></iframe> -->
 <%- include('./reg.ejs') %>

views/project.ejs

@@ -42,6 +42,7 @@
         height: 50px;
         width: 50px;
         transition: background-color 0.3s;
+        text-align: center;
         /* z-index: -1; */
     }
     .czones{
@@ -118,11 +119,9 @@
     
     <!-- <div class="dropzone"></div> -->
 
-
 <div class="inputs">
     <div class="czones">
-        <div class="cube createzone"></div>
+        <!-- <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>
@@ -131,24 +130,43 @@
         <div class="buble createzone"></div>
         <div class="buble createzone"></div>
         <div class="buble createzone"></div>
+        <div class="buble createzone"></div> -->
     </div>
-    <div class="trash"></div>
+    <div class="trash">trash bin</div>
 </div>
 
 
 <div id="wall_input">
     <div>
-        <label for="wall_y">height</label> <br>
+        <div style="display: flex;width: 150px;justify-content: space-between;">
-        <input type="range" step="0.1" min="0" max="4" id="wall_y" oninput="wall_size_change('y')"> <br>
+            <label for="wall_height">height </label>
+            <div id="wall_height_value">0</div>
+        </div>
+        <input type="range" step="0.1" min="0.9" max="4" id="wall_height" value="2" oninput="wall_size_change('height')"> 
     </div>
     <div>
-        <label for="wall_x">width</label> <br>
+        <div style="display: flex;width: 150px;justify-content: space-between;">
-        <input type="range" step="0.1" min="2" max="7" id="wall_x" oninput="wall_size_change('x')"> <br>
+            <label for="wall_width">width</label>
+            <div id="wall_width_value">0</div>
+        </div>
+        <input type="range" step="0.1" min="1.9" max="7" id="wall_width" value="4" oninput="wall_size_change('width')"> 
     </div>
 </div>
 <div class="wall dropzone"></div>
 
 <script src="/lib/inter.js"></script>
+<script>
+    load_objs((data)=>{
+        data.forEach(value => {
+            // console.log(value);
+            let czones = document.getElementsByClassName("czones")[0];
+            let czone =  document.createElement('img');
+            czone.classList.add(value["name"]);
+            czone.classList.add("createzone");
+            czones.append(czone)
+        });
+    })
+</script>
 <script>
     let proj_name = "<%= proj_name %>";
     // console.log(proj_name);