n0rdye
b511d033f5
modified: views/admin/objects/object_groups.ejs modified: views/header.ejs modified: views/load.ejs modified: views/project.ejs modified: views/static/end.ejs modified: views/static/start.ejs
352 lines
13 KiB
Plaintext
352 lines
13 KiB
Plaintext
<%- 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: 50px;
|
||
width: 50px;
|
||
position: absolute;
|
||
text-align: center;
|
||
margin: auto;
|
||
z-index: 10;
|
||
}
|
||
|
||
#drags{
|
||
position: absolute;
|
||
margin: auto;
|
||
}
|
||
#drags img{
|
||
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: 2;
|
||
}
|
||
|
||
.createzone {
|
||
background-color: #bfe4ff;
|
||
border: dashed 4px transparent;
|
||
border-radius: 4px;
|
||
height: 22px;
|
||
width: 22px;
|
||
margin: 10px;
|
||
margin-top: 0px;
|
||
padding: 10px;
|
||
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;
|
||
/* justify-content: space-around; */
|
||
flex-wrap: wrap;
|
||
width: 75%;
|
||
/* height: 100px; */
|
||
/* 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: 150px;justify-content: space-between;">
|
||
<label for="wall_height" style="margin: auto;">Высота стены</label>
|
||
<input type="text" id="wall_height" style="width: 50px; text-align: center;" value="2" oninput="wall_size_change('height');resize_drags();">
|
||
</div>
|
||
<div style="display: flex;width: 150px;justify-content: space-between;">
|
||
<label for="wall_width" style="margin: auto;">Длина стены</label>
|
||
<input type="text" id="wall_width" style="width: 50px; text-align: center;" value="4" oninput="wall_size_change('width');resize_drags();">
|
||
</div>
|
||
<div style="display: flex;width: 150px;justify-content: space-between;">
|
||
<label for="wall_color" style="margin: auto;">цвет стены</label>
|
||
<input type="color" id="wall_color" style="width: 50px;" value="#000000" onchange="wall_color_change()">
|
||
</div>
|
||
<div style="display: flex;width: 15vw;justify-content: space-between; background-color: #aaa;">
|
||
<input type="button" id="proj_cost" class="menu_btn" value="Расчет стоимости" onclick="cost_drop();open_menu();" style="width: 100%;">
|
||
<style>
|
||
#cost_list li{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 14vw;
|
||
}
|
||
#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;">
|
||
<div style="display: flex;justify-content: space-between; width: 20vw;">
|
||
<div>copy</div>
|
||
<div>back</div>
|
||
<div>forw</div>
|
||
<div>del</div>
|
||
</div>
|
||
<div style="display: flex;justify-content: space-between; width: 7vw;">
|
||
<div><img src="/img/icon/save.svg" alt="" style="width: 30px;" onclick="save_proj()"></div>
|
||
<div>load</div>
|
||
</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> -->
|
||
<button name="" id="group_drop" class="menu_btn" onclick="group_drop();open_menu();" style="width: 15vw;padding: 2px;">Оборудование</button>
|
||
<button name="" id="group_drop" class="menu_btn" onclick="group_drop();open_menu();" style="width: 15vw;padding: 2px;">помехи</button>
|
||
<ul id="group" class="cmenu"></ul>
|
||
</div>
|
||
</div>
|
||
<div class="czones" style="height: 500px;"></div>
|
||
|
||
|
||
<script src="/lib/inter.js"></script>
|
||
<script>
|
||
let proj_name = "<%= proj_name %>";
|
||
|
||
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)
|
||
}
|
||
|
||
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(){
|
||
let wall = document.getElementById("wall")
|
||
let color = document.getElementById("wall_color")
|
||
wall.style.backgroundColor = color.value;
|
||
}
|
||
|
||
function get_groups(callback){
|
||
let select = document.getElementById("group");
|
||
// let name = select.options[select.selectedIndex].text;
|
||
$.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.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"]}`;
|
||
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){
|
||
document.getElementsByClassName("czones")[0].innerHTML = "";
|
||
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.getAttribute("gid"))
|
||
}
|
||
|
||
// function del_proj(){
|
||
// let del = confirm(`удалить проект ${proj_name}?`);
|
||
// if(del == true){
|
||
// $.post( "/proj/delete",{name:proj_name})
|
||
// .done(function( res ) {
|
||
// if(res["out"] == "good"){
|
||
// goto("/main")
|
||
// }
|
||
// })
|
||
// }
|
||
// }
|
||
|
||
// 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}`;
|
||
save((res)=>{
|
||
// document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в облако`;
|
||
alert("saved")
|
||
setTimeout((res)=>{
|
||
// document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;
|
||
|
||
},3000)
|
||
})
|
||
}
|
||
|
||
function save_proj_local(){
|
||
// document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
|
||
save_local();
|
||
// document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в локальное хранилище`;
|
||
setTimeout((res)=>{
|
||
// document.getElementById("top_panel_center").innerText = `${proj_name} (локальное хранилище)`;
|
||
},3000)
|
||
}
|
||
|
||
// drag_start();
|
||
// console.log(px_ratio);
|
||
$(window).resize(function(){isZooming();});
|
||
|
||
function isZooming(){
|
||
resize_drags();
|
||
}
|
||
</script>
|
||
<%- include('./static/end.ejs',{soc:true}) %> |