n0rdye/puzzle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: index.js

Browse Source 
modified:   object.js
	modified:   project.js
	new file:   public/img/background/photo_2023-06-06_08-53-47 1.png
	new file:   public/img/icon/copy.svg
	new file:   public/img/icon/download.svg
	new file:   public/img/icon/edit.svg
	new file:   public/img/icon/save.svg
	new file:   public/img/icon/trash.svg
	new file:   public/img/new_proj.png
	new file:   public/img/ok.svg
	new file:   public/img/telegram.svg
	new file:   public/img/vk.svg
	new file:   public/img/youtube.svg
	new file:   "public/img/\320\243\320\274\320\275\320\270\321\207\320\272\320\260 \320\273\320\276\320\263\320\276 \321\201 \320\276\320\261\320\262\320\276\320\264\320\272\320\276\320\271-02 1.png"
	modified:   public/lib/fn.js
	modified:   public/lib/inter.js
	modified:   user.js
	modified:   views/admin.ejs
	modified:   views/header.ejs
	new file:   views/load.ejs
	modified:   views/login.ejs
	modified:   views/main.ejs
	new file:   views/old/project.ejs
	modified:   views/project.ejs
	modified:   views/static/end.ejs
	modified:   views/static/start.ejs
This commit is contained in:
n0rdye
2023-08-01 20:20:43 +05:00
parent f57fec5cde
commit 5133931122
27 changed files with 881 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
views/admin.ejs
View File

@ -28,4 +28,9 @@
</div>
</section>
<%- include('./static/end.ejs') %>
<%- include('./static/end.ejs') %>
<script>
setTimeout(()=>{
loaded()
},1000);
</script>

135
views/header.ejs
View File

@ -1,3 +1,4 @@
<%- include('./load.ejs') %>
<style>
#proj_top_panel{
display: flex;
@ -7,27 +8,42 @@
text-align: center;
margin: auto;
}
#top_panel_right{
/* float: right; */
justify-content: space-between;
display: flex;
cursor: pointer;
/* width: 20vw; */
}
#top_panel_left{
/* float: left; */
justify-content: space-between;
/* width: 200px; */
cursor: pointer;
width: 5vw;
display: flex;
/* width: 20vw; */
}
#top_panel_center{
/* float: left; */
justify-content: space-between;
cursor: pointer;
width: 58vw;
display: flex;
/* width: 20vw; */
}
#top_panel{
height: 20px;
height: 100px;
display: flex;
margin-bottom: 2vh;
margin-top: 1vh;
}
/* button{
/* margin-inline: 5px; */
/* } */
.tpanel{
margin: auto 0px;
/* width: 100%; */
height: 100%;
}
.tpanel button{
border: 0px;
background-color: transparent;
cursor: pointer;
}
.menu_btn{
background: ghostwhite;
@ -44,35 +60,92 @@
border: 1px black solid;
z-index: 100;
}
#top_panel_right_main{
/* float: right; */
justify-content:space-between;
float: right;
display: flex;
cursor: pointer;
width: 14vw;
/* width: 20vw; */
/* height: 60px; */
}
#top_panel_right_sec{
/* float: right; */
justify-content:space-between;
float: left;
display: flex;
cursor: pointer;
width: 14vw;
transform: translateY(100%);
/* width: 20vw; */
/* height: 60px; */
}
.top_panel_right img{
width: 3vw;
height: 3vh;
}
@media (max-width: 900px) {
#top_panel_right_main{
display: none;
}
#top_panel_right_sec{
display: flex;
}
#top_panel_center{
width: 70vw;
}
}
@media (min-width: 900px) {
#top_panel_right_main{
display: flex;
}
#top_panel_right_sec{
display: none;
}
}
</style>
<header id="top_panel">
<!-- <div id="user_name"></div> -->
<div id="proj_top_panel">
<div id="top_panel_left"></div>
<div id="top_panel_center"></div>
<div id="top_panel_right"></div>
<div id="top_panel_left" class="tpanel"></div>
<div id="top_panel_center" class="tpanel">
<button onclick="goto('/main')">Мои проекты</button>
<button onclick="goto('/tamp')">Шаблоны</button>
<button onclick="goto('/gallery')">Галерея</button>
<button onclick="goto('/faq')">FAQ</button>
<button onclick="goto('/help')">Связаться с поддержкой</button>
</div>
<div id="top_panel_right_main" class="tpanel top_panel_right">
<a href=""><img src="/img/vk.svg" alt=""></a>
<a href=""><img src="/img/youtube.svg" alt=""></a>
<a href=""><img src="/img/ok.svg" alt=""></a>
<a href=""><img src="/img/telegram.svg" alt=""></a>
</div>
</div> <!-- <div><button onclick="logout();">logout</button></div> -->
</header>
<div id="user_menu" class="cmenu"></div>
<script>
get_from_uuid((res)=>{
let uname = document.getElementById("user_name");
let menu = document.getElementById("user_menu");
let header = document.getElementById("top_panel");
let right = document.getElementById("top_panel_right");
let left = document.getElementById("top_panel_left");
// get_from_uuid((res)=>{
// let uname = document.getElementById("user_name");
// let menu = document.getElementById("user_menu");
// let header = document.getElementById("top_panel");
// let right = document.getElementById("top_panel_right");
// let left = document.getElementById("top_panel_left");
if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">проекты</button> <br>`;
right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
// if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">проекты</button> <br>`;
// right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
if (res["admin"] == true){
menu.innerHTML += `<button onclick='goto("/admin")'>админ. панель</button><br>`;
}
menu.innerHTML += "<button onclick='logout();'>выйти</button><br>";
});
// if (res["admin"] == true){
// menu.innerHTML += `<button onclick='goto("/admin")'>админ. панель</button><br>`;
// }
// menu.innerHTML += "<button onclick='logout();'>выйти</button><br>";
// });
onscroll = (e)=>{
hide_menus();
@ -140,6 +213,18 @@
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
// document.body.appendChild(menu)
}
else if(e.target.id == "group_drop"){
// hide_menus();
// let menu = document.getElementById("object_edit_menu");
// let obj = e.target;
// menu.style.display = 'block';
// // menu.style = `top:${e.target.getBoundingClientRect().top+27}px;left:${e.target.getBoundingClientRect().left-13}px`;
// menu.style = `top:${e.target.getBoundingClientRect().top + 40}px;left:${e.target.getBoundingClientRect().left - 5}px`;
// // menu.onmouseleave = () => menu.style.display = 'none';
// // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
// // document.body.appendChild(menu)
}
else{
hide_menus();

67
views/load.ejs Normal file
View File

@ -0,0 +1,67 @@
<style>
#load_div{
width: 100vw;
height: 100vh;
display: flex;
position: absolute;
z-index: 10000;
background-color: white;
pointer-events: none;
transition: background-color 1s;
}
#load_logo{
width: 12vw;
/* height: 12vh; */
/* margin: auto; */
position:absolute;
top:30.5%;
left:50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
pointer-events: none;
transition-duration: 800ms;
}
</style>
<div id="load_div">
<img id="load_logo" src="/img/Умничка лого с обводкой-02 1.png" alt="">
</div>
<script>
let loaded_pos={
x:"10%",
// y:"6%",
// x: "55px",
y: "45px",
w:"8vw",
h:"8vh"
}
let loading_pos={
x:"50%",
y:"30.5%",
w:"12vw",
h:"12vh"
}
// document.getElementById("load_logo").style.transform = `translate(${center.x}px,${center.y}px)`
function loaded(){
let logo = document.getElementById("load_logo");
let load_div = document.getElementById("load_div");
load_div.style.backgroundColor = "transparent";
// load_div.style.transition = "background-color 1s"
// logo.style.transform = `translate(0px,0px)`;
logo.style.left = loaded_pos.x;
logo.style.top = loaded_pos.y;
logo.style.width = loaded_pos.w
}
function loading(){
let logo = document.getElementById("load_logo");
let load_div = document.getElementById("load_div");
load_div.style.backgroundColor = "white";
// load_div.style.transition = "background-color 1s"
// logo.style.transform = `translate(-50%,-50%)`;
logo.style.left = loading_pos.x;
logo.style.top = loading_pos.y;
logo.style.width = loading_pos.w
}
</script>

146
views/login.ejs
View File

@ -1,34 +1,145 @@
<%- include('./static/start.ejs',{name:'login',async: true}) %>
<%- include('./load.ejs') %>
<style>
* {
body{
/* width: 1920px;
height: 1080px; */
padding: 0%;
margin: 0%;
background-image: url("/img/background/photo_2023-06-06_08-53-47\ 1.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#login_form{
margin: auto;
background-color: rgba(255, 255, 255, 0.5);
/* width: 680px;
height: 450px; */
width: 52vw;
/* height: 550px; */
height: 55vh;
border-radius: 1.5vw;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(2vh);
}
#inputs{
margin: auto;
/* width: calc(var(--login-inp-w)+20); */
/* background-color: aliceblue; */
}
#login_form div{
margin: auto;
margin-block: 2vh;
}
input{
text-align: center;
}
iframe{
border: 0px;
display: none;
section{
display: flex;
justify-content: space-around;
width: 100vw;
height: 100vh;
}
.login-inp input{
/* padding-block: 20px;
padding-inline: 40px; */
height: var(--login-inp-h);
width: calc(var(--login-inp-w));
border: 0.1vh solid #505050;
margin: auto;
border-radius: 1.2vh;
}
.login-inp{
height: var(--login-inp-h);
width: calc(var(--login-inp-w)*1.03);
/* margin: auto; */
}
.pass-inp input{
/* padding-block: 5px;
padding-inline: 20px; */
height: var(--login-inp-h);
width: var(--login-inp-w);
border: 0.1vh solid #505050;
border-radius: 1.2vh;
}
.pass-inp{
height: var(--login-inp-h);
width: calc(var(--login-inp-w)*1.03);
}
.login-btn input{
height: var(--login-inp-h);
width: calc(var(--login-inp-w)/2);
border: 0.1vh;
box-shadow: 0px 4px 4px 0px #00000040;
border-radius: 1.2vh;
}
.login-btn{
height: var(--login-inp-h);
width: calc(var(--login-inp-w)/2);
}
#logo{
margin: auto;
/* width: 216px;
height: 144.27px; */
width: 12vw;
height: 12vh;
display: flex;
justify-content: space-around;
}
#helps button{
background-color: transparent;
border: 0px;
}
#helps{
display: flex;
justify-content: space-evenly;
padding-top: 2.4vh;
}
@media (max-width: 900px) {
#helps{
display: grid;
}
}
/* #logo img{
width: 50%;
} */
</style>
<!-- <img id="logo_img_sec" style="width: 12vw; height: 12vh;" src="/img/Умничка лого с обводкой-02 1.png" alt=""> -->
<form action="#" id="login_form">
<div class="login-page">
<input name="login" type="text" id="login">
<label for="login">логин</label>
</div>
<div class="pass-page">
<input name="pass" type="password" id="pass">
<label for="pass">пароль</label>
</div>
<input type="submit" id="log_btn" onclick="log()" value="login">
</form>
<section>
<form action="#" id="login_form">
<div id="logo"></div>
<div id="inputs">
<div class="login-inp">
<input name="login" type="text" id="login" placeholder="Логин">
</div>
<div class="pass-inp">
<input name="pass" type="password" id="pass" placeholder="Пароль">
</div>
<div class="login-btn" style="display: flex;justify-content: space-around;">
<input type="submit" id="log_btn" onclick="log()" value="Войти">
</div>
</div>
<div id="helps"><button>Восстановить пароль</button><button>Запросить доступ</button></div>
</form>
</section>
<!-- <input type="submit" value="" hidden> -->
<div id="res"></div>
<script>
loaded_pos.y = "30.5%";
loaded_pos.x = "50%";
loaded_pos.w = "12vw";
loaded();
// console.log($.cookie("uuid"));
// log_by_sid();
// let logo = document.getElementById("logo_img");
// logo.style.transform = 'translate(-40vw,-20vh)';
// logo.style.position = "absolute"
function log(){
const login = CryptoJS.AES.encrypt(document.getElementById('login').value,$.cookie("sid")).toString();
const pass = CryptoJS.AES.encrypt(document.getElementById('pass').value,$.cookie("sid")).toString();
@ -39,12 +150,13 @@
if (res["out"] == "bad"){
console.log(res["err"]);
if (res["err"] == "user" || res["err"] == "pass"){
document.querySelector("#res").innerHTML = "<p>wrong password or login</p>";
alert("wrong password or login")
}
}
else{
if(res["out"] == "goto"){
// postForm(res["url"], res["args"]);
loading();
goto(res["url"]);
}
// if(res["out"] == "logged"){

123
views/main.ejs
View File

@ -1,56 +1,47 @@
<%- include('./static/start.ejs',{name:'main',async: true}) %>
<%- include('./header.ejs') %>
<style>
.drag{
height: 50px;
width: 50px;
position: absolute;
text-align: center;
.p_img{
/* pointer-events: none; */
height: 200px;
border-radius: 10px;
width: 290px;
box-shadow: 0px 4px 4px 0px #00000040;
}
.dropzone {
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
height: 140px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
.proj, .new_proj{
border: 0px;
background-color: transparent;
}
.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;
z-index: -1;
.p_left{
display: block;
}
.drop-active {
border-color: #aaa;
.p_left div{
font-size: calc(var(--main-font-size)/2);
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
.p_right{
display: flex;
margin-top:15px;
justify-content: space-between;
width: 130px;
}
img{
pointer-events: none;
.p_props{
display: flex;
justify-content: space-between;
}
.main h1{
/* font-size: --main-font-size; */
font-weight: 100;
margin: 0px;
padding: 0px;
margin-top: 10px;
}
</style>
<!-- <script src="/lib/interact.min.js"></script> -->
<section class="main">
<button onclick="new_proj()">создать новый проект</button>
<div id="projs_div"></div>
<div id="projs_div">
<button onclick="new_proj()" class="new_proj"><img class="p_img" src="img/new_proj.png" alt=""><h1>Новый проект</h1></button>
</div>
</section>
<!-- <script src="/lib/inter.js"></script> -->
@ -67,16 +58,58 @@
}
function new_proj(){
let name = ask("please enter project name");
let objs = { height:"2",width:"4"};
if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
goto(`/proj/${name}`);
$.post( "/save_proj", {proj:JSON.stringify(objs),name:name,img:"img/img_placeholder.webp"})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(scr)
// console.log("good");
// if(callback) callback(res);
goto(`/proj/${name}`);
}
})
}
}
load_projs((projs)=>{
projs.forEach(proj => {
// console.log(proj);
console.log(projs);
if(projs.length == 0){
setTimeout(loaded(),1000)
}
else{
projs.forEach(proj => {
console.log(proj);
let div = document.getElementById("projs_div");
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')">${proj["name"]}<br><img height="200" width="290" src='${proj["img"]}' alt='${proj["name"]}'></img></button>`;
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj'>
<img src='${proj["img"]}' alt='${proj["name"]}' class="p_img" onclick="goto('/proj/${proj["name"]}')">
<div class="p_props">
<div class="p_left" style="text-align:left">
<h1>${proj["name"]}</h1>
<div>${proj["creation_date"].split("T")[0]}</div>
</div>
<div class="p_right">
<img src="/img/icon/edit.svg" style="width:24px;height:24px" onclick="del_proj('${proj["name"]}')">
<img src="/img/icon/copy.svg" style="width:24px;height:24px" onclick="del_proj('${proj["name"]}')">
<img src="/img/icon/download.svg" style="width:24px;height:24px" onclick="del_proj('${proj["name"]}')">
<img src="/img/icon/trash.svg" style="width:24px;height:24px" onclick="del_proj('${proj["name"]}')">
</div>
</div>
</button>`;
setTimeout(loaded(),1000)
});
}
});
function del_proj(proj_name){
let del = confirm(`удалить проект ${proj_name}?`);
if(del == true){
$.post( "/proj/delete",{name:proj_name})
.done(function( res ) {
if(res["out"] == "good"){
goto("/main")
}
})
}
}
</script>
<%- include('./static/end.ejs') %>
<%- include('./static/end.ejs',{soc:true}) %>

224
views/old/project.ejs Normal file
View File

@ -0,0 +1,224 @@
<%- 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;
}
</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">
<div id="obj_group">
<div style="display: flex;justify-content: space-between;">
<div style="width: 50px;">группа товаров</div>
<select name="" id="group_select" onchange="get_objs()"></select>
</div>
</div><br>
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="wall_height">высота </label>
<div id="wall_height_value">0</div>
</div>
<input type="range" step="0.1" min="0" max="5" id="wall_height" value="2" oninput="wall_size_change('height')" onchange="resize_drags()">
</div>
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="wall_width">ширина</label>
<div id="wall_width_value">0</div>
</div>
<input type="range" step="0.1" min="0" max="7" id="wall_width" value="4" oninput="wall_size_change('width')" onchange="resize_drags()">
</div>
</div>
<div class="czones"></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 style="display: flex;"><div id="proj_cost"></div>&nbsp;руб.</div></div>
<script src="/lib/inter.js"></script>
<script>
load_groups(()=>{
get_objs();
load_proj_cloud();
});
function get_objs(){
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()
})
}
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")
}
})
}
}
let proj_name = "<%= proj_name %>";
// 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(type){
// document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
save((res)=>{
// document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в облако`;
setTimeout((res)=>{
// document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;
},3000)
})
}
function save_proj_local(type){
// 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') %>

192
views/project.ejs
View File

@ -107,61 +107,144 @@
padding-bottom: 0px;
margin-top: 50px;
}
#group{
display: none;
position: absolute;
padding: 0px;
margin: 0px;
width: 200px;
}
</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>
<!-- <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">
<div id="obj_group">
<div style="display: flex;justify-content: space-between;">
<div style="width: 50px;">группа товаров</div>
<select name="" id="group_select" onchange="get_objs()"></select>
</div>
</div><br>
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="wall_height">высота </label>
<div id="wall_height_value">0</div>
</div>
<input type="range" step="0.1" min="0" max="5" id="wall_height" value="2" oninput="wall_size_change('height')" onchange="resize_drags()">
<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>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="wall_width">ширина</label>
<div id="wall_width_value">0</div>
</div>
<input type="range" step="0.1" min="0" max="7" id="wall_width" value="4" oninput="wall_size_change('width')" onchange="resize_drags()">
<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: 150px;justify-content: space-between;">
<label style="margin: auto;">Расчёт стоимости</label>
</div> -->
</div>
<div class="czones"></div>
<img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="чёрная дыра">
<!-- <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 class="wall dropzone" id="wall"></div>
</div>
<div style="display:flex; justify-content: space-around;">цена проекта: <div style="display: flex;"><div id="proj_cost"></div>&nbsp;руб.</div></div>
<div style="display:flex; justify-content: space-around;"><div style="display: flex;"><div id="proj_cost"></div>&nbsp;руб.</div></div>
<div class="inputs" style="display: flex;justify-content: space-between;">
<div id="obj_group" style="display: flex;justify-content: space-between; width: 30vw;">
<!-- <button name="" id="group_drop" >Помехи на стене</button> -->
<button name="" id="group_drop" onclick="group_drop()">Оборудование</button>
<ul id="group" class="cmenu"></ul>
</div>
<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="czones" style="height: 500px;"></div>
<script src="/lib/inter.js"></script>
<script>
load_groups(()=>{
get_objs();
let proj_name = "<%= proj_name %>";
function group_drop(){
let e = document.getElementById("group_drop")
// document.getElementById("group").style = `top:${e.getBoundingClientRect().top+40}px;left:${e.getBoundingClientRect().left - 5}px`;
setTimeout(()=>{
document.getElementById("group").style.display = "block";
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(){
function get_objs(group){
document.getElementsByClassName("czones")[0].innerHTML = "";
load_objs((data)=>{
data.forEach(value => {
@ -172,44 +255,44 @@
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")
}
})
}
}
// 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")
// }
// })
// }
// }
let proj_name = "<%= proj_name %>";
// console.log(proj_name);
let menu = document.getElementById("project_menu");
document.getElementById("top_panel_left").innerHTML = `<div id='proj_menu' class="menu_btn">настройки проекта</div>`;
// let menu = document.getElementById("project_menu");
// document.getElementById("top_panel_left").innerHTML = `<div id='proj_menu' class="menu_btn">настройки проекта</div>`;
function save_proj(type){
document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
function save_proj(){
// document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
save((res)=>{
document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в облако`;
// document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в облако`;
alert("saved")
setTimeout((res)=>{
document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;
// document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;
},3000)
})
}
function save_proj_local(type){
document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
function save_proj_local(){
// document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
save_local();
document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в локальное хранилище`;
// document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в локальное хранилище`;
setTimeout((res)=>{
document.getElementById("top_panel_center").innerText = `${proj_name} (локальное хранилище)`;
// document.getElementById("top_panel_center").innerText = `${proj_name} (локальное хранилище)`;
},3000)
}
@ -220,6 +303,5 @@
function isZooming(){
resize_drags();
}
</script>
<%- include('./static/end.ejs') %>
<%- include('./static/end.ejs',{soc:true}) %>

10
views/static/end.ejs
View File

@ -1,3 +1,11 @@
<% if (typeof soc !== 'undefined') {%>
<div id="top_panel_right_sec" class="tpanel top_panel_right">
<a href=""><img src="/img/vk.svg" alt=""></a>
<a href=""><img src="/img/youtube.svg" alt=""></a>
<a href=""><img src="/img/ok.svg" alt=""></a>
<a href=""><img src="/img/telegram.svg" alt=""></a>
</div>
<%}%>
</body>
</html>
<script>
@ -15,6 +23,7 @@
// e.preventDefault(); //This could also be return false as I'm using jQuery.
// })
$(window).focus(function(){
console.log(document.title);
if(document.title == "login"){
// console.log(document.title);
log_by_sid();
@ -23,4 +32,5 @@
// console.log("check");
}
});
</script>

24
views/static/start.ejs
View File

@ -23,13 +23,35 @@
}
</script>
<style>
:root{
--login-inp-w:30vw;
--login-inp-h: 7.8vh;
--main-font-size: 1.5vw;
}
.main{
width: 80vw;
width: 90vw;
margin: auto;
padding-block: 20px;
}
html{
background-color:aliceblue;
padding: 0px;
margin: 0px;
}
body{
padding: 0px;
margin: 0px;
}
*{
font: "Circe Rounded";
font-size: var(--main-font-size);
font-weight:100;
color: #3C3C3C;
}
@media (max-width: 900px) {
:root{
--main-font-size: 12px;
}
}
</style>
</head>