modified: admin.js

modified:   func.js
	modified:   index.js
	modified:   object.js
	modified:   project.js
	new file:   public/img/drop.png
	new file:   public/img/icon/back.png
	new file:   public/img/icon/copy.png
	new file:   public/img/icon/del.png
	new file:   public/img/icon/download.png
	new file:   public/img/icon/forw.png
	new file:   public/img/icon/save.png
	modified:   public/lib/fn.js
	modified:   public/lib/inter.js
	modified:   views/admin.ejs
	new file:   views/admin/objects.ejs
	modified:   views/admin/objects/object_creation.ejs
	modified:   views/admin/objects/object_edit.ejs
	modified:   views/admin/objects/object_groups.ejs
	new file:   views/admin/users.ejs
	modified:   views/admin/users/user_reg.ejs
	modified:   views/header.ejs
	modified:   views/load.ejs
	modified:   views/login.ejs
	modified:   views/main.ejs
	modified:   views/project.ejs
	modified:   views/static/end.ejs
	modified:   views/static/start.ejs
This commit is contained in:
2023-08-15 23:59:02 +05:00
parent b511d033f5
commit f2bbded81b
28 changed files with 942 additions and 270 deletions

View File

@ -8,17 +8,10 @@
</style>
<!-- <h1 style="text-align: center;">привет админ</h1> <br> -->
<section>
<h1 style="text-align: center;">объект</h1>
<%- include('./admin/objects/object_groups.ejs') %>
<%- include('./admin/objects/object_creation.ejs') %>
<%- include('./admin/objects/object_edit.ejs') %>
</section>
<section>
<h1 style="text-align: center;">пользователь</h1>
<%- include('./admin/users/user_reg.ejs') %>
<%- include('./admin/users/user_edit.ejs') %>
<section class="admin_edits" style="display: flex; justify-content: space-evenly;">
<button onclick="goto('/admin/objects')">панель управления объектами</button>
<button onclick="goto('/admin/users')">панель управления пользователями</button>
</section>
<section style="display: flex; justify-content: space-between;">

22
views/admin/objects.ejs Normal file
View File

@ -0,0 +1,22 @@
<%- include('../static/start.ejs',{name:"admin/objects",async: true}) %>
<%- include('../header.ejs') %>
<style>
section{
width: 80vw;
margin: auto;
}
</style>
<section>
<h1 style="text-align: center;">объект</h1>
<%- include('../admin/objects/object_groups.ejs') %>
<%- include('../admin/objects/object_creation.ejs') %>
<%- include('../admin/objects/object_edit.ejs') %>
</section>
<%- include('../static/end.ejs') %>
<script>
setTimeout(()=>{
loaded()
},1000);
</script>

View File

@ -61,7 +61,7 @@
<div style="display: flex;width: 100%;justify-content: space-between;">
<label for="obj_width">цена</label>
<div style="display: flex;">
<input style="text-align: right;" id="obj_cost" type="text">
<input style="text-align: right;" id="obj_cost" type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" >
<div>руб.</div>
</div>
</div>
@ -100,7 +100,8 @@
document.getElementById("object_edit_type").innerText = "редактирование";
document.getElementById("obj_apply_btn").value = "сохранить";
document.getElementById("obj_apply_btn").setAttribute("onclick","save_edited_obj()");
document.getElementById("group_select").selectedIndex = document.getElementById("group_select").options[`obj_group_${gid}`].index;
// document.getElementById("group_select").selectedIndex = document.getElementById("group_select").options[`obj_group_${gid}`].index;
gids = [parseInt(gid)]
console.log(gid);
}
@ -130,7 +131,7 @@
}
function previewFile() {
var preview = document.querySelector('img');
var preview = document.querySelector('#img_prev');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
@ -146,9 +147,9 @@
}
function new_obj(cost,name,img,height,width,description,callback){
let select = document.getElementById("group_select");
let gid = gids[0];
if(name!=""){
$.post( "/admin/objects/new", { cost:cost,name,img:img,desc:description,height:height,width:width,gid:select.options[select.selectedIndex].getAttribute("gid")})
$.post( "/admin/objects/new", { cost:cost,name:name,img:img,desc:description,height:height,width:width,gid:gid})
.done(function( res ) {
// if(res["out"] == "good"){
// console.log(res["body"]);

View File

@ -30,8 +30,8 @@
<div style="display: flex;justify-content: space-between;">
<h1>изменение объектов</h1>
<div id="find_obj_btns">
<button onclick="load_groups(()=>{edit_get_objs(true);});">найти по имени</button>
<button onclick="load_groups(()=>{edit_get_objs();});">очистить</button>
<button onclick="edit_get_objs(true)">найти по имени</button>
<button onclick='document.getElementById("objs_in_group").innerHTML = "";'>очистить</button>
</div>
</div>
<div>
@ -44,9 +44,9 @@
</div>
<script>
load_groups(()=>{
edit_get_objs();
});
// load_groups(()=>{
// edit_get_objs();
// });
function set_edit(){
let menu = document.getElementById("object_edit_menu");
@ -67,11 +67,18 @@
},by_name)
}
function gids_change(){
let last = gids.at(-1)
gids = [last];
edit_get_objs();
hide_menus();
}
function obj_del(){
let select = document.getElementById("group_select");
// let select = document.getElementById("group_select");
let menu = document.getElementById("object_edit_menu");
if (confirm(`вы точно хотите удалить ${menu.getAttribute("obj_name").split("/")[0]}?`)){
$.post( "/admin/objects/delete", { id:menu.getAttribute(`obj_id`),gid:select.options[select.selectedIndex].getAttribute("gid"),name:menu.getAttribute("obj_name")})
$.post( "/admin/objects/delete", { id:menu.getAttribute(`obj_id`),})
.done(function( res ) {
if(res["out"] == "good"){
edit_get_objs();
@ -81,7 +88,7 @@
}
function save_edited_obj(){
let select = document.getElementById("group_select");
let gid = gids[0];
let menu = document.getElementById("object_edit_menu");
let attributes = ["name","description","img","height","width","cost"];
let cur_atts = {
@ -117,25 +124,27 @@
}
}
function make_obj_save(){
if(changes["name"]) changes["name"] = (changes["name"]+"/g/"+select.options[select.selectedIndex].value).replace(" ","$");
document.getElementById("obj_resp").innerHTML = "сохранение товара";
$.post( "/admin/objects/edit", { id:menu.getAttribute(`obj_id`),changes:JSON.stringify(changes),gid:select.options[select.selectedIndex].getAttribute("gid")})
.done(function( res ) {
// console.log(res);
if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "товар сохранён";
setTimeout(()=>{
edit_get_objs();
set_obj_edit_params();
if(res["name_err"]){
document.getElementById("obj_resp").innerHTML = ("название товара не было изменино поскольку оно занято");
}
},1000)
setTimeout(()=>{
document.getElementById("obj_resp").innerHTML = "";
},3000)
}
});
load_group(gid,(group_db)=>{
if(changes["name"]) changes["name"] = (changes["name"]+"/g/"+group_db["name"].replace(" ","$"));
document.getElementById("obj_resp").innerHTML = "сохранение товара";
$.post( "/admin/objects/edit", { id:menu.getAttribute(`obj_id`),changes:JSON.stringify(changes),gid:gid})
.done(function( res ) {
// console.log(res);
if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "товар сохранён";
setTimeout(()=>{
edit_get_objs();
set_obj_edit_params();
if(res["name_err"]){
document.getElementById("obj_resp").innerHTML = ("название товара не было изменино поскольку оно занято");
}
},1000)
setTimeout(()=>{
document.getElementById("obj_resp").innerHTML = "";
},3000)
}
});
})
}
}
@ -150,18 +159,20 @@
}
function edit_load_objs(callback,by_name = false){
let select = document.getElementById("group_select");
// let select = document.getElementById("group_select");
if(!by_name){
$.post( "/get_objs",{gid:select.options[select.selectedIndex].getAttribute("gid")})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
// res["body"].forEach(object => {
// // objs_store[`${element["name"]}`] = {description:element["description"],height:element["height"],width:element["width"],id:element["id"],name:element["name"]}
// let obj_main = document.createElement("div");
// });
callback(res["body"]);
}
gids.forEach(gid => {
$.post( "/get_objs",{gid:gid})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
// res["body"].forEach(object => {
// // objs_store[`${element["name"]}`] = {description:element["description"],height:element["height"],width:element["width"],id:element["id"],name:element["name"]}
// let obj_main = document.createElement("div");
// });
callback(res["body"]);
}
});
});
}
else{
@ -200,5 +211,7 @@
obj.append(img_elm)
obj.append(name_text)
obj_list.append(obj)
console.log("obj");
}
</script>

View File

@ -1,49 +1,113 @@
<style>
#obj_group button,#obj_group select{
height: 50px;
/* height: 5vh; */
margin: auto 0px;
}
.obj_group{
display: flex;
}
</style>
<div id="obj_group">
<div style="display: flex;justify-content: space-between;">
<h1>группы товаров</h1>
<select name="" id="group_select" onchange="edit_get_objs();"></select>
<div style="display: flex;justify-content: space-between;width: 350px;">
<button onclick="create_new_group()">создать группу</button>
<button onclick="delete_group()">удалить группу</button>
<style>
.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="display: flex;justify-content: space-between; overflow: scroll;min-width: 50vw;">
</div>
<style>
.group_inp{
height: 1vw;
width: 1vw;
border: 0px;
border-radius: 0.4vw;
overflow: auto;
}
</style>
<ul id="group" class="cmenu"></ul>
<!-- <select name="" id="group_select" onchange="edit_get_objs();"></select>
<select name="" id="part_select"></select> -->
</div>
</div>
<script>
load_groups();
function delete_group() {
// load_groups();
function delete_group(gid,pid) {
let select = document.getElementById("group_select");
let group_id = select.options[select.selectedIndex].getAttribute("gid");
if(confirm(`вы уверены вы хотите удалить группу ${select.options[select.selectedIndex].text}`) == true){
$.post( "/admin/groups/delete", { gid:group_id})
if(confirm(`вы уверены вы хотите удалить группу ${document.getElementById("obj_group_"+gid).innerText}`) == true){
$.post( "/admin/groups/delete", { gid:gid,pid:pid})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
load_groups();
// load_groups();
edit_get_objs();
hide_menus();
alert(`группа удалена`)
}
});
}
}
function create_new_group() {
function create_new_group(pid) {
let group_name = ask("название группы");
if(group_name != ""){
$.post( "/admin/groups/new", { name:group_name.replace(" ","$")})
$.post( "/admin/groups/new", { name:group_name.replace(" ","$"),pid:pid})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
load_groups();
// load_groups();
edit_get_objs();
hide_menus();
setTimeout(()=>{
parts_load();
alert(`группа ${group_name.replace(" ","$")} создана`)
},200)
}
});
}
}
function parts_load(){
load_parts((db)=>{
let parts = document.getElementById("obj_parts");
parts.innerHTML = "";
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"]}`;
part.id = `group_drop-${value["id"]}`;
part.classList.add("menu_btn")
part.classList.add("group_drop")
part.setAttribute("groups",`${value["groups"]}`)
part.setAttribute("pid",`${value["id"]}`)
part.append(part_text);
part.append(part_drop);
parts.append(part);
console.log(value);
})
})
}
parts_load();
</script>

21
views/admin/users.ejs Normal file
View File

@ -0,0 +1,21 @@
<%- include('../static/start.ejs',{name:"admin/users",async: true}) %>
<%- include('../header.ejs') %>
<style>
section{
width: 80vw;
margin: auto;
}
</style>
<section>
<h1 style="text-align: center;">пользователь</h1>
<%- include('../admin/users/user_reg.ejs') %>
<%- include('../admin/users/user_edit.ejs') %>
</section>
<%- include('../static/end.ejs') %>
<script>
setTimeout(()=>{
loaded()
},1000);
</script>

View File

@ -14,12 +14,64 @@
</div>
<div>
<label for="admin_check">админ. привелегии</label>
<input type="checkbox" name="admin" value='false' id="admin_check">
<input type="checkbox" name="admin" value='false' id="admin_check" onchange="admin_ch()">
<div id="right_checks" style="display: none;justify-content: space-evenly;">
<div>
<input type="checkbox" name="admin" value='false' id="admin_user_check" onchange="right_calc()">
<label for="admin_user_check">право на изменение обьектов</label>
</div>
<div>
<input type="checkbox" name="admin" value='false' id="admin_obj_check" onchange="right_calc()">
<label for="admin_obj_check">право на изменение пользователей</label>
</div>
</div>
</div>
<div id="reg_response"></div>
</form>
<script>
let rights = 0;
clear_checks();
function clear_checks(){
let check = document.getElementById("admin_check");
let obj_right = document.getElementById("admin_obj_check");
let user_right = document.getElementById("admin_user_check");
let checks = [check,obj_right,user_right];
checks.forEach(ch => {
ch.checked = false;
rights = 0;
});
}
function admin_ch(){
let check = document.getElementById("admin_check").checked;
let right_checks = document.getElementById("right_checks");
let obj_right = document.getElementById("admin_obj_check");
let user_right = document.getElementById("admin_user_check");
if (check){
right_checks.style.display = "flex";
}
else{
right_checks.style.display = "none";
clear_checks();
}
}
function right_calc(){
let obj_right = document.getElementById("admin_obj_check").checked;
let user_right = document.getElementById("admin_user_check").checked;
if(obj_right & user_right){
rights = 3;
}
else if(obj_right){
rights = 1;
}
else if(user_right){
rights = 2;
}
}
function reg(){
console.log("reg");
let login = document.getElementById("login").value;
@ -28,7 +80,7 @@
// console.log(login,pass,admin);
// console.log("cl reg");
if(login != ""&&pass!=""){
$.post( "/admin/users/new", { login:login,pass:pass,admin:admin })
$.post( "/admin/users/new", { login:login,pass:pass,admin:admin,rights:rights })
.done(function( res ) {
// console.log("serv reg");
if(res["out"] == "good"){

View File

@ -13,7 +13,7 @@
justify-content: space-between;
/* width: 200px; */
cursor: pointer;
width: 5vw;
width: 9vw;
display: flex;
/* width: 20vw; */
}
@ -26,7 +26,7 @@
/* width: 20vw; */
}
#top_panel{
height: 100px;
height: 10vh;
display: flex;
margin-bottom: 2vh;
margin-top: 1vh;
@ -48,9 +48,11 @@
.menu_btn{
background: ghostwhite;
cursor: pointer;
border: 1px black dashed;
border: 1px gray solid;
padding: 2px;
width: 220px;
border-radius: 0.5vw;
min-height: 2.5vw;
}
.cmenu{
position: absolute;
@ -58,7 +60,10 @@
background: ghostwhite;
color: black;
cursor: pointer;
border: 1px black solid;
border: 1px gray solid;
border-radius: 0.5vw;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top: 0px;
z-index: 500;
/* width: 218px; */
@ -85,8 +90,8 @@
/* height: 60px; */
}
.top_panel_right img{
width: 3vw;
height: 3vh;
width: 2.5vw;
/* height: 3vh; */
}
@media (max-width: 900px) {
#top_panel_right_main{
@ -132,7 +137,7 @@
<div id="user_menu" class="cmenu"></div>
<div id="top_div" style="background-color: rgba(red, green, blue, 0.5); width: 100%;height: 100%;position: absolute;inset: 0px;z-index: 300; display: none;" onclick="hide_menus()"></div>
<div id="top_div" style="background-color: transparent; width: 100%;height: 100%;position: absolute;inset: 0px;z-index: 300;" onclick="hide_menus()"></div>
<script>
get_from_uuid((res)=>{
@ -179,14 +184,16 @@
// menu.onmouseleave = () => menu.style.display = 'none';
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
// document.body.appendChild(menu)
open_menu();
}else if(e.target.id == "proj_menu"){
hide_menus();
let menu = document.getElementById("project_menu");
menu.style.display = 'block';
menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}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)
// menu.onmouseleave = () => menu.style.display = 'none';
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
// document.body.appendChild(menu)
open_menu();
}
else if(e.target.id == "user_buttons"){
hide_menus();
@ -196,10 +203,11 @@
menu.setAttribute("login_pass",document.getElementById(`pass_${e.target.classList[0]}`).innerText);
menu.setAttribute("login_admin",document.getElementById(`admin_${e.target.classList[0]}`).innerText);
menu.style.display = 'block';
menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}px`;
menu.style = `top:${e.target.getBoundingClientRect().top + 20}px;left:${e.target.getBoundingClientRect().left - 8}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)s
// document.body.appendChild(menu)
open_menu();
}
else if(e.target.id == "object_menu"){
@ -220,15 +228,36 @@
// menu.onmouseleave = () => menu.style.display = 'none';
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
// document.body.appendChild(menu)
open_menu();
}
else if(e.target.id == "proj_cost"){
document.getElementById("cost_list").style = `margin-top:3vw;left:${e.target.getBoundingClientRect().left}px`;
hide_menus();
document.getElementById("cost_list").style = `margin-top:2.5vw;left:${e.target.getBoundingClientRect().left}px`;
console.log("cost_list");
open_menu();
}
else if(e.target.id == "group_drop"){
document.getElementById("group").style = `margin-top:2vw;left:${e.target.getBoundingClientRect().left}px;width: 14vw;padding: 7.5px;`;
else if(`${e.target.id}`.split("-")[0] == "group_drop"){
hide_menus();
document.getElementById("group").innerHTML = "";
// console.log(e.target.getAttribute("groups").split(","));
document.getElementById("group").style = `margin-top:2.5vw;left:${e.target.getBoundingClientRect().left}px;width: 14vw;padding: 0.45vw;display:block;`;
console.log("group");
open_menu();
if (document.URL == "https://puzzle.n0r.su/admin/objects"){
load_groups(()=>{},e.target.getAttribute("groups").split(","),true)
let groups = document.getElementById("group");
let new_grp_btn = document.createElement("button");
new_grp_btn.setAttribute("onclick",`create_new_group(${e.target.getAttribute("pid")})`);
new_grp_btn.innerText = "доб. группу";
new_grp_btn.style.width = "14vw";
groups.append(new_grp_btn)
}
else{
load_groups(()=>{},e.target.getAttribute("groups").split(","))
}
// hide_menus();
// let menu = document.getElementById("object_edit_menu");
// let obj = e.target;

View File

@ -1,12 +1,14 @@
<script>
// document.getElementById("load_div").style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
</script>
<style>
#load_div{
width: 100vw;
height: 100vh;
height: 99vh;
display: flex;
position: absolute;
z-index: 10000;
background-color: white;
pointer-events: none;
transition: background-color 1s;
}
#load_logo{
@ -19,21 +21,38 @@
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
pointer-events: none;
pointer-events: all;
transition-duration: 800ms;
cursor: pointer;
}
#load_help{
width: 12vw;
justify-content: space-between;
position:absolute;
top:50%;
left:50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
display: none;
text-align: center;
pointer-events: all;
}
</style>
<div id="load_div">
<img id="load_logo" src="/img/Умничка лого с обводкой-02 1.png" alt="">
<img id="load_logo" src="/img/Умничка лого с обводкой-02 1.png" onclick="goto('/')" alt="">
<div id="load_help"><a href="">reload</a><br><a href="/main">go to main page</a></div>
</div>
<script>
let page_state = "";
let loaded_pos={
x:"10%",
// y:"6%",
// x: "55px",
y: "45px",
y: "4vh",
w:"8vw",
h:"8vh"
}
@ -48,22 +67,34 @@
let logo = document.getElementById("load_logo");
let load_div = document.getElementById("load_div");
load_div.style.backgroundColor = "transparent";
load_div.style.pointerEvents = "none";
document.getElementById("load_help").style.display = "none";
// load_div.style.transition = "background-color 1s"
// logo.style.transform = `translate(0px,0px)`;
document.getElementsByTagName("body")[0].style.overflow = "auto";
logo.style.left = loaded_pos.x;
logo.style.top = loaded_pos.y;
logo.style.width = loaded_pos.w
load_div.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
// load_div.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
page_state = "loaded";
}
function loading(){
let logo = document.getElementById("load_logo");
let load_div = document.getElementById("load_div");
load_div.style.backgroundColor = "white";
document.getElementsByTagName("body")[0].style.overflow = "hidden";
load_div.style.pointerEvents = "all";
// 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
load_div.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
// load_div.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
page_state = "loading";
}
setTimeout(()=>{
if(page_state != "loaded"){
document.getElementById("load_help").style.display = "block";
}
},2000)
</script>

View File

@ -8,7 +8,7 @@
margin: 0%;
background-image: url("/img/background/photo_2023-06-06_08-53-47\ 1.png");
background-repeat: no-repeat;
background-position: center;
background-position: center;
background-size: cover;
}
#login_form{

View File

@ -66,7 +66,7 @@
// console.log(scr)
// console.log("good");
// if(callback) callback(res);
goto(`/proj/${name}`);
goto(`/proj/load/${name}`);
}
})
}
@ -81,16 +81,16 @@
console.log(proj);
let div = document.getElementById("projs_div");
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj'>
<img src='${proj["img"]}' alt='${proj["name"]}' class="p_img" onclick="goto('/proj/${proj["name"]}')">
<img src='${proj["img"]}' alt='${proj["name"]}' class="p_img" onclick="goto('/proj/load/${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/edit.svg" style="width:24px;height:24px" onclick="">
<img src="/img/icon/copy.svg" style="width:24px;height:24px" onclick="">
<img src="/img/icon/download.svg" style="width:24px;height:24px" onclick="download_proj('${proj["id"]}','${proj["name"]}')">
<img src="/img/icon/trash.svg" style="width:24px;height:24px" onclick="del_proj('${proj["name"]}')">
</div>
</div>
@ -100,6 +100,13 @@
}
});
function download_proj(id,name){
$.post( "/proj/download",{id:id})
.done(function( res ) {
downloadTextFile(res,`${name}.json`)
})
}
function del_proj(proj_name){
let del = confirm(`удалить проект ${proj_name}?`);
if(del == true){

View File

@ -4,8 +4,8 @@
<script src="/lib/html2canvas.js"></script>
<style>
.drag{
height: 50px;
width: 50px;
height: 5vw;
width: 5vw;
position: absolute;
text-align: center;
margin: auto;
@ -46,12 +46,12 @@
.createzone {
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
height: 22px;
width: 22px;
border-radius: 0.4vw;
height: 3vw;
width: 3vw;
margin: 10px;
margin-top: 0px;
padding: 10px;
padding: 0.8vw;
transition: background-color 0.3s;
}
@ -70,10 +70,11 @@
.czones{
display: flex;
margin: 0px auto;
margin-top: 3vh;
/* justify-content: space-around; */
flex-wrap: wrap;
width: 75%;
/* height: 100px; */
height: 40vh;
/* overflow-x: auto; */
}
@ -129,20 +130,25 @@
<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;">
<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: 50px; text-align: center;" value="2" oninput="wall_size_change('height');resize_drags();">
<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: 150px;justify-content: space-between;">
<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: 50px; text-align: center;" value="4" oninput="wall_size_change('width');resize_drags();">
<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: 150px;justify-content: space-between;">
<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: 50px;" value="#000000" onchange="wall_color_change()">
<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 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%;">
<div style="display: flex;width: 15vw;justify-content: space-between;">
<button id="proj_cost" class="menu_btn" onclick="cost_drop();" style="width: 100%;">
<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;
@ -177,32 +183,131 @@
<div style="display:flex; justify-content: space-around;"></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: 20vw;">
<div>copy</div>
<div>back</div>
<div>forw</div>
<div>del</div>
<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>
<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 id="save_btn_icon" class="btn_icon" onclick="save_proj()"><img src="/img/icon/save.png" alt="save"></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> -->
<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>
<style>
.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" style="height: 500px;"></div>
<div class="czones"></div>
<script src="/lib/inter.js"></script>
<script>
let proj_name = "<%= proj_name %>";
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_del(){
if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
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) {
delete objs[drag.classList[0]][drag.id];
}
calc_total()
drag.remove();
}
}
catch{alert("объкт не выбран")}
}
function gids_change(){
group_drop();
}
function group_drop(){
let e = document.getElementById("group_drop")
setTimeout(()=>{
@ -217,13 +322,38 @@
i++;
}
if (i==0){
document.getElementsByClassName("czones")[0].innerHTML = "";
// 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"]}`;
part.id = `group_drop-${value["id"]}`;
part.classList.add("menu_btn")
part.classList.add("group_drop")
part.setAttribute("groups",`${value["groups"]}`)
part.append(part_text);
part.append(part_drop);
parts.append(part);
console.log(value);
})
})
function cost_drop(id){
// let e = document.getElementById("cost")
@ -248,59 +378,79 @@
}
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 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);
});
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_groups(()=>{
// get_objs();
load_proj_cloud();
});
function get_objs(group){
// });
function get_objs(group_div){
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"))
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()
}
// function del_proj(){
@ -323,12 +473,8 @@
function save_proj(){
// document.getElementById('top_panel_center').innerHTML=`сохранение ${proj_name}`;
save((res)=>{
alert("проект сохранён")
// document.getElementById('top_panel_center').innerHTML=`сохранено ${proj_name} в облако`;
alert("saved")
setTimeout((res)=>{
// document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;
},3000)
})
}

View File

@ -20,9 +20,9 @@
function open_menu(){
let menu_screen = document.getElementById("top_div");
menu_screen.style.display = "block";
// menu_screen.style.backgroundColor = "red";
menu_screen.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
}
hide_menus();
$('form').on('submit', function(event) {
event.preventDefault();
});
@ -39,5 +39,7 @@
// console.log("check");
}
});
try{
hide_menus();
}catch{}
</script>

View File

@ -32,6 +32,7 @@
width: 90vw;
margin: auto;
padding-block: 20px;
min-height: 800px;
}
html{
background-color:aliceblue;
@ -43,6 +44,8 @@
margin: 0px;
}
*{
touch-action: none;
user-select: none;
font: "Circe Rounded";
font-size: var(--main-font-size);
font-weight:100;