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

big

Browse Source
This commit is contained in:
N0rdye
2023-09-17 02:48:43 +05:00
parent 9cf2250b7b
commit 898391ef3b
36 changed files with 18333 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
views/admin/objects/object_creation.ejs
View File

@ -17,8 +17,9 @@
}
#img_prev{
object-fit: fill;
height: 200px;
width: 200px;
height: 200px;
border: 1px black dotted;
}
</style>
@ -32,116 +33,147 @@
</style>
<div id="img_file_div" >
<div class="img_preview">
<label for="img_file">макс. размер 2мб</label><br>
<label for="img_file">Изменение изображения</label><br>
<input hidden type="file" id="img_file" onchange="previewFile()" accept="image/*" value="" maxlength="1"><br>
</div>
<div id="img_prev_div" style="width: 200px; height: 200px;" onclick="document.getElementById('img_file').click();">
<img src="" id="img_prev" height="100" alt="выбрать изображение">
<div id="img_prev_div" style="min-width: 200px;min-height: 200px;margin-block: 2vh;" onclick="document.getElementById('img_file').click();msg('помните что граници обозначают элемент с которым можно взаимодействовать даже если он прозрачный',{time:10,type:'help'});msg('старайтесь не оставлять пустые/прозрачные отступы',{time:15,type:'help'})">
<img src="" id="img_prev" height="100" alt="изображение не выбрано">
</div>
<div>
<input type="checkbox" id="obj_color_check">
<label for="obj_color_check">можно менять цвет</label>
<input type="checkbox" id="obj_color_check" onchange="color_warning()">
<label for="obj_color_check">возможность менять цвет</label>
<script>
old_prev = document.getElementById("img_prev");
function color_warning(){
let color_check = document.getElementById("obj_color_check");
let old_prev = document.getElementById("img_prev").src;
if(color_check.checked == true){
removeImageBackground(document.getElementById("img_prev").src).then((out)=>{
document.getElementById("img_prev").src = out;
})
msg("при измении цвета все цвета кроме прозрачного изменятся",{type:"help",time:10});
}
else{
document.getElementById("img_prev").src = old_prev;
}
}
</script>
</div>
</div>
<textarea id="nobj_description" cols="30" rows="5" placeholder="описание товара"></textarea>
<div>
<div id="object_edit_type" style="display: flex;justify-content: space-between;"><div>creation</div></div>
<div class="nobj_options">
<input type="text" id="nobj_name" placeholder="название товара">
<input type="submit" onclick="create_obj()" id="obj_apply_btn" value="создать товар">
<div id="obj_resp"></div>
<div id="object_edit_type" style="display: flex;justify-content: space-between;margin-bottom: 2vh;"><div>Добавление</div></div>
<div class="nobj_options" style="margin-bottom: 3vh;">
<input type="text" id="nobj_name" placeholder="название товара" class="btn_white">
<input type="submit" onclick="create_obj()" id="obj_apply_btn" value="создать товар" class="btn_blue">
</div>
<div id="obj_input">
<div>
<div style="display: flex;width: 100%;justify-content: space-between;">
<label for="obj_height">высота</label>
<div id="obj_height_value">100см</div>
<div style="display: flex;width: 40%;justify-content: space-between;">
<label for="obj_height">Высота</label>
<div style="display: flex;"><input type="text" class="btn_white" style="width: 50px;" id="obj_height_value" value="100" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');obj_size_change('height','text')">
<div class="vc">см</div></div>
</div>
<input style="width: 100%;" type="range" step="1" min="1" max="100" id="obj_height" value="100" oninput="obj_size_change('height')">
<input style="width: 100%;" type="range" step="1" min="1" max="300" id="obj_height" value="100" oninput="obj_size_change('height','range')">
</div>
<div>
<div style="display: flex;width: 100%;justify-content: space-between;">
<label for="obj_width">ширина</label>
<div id="obj_width_value">100см</div>
<div style="display: flex;width: 40%;justify-content: space-between;">
<label for="obj_width" class="vc">Ширина</label>
<div style="display: flex;"><input type="text" class="btn_white" style="width: 50px;" id="obj_width_value" value="100" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');obj_size_change('width','text')">
<div class="vc">см</div></div>
</div>
<input style="width: 100%;" type="range" step="1" min="1" max="100" id="obj_width" value="100" oninput="obj_size_change('width')">
<input style="width: 100%;" type="range" step="1" min="1" max="300" id="obj_width" value="100" oninput="obj_size_change('width','range')">
</div>
</div>
<div>
<div style="display: flex;width: 100%;justify-content: space-between;">
<label for="obj_width">цена</label>
<div style="display: flex;width: 90%;justify-content: space-between;">
<label for="obj_width" class="vc">Цена</label>
<div style="display: flex;">
<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>
<input style="text-align: right; width: 40%;" id="obj_cost" type="text" class="btn_white" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" >
<div class="vc">руб.</div>
</div>
</div>
</div>
<div>
<button onclick="set_obj_edit_params()" style="width: 100%;margin-block:10px;">очистить параметры</button>
<button onclick="set_obj_edit_params()" style="width: 100%;margin-block:10px;" class="btn_blue">очистить параметры</button>
</div>
</div>
</form>
<script>
let cm_mult = 2;
let obj_edit_type = "new";
set_obj_edit_params();
function obj_size_change(type){
function obj_size_change(type,inp){
if(type == "height"){
let img = document.getElementById('img_prev');
let range = document.getElementById('obj_height');
let text = document.getElementById('obj_height_value');
img.style.height = `${range.value * 2}px`;
text.innerHTML = `${range.value}см`;
if (inp == "text"){
range.value = `${text.value}`;
}
else{
text.value = `${range.value}`;
}
img.style.height = `${range.value * cm_mult}px`;
}else if (type == "width"){
let img = document.getElementById('img_prev');
let range = document.getElementById('obj_width');
let text = document.getElementById('obj_width_value');
img.style.width = `${range.value * 2}px`;
text.innerHTML = `${range.value}см`;
if (inp == "text"){
range.value = `${text.value}`;
}
else{
text.value = `${range.value}`;
}
img.style.width = `${range.value * cm_mult}px`;
}
}
function set_obj_edit_params(img = "",name = "",description="",height = 100,width = 100,cost = 0,gid = 0, id = null){
if(img ==""&&name ==""&&description == ""){
function set_obj_edit_params(img = "/img/placeholder.png",name = "",height = 100,width = 100,cost = 0,gid = 0,colors = false, id = null){
// поменять на if id == null усё
if(id == null){
obj_edit_type = "new";
document.getElementById("object_edit_type").innerText = "добавление";
document.getElementById("obj_apply_btn").value = "добавить товар";
document.getElementById("obj_apply_btn").setAttribute("onclick","create_obj()");
}else {
obj_edit_type = "edit";
document.getElementById("object_edit_type").innerText = "редактирование";
let del_btn = document.createElement("button");
del_btn.setAttribute("onclick",`obj_del(${id})`);
del_btn.innerText = "удалить объект";
del_btn.innerText = "удалить товар";
del_btn.classList.add("btn_blue");
document.getElementById("object_edit_type").append(del_btn);
document.getElementById("obj_apply_btn").value = "сохранить";
document.getElementById("obj_apply_btn").setAttribute("onclick",`save_edited_obj(${id})`);
// document.getElementById("group_select").selectedIndex = document.getElementById("group_select").options[`obj_group_${gid}`].index;
gids = [parseInt(gid)]
console.log(gid);
if (gid != 0){gids = [parseInt(gid)]}
}
let img_file = document.getElementById("img_file");
let img_prev = document.getElementById("img_prev");
let name_div = document.getElementById("nobj_name");
let description_div = document.getElementById("nobj_description");
let height_slider = document.getElementById("obj_height");
let height_text = document.getElementById("obj_height_value");
let width_slider = document.getElementById("obj_width");
let width_text = document.getElementById("obj_width_value");
let cost_text = document.getElementById("obj_cost");
let colors_div = document.getElementById("obj_color_check");
name_div.value = name;
img_file.value = null;
img_prev.src = img;
img_prev.style.height = `${height*2}px`;
img_prev.style.width = `${width*2}px`;
description_div.value = description;
img_prev.style.height = `${height* cm_mult}px`;
img_prev.style.width = `${width* cm_mult}px`;
cost_text.value = cost;
colors_div.checked = JSON.parse(colors);
height_slider.value = height;
width_slider.value = width;
height_text.innerText = `${height}см`;
width_text.innerText = `${width}см`;
height_text.value = `${height}`;
width_text.value = `${width}`;
}
function previewFile() {
@ -156,62 +188,69 @@
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
preview.src = "/img/placeholder.png";
}
}
function new_obj(cost,name,img,height,width,description,callback){
let gid = gids[0];
function new_obj(cost,name,img,height,width,gid,colors,callback){
let wait_msg = msg("добавление товара",{type:"wait"});
if(gid != null){
if(name!=""){
$.post( "/admin/objects/new", { cost:cost,name:name,img:img,desc:description,height:height,width:width,gid:gid})
$.post( "/admin/objects/new", { cost:cost,name:name,img:img,height:height,width:width,gid:gid,colors:colors})
.done(function( res ) {
// if(res["out"] == "good"){
// console.log(res["body"]);
// }
msg_del(wait_msg.id);
callback(res);
});
}
else{
msg("название не должно быть пустым",{type:"warning"})
}
}
else{
alert("группа не выбранна")
let res = {out:"bad"}
callback(res);
msg("группа не выбранна",{type:"warning"})
}
}
function create_obj(){
let gid = gids.at(-1);
let name = document.getElementById("nobj_name").value;
let description = document.getElementById("nobj_description").value;
let height = document.getElementById("obj_height").value;
let width = document.getElementById("obj_width").value;
var img = document.querySelector('#img_prev').src;
var cost = document.getElementById("obj_cost").value;
var colors = document.getElementById("obj_color_check").checked;
name = name.replaceAll(" ","$");
if(name != ""){
if (img != "http://n0rsrv2:3002/admin"){
document.getElementById("obj_resp").innerHTML = "добавление товара";
new_obj(cost,name,img,height,width,description,(res)=>{
if(res["out"] == "bad" && res["err"] == "name"){
document.getElementById("obj_resp").innerHTML = "товар уже существует";
}
else if (res["out"] == "bad" ){
document.getElementById("obj_resp").innerHTML = "ошибка при добавлении товара";
}
else if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "товар добавлен";
setTimeout(()=>{
edit_get_objs();
},1000)
}
setTimeout(()=>{
document.getElementById("obj_resp").innerHTML = "";
},3000)
});
if(gid != null){
if(name != ""){
if (img != "/img/placeholder.png"){
new_obj(cost,name,img,height,width,gid,colors,(res)=>{
if(res["out"] == "bad" && res["err"] == "name"){
msg("товар уже существует",{type:"warning"});
}
else if (res["out"] == "bad" ){
msg("ошибка при добавлении товара",{type:"warning"});
}
else if(res["out"] == "good"){
msg("товар добавлен");
setTimeout(()=>{
edit_get_objs();
},5000)
}
});
}
else{
msg("картинка не выбрана",{type:"warning"})
}
}
else{
document.getElementById("obj_resp").innerHTML = "картинка не выбрана";
msg("название не должно быть пустым",{type:"warning"})
}
}
else{
msg("группа не выбранна",{type:"warning"})
}
}
</script>

87
views/admin/objects/object_edit.ejs
View File

@ -27,15 +27,15 @@
}
</style>
<div style="display: flex;justify-content: space-between;">
<h1>изменение объектов</h1>
<div id="find_obj_btns">
<button onclick="edit_get_objs(true)">найти по имени</button>
<button onclick='document.getElementById("objs_in_group").innerHTML = "";'>очистить</button>
</div>
</div>
<h1>Изменение объектов</h1>
<div>
<div id="objs_in_group"></div>
<div id="objs_in_group" style="max-height: 20vh;height: 20vh;"></div>
</div>
<div style="display: flex;justify-content: space-between;float: right;">
<div id="find_obj_btns">
<button onclick="edit_get_objs(true)" class="btn_blue">найти по имени</button>
<button onclick='gids = [];edit_get_objs();' class="btn_blue">очистить</button>
</div>
</div>
<script>
@ -46,18 +46,18 @@
function set_edit(id){
let menu = document.getElementById(`object_${id}`);
set_obj_edit_params(menu.getAttribute("src"),
menu.getAttribute("name").split("/")[0],
menu.getAttribute("description"),
menu.getAttribute("name").split("~")[0],
menu.getAttribute("height"),
menu.getAttribute("width"),
menu.getAttribute("cost"),
menu.getAttribute("gid"),
menu.getAttribute("colors"),
menu.getAttribute("obj_id"));
}
function edit_get_objs(by_name){
function edit_get_objs(by_name = false){
document.getElementById("objs_in_group").innerHTML = "";
set_obj_edit_params();
if (obj_edit_type == "edit") set_obj_edit_params();
edit_load_objs((data)=>{
data.forEach(value => {
// console.log(value);
@ -80,15 +80,19 @@
edit_get_objs();
}
hide_menus();
}
function obj_del(id){
// let select = document.getElementById("group_select");
let menu = document.getElementById(`object_${id}`);
if (confirm(`вы точно хотите удалить ${menu.getAttribute("name").split("/")[0]}?`)){
if (confirm(`вы точно хотите удалить ${menu.getAttribute("name").split("~")[0]}?`)){
let wait_msg = msg("удаление товара",{type:"wait"});
$.post( "/admin/objects/delete", { id:id,})
.done(function( res ) {
if(res["out"] == "good"){
msg_del(wait_msg.id);
msg("товара удалён");
edit_get_objs();
}
});
@ -98,58 +102,64 @@
function save_edited_obj(id){
let gid = gids[0];
let menu = document.getElementById(`object_${id}`);
let attributes = ["name","description","img","height","width","cost"];
let attributes = ["name","img","height","width","cost","colors"];
let cur_atts = {
name : document.getElementById("nobj_name").value,
description : document.getElementById("nobj_description").value,
height : document.getElementById("obj_height").value,
width : document.getElementById("obj_width").value,
img : document.querySelector('#img_prev').src,
cost : document.getElementById("obj_cost").value
img : document.getElementById('img_prev').src,
cost : document.getElementById("obj_cost").value,
colors : String(document.getElementById("obj_color_check").checked)
}
let changes = {}
attributes.forEach(element => {
// console.log(cur_atts[element],menu.getAttribute(`obj_${element}`));
if(element != attributes.at(-1)){
check_change(element);
// console.log(element);
}
else{
else if (element == attributes.at(-1)){
check_change(element);
// console.log(changes);
if(Object.keys(changes).length > 0){
make_obj_save(changes);
// console.log(changes);
}
else{
msg("нет изменений")
}
}
});
function check_change(element){
if(element == "name" && cur_atts[element] != menu.getAttribute(`${element}`).split("/")[0]){
// console.log(changes[element],cur_atts[element]);
if(element == "name" && cur_atts[element] != menu.getAttribute(`${element}`).split("~")[0]){
changes[element] = cur_atts[element];
}
else if (element != "name" && cur_atts[element] != menu.getAttribute(`${element}`)){
else if (element == "img" && cur_atts[element] != menu.getAttribute(`src`)){
changes[element] = cur_atts[element];
}
else if ((element != "name" && element != "img") && cur_atts[element] != menu.getAttribute(`${element}`)){
changes[element] = cur_atts[element];
}
}
function make_obj_save(){
load_group(gid,(group_db)=>{
if(changes["name"]) changes["name"] = (changes["name"]+"/g/"+group_db["name"].replaceAll(" ","$"));
document.getElementById("obj_resp").innerHTML = "сохранение товара";
if(changes["name"]) changes["name"] = (changes["name"]+"~g~"+group_db["name"]).replaceAll(" ","$");
let wait_msg = msg("сохранение товара",{type:"wait"});
$.post( "/admin/objects/edit", { id:menu.getAttribute(`obj_id`),changes:JSON.stringify(changes),gid:gid})
.done(function( res ) {
// console.log(res);
msg_del(wait_msg.id);
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)
if(res["name_err"]){
msg("название товара не было изменино поскольку оно занято",{type:"warning"})
}
else{
msg("товар сохранён");
setTimeout(()=>{
edit_get_objs();
set_obj_edit_params();
},1500)
}
}
});
})
@ -202,20 +212,21 @@
let obj = document.createElement('div');
let name_text = document.createElement('div');
let img_elm = document.createElement('img');
obj.title = `название:${value["name"].split("/")[0].replaceAll("$"," ")}\nцена:${value["cost"]}\nширина:${value["width"]}\nвысота${value["height"]}\nописание:${value["description"]}`;
obj.title = `название:${value["name"].split("~")[0].replaceAll("$"," ")}\nцена:${value["cost"]}\nширина:${value["width"]}\nвысота${value["height"]}\nименение цвета:${Boolean(value["colors"])}\nартикуль:${value["name"]}`;
obj.id = `object_${value["id"]}`;
obj.setAttribute("onclick",`set_edit(${value["id"]})`)
obj.classList.add(value["name"]);
obj.classList.add("object");
obj.setAttribute("name",value["name"].split("/")[0].replaceAll("$"," "))
obj.setAttribute("description",value["description"])
obj.setAttribute("name",value["name"].split("~")[0].replaceAll("$"," "))
obj.setAttribute("src",img)
obj.setAttribute("height",value["height"])
obj.setAttribute("width",value["width"])
obj.setAttribute("obj_id",value["id"])
obj.setAttribute("cost",value["cost"])
obj.setAttribute("colors",Boolean(value["colors"]))
obj.setAttribute("gid",value["gid"])
name_text.innerText = value["name"].split("/")[0].replaceAll("$"," ");
// name_text.innerText = value["name"].split("~")[0].replaceAll("$"," ");
img_elm.src = img;
obj.append(img_elm)
obj.append(name_text)

73
views/admin/objects/object_groups.ejs
View File

@ -4,25 +4,33 @@
/* height: 5vh; */
margin: auto 0px;
}
#obj_group {
margin-bottom: 20px;
}
.obj_group{
display: flex;
margin-top: 0.5vw;
}
.obj_group label{
width: 100%;
padding-inline: 0.3vw;
}
#obj_group{
margin-bottom: 5vh;
}
</style>
<div id="obj_group">
<h1>Разделы и группы</h1>
<div style="display: flex;justify-content: space-between;">
<div style="display: block;">
<h1>группы товаров</h1>
<button onclick="create_new_part()">доб. раздел</button>
</div>
<style>
.group_drop{
width: 15vw;
/* width: 15vw; */
padding: 2px;
min-width: 15vw;
}
.part_div{
margin-left: 3vw;
}
.group_drop *{
pointer-events: none;
overflow: auto;
@ -33,7 +41,7 @@
}
</style>
<div id="obj_parts" style="display: flex;justify-content: space-between; overflow: scroll;min-width: 50vw;">
<div id="obj_parts" style="display: flex;justify-content: space-between; overflow: scroll;min-width: 50vw;max-width: 70vw;">
</div>
<style>
.group_inp{
@ -47,6 +55,8 @@
<ul id="group" class="cmenu"></ul>
<!-- <select name="" id="group_select" onchange="edit_get_objs();"></select>
<select name="" id="part_select"></select> -->
<button onclick="create_new_part()" class="btn_blue">Добавить раздел</button>
</div>
</div>
@ -54,8 +64,29 @@
// load_groups();
function delete_group(gid,pid) {
let name = document.getElementById("obj_group_"+gid).getAttribute("group_name");
if(confirm(`вы уверены вы хотите удалить группу ${name}`) == true){
$.post( "/admin/groups/delete", { gid:gid,pid:pid})
msg(`вы уверены вы хотите удалить группу ${name}`,{type:"ask",res:(out)=>{
if (out == true){
$.post( "/admin/groups/delete", { gid:gid,pid:pid})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
// load_groups();
edit_get_objs();
hide_menus();
setTimeout(()=>{
parts_load();
msg(`группа ${name} удалена`)
},500)
}
});
}
}})
}
function delete_part(pid) {
let name = document.getElementById("group_drop-"+pid).innerText;
msg(`вы уверены вы хотите удалить раздел ${name}`,{type:"ask",res:(out)=>{
if(out == true){
$.post( "/admin/parts/delete", {pid:pid})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
@ -64,11 +95,12 @@
hide_menus();
setTimeout(()=>{
parts_load();
alert(`группа ${name} удалена`)
msg(`раздел ${name} удалён`)
},500)
}
});
}
}})
}
function create_new_group(pid) {
let group_name = ask("название группы");
@ -82,7 +114,7 @@
hide_menus();
setTimeout(()=>{
parts_load();
alert(`группа ${group_name.replaceAll(" ","$")} создана`)
msg(`группа ${group_name.replaceAll(" ","$")} создана`)
},500)
}
});
@ -100,7 +132,7 @@
hide_menus();
setTimeout(()=>{
parts_load();
alert(`раздел ${part_name.replaceAll(" ","$")} создан`)
msg(`раздел ${part_name.replaceAll(" ","$")} создан`)
},500)
}
});
@ -115,7 +147,8 @@
let part = document.createElement("button")
let part_text = document.createElement("div")
let part_drop = document.createElement("img")
let part_div = document.createElement("div");
part_drop.src = "/img/drop.png";
part_drop.alt = "\/";
@ -127,11 +160,23 @@
part.setAttribute("groups",`${value["groups"]}`)
part.setAttribute("count",`${value["count"]}`)
part.setAttribute("pid",`${value["id"]}`)
let part_del = document.createElement("button");
part_del.id = `del_part-${value["id"]}`;
part_del.setAttribute("onclick",`delete_part(${value["id"]})`);
part_del.innerHTML = "удалить раздел";
part_del.classList.add("btn_blue");
part_del.style.minWidth = "15vw";
part.append(part_text);
part.append(part_drop);
parts.append(part);
part_div.append(part_del);
part_div.append(part);
part_div.id = `part_div-${value["id"]}`;
part_div.classList.add("part_div")
parts.append(part_div);
console.log(value);
})
})