modified: index.js
modified: public/lib/fn.js
new file: public/lib/inter_temp.js
modified: templates.js
new file: views/template.ejs
modified: views/templates.ejs
added templates
This commit is contained in:
29
index.js
29
index.js
@ -346,7 +346,18 @@ app.post("/admin/users/find", (req,res) => {try{
|
|||||||
|
|
||||||
|
|
||||||
// templates
|
// templates
|
||||||
app.post('/admin/template/save', (req, res) => {try{
|
app.get("/template/load/:name" , (req,res) =>{
|
||||||
|
res.render('template',{proj_name:req.params["name"]});
|
||||||
|
})
|
||||||
|
app.post("/template/get", (req,res) => {try{
|
||||||
|
let inp = req.body;
|
||||||
|
let cook = req.cookies;
|
||||||
|
func.sid(cook,res,()=>{
|
||||||
|
templates.load(inp,cook,res);
|
||||||
|
})
|
||||||
|
} catch (error) {route_err({req:req,error:error});}
|
||||||
|
})
|
||||||
|
app.post('/template/save', (req, res) => {try{
|
||||||
let inp = req.body;
|
let inp = req.body;
|
||||||
let cook = req.cookies;
|
let cook = req.cookies;
|
||||||
func.sid(cook,res,()=>{
|
func.sid(cook,res,()=>{
|
||||||
@ -362,6 +373,14 @@ app.post("/admin/template/rename", (req,res) => {try{
|
|||||||
},true,true)
|
},true,true)
|
||||||
} catch (error) {route_err({req:req,error:error});}
|
} catch (error) {route_err({req:req,error:error});}
|
||||||
})
|
})
|
||||||
|
app.post("/template/group/loads", (req,res) => {try{
|
||||||
|
let inp = req.body;
|
||||||
|
let cook = req.cookies;
|
||||||
|
func.sid(cook,res,()=>{
|
||||||
|
templates.load_groups(inp,cook,res);
|
||||||
|
},true,true)
|
||||||
|
} catch (error) {route_err({req:req,error:error});}
|
||||||
|
})
|
||||||
app.post("/admin/template/delete", (req,res) => {try{
|
app.post("/admin/template/delete", (req,res) => {try{
|
||||||
let inp = req.body;
|
let inp = req.body;
|
||||||
let cook = req.cookies;
|
let cook = req.cookies;
|
||||||
@ -370,14 +389,6 @@ app.post("/admin/template/delete", (req,res) => {try{
|
|||||||
},true,true)
|
},true,true)
|
||||||
} catch (error) {route_err({req:req,error:error});}
|
} catch (error) {route_err({req:req,error:error});}
|
||||||
})
|
})
|
||||||
app.post("/template/load", (req,res) => {try{
|
|
||||||
let inp = req.body;
|
|
||||||
let cook = req.cookies;
|
|
||||||
func.sid(cook,res,()=>{
|
|
||||||
templates.load(inp,cook,res);
|
|
||||||
})
|
|
||||||
} catch (error) {route_err({req:req,error:error});}
|
|
||||||
})
|
|
||||||
app.post("/template/loads", (req,res) => {try{
|
app.post("/template/loads", (req,res) => {try{
|
||||||
let inp = req.body;
|
let inp = req.body;
|
||||||
let cook = req.cookies;
|
let cook = req.cookies;
|
||||||
|
|||||||
@ -361,26 +361,26 @@ async function removeImageBackground(image) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$.post( "/get_objs")
|
// $.post( "/get_objs")
|
||||||
.done(function( res ) {
|
// .done(function( res ) {
|
||||||
if(res["out"] == "good"){
|
// if(res["out"] == "good"){
|
||||||
// console.log(res["body"]);
|
// // console.log(res["body"]);
|
||||||
let sources = [];
|
// let sources = [];
|
||||||
res["body"].forEach(element => {
|
// res["body"].forEach(element => {
|
||||||
sources.push(element["img"]);
|
// sources.push(element["img"]);
|
||||||
if(element == res["body"].at(-1)){
|
// if(element == res["body"].at(-1)){
|
||||||
// console.log(sources);
|
// // console.log(sources);
|
||||||
preloadImages(sources,()=>{
|
// preloadImages(sources,()=>{
|
||||||
// console.log("cached");
|
// // console.log("cached");
|
||||||
callback();
|
// callback();
|
||||||
sources.forEach(element => {
|
// // sources.forEach(element => {
|
||||||
console.log(element,is_cached(element));
|
// // console.log(element,is_cached(element));
|
||||||
});
|
// // });
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
function is_cached(img_url){
|
function is_cached(img_url){
|
||||||
var imgEle = document.createElement("img");
|
var imgEle = document.createElement("img");
|
||||||
|
|||||||
441
public/lib/inter_temp.js
Normal file
441
public/lib/inter_temp.js
Normal file
@ -0,0 +1,441 @@
|
|||||||
|
window.dragMoveListener = dragMoveListener;
|
||||||
|
let root = document.getElementById("drags");
|
||||||
|
let objs = { height:"2",width:"4",color:"#FFFFFF"};
|
||||||
|
let objs_store = {};
|
||||||
|
let proj_from = "cloud";
|
||||||
|
let cur_obj;
|
||||||
|
let objs_back = [];
|
||||||
|
let objs_forw = [];
|
||||||
|
let proj_state = "loading";
|
||||||
|
let cm_mod = 2;
|
||||||
|
|
||||||
|
function create(clas,x,y,color = null,id,size,layer = 0){
|
||||||
|
let main_clas = clas.split(" ")[0];
|
||||||
|
// if (body == null || body == "") body = "[]";
|
||||||
|
let obj = document.createElement("img");
|
||||||
|
obj.id = id;
|
||||||
|
obj.alt = id;
|
||||||
|
clas= clas.split(" ");
|
||||||
|
clas.forEach(cl => {
|
||||||
|
obj.classList.add(cl);
|
||||||
|
});
|
||||||
|
get_obj(main_clas,(db_data)=>{
|
||||||
|
// console.log(db_data);
|
||||||
|
// console.log(db_data);
|
||||||
|
// db_data.forEach(db_data => {
|
||||||
|
// });
|
||||||
|
if (db_data == null) {
|
||||||
|
delete objs[main_clas];
|
||||||
|
reload();
|
||||||
|
// if(proj_from == "cloud"){
|
||||||
|
// // save(()=>{
|
||||||
|
// // // goto("/proj/load/"+proj_name);
|
||||||
|
// // },false);
|
||||||
|
// }
|
||||||
|
// else if (proj_from == "local"){
|
||||||
|
// save_local();
|
||||||
|
// load_proj_local();
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
else if (db_data != null){
|
||||||
|
make(objs_store[main_clas]["img"])
|
||||||
|
}
|
||||||
|
function make(img){
|
||||||
|
// console.log(db_data);
|
||||||
|
obj.src = img;
|
||||||
|
obj.title = `${db_data["name"].replaceAll("$"," ").split("~g")[0]}\nцена:${db_data["cost"]}\nширина:${db_data["width"]}см высота:${db_data["height"]}см`;
|
||||||
|
obj.setAttribute("cost",db_data["cost"])
|
||||||
|
obj.setAttribute("colors",Boolean(db_data["colors"]))
|
||||||
|
obj.setAttribute("data-img",img)
|
||||||
|
obj.setAttribute("gid",db_data["gid"])
|
||||||
|
obj.setAttribute("pid",db_data["pid"])
|
||||||
|
obj.setAttribute("color",color)
|
||||||
|
// drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * cm_mod} ${db_data["height"] * cm_mod})`;
|
||||||
|
if(size){
|
||||||
|
obj.style.width = `${db_data["width"] * cm_mod}px`;
|
||||||
|
obj.style.height = `${db_data["height"] * cm_mod}px`;
|
||||||
|
}
|
||||||
|
if (color != null){
|
||||||
|
obj_color_change(color,obj)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
calc_total();
|
||||||
|
})
|
||||||
|
obj.setAttribute("decoding","async");
|
||||||
|
obj.setAttribute("loading","lazy");
|
||||||
|
if(id != "none"){obj.setAttribute("onclick",`obj_click("${id}")`);}
|
||||||
|
// console.log(main_clas);
|
||||||
|
if(main_clas.split("~p~").at(-1) == "Бизиборды"){
|
||||||
|
obj.setAttribute("layer",9999);
|
||||||
|
obj.style.zIndex = 9999;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
obj.setAttribute("layer",layer);
|
||||||
|
obj.style.zIndex = layer;
|
||||||
|
}
|
||||||
|
root.append(obj);
|
||||||
|
set_pos(obj,x,y);
|
||||||
|
}
|
||||||
|
|
||||||
|
function obj_click(id){
|
||||||
|
if (cur_obj != id){
|
||||||
|
let obj = document.getElementById(id);
|
||||||
|
|
||||||
|
let cur_layer = obj.style.zIndex;
|
||||||
|
|
||||||
|
cur_obj = id;
|
||||||
|
if(cur_layer=="9999"){
|
||||||
|
document.getElementsByClassName("layer_changer")[0].style.pointerEvents = "none";
|
||||||
|
document.getElementById("layer_inp").value = "-";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.getElementsByClassName("layer_changer")[0].style.pointerEvents = "all";
|
||||||
|
document.getElementById("layer_inp").value = cur_layer;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (obj.getAttribute("colors") == "true"){
|
||||||
|
clear_palette();
|
||||||
|
obj_colors_load(()=>{
|
||||||
|
document.getElementById("obj_color_div").style.display = "flex";
|
||||||
|
if( document.getElementById(`color_${obj.getAttribute("color")}`) != null){
|
||||||
|
document.getElementById(`color_${obj.getAttribute("color")}`).style.border = "1px blue solid"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.getElementById("obj_color_div").style.display = "none";
|
||||||
|
}
|
||||||
|
obj_selection();
|
||||||
|
// console.log(obj.);
|
||||||
|
}
|
||||||
|
function obj_selection(){
|
||||||
|
let drags = document.getElementsByClassName("drag");
|
||||||
|
Object.values(drags).forEach(element => {
|
||||||
|
// console.log(element.id,cur_obj);
|
||||||
|
if (element.id != cur_obj){
|
||||||
|
element.style.border = "0px";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
element.style.border = "2px black solid";
|
||||||
|
element.style.borderRadius = "0.2vw";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize_drags(){
|
||||||
|
document.getElementById('drags').setAttribute("data-x",document.getElementsByClassName("wall")[0].getBoundingClientRect().left.toString()+"px");
|
||||||
|
document.getElementById('drags').style.left = document.getElementsByClassName("wall")[0].getBoundingClientRect().left.toString()+"px";
|
||||||
|
document.getElementById('drags').style.width = document.getElementsByClassName("wall")[0].style.width;
|
||||||
|
document.getElementsByClassName("zones")[0].style.height = document.getElementsByClassName("wall")[0].style.height;
|
||||||
|
drag_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function wall_size_change(type,value = null){
|
||||||
|
if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
|
||||||
|
|
||||||
|
let wall = document.getElementsByClassName("wall")[0];
|
||||||
|
let drags = document.getElementById("drags");
|
||||||
|
let scroll;
|
||||||
|
if(type != null && type == "width") {
|
||||||
|
if (value == null) scroll = parseFloat(document.getElementById("wall_width").value);
|
||||||
|
else if (value != null) scroll = value;
|
||||||
|
// document.getElementById("wall_width_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
|
||||||
|
// document.getElementById("wall_width_value").innerHTML = `${scroll}м`;
|
||||||
|
|
||||||
|
// console.log(scroll);
|
||||||
|
wall.style.width = `${(scroll * 100) * cm_mod}px`;
|
||||||
|
wall.style.left = drags.getBoundingClientRect().left;
|
||||||
|
objs["width"] = scroll;
|
||||||
|
}
|
||||||
|
if(type != null && type == "height") {
|
||||||
|
if (value == null) scroll = parseFloat(document.getElementById("wall_height").value);
|
||||||
|
else if (value != null) scroll = value;
|
||||||
|
// document.getElementById("wall_height_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
|
||||||
|
// document.getElementById("wall_height_value").innerHTML = `${scroll}м`;
|
||||||
|
|
||||||
|
// console.log(scroll);
|
||||||
|
wall.style.height = `${(scroll * 100) * cm_mod}px`;
|
||||||
|
objs["height"] = scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function calc_total(start = false){
|
||||||
|
document.getElementById("cost_list").innerHTML = ""
|
||||||
|
if (start) {
|
||||||
|
document.getElementById("proj_cost_text").innerText = `Стоимость: ${objs["total"]} руб.`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let total=0;
|
||||||
|
Object.entries(objs).forEach(([key,value]) => {
|
||||||
|
// console.log(key);
|
||||||
|
if(key != "height"&&key!="width"&key!="total"){
|
||||||
|
// console.log(Object.keys(value).length);
|
||||||
|
// console.log(objs_store[key]);
|
||||||
|
if(objs_store[key] != null && objs_store[key]["cost"] > 0 && JSON.parse(document.getElementById(`group_drop-${objs_store[key]["pid"]}`).getAttribute("no-cost")) == false){
|
||||||
|
// console.log(key,value);
|
||||||
|
total += parseInt(parseInt(objs_store[key]["cost"]) * Object.keys(value).length);
|
||||||
|
let obj_cost_div = document.createElement("li");
|
||||||
|
obj_cost_div.innerHTML =
|
||||||
|
`<div style="display:flex;"> ` +
|
||||||
|
`<div id='obj_cost_name' style='font-size:calc(var(--main-font-size)/1);'>${key.split("~g~")[0].replaceAll("$"," ")}`+
|
||||||
|
`<div id='obj_cost_count'> ${Object.keys(value).length}X</div> </div>`+
|
||||||
|
`</div>`+
|
||||||
|
`<div id='obj_cost'>${parseInt(parseInt(objs_store[key]["cost"]) * Object.keys(value).length)}</div>`;
|
||||||
|
document.getElementById("cost_list").append(obj_cost_div);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// console.log(Object.keys(objs).at(-1));
|
||||||
|
});
|
||||||
|
// return total;
|
||||||
|
|
||||||
|
objs["total"] = total;
|
||||||
|
document.getElementById("proj_cost_text").innerText = `стоимость: ${total} руб.`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function load(objss){
|
||||||
|
proj_state = "loading";
|
||||||
|
// objs = JSON.parse($.cookie("objs"));
|
||||||
|
// console.log(objs);
|
||||||
|
objs = objss;
|
||||||
|
Object.entries(objs).forEach(([keys, values]) => {
|
||||||
|
// console.log(keys,values);
|
||||||
|
if (keys != "width" && keys != "height" && keys != "color" && keys != "grided"){
|
||||||
|
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["color"],key,true,value["layer"]);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById(`wall_${keys}`).value = values;
|
||||||
|
wall_size_change(keys,values);
|
||||||
|
// document.getElementById("drags").style.left = $(".dropzone")[0].getBoundingClientRect().x;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (keys == "color"){
|
||||||
|
document.getElementById("wall").style.backgroundColor = values;
|
||||||
|
}
|
||||||
|
if (keys == Object.keys(objs).at(-1)){
|
||||||
|
proj_state = "loaded";
|
||||||
|
loaded();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
resize_drags();
|
||||||
|
}
|
||||||
|
function reload(save = false){
|
||||||
|
// objs = JSON.parse($.cookie("objs"));
|
||||||
|
// console.log(objs);
|
||||||
|
document.getElementById("drags").innerHTML = "";
|
||||||
|
load(objs);
|
||||||
|
if(save){save(()=>{},false)}
|
||||||
|
}
|
||||||
|
|
||||||
|
function load_proj_cloud(){
|
||||||
|
proj_from = "cloud";
|
||||||
|
document.getElementById("drags").innerHTML = "";
|
||||||
|
// document.getElementById("top_panel_center").innerText = `загрузка ${proj_name} из облака`;
|
||||||
|
$.post( "/template/get",{name:proj_name})
|
||||||
|
.done(function( res ) {
|
||||||
|
if(res["out"] == "good"){
|
||||||
|
// console.log("good");
|
||||||
|
// console.log(JSON.parse(`'${res["body"]}'`));
|
||||||
|
// console.log(JSON.parse(res["body"]));
|
||||||
|
// $.cookie("objs",res["body"]);
|
||||||
|
load(JSON.parse(res["body"]));
|
||||||
|
// document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;
|
||||||
|
}
|
||||||
|
else if(res["out"] == "bad proj"){
|
||||||
|
// console.log("bad");
|
||||||
|
save(()=>{
|
||||||
|
goto("/template/load"+proj_name);
|
||||||
|
},false);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function save(callback,with_pic = true){
|
||||||
|
// console.log(objs);
|
||||||
|
proj_from = "cloud";
|
||||||
|
if(with_pic){
|
||||||
|
proj_img((src)=>{
|
||||||
|
make_save(src);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
make_save();
|
||||||
|
}
|
||||||
|
function make_save(src = "img/img_placeholder.webp"){
|
||||||
|
$.post( "/template/save", {proj:JSON.stringify(objs),name:proj_name,img:src})
|
||||||
|
.done(function( res ) {
|
||||||
|
if(res["out"] == "good"){
|
||||||
|
// console.log(scr)
|
||||||
|
// console.log("good");
|
||||||
|
if(callback) callback(res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function load_objs(callback,group){
|
||||||
|
// let select = document.getElementById("group_select");
|
||||||
|
// console.log(group);
|
||||||
|
$.post( "/get_objs",{gid:group})
|
||||||
|
.done(function( res ) {
|
||||||
|
if(res["out"] == "good"){
|
||||||
|
// console.log(res["body"]);
|
||||||
|
res["body"].forEach(element => {
|
||||||
|
objs_store[`${element["name"]}`] = {img:element["img"],height:element["height"],width:element["width"],id:element["id"],name:element["name"],cost:element["cost"],colors:element["colors"],gid:element["gid"],pid:element["pid"]}
|
||||||
|
});
|
||||||
|
callback(res["body"]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_obj(clas,callback){
|
||||||
|
if(objs_store[clas] != null){
|
||||||
|
callback(objs_store[clas]);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
load_objs(()=>{
|
||||||
|
callback(objs_store[clas]);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function load_obj(name,key,callback){
|
||||||
|
$.post( "/get_obj",{name:name,key:key})
|
||||||
|
.done(function( res ) {
|
||||||
|
if(res["out"] == "good"){
|
||||||
|
// console.log(res["body"]);
|
||||||
|
callback(res["body"]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragMoveListener (event) {
|
||||||
|
var drag = event.target
|
||||||
|
if(drag.id != "none"){obj_click(drag.id)}
|
||||||
|
var x = (parseFloat(drag.getAttribute('data-x')) || 0) + event.dx
|
||||||
|
var y = (parseFloat(drag.getAttribute('data-y')) || 0) + event.dy
|
||||||
|
set_pos(drag,x,y);
|
||||||
|
}
|
||||||
|
let dragzone = document.getElementsByClassName('wall')[0];
|
||||||
|
interact('.drag').draggable({
|
||||||
|
inertia: true,
|
||||||
|
modifiers: [
|
||||||
|
interact.modifiers.restrictRect({restriction: dragzone,endOnly: true,elementRect:{ left: 0.15, right: 0.85, top: 0, bottom: 1 }}),
|
||||||
|
interact.modifiers.snap({targets: [interact.snappers.grid({ x: cm_mod, y: cm_mod })],range: Infinity,relativePoints: [ { x: 0, y: 0 } ]}),
|
||||||
|
],
|
||||||
|
autoScroll: true,
|
||||||
|
listeners: {move: dragMoveListener, end (event) {}}
|
||||||
|
})
|
||||||
|
|
||||||
|
// interact('.trash').dropzone({
|
||||||
|
// accept: '.drag',
|
||||||
|
// overlap: 0.2,
|
||||||
|
|
||||||
|
// ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;
|
||||||
|
|
||||||
|
// // console.log(drag.classList);
|
||||||
|
// if(objs[drag.classList[0]] != null&&objs[drag.classList[0]][drag.id] != null) {
|
||||||
|
// delete objs[drag.classList[0]][drag.id];
|
||||||
|
// }
|
||||||
|
// calc_total()
|
||||||
|
|
||||||
|
// zone.classList.add('drop-target');drag.classList.add('can-drop');
|
||||||
|
// drag.remove();
|
||||||
|
// },
|
||||||
|
// 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.id);
|
||||||
|
// // console.log(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('.dropzone').dropzone({
|
||||||
|
accept: '.drag',
|
||||||
|
overlap: 0.5,
|
||||||
|
|
||||||
|
ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;
|
||||||
|
|
||||||
|
if (objs[drag.classList[0]] == null){
|
||||||
|
objs[drag.classList[0]] = {};
|
||||||
|
}
|
||||||
|
if(drag.id == "none") drag.id = get_id(drag.classList[0]);
|
||||||
|
if (objs[drag.classList[0]][drag.id] == null){
|
||||||
|
objs[drag.classList[0]][drag.id] = {};
|
||||||
|
drag.setAttribute("onclick",`obj_click("${drag.id}")`);
|
||||||
|
calc_total()
|
||||||
|
}
|
||||||
|
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
|
||||||
|
|
||||||
|
if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
|
||||||
|
objs[drag.classList[0]][drag.id] = {y:drag.getAttribute('data-y'),x:drag.getAttribute('data-x'),body:drag.innerHTML,color:drag.getAttribute("color"),layer:drag.getAttribute('layer')};
|
||||||
|
drag.classList.add('in_zone');drag.classList.remove('can-drop');
|
||||||
|
// console.log(objs["KeyBoard~g~не$основное"]["KeyBoard~g~не$основное_1"]);
|
||||||
|
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
|
||||||
|
if(drag.classList[1] == "spawn" && drag.classList[0] == zone.classList[0]){
|
||||||
|
get_obj(drag.classList[0],(db_data)=>{
|
||||||
|
// drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * cm_mod} ${db_data["height"] * cm_mod})`;
|
||||||
|
drag.style.width = `${db_data["width"] * cm_mod}px`;
|
||||||
|
drag.style.height = `${db_data["height"] * cm_mod}px`;
|
||||||
|
|
||||||
|
// console.log(db_data);
|
||||||
|
})
|
||||||
|
let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
|
||||||
|
let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
|
||||||
|
create(`${zone.classList[0]} spawn drag`,x,y,null,`none`,false,0);
|
||||||
|
if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
|
||||||
|
drag.classList.remove('spawn');
|
||||||
|
}
|
||||||
|
zone.classList.remove('drop-target');
|
||||||
|
},
|
||||||
|
ondrop: function (event) {var drag = event.relatedTarget;
|
||||||
|
drag.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 spawns = document.getElementsByClassName("spawn");
|
||||||
|
Object.entries(spawns).forEach(([key, spawn]) => {
|
||||||
|
spawn.parentElement.removeChild(spawn);
|
||||||
|
});
|
||||||
|
let zones = document.getElementsByClassName("createzone");
|
||||||
|
Object.entries(zones).forEach(([key, zone]) => {
|
||||||
|
let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
|
||||||
|
let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
|
||||||
|
create(`${zone.classList[0]} spawn drag`,x,y,null,`none`,false,0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_id(clas){
|
||||||
|
if(objs[clas] == null){ return `${clas}_0`}
|
||||||
|
else{
|
||||||
|
let count = Object.keys(objs[clas]).length;
|
||||||
|
return `${clas}_${count}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
63
templates.js
63
templates.js
@ -5,9 +5,9 @@ const vars = require('./vars');
|
|||||||
|
|
||||||
module.exports.load = (inp,cook,res)=>{
|
module.exports.load = (inp,cook,res)=>{
|
||||||
try {
|
try {
|
||||||
db.gv("projects","id",inp["id"],(pdata)=>{pdata = pdata[0];
|
db.gv("templates","name",`'${inp["name"]}'`,(pdata)=>{pdata = pdata[0];
|
||||||
|
console.log(pdata);
|
||||||
if (pdata != null){
|
if (pdata != null){
|
||||||
func.log(`good boy ${cook["uuid"]} loaded project ${pdata["name"]}`);
|
|
||||||
res.send({out:"good",body:pdata["body"]});
|
res.send({out:"good",body:pdata["body"]});
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
@ -15,72 +15,93 @@ module.exports.load = (inp,cook,res)=>{
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
func.log("backend project loading error - ");
|
func.log("backend template loading error - ");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports.load_all = (inp,cook,res)=>{
|
||||||
|
try {
|
||||||
|
db.gav("templates","0",(pdata)=>{
|
||||||
|
res.send({out:"good",body:pdata});
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
func.log("backend templates loading err0r - " - error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports.loads = (inp,cook,res)=>{
|
module.exports.loads = (inp,cook,res)=>{
|
||||||
try {
|
try {
|
||||||
db.gav("projects","0",(pdata)=>{
|
db.gv("templates",'gid',`${inp["gid"]}`,(pdata)=>{
|
||||||
res.send({out:"good",body:pdata});
|
res.send({out:"good",body:pdata});
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
func.log("backend projects loading err0r - " - error);
|
func.log("backend templates loading err0r - " - error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
module.exports.load_groups = (inp,cook,res)=>{
|
||||||
|
try {
|
||||||
|
db.gav("template_groups","0",(pdata)=>{
|
||||||
|
res.send({out:"good",body:pdata});
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
func.log("backend templates loading err0r - " - error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports.rename = (inp,cook,res)=>{
|
module.exports.rename = (inp,cook,res)=>{
|
||||||
try {
|
try {
|
||||||
db.gv("projects","`id`",`'${inp["id"]}'`,(proj_name)=>{ proj_name = proj_name[0];
|
db.gv("templates","`id`",`'${inp["id"]}'`,(proj_name)=>{ proj_name = proj_name[0];
|
||||||
// console.log(proj_name);
|
// console.log(proj_name);
|
||||||
if(proj_name == null){
|
if(proj_name == null){
|
||||||
db.sv("projects","name",`${inp["name"]}`,"id",`${inp["id"]}`, (db)=>{
|
db.sv("templates","name",`${inp["name"]}`,"id",`${inp["id"]}`, (db)=>{
|
||||||
res.send({out:"good"});
|
res.send({out:"good"});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
func.log("backend projects loading err0r - " - error);
|
func.log("backend templates loading err0r - " - error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports.del = (inp,cook,res)=>{
|
module.exports.del = (inp,cook,res)=>{
|
||||||
try {
|
try {
|
||||||
db.gv("projects","id",`'${inp["id"]}'`,(pdata)=>{pdata=pdata[0]
|
db.gv("templates","name",`'${inp["name"]}'`,(pdata)=>{pdata=pdata[0]
|
||||||
// res.send({out:"good",body:pdata});
|
// res.send({out:"good",body:pdata});
|
||||||
if(pdata != null){
|
if(pdata != null){
|
||||||
db.dl("projects","id",pdata["id"],()=>{
|
db.dl("templates","id",pdata["id"],()=>{
|
||||||
res.send({out:"good"});
|
res.send({out:"good"});
|
||||||
func.log(`good boy ${cook["uuid"]} deleted project ${inp["name"]}`);
|
func.log(`good boy ${cook["uuid"]} deleted project ${inp["name"]}`);
|
||||||
})
|
},true)
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
res.send({out:"bad"});
|
res.send({out:"bad"});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
func.log("backend projects delete err0r - " - error);
|
func.log("backend templates delete err0r - " - error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports.save = (inp,cook,res)=>{
|
module.exports.save = (inp,cook,res)=>{
|
||||||
try {
|
try {
|
||||||
db.gv("projects","id",`'${inp["id"]}'`,(pdata)=>{pdata = pdata[0]
|
db.gv("templates","name",`'${inp["name"]}'`,(pdata)=>{pdata = pdata[0]
|
||||||
var date = moment().format('YYYY-MM-DD');
|
var date = moment().format('YYYY-MM-DD');
|
||||||
var time = moment().format('hh:mm:ss');
|
var time = moment().format('hh:mm:ss');
|
||||||
if(pdata == null){
|
if(pdata == null){
|
||||||
// func.log("proj not in");
|
// func.log("proj not in");
|
||||||
// func.log(pname,udata["id"],proj);
|
// func.log(pname,udata["id"],proj);
|
||||||
func.log(`good boy ${cook["uuid"]} created project ${inp["name"]}`);
|
func.log(`good boy ${cook["uuid"]} created template ${inp["name"]}`);
|
||||||
db.nr("projects","`name`,`body`,`img`,creation_date",`'${inp["name"]}','${inp["proj"]}','${inp["img"]}','${date+"T"+time}'`,true);
|
db.nr("templates","`name`,`body`,`img`,`creation_date`,`gid`",`'${inp["name"]}','${inp["proj"]}','${inp["img"]}','${date+"T"+time}','${inp["gid"]}'`,true);
|
||||||
res.send({out:"good"});
|
res.send({out:"good"});
|
||||||
} else if (pdata != null){
|
} else if (pdata != null){
|
||||||
if(inp["proj"] != JSON.stringify({height:"2",width:"4"})){
|
if(inp["proj"] != JSON.stringify({height:"2",width:"4"})){
|
||||||
db.gv("projects","id",pdata["id"],(projin)=>{projin = projin[0]
|
db.gv("templates","id",pdata["id"],(projin)=>{projin = projin[0]
|
||||||
db.sv("projects","body",inp["proj"],"id",projin["id"],()=>{},true);
|
db.sv("templates","body",inp["proj"],"id",projin["id"],()=>{},true);
|
||||||
db.sv("projects","last_change_date",`${date+"T"+time}`,"id",projin["id"],()=>{},true);
|
db.sv("templates","last_change_date",`${date+"T"+time}`,"id",projin["id"],()=>{},true);
|
||||||
if(inp["img"] != "") db.sv("projects","img",inp["img"],"id",projin["id"],()=>{});
|
if(inp["img"] != "") db.sv("templates","img",inp["img"],"id",projin["id"],()=>{},true);
|
||||||
func.log(`good boy ${cook["uuid"]} saved project ${projin["name"]}`);
|
func.log(`good boy ${cook["uuid"]} saved template ${projin["name"]}`);
|
||||||
// func.log("proj in");
|
// func.log("proj in");
|
||||||
res.send({out:"good"});
|
res.send({out:"good"});
|
||||||
})
|
})
|
||||||
@ -91,6 +112,6 @@ module.exports.save = (inp,cook,res)=>{
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
func.log("backend project saving err0r - "+error);
|
func.log("backend templates saving err0r - "+error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
661
views/template.ejs
Normal file
661
views/template.ejs
Normal file
@ -0,0 +1,661 @@
|
|||||||
|
<%- include('./static/start.ejs',{name:proj_name,async:true}) %>
|
||||||
|
<%- include('./header.ejs') %>
|
||||||
|
<script src="/lib/interact.js"></script>
|
||||||
|
<script src="/lib/html2canvas.js"></script>
|
||||||
|
<style>
|
||||||
|
.drag{
|
||||||
|
height: 5vw;
|
||||||
|
width: 5vw;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
z-index: 10;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drags{
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.spawn{
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zones{
|
||||||
|
margin-block: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall {
|
||||||
|
/* border: dashed 4px transparent; */
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
position: absolute;
|
||||||
|
inset: 0px;
|
||||||
|
margin: 5px auto;
|
||||||
|
width: 400px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #fff;
|
||||||
|
/* background-image: url("/img/bg1red.png"); */
|
||||||
|
background-size: 200px;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-position: bottom 0px left 0px;
|
||||||
|
border: 2px solid black;
|
||||||
|
/* overflow: visible; */
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.createzone {
|
||||||
|
background-color: #bfe4ff;
|
||||||
|
border: dashed 4px transparent;
|
||||||
|
border-radius: 0.4vw;
|
||||||
|
height: 3vw;
|
||||||
|
width: 3vw;
|
||||||
|
margin: 10px;
|
||||||
|
margin-top: 0px;
|
||||||
|
padding: 0.8vw;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trash {
|
||||||
|
background-color: #bfe4ff;
|
||||||
|
border: dashed 4px transparent;
|
||||||
|
border-radius: 4px;
|
||||||
|
/* margin: 10px auto 30px; */
|
||||||
|
/* padding: 10px; */
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
text-align: center;
|
||||||
|
/* z-index: -1; */
|
||||||
|
}
|
||||||
|
.czones{
|
||||||
|
display: flex;
|
||||||
|
margin: 0px auto;
|
||||||
|
margin-top: 3vh;
|
||||||
|
/* justify-content: space-around; */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 75%;
|
||||||
|
height: 40vh;
|
||||||
|
/* overflow-x: auto; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-active {
|
||||||
|
border-color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .drop-target {
|
||||||
|
background-color: #29e;
|
||||||
|
border-color: #fff;
|
||||||
|
border-style: solid;
|
||||||
|
} */
|
||||||
|
|
||||||
|
#proj_top{
|
||||||
|
margin: auto;
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
#proj_name{
|
||||||
|
background-color: #aaa;
|
||||||
|
border: 0px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs{
|
||||||
|
display: flex;
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
padding-block: 20px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
/* margin-top: 50px; */
|
||||||
|
}
|
||||||
|
#group{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="project_menu" class="cmenu">
|
||||||
|
<button id='proj_csave_btn' onclick='save_proj()'>сохранить в облако</button> <br>
|
||||||
|
<!-- <button id='proj_cload_btn' onclick='load_proj_cloud()'>загрузить из облака</button> <br> -->
|
||||||
|
<!-- <button id='proj_lsave_btn' onclick='save_proj_local()'>сохранить на локальное хранилище</button> <br>
|
||||||
|
<button id='proj_lload_btn' onclick='load_proj_local()'>загрузить из локальное хранилище</button> <br> -->
|
||||||
|
<!-- <button id='proj_del_btn' onclick='del_proj()'>удалить проект</button> <br> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <div class="dropzone"></div> -->
|
||||||
|
|
||||||
|
<div class="inputs">
|
||||||
|
<div id="wall_input" style="display: flex;justify-content: space-between;width: 95%;margin-left: 20px;">
|
||||||
|
<div style="display: flex;width: 16vw;justify-content: space-between;">
|
||||||
|
<label for="wall_height" style="margin: auto;">Высота стены</label>
|
||||||
|
<input type="text" id="wall_height" style="width: 5vw; text-align: center; border-radius: 0.5vw; border: 1px solid gray;" value="2" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');wall_size_change('height');resize_drags();">
|
||||||
|
<label for="wall_width" style="margin: auto;">М.</label>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;width: 16vw;justify-content: space-between;">
|
||||||
|
<label for="wall_width" style="margin: auto;">Длина стены</label>
|
||||||
|
<input type="text" id="wall_width" style="width: 5vw; text-align: center; border-radius: 0.5vw; border: 1px solid gray;" value="4" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');wall_size_change('width');resize_drags();">
|
||||||
|
<label for="wall_width" style="margin: auto;">М.</label>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;width: 16vw;justify-content: space-between;">
|
||||||
|
<label for="wall_color" style="margin: auto;">Цвет стены</label>
|
||||||
|
<input type="color" id="wall_color" style="width: 5vw; border-radius: 0.5vw; border: 1px solid gray; min-height: 3.9vw;" value="#FFFFFF" onchange="wall_color_change()">
|
||||||
|
</div>
|
||||||
|
<div id="cost_div" style="display: flex;width: 15vw;justify-content: space-between;">
|
||||||
|
<button id="proj_cost" class="menu_btn" style="width: 100%;z-index: 3;">
|
||||||
|
<div id="proj_cost_text" style="pointer-events: none;">Расчет стоимости</div>
|
||||||
|
<img src="/img/drop.png" style="width: 1vw;height: 0.5vw;pointer-events: none;" alt="\/">
|
||||||
|
</button>
|
||||||
|
<style>
|
||||||
|
#cost_list li{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 14vw;
|
||||||
|
padding-block: 0.4vw;
|
||||||
|
}
|
||||||
|
#cost_list{
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 0px;
|
||||||
|
margin-top: 59px;
|
||||||
|
position: absolute;
|
||||||
|
width: 14vw;
|
||||||
|
padding: 0.45vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<ul id="cost_list" class="cmenu">
|
||||||
|
</ul>
|
||||||
|
<!-- <div style="display: flex;"><div id="proj_cost"></div> руб.</div> -->
|
||||||
|
</div>
|
||||||
|
<!-- <div style="display: flex;width: 150px;justify-content: space-between;">
|
||||||
|
<label style="margin: auto;">Расчёт стоимости</label>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<!-- <img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="чёрная дыра"> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="zones" style="position: relative;">
|
||||||
|
<div id="drags">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="wall dropzone" id="wall"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display:flex; justify-content: space-around;"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="inputs" style="display: flex;justify-content: space-between;height: 5vh;">
|
||||||
|
<div id="obj_color_div" style="justify-content: space-evenly; width: 50vw;display: none;transform: translateX(30%);">
|
||||||
|
<label for="obj_colors" style="min-width: 10vw;">цвет объекта</label>
|
||||||
|
<div id="obj_colors" style="display: flex; width: 30vw;overflow: auto;height: 4.5vh;"></div>
|
||||||
|
<!-- <input id="obj_color" type="color" onchange="obj_color_change(event)"> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inputs" style="display: flex;justify-content: space-between;">
|
||||||
|
<style>
|
||||||
|
.btn_icon{
|
||||||
|
border: 1px solid gray;
|
||||||
|
border-radius: 0.5vw;
|
||||||
|
padding: 0.5vw;
|
||||||
|
height: 2vw;
|
||||||
|
width: 2vw;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn_icon img{
|
||||||
|
height: 2vw;
|
||||||
|
width: 2vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div style="display: flex;justify-content: space-between; width: 35vw;">
|
||||||
|
<div class="btn_icon"><img src="/img/icon/copy.png" alt="copy"></div>
|
||||||
|
<div class="btn_icon" onclick="go_back()"><img src="/img/icon/back.png" alt="back"></div>
|
||||||
|
<div class="btn_icon" onclick="go_forw()"><img src="/img/icon/forw.png" alt="forw"></div>
|
||||||
|
<div class="btn_icon" onclick="obj_del()"><img src="/img/icon/del.png" alt="del"></div>
|
||||||
|
<div class="layer_changer">
|
||||||
|
<div class="btn_icon layer_btn" onclick="obj_change_layer('up')"><img src="/img/icon/up.png" alt="up"></div>
|
||||||
|
<input id="layer_inp" type="number" oninput="obj_change_layer('inp')">
|
||||||
|
<div class="btn_icon layer_btn" onclick="obj_change_layer('down')"><img src="/img/icon/down.png" alt="down"></div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
#layer_inp{
|
||||||
|
width: 2vw;
|
||||||
|
appearance: textfield;
|
||||||
|
text-align: center;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
.layer_btn{
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
.layer_changer{
|
||||||
|
display: flex;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px gray solid;
|
||||||
|
border-radius: 0.5vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;justify-content: space-between; width: 15vw;">
|
||||||
|
<div><input type="checkbox" id="grid_checkbox" checked="true" onchange='grid_view(JSON.parse(event.target.checked));'><label for="grid_checkbox">Показывать сетку</label></div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;justify-content: space-between; width: 7vw;">
|
||||||
|
<div id="save_btn_icon" class="btn_icon" onclick="save_proj()"><img src="/img/icon/save.png" alt="save"></div>
|
||||||
|
<div class="btn_icon" onclick="img_download()"><img src="/img/icon/download.png" alt="load"></div>
|
||||||
|
<!-- <div class="btn_icon" onclick="document.getElementById('import_file').click();"><img src="/img/icon/download.png" alt="load"></div> -->
|
||||||
|
<!-- <input type='file' id="import_file" style="display: none;" accept="application/JSON" onchange='openFile(event,load_file)'> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inputs" style="display: flex;justify-content: space-between;margin-top: 0px;">
|
||||||
|
<div id="obj_group" style="display: flex;justify-content:space-evenly; width: 100vw;">
|
||||||
|
<!-- <button name="" id="group_drop" >Помехи на стене</button> -->
|
||||||
|
<style>
|
||||||
|
.obj_group{
|
||||||
|
/* width: 100%; */
|
||||||
|
display: flex;
|
||||||
|
padding-block: 0.3vw;
|
||||||
|
}
|
||||||
|
.obj_group label{
|
||||||
|
width: 90%;
|
||||||
|
/* padding-inline: 0.3vw; */
|
||||||
|
}
|
||||||
|
.group_drop{
|
||||||
|
width: 15vw;
|
||||||
|
padding: 2px;
|
||||||
|
min-width: 15vw;
|
||||||
|
}
|
||||||
|
.group_drop *{
|
||||||
|
pointer-events: none;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.group_drop img{
|
||||||
|
width: 1vw;
|
||||||
|
height: 0.5vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="obj_parts" style="min-width: 50vw;display: flex;justify-content: space-evenly;">
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.group_inp{
|
||||||
|
height: 1vw;
|
||||||
|
width: 1vw;
|
||||||
|
border: 0px;
|
||||||
|
border-radius: 0.4vw;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<ul id="group" class="cmenu"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="czones"></div>
|
||||||
|
<script src="/lib/inter_temp.js"></script>
|
||||||
|
<script>
|
||||||
|
let proj_name = "<%= proj_name %>";
|
||||||
|
document.getElementById("layer_inp").value = 0;
|
||||||
|
img_cache(()=>{})
|
||||||
|
|
||||||
|
|
||||||
|
if ( $.cookie("grid") != null){
|
||||||
|
document.getElementById("grid_checkbox").checked = JSON.parse($.cookie("grid"));
|
||||||
|
grid_view(JSON.parse($.cookie("grid")))
|
||||||
|
}else{
|
||||||
|
$.cookie("grid",true)
|
||||||
|
document.getElementById("grid_checkbox").checked = true;
|
||||||
|
grid_view(true)
|
||||||
|
}
|
||||||
|
function grid_view(check){
|
||||||
|
let grid = document.getElementsByClassName("wall")[0]
|
||||||
|
console.log(check);
|
||||||
|
if (check == false) {
|
||||||
|
grid.style.backgroundImage = "";
|
||||||
|
$.cookie("grid",false);
|
||||||
|
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
grid.style.backgroundImage = 'url("/img/bg1red.png")';
|
||||||
|
$.cookie("grid",true);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function img_download(){
|
||||||
|
msg("добавить на фото стоимость?",{type:"ask",res:(out)=>{
|
||||||
|
let wait_msg = msg("делаем фото",{type:"wait"})
|
||||||
|
proj_img((src)=>{
|
||||||
|
msg("изображение проекта готово",{time:3})
|
||||||
|
msg_del(wait_msg.id)
|
||||||
|
downloadImg(src,`${proj_name}.png`)
|
||||||
|
},out)
|
||||||
|
}})
|
||||||
|
}
|
||||||
|
|
||||||
|
function proj_img(callback,cost = false){
|
||||||
|
let width = (parseInt(document.getElementById("wall").style.width))
|
||||||
|
document.getElementById("drags").append(document.getElementById("wall"));
|
||||||
|
document.getElementById("drags").style.height = document.getElementById("wall").style.height;
|
||||||
|
document.getElementById("cost_list").style.left = "";
|
||||||
|
Object.values(document.getElementsByClassName("spawn")).forEach((spawn)=>{
|
||||||
|
spawn.src = "";
|
||||||
|
})
|
||||||
|
if(cost == true){
|
||||||
|
width += document.getElementById("proj_cost").getBoundingClientRect().width;
|
||||||
|
document.getElementById("drags").append(document.getElementById("cost_div"));
|
||||||
|
document.getElementById("cost_div").style.marginLeft = `${parseInt(document.getElementById("wall").style.width) + 4}px`;
|
||||||
|
document.getElementById("cost_list").style.display = "block";
|
||||||
|
}
|
||||||
|
html2canvas(document.getElementById("drags"),{
|
||||||
|
y:7,
|
||||||
|
x:2,
|
||||||
|
width:width,
|
||||||
|
logging:false,
|
||||||
|
scale:5
|
||||||
|
}).then(canvas => {
|
||||||
|
if(cost == true){
|
||||||
|
document.getElementById("cost_div").style.marginLeft = `0`;
|
||||||
|
document.getElementById("cost_list").style.display = "none";
|
||||||
|
document.getElementById("wall_input").append(document.getElementById("cost_div"));
|
||||||
|
}
|
||||||
|
document.getElementsByClassName("zones")[0].append(document.getElementById("wall"));
|
||||||
|
let src = "";
|
||||||
|
src = canvas.toDataURL();
|
||||||
|
// console.log(src);
|
||||||
|
callback(src)
|
||||||
|
drag_start();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function obj_colors_load(callback) {
|
||||||
|
let div = document.getElementById("obj_colors");
|
||||||
|
div.innerHTML = "";
|
||||||
|
load_colors((colors)=>{
|
||||||
|
Object.entries(colors).forEach(([key,value]) => {
|
||||||
|
// console.log(value);
|
||||||
|
let color_div = document.createElement("div");
|
||||||
|
color_div.style = `background-color: #${value["color"]}; border-radius: 50%;height: 2vw;min-width: 2vw;margin-inline: 0.5vw;`;
|
||||||
|
color_div.classList.add("color_palette");
|
||||||
|
color_div.id=`color_${value["color"]}`;
|
||||||
|
color_div.setAttribute("color",`${value["color"]}`)
|
||||||
|
color_div.setAttribute("onclick",`clear_palette();document.getElementById('color_${value["color"]}').style.border = "1px blue solid";obj_color_change('${value["color"]}')`)
|
||||||
|
color_div.title = `#${value["color"]}`;
|
||||||
|
div.append(color_div);
|
||||||
|
if(key = Object.keys(colors).at(-1)){
|
||||||
|
if(callback)callback();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function obj_color_change(color,in_obj = null){
|
||||||
|
if(color != "null"){
|
||||||
|
if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
|
||||||
|
let obj = (in_obj == null)? document.getElementById(cur_obj):in_obj;
|
||||||
|
// console.log(color);
|
||||||
|
color_change(color,obj.getAttribute("data-img"),(img)=>{
|
||||||
|
obj.src = img;
|
||||||
|
obj.setAttribute("color",color)
|
||||||
|
objs[obj.classList[0]][obj.id]["color"] = color;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function load_file(text){
|
||||||
|
if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
|
||||||
|
|
||||||
|
// console.log(text);
|
||||||
|
// console.log(objs);
|
||||||
|
try{
|
||||||
|
objs = JSON.parse(JSON.parse(text)["body"]);
|
||||||
|
}
|
||||||
|
catch{}
|
||||||
|
// console.log(objs);
|
||||||
|
reload();
|
||||||
|
// save((res)=>{
|
||||||
|
// goto("");
|
||||||
|
// // document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в облако`;
|
||||||
|
// },false)
|
||||||
|
}
|
||||||
|
|
||||||
|
function go_back(){
|
||||||
|
if(objs_back.length > 0){
|
||||||
|
objs_forw.push(objs);
|
||||||
|
objs = objs_back.at(-1);
|
||||||
|
objs_back.pop();
|
||||||
|
reload();
|
||||||
|
calc_total();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function go_forw(){
|
||||||
|
if(objs_forw.length > 0){
|
||||||
|
objs_back.push(objs);
|
||||||
|
objs = objs_forw.at(-1);
|
||||||
|
objs_forw.pop();
|
||||||
|
reload();
|
||||||
|
calc_total();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function obj_change_layer(type) {
|
||||||
|
let obj = document.getElementById(cur_obj);
|
||||||
|
if(obj != null){
|
||||||
|
let cur_layer = obj.style.zIndex;
|
||||||
|
if (type == "up" && cur_layer < 9999){
|
||||||
|
objs[obj.classList[0]][obj.getAttribute("id")].layer = parseInt(cur_layer) + 1;
|
||||||
|
obj.style.zIndex = parseInt(cur_layer) + 1;
|
||||||
|
document.getElementById("layer_inp").value = parseInt(cur_layer) + 1;
|
||||||
|
} else if (type == "down" && cur_layer > 0){
|
||||||
|
objs[obj.classList[0]][obj.getAttribute("id")].layer = parseInt(cur_layer) - 1;
|
||||||
|
obj.style.zIndex = parseInt(cur_layer) - 1;
|
||||||
|
document.getElementById("layer_inp").value = parseInt(cur_layer) - 1;
|
||||||
|
}
|
||||||
|
else if ((type == "inp")){
|
||||||
|
let inp_val = parseInt(document.getElementById("layer_inp").value);
|
||||||
|
if(inp_val >= 0 && inp_val < 9999){
|
||||||
|
objs[obj.classList[0]][obj.getAttribute("id")].layer = inp_val;
|
||||||
|
obj.style.zIndex = inp_val;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.getElementById("layer_inp").value = cur_layer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// console.log(objs[obj.classList[0]][obj.getAttribute("id")]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function obj_del(){
|
||||||
|
if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
|
||||||
|
document.getElementById("layer_inp").value = 0;
|
||||||
|
|
||||||
|
try{
|
||||||
|
let drag = document.getElementById(cur_obj);
|
||||||
|
if(drag.id != "none"){
|
||||||
|
console.log(cur_obj);
|
||||||
|
// console.log(drag.classList);
|
||||||
|
if(objs[drag.classList[0]] != null&&objs[drag.classList[0]][drag.id] != null) {
|
||||||
|
console.log(objs[drag.classList[0]]);
|
||||||
|
delete objs[drag.classList[0]][drag.id];
|
||||||
|
if (Object.keys(objs[drag.classList[0]]).length < 1){
|
||||||
|
delete objs[drag.classList[0]];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
calc_total()
|
||||||
|
drag.remove();
|
||||||
|
document.getElementById("obj_color_div").style.display = "none";
|
||||||
|
cur_obj = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch{msg("объект не выбран")}
|
||||||
|
}
|
||||||
|
|
||||||
|
function group_drop(){
|
||||||
|
let e = document.getElementById("group_drop")
|
||||||
|
setTimeout(()=>{
|
||||||
|
document.getElementById("group").style.display = "block";
|
||||||
|
// document.getElementById("group").style.left = document.getElementById("group_drop").getBoundingClientRect().left;
|
||||||
|
let childs = document.getElementById("group").getElementsByTagName("input");
|
||||||
|
let i = 0;
|
||||||
|
Object.entries(childs).forEach(([key,value]) => {
|
||||||
|
console.log(key,value);
|
||||||
|
if(value.checked == true){
|
||||||
|
get_objs(value)
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
if (i==0){
|
||||||
|
// document.getElementsByClassName("czones")[0].innerHTML = "";
|
||||||
|
drag_start()
|
||||||
|
// e.removeChild(e.getElementsByClassName(value))
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},1)
|
||||||
|
}
|
||||||
|
|
||||||
|
load_parts((db)=>{
|
||||||
|
let parts = document.getElementById("obj_parts");
|
||||||
|
Object.values(db).forEach((value)=>{
|
||||||
|
let part = document.createElement("button")
|
||||||
|
let part_text = document.createElement("div")
|
||||||
|
let part_drop = document.createElement("img")
|
||||||
|
|
||||||
|
part_drop.src = "/img/drop.png";
|
||||||
|
part_drop.alt = "\/";
|
||||||
|
|
||||||
|
part_text.innerText = `${value["name"].replaceAll("$", " ")}`;
|
||||||
|
|
||||||
|
part.id = `group_drop-${value["id"]}`;
|
||||||
|
part.classList.add("menu_btn")
|
||||||
|
part.classList.add("group_drop")
|
||||||
|
part.setAttribute("groups",`${value["groups"]}`)
|
||||||
|
part.setAttribute("count",`${value["count"]}`)
|
||||||
|
part.setAttribute("no-cost",`${value["no-cost"]}`)
|
||||||
|
part.setAttribute("pid",`${value["id"]}`)
|
||||||
|
|
||||||
|
part.append(part_text);
|
||||||
|
part.append(part_drop);
|
||||||
|
|
||||||
|
parts.append(part);
|
||||||
|
console.log(value);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// function cost_drop(id){
|
||||||
|
// // let e = document.getElementById("cost")
|
||||||
|
// // setTimeout(()=>{
|
||||||
|
// // document.getElementById("group").style.display = "block";
|
||||||
|
// // // document.getElementById("group").style.left = document.getElementById("group_drop").getBoundingClientRect().left;
|
||||||
|
// // let childs = document.getElementById("group").getElementsByTagName("input");
|
||||||
|
// // let i = 0;
|
||||||
|
// // Object.entries(childs).forEach(([key,value]) => {
|
||||||
|
// // console.log(key,value);
|
||||||
|
// // if(value.checked == true){
|
||||||
|
// // get_objs(value)
|
||||||
|
// // i++;
|
||||||
|
// // }
|
||||||
|
// // if (i==0){
|
||||||
|
// // document.getElementsByClassName("czones")[0].innerHTML = "";
|
||||||
|
// // drag_start()
|
||||||
|
// // // e.removeChild(e.getElementsByClassName(value))
|
||||||
|
// // }
|
||||||
|
// // });
|
||||||
|
// // },1)
|
||||||
|
// }
|
||||||
|
|
||||||
|
function wall_color_change(){
|
||||||
|
if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
|
||||||
|
|
||||||
|
let wall = document.getElementById("wall")
|
||||||
|
let color = document.getElementById("wall_color")
|
||||||
|
wall.style.backgroundColor = color.value;
|
||||||
|
objs["color"] = color.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function gids_change(){
|
||||||
|
get_objs();
|
||||||
|
drag_start()
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_groups(callback){
|
||||||
|
// let select = document.getElementById("group");
|
||||||
|
// let name = select.options[select.selectedIndex].text;
|
||||||
|
load_groups(callback(),gids);
|
||||||
|
// callback();
|
||||||
|
// $.post( "/get_groups")
|
||||||
|
// .done(function( res ) {
|
||||||
|
// if(res["out"] == "good"){
|
||||||
|
// // select.innerHTML = "";
|
||||||
|
// res["body"].forEach(group => {
|
||||||
|
// console.log(group);
|
||||||
|
// let gd = document.createElement("div");
|
||||||
|
// let group_div = document.createElement("input");
|
||||||
|
// let label = document.createElement("label");
|
||||||
|
|
||||||
|
// group_div.style.cursor = "pointer";
|
||||||
|
// label.style.cursor = "pointer";
|
||||||
|
// // group_div.style.pointerEvents = "none";
|
||||||
|
// // label.style.pointerEvents = "none";
|
||||||
|
|
||||||
|
// group_div.setAttribute("type","checkbox");
|
||||||
|
// group_div.setAttribute("onchange","group_drop()");
|
||||||
|
// label.setAttribute("for",`obj_group_${group["id"]}`);
|
||||||
|
// label.innerText = group["name"].replace("$"," ");
|
||||||
|
// // gd.innerText = group["name"].replace("$"," ");
|
||||||
|
// group_div.setAttribute("group_count",group["count"]);
|
||||||
|
// group_div.setAttribute("gid",group["id"]);
|
||||||
|
// group_div.id = `obj_group_${group["id"]}`;
|
||||||
|
// group_div.classList.add("group_inp");
|
||||||
|
// gd.append(group_div);
|
||||||
|
// gd.append(label);
|
||||||
|
// select.append(gd);
|
||||||
|
// // select.append(label);
|
||||||
|
// if(group["id"] == res["body"].at(-1)["id"]){
|
||||||
|
// if(callback)callback();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// // callback(res);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
// get_groups(()=>{
|
||||||
|
// get_objs();
|
||||||
|
load_proj_cloud();
|
||||||
|
// });
|
||||||
|
function get_objs(group_div){
|
||||||
|
document.getElementsByClassName("czones")[0].innerHTML = "";
|
||||||
|
gids.forEach(group => {
|
||||||
|
load_objs((data)=>{
|
||||||
|
data.forEach(value => {
|
||||||
|
let czones = document.getElementsByClassName("czones")[0];
|
||||||
|
let czone = document.createElement('div');
|
||||||
|
czone.classList.add(value["name"]);
|
||||||
|
czone.classList.add("createzone");
|
||||||
|
czones.append(czone)
|
||||||
|
});
|
||||||
|
drag_start()
|
||||||
|
},group)
|
||||||
|
});
|
||||||
|
drag_start()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// console.log(proj_name);
|
||||||
|
// let menu = document.getElementById("project_menu");
|
||||||
|
// document.getElementById("top_panel_left").innerHTML = `<div id='proj_menu' class="menu_btn">настройки проекта</div>`;
|
||||||
|
|
||||||
|
|
||||||
|
function save_proj(){
|
||||||
|
// document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
|
||||||
|
let wait_msg = msg("идёт сохранение проекта",{type:"wait"});
|
||||||
|
save((res)=>{
|
||||||
|
msg_del(wait_msg.id);
|
||||||
|
msg("проект сохранён")
|
||||||
|
// document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в облако`;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// drag_start();
|
||||||
|
// console.log(px_ratio);
|
||||||
|
$(window).resize(function(){isZooming();});
|
||||||
|
|
||||||
|
function isZooming(){
|
||||||
|
resize_drags();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<%- include('./static/end.ejs',{soc:true}) %>
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<style>
|
<style>
|
||||||
.t_img{
|
.t_img{
|
||||||
/* pointer-events: none; */
|
/* pointer-events: none; */
|
||||||
height: 200px;
|
height: 250px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 290px;
|
width: 290px;
|
||||||
box-shadow: 0px 4px 4px 0px #00000040;
|
box-shadow: 0px 4px 4px 0px #00000040;
|
||||||
@ -40,13 +40,58 @@
|
|||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
.temp_group_drop{
|
||||||
|
display: flex;
|
||||||
|
/* width: 100%; */
|
||||||
|
justify-content: space-between;
|
||||||
|
border: 1px gray solid;
|
||||||
|
border-radius: 0.5vw;
|
||||||
|
padding: 1vw;
|
||||||
|
}
|
||||||
|
.temp_group_drop div{
|
||||||
|
/* display: flex; */
|
||||||
|
width: 100%;
|
||||||
|
/* justify-content: space-between; */
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.temp_group_list{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.temp_group_div{
|
||||||
|
margin-block: 6vh;
|
||||||
|
}
|
||||||
|
.temp_div{
|
||||||
|
display: block;
|
||||||
|
padding: 1vw;
|
||||||
|
width: 15vw;
|
||||||
|
}
|
||||||
|
.temp_desc{
|
||||||
|
padding: 0.5vw;
|
||||||
|
}
|
||||||
|
.temp_btn{
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.admin_panel{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.admin_panel img{
|
||||||
|
margin: 0.5vw;
|
||||||
|
width:24px;
|
||||||
|
height:24px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<!-- <script src="/lib/interact.min.js"></script> -->
|
<!-- <script src="/lib/interact.min.js"></script> -->
|
||||||
|
|
||||||
<section class="main">
|
<section class="main">
|
||||||
<div id="temp_div">
|
<!-- <div id="temp_group_div-0" class="temp_group_div">
|
||||||
|
<div class="temp_group_drop" id="temp_group_drop-0" onclick="temp_group_drop('0')">
|
||||||
</div>
|
<div style="text-align: center;">Городская среда </div>
|
||||||
|
<img style="width: 1.5vw; height: 1.5vh; margin: auto;" src="/img/drop.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="temp_group_list" id="temp_group_list-0" ></div>
|
||||||
|
</div> -->
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- <script src="/lib/inter.js"></script> -->
|
<!-- <script src="/lib/inter.js"></script> -->
|
||||||
@ -55,11 +100,185 @@
|
|||||||
|
|
||||||
<%- include('./static/end.ejs',{soc:true}) %>
|
<%- include('./static/end.ejs',{soc:true}) %>
|
||||||
<script>
|
<script>
|
||||||
setTimeout(()=>{loaded()},500);
|
setTimeout(()=>{loaded();load_temp_groups()},500);
|
||||||
admin["temp"] = ()=>{
|
|
||||||
|
|
||||||
document.getElementById("temp_div").innerHTML += `
|
function load_temp_groups(){
|
||||||
<button onclick="new_temp()" class="new_temp"><img class="t_img" src="/img/new_proj.png" alt=""><h1>Новый проект</h1></button>
|
$.post( "/template/group/loads")
|
||||||
`
|
.done(function( res ) {
|
||||||
|
console.log(res);
|
||||||
|
Object.values(res["body"]).forEach(group => {
|
||||||
|
let temp_group_div = document.createElement("div");
|
||||||
|
let temp_group_drop = document.createElement("div");
|
||||||
|
let temp_group_list = document.createElement("div");
|
||||||
|
let name = document.createElement("div");
|
||||||
|
let img = document.createElement("img");
|
||||||
|
|
||||||
|
temp_group_div.id = `temp_group_div-${group["id"]}`;
|
||||||
|
temp_group_drop.id = `temp_group_drop-${group["id"]}`;
|
||||||
|
temp_group_list.id = `temp_group_list-${group["id"]}`;
|
||||||
|
|
||||||
|
temp_group_div.classList.add(`temp_group_div`);
|
||||||
|
temp_group_drop.classList.add(`temp_group_drop`);
|
||||||
|
temp_group_list.classList.add(`temp_group_list`);
|
||||||
|
|
||||||
|
temp_group_drop.setAttribute("onclick", `temp_group_drop('${group["id"]}')`)
|
||||||
|
|
||||||
|
img.style = "width: 1.5vw; height: 1.5vh; margin: auto;";
|
||||||
|
name.style = "text-align: center;";
|
||||||
|
name.innerText = group["name"];
|
||||||
|
img.src = "/img/drop.png";
|
||||||
|
|
||||||
|
temp_group_drop.append(name)
|
||||||
|
temp_group_drop.append(img)
|
||||||
|
|
||||||
|
|
||||||
|
temp_group_div.append(temp_group_drop);
|
||||||
|
temp_group_div.append(temp_group_list);
|
||||||
|
document.getElementsByClassName("main")[0].append(temp_group_div);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function groups_close(){
|
||||||
|
Object.values(document.getElementsByClassName("temp_group_list")).forEach(element => {
|
||||||
|
element.innerHTML = "";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function temp_group_drop(gid){
|
||||||
|
groups_close()
|
||||||
|
let temp_group_div = document.getElementById(`temp_group_div-${gid}`);
|
||||||
|
let temp_group_list = document.getElementById(`temp_group_list-${gid}`);
|
||||||
|
temp_group_list.innerHTML = "";
|
||||||
|
$.post( "/template/loads",{gid:gid})
|
||||||
|
.done(function( res ) {
|
||||||
|
console.log(res);
|
||||||
|
if(Object.values(res["body"]).length > 0){
|
||||||
|
Object.values(res["body"]).forEach(temp => {
|
||||||
|
let div = document.createElement("div");
|
||||||
|
let name = document.createElement("div");
|
||||||
|
let cost = document.createElement("div");
|
||||||
|
let desc = document.createElement("div");
|
||||||
|
let use_btn = document.createElement("button");
|
||||||
|
|
||||||
|
desc.classList.add("temp_desc")
|
||||||
|
|
||||||
|
div.classList.add("temp_div")
|
||||||
|
div.id = `temp-${temp["id"]}`;
|
||||||
|
|
||||||
|
div.innerHTML = `<img class="t_img" src="${temp["img"]}" alt="">`
|
||||||
|
name.innerText = `Название: ${temp["name"]}`;
|
||||||
|
cost.innerText = `цена: ${JSON.parse(temp["body"])["total"]}`;
|
||||||
|
use_btn.innerText = "Использовать шаблон";
|
||||||
|
use_btn.setAttribute("onclick", `copy_temp("${temp['name']}")`);
|
||||||
|
use_btn.classList.add("btn_blue")
|
||||||
|
use_btn.classList.add("temp_btn")
|
||||||
|
|
||||||
|
if(globalThis._admin_){
|
||||||
|
let admin_div = document.createElement("div");
|
||||||
|
|
||||||
|
let edit_btn = document.createElement("img");
|
||||||
|
edit_btn.setAttribute("onclick",`goto("/template/load/${temp["name"]}");`)
|
||||||
|
edit_btn.src = "/img/icon/edit.svg"
|
||||||
|
admin_div.append(edit_btn)
|
||||||
|
|
||||||
|
let del_btn = document.createElement("img");
|
||||||
|
del_btn.setAttribute("onclick",`del_proj("${temp["name"]}")`)
|
||||||
|
del_btn.src = "/img/icon/del.png"
|
||||||
|
admin_div.append(del_btn)
|
||||||
|
|
||||||
|
admin_div.classList.add("admin_panel")
|
||||||
|
div.append(admin_div)
|
||||||
|
}
|
||||||
|
|
||||||
|
desc.append(name)
|
||||||
|
desc.append(cost)
|
||||||
|
div.append(desc)
|
||||||
|
div.append(use_btn)
|
||||||
|
temp_group_list.append(div)
|
||||||
|
});
|
||||||
|
if(globalThis._admin_){
|
||||||
|
let div = document.createElement("div");
|
||||||
|
let use_btn = document.createElement("button");
|
||||||
|
let name = document.createElement("div");
|
||||||
|
div.classList.add("temp_div")
|
||||||
|
|
||||||
|
div.innerHTML = `<img class="t_img" src="/img/new_proj.png" onclick='new_temp(null,${gid})'>`
|
||||||
|
name.innerText = "новый шаблон";
|
||||||
|
name.style.textAlign = "center";
|
||||||
|
|
||||||
|
div.append(name)
|
||||||
|
temp_group_list.append(div)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
if(globalThis._admin_){
|
||||||
|
let div = document.createElement("div");
|
||||||
|
let use_btn = document.createElement("button");
|
||||||
|
let name = document.createElement("div");
|
||||||
|
div.classList.add("temp_div")
|
||||||
|
|
||||||
|
div.innerHTML = `<img class="t_img" src="/img/new_proj.png" onclick='new_temp(null,${gid})'>`
|
||||||
|
name.innerText = "новый шаблон";
|
||||||
|
name.style.textAlign = "center";
|
||||||
|
|
||||||
|
div.append(name)
|
||||||
|
temp_group_list.append(div)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function copy_temp(temp){
|
||||||
|
$.post( "/template/get",{name:temp})
|
||||||
|
.done(function( res ) {
|
||||||
|
if(res["out"] == "good"){
|
||||||
|
let name = ask("Введите название копии проекта ",{func:(name)=>{
|
||||||
|
if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
|
||||||
|
$.post( "/save_proj", {proj:res["body"],name:name,img:"/img/placeholder.png"})
|
||||||
|
.done(function( res ) {
|
||||||
|
if(res["out"] == "good"){
|
||||||
|
goto(`/proj/load/${name}`);
|
||||||
|
}
|
||||||
|
else if(res["out"] == "bad" && res["err"] == "proj"){
|
||||||
|
msg("Проект уже существует")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function new_temp(objs = null,gid){
|
||||||
|
msg("название нового шаблона",{type:"enter",res:(out)=>{
|
||||||
|
name = out;
|
||||||
|
objs = (objs == null)? { height:"2",width:"4"}:objs;
|
||||||
|
if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
|
||||||
|
$.post( "/template/save/", {proj:JSON.stringify(objs),name:name,img:"/img/placeholder.png",gid})
|
||||||
|
.done(function( res ) {
|
||||||
|
if(res["out"] == "good"){
|
||||||
|
goto(`/template/load/${out}`);
|
||||||
|
}
|
||||||
|
else if(res["out"] == "bad" && res["err"] == "proj"){
|
||||||
|
msg("Проект уже существует")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}})
|
||||||
|
}
|
||||||
|
|
||||||
|
function del_proj(proj_name){
|
||||||
|
msg(`удалить шаблон ${proj_name}?`,{type:"ask",res:(out)=>{
|
||||||
|
if(out){
|
||||||
|
$.post( "/admin/template/delete",{name:proj_name})
|
||||||
|
.done(function( res ) {
|
||||||
|
if(res["out"] == "good"){
|
||||||
|
goto("/temp")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user