From 1575a2ede247e06296238d20fe17a9261dfd0692 Mon Sep 17 00:00:00 2001 From: N0rdye Date: Fri, 30 Jun 2023 21:27:47 +0500 Subject: [PATCH] added object creation --- index.js | 39 +++++++++++++- public/lib/fn.js | 39 ++++++-------- public/lib/inter.js | 125 ++++++++++++++++++++++++++++++++++---------- views/admin.ejs | 67 ++++++++++++++++-------- views/project.ejs | 34 +++++++++--- 5 files changed, 223 insertions(+), 81 deletions(-) diff --git a/index.js b/index.js index 7a798ac..54f949e 100644 --- a/index.js +++ b/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) => { diff --git a/public/lib/fn.js b/public/lib/fn.js index 7d4ec78..65ffa30 100644 --- a/public/lib/fn.js +++ b/public/lib/fn.js @@ -122,27 +122,14 @@ function ask() { } } -function wall_size_change(type){ - let wall = document.getElementsByClassName("wall")[0]; - let scroll; - if(type != null && type == "x") { - scroll = document.getElementById("wall_x"); - 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 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){ diff --git a/public/lib/inter.js b/public/lib/inter.js index 07eff26..2376dcc 100644 --- a/public/lib/inter.js +++ b/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); - // console.log(id); - if (body == null || body == "") body = "[]"; - // root.innerHTML += "
"+body+"
"; - 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); + let main_clas = clas.split(" ")[0]; + // if (body == null || body == "") body = "[]"; + try{ + load_obj(main_clas,(db_data)=>{ + // let data = db_data; + // body = data["img"]; + // console.log(data["img"].toString()); + // console.log(db_data[0]); + // console.log(clas,x,y,body,parent); + // console.log(id); + // root.innerHTML += "
"+body+"
"; + // let img = document.createElement("img"); + let obj = document.createElement("img"); + obj.id = id; + clas= clas.split(" "); + 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(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); - } - }) + if (keys != "width" && keys != "height"){ + Object.entries(values).forEach(([key, value]) => { + 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); + } + }) + } + 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`); }); diff --git a/views/admin.ejs b/views/admin.ejs index a9cf125..5f67cb6 100644 --- a/views/admin.ejs +++ b/views/admin.ejs @@ -13,13 +13,14 @@

hello admin

-
+
Image preview...
- + +
@@ -40,26 +41,50 @@ } } - async function img(){ - var preview = document.querySelector('img').src; - console.log(preview); - fetch(preview) - .then(res => res.blob()) - .then(blob => { - let dataUrl = blobToDataUrl(blob); - console.log(blob) - console.log(dataUrl) - }) - } - function blobToDataUrl(blob) { - let reader = new FileReader() - reader.readAsDataURL(blob) - reader.onload = function(){ - dataUrl = reader.result - console.log(dataUrl) //DataURL - return dataUrl; - } + // async function toblob(callback){ + // var preview = document.querySelector('img').src; + // // console.log(preview); + // fetch(preview) + // .then(res => res.blob()) + // .then(blob => { + // // let dataUrl = blobToDataUrl(blob); + // console.log(blob) + // callback(blob); + // // console.log(dataUrl) + // }) + // } + + function create_obj(){ + let name = document.getElementById("nobj_name").value; + let description = document.getElementById("nobj_description").value; + var img = document.querySelector('img').src; + 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; + // } + // } <%- include('./reg.ejs') %> diff --git a/views/project.ejs b/views/project.ejs index 196963f..53ce5c0 100644 --- a/views/project.ejs +++ b/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 @@ -
-
-
+
-
+
trash bin
-
-
+
+ +
0
+
+
-
-
+
+ +
0
+
+
+