This commit is contained in:
2023-07-14 10:24:06 +05:00
parent 6dc312d156
commit 1a88b8bb64
17 changed files with 492 additions and 360 deletions

View File

@ -16,56 +16,64 @@
display: flex;
}
#img_prev{
object-fit: fill;
height: 200px;
width: 200px;
}
</style>
<div style="display: flex;justify-content: space-between;">
<h1>object</h1>
<h1 id="object_edit_type">creation</h1>
</div>
<div class="nobj">
<form action="#" class="nobj">
<div>
<div class="img_preview">
<label for="img_file"><%= lang("img max size") %></label><br>
<label for="img_file">макс. размер 2мб</label><br>
<input type="file" id="img_file" onchange="previewFile()" accept="image/*" value="" maxlength="1"><br>
</div>
<div style="width: 200px; height: 200px;">
<img src="" id="img_prev" height="100" alt="<%= lang('Image preview') %>">
<img src="" id="img_prev" height="100" alt="предпросмотр картинки">
</div>
</div>
<textarea id="nobj_description" cols="30" rows="5" placeholder="<%= lang("object description") %>"></textarea>
<textarea id="nobj_description" cols="30" rows="5" placeholder="описание товара"></textarea>
<div>
<div id="object_edit_type" style="text-align: right;">creation</div>
<div class="nobj_options">
<input type="text" id="nobj_name" placeholder="<%= lang("object name") %>">
<button onclick="create_obj()" id="obj_apply_btn"><%= lang("create object")%></button>
<input type="text" id="nobj_name" placeholder="название товара">
<input type="submit" onclick="create_obj()" id="obj_apply_btn" value="создать товар">
<div id="obj_resp"></div>
</div>
<div id="obj_input">
<div>
<div style="display: flex;width: 100%;justify-content: space-between;">
<label for="obj_height"><%= lang("height") %> </label>
<label for="obj_height">высота</label>
<div id="obj_height_value">100см</div>
</div>
<input style="width: 100%;" type="range" step="1" min="1" max="100" id="obj_height" value="100" oninput="obj_size_change('height')">
</div>
<div>
<div style="display: flex;width: 100%;justify-content: space-between;">
<label for="obj_width"><%= lang("width") %></label>
<label for="obj_width">ширина</label>
<div id="obj_width_value">100см</div>
</div>
<input style="width: 100%;" type="range" step="1" min="1" max="100" id="obj_width" value="100" oninput="obj_size_change('width')">
</div>
</div>
<div>
<button onclick="set_obj_edit_params()">clear parameters</button>
<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">
<div>руб.</div>
</div>
</div>
</div>
<div>
<button onclick="set_obj_edit_params()" style="width: 100%;margin-block:10px;">очистить параметры</button>
</div>
</div>
</div>
</form>
<script>
set_obj_edit_params();
function obj_size_change(type){
if(type == "height"){
let img = document.getElementById('img_prev');
@ -83,15 +91,17 @@
}
}
function set_obj_edit_params(img = "",name = "",description="",height = 100,width = 100){
function set_obj_edit_params(img = "",name = "",description="",height = 100,width = 100,cost = 0,gid = 0){
if(img ==""&&name ==""&&description == ""){
document.getElementById("object_edit_type").innerText = "creation";
document.getElementById("obj_apply_btn").innerText = "create object";
document.getElementById("object_edit_type").innerText = "добавление";
document.getElementById("obj_apply_btn").value = "добавить товар";
document.getElementById("obj_apply_btn").setAttribute("onclick","create_obj()");
}else {
document.getElementById("object_edit_type").innerText = "edit";
document.getElementById("obj_apply_btn").innerText = "save edited object";
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;
console.log(gid);
}
let img_file = document.getElementById("img_file");
@ -103,6 +113,7 @@
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");
name_div.value = name;
img_file.value = null;
@ -110,6 +121,7 @@
img_prev.style.height = `${height*2}px`;
img_prev.style.width = `${width*2}px`;
description_div.value = description;
cost_text.value = cost;
height_slider.value = height;
width_slider.value = width;
@ -133,15 +145,17 @@
}
}
function new_obj(name,img,height,width,description,callback){
function new_obj(cost,name,img,height,width,description,callback){
let select = document.getElementById("group_select");
$.post( "/admin/obj/new", { name:name,img:img,desc:description,height:height,width:width,gid:select.options[select.selectedIndex].getAttribute("gid")})
.done(function( res ) {
// if(res["out"] == "good"){
// console.log(res["body"]);
// }
callback(res);
});
if(name!=""){
$.post( "/admin/objects/new", { cost:cost,name,img:img,desc:description,height:height,width:width,gid:select.options[select.selectedIndex].getAttribute("gid")})
.done(function( res ) {
// if(res["out"] == "good"){
// console.log(res["body"]);
// }
callback(res);
});
}
}
function create_obj(){
@ -150,26 +164,29 @@
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;
name = name.replace(" ","$");
if (img != "http://n0rsrv2:3002/admin"){
document.getElementById("obj_resp").innerHTML = "creating object";
new_obj(name,img,height,width,description,(res)=>{
if(res["out"] == "bad" && res["err"] == "name"){
document.getElementById("obj_resp").innerHTML = "object already exist";
}
else if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "object created";
setTimeout(()=>{
edit_get_objs();
},1000)
setTimeout(()=>{
document.getElementById("obj_resp").innerHTML = "";
},3000)
}
});
}
else{
document.getElementById("obj_resp").innerHTML = "image not selected";
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"] == "good"){
document.getElementById("obj_resp").innerHTML = "товар добавлен";
setTimeout(()=>{
edit_get_objs();
},1000)
setTimeout(()=>{
document.getElementById("obj_resp").innerHTML = "";
},3000)
}
});
}
else{
document.getElementById("obj_resp").innerHTML = "картинка не выбрана";
}
}
}
</script>

View File

@ -3,29 +3,44 @@
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
height: 50px;
width: 50px;
height: 55px;
width: 55px;
margin: 5px;
margin-top: 0px;
margin-bottom: 20px;
}
img{
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
#objs_in_group{
#objs_in_group,#founded_objs_list{
display: flex;
flex-wrap: wrap;
padding: 0px;
}
#find_obj_btns{
/* display: flex; */
margin: auto 0px;
/* height: 25px; */
}
</style>
<h1>object edit</h1>
<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>
</div>
</div>
<div>
<div id="objs_in_group"></div>
</div>
<div class="cmenu" id="object_edit_menu">
<button onclick="obj_del()">del object</button>
<button onclick="set_edit()">edit object</button>
<button onclick="obj_del()">удалить объект</button>
<button onclick="set_edit()">редактирование объекта</button>
</div>
<script>
@ -35,42 +50,28 @@
function set_edit(){
let menu = document.getElementById("object_edit_menu");
set_obj_edit_params(menu.getAttribute("obj_img"),menu.getAttribute("obj_name").split("/")[0],menu.getAttribute("obj_description"),menu.getAttribute("obj_height"),menu.getAttribute("obj_width"));
set_obj_edit_params(menu.getAttribute("obj_img"),menu.getAttribute("obj_name").split("/")[0],menu.getAttribute("obj_description"),menu.getAttribute("obj_height"),menu.getAttribute("obj_width"),menu.getAttribute("obj_cost"),menu.getAttribute("obj_gid"));
}
function edit_get_objs(){
function edit_get_objs(by_name){
document.getElementById("objs_in_group").innerHTML = "";
set_obj_edit_params();
edit_load_objs((data)=>{
data.forEach(value => {
// console.log(value);
// // console.log($.cookie("cache"));
edit_load_obj(value["name"],"`img`",(odata)=>{
make(odata["img"]);
})
function make(img){
let obj_list = document.getElementById("objs_in_group");
let obj = document.createElement('div');
obj.id = "object_menu";
obj.classList.add(value["name"]);
obj.classList.add("object");
obj.setAttribute("name",value["name"])
obj.setAttribute("description",value["description"])
obj.setAttribute("src",img)
obj.setAttribute("height",value["height"])
obj.setAttribute("width",value["width"])
obj.setAttribute("obj_id",value["id"])
obj.innerHTML = `<img src="${img}">`
obj_list.append(obj)
}
make_obj(odata["img"],value,"objs_in_group");
})
});
})
},by_name)
}
function obj_del(){
let select = document.getElementById("group_select");
let menu = document.getElementById("object_edit_menu");
if (confirm(`are you sure you want to delete object ${menu.getAttribute("obj_name").split("/")[0]}`)){
$.post( "/admin/obj/del", { id:menu.getAttribute(`obj_id`),gid:select.options[select.selectedIndex].getAttribute("gid"),name:menu.getAttribute("obj_name")})
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")})
.done(function( res ) {
if(res["out"] == "good"){
edit_get_objs();
@ -82,13 +83,14 @@
function save_edited_obj(){
let select = document.getElementById("group_select");
let menu = document.getElementById("object_edit_menu");
let attributes = ["name","description","img","height","width"];
let attributes = ["name","description","img","height","width","cost"];
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
img : document.querySelector('#img_prev').src,
cost : document.getElementById("obj_cost").value
}
let changes = {}
attributes.forEach(element => {
@ -102,6 +104,7 @@
// console.log(changes);
if(Object.keys(changes).length > 0){
make_obj_save(changes);
// console.log(changes);
}
}
});
@ -115,17 +118,17 @@
}
function make_obj_save(){
if(changes["name"]) changes["name"] = (changes["name"]+"/g/"+select.options[select.selectedIndex].value).replace(" ","$");
document.getElementById("obj_resp").innerHTML = "saving object";
$.post( "/admin/obj/edit", { id:menu.getAttribute(`obj_id`),changes:JSON.stringify(changes),gid:select.options[select.selectedIndex].getAttribute("gid")})
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 = "object saved";
document.getElementById("obj_resp").innerHTML = "товар сохранён";
setTimeout(()=>{
edit_get_objs();
set_obj_edit_params();
if(res["name_err"]){
document.getElementById("obj_resp").innerHTML = ("name was not changed because its taken");
document.getElementById("obj_resp").innerHTML = ("название товара не было изменино поскольку оно занято");
}
},1000)
setTimeout(()=>{
@ -146,18 +149,56 @@
});
}
function edit_load_objs(callback){
function edit_load_objs(callback,by_name = false){
let select = document.getElementById("group_select");
$.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"]);
}
});
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"]);
}
});
}
else{
let name = ask("название");
if(name != "")[
$.post( "/admin/objects/find", { name:name.replace(" ","$")})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
callback(res["body"])
}
})
]
}
}
function make_obj(img,value,list_id){
let obj_list = document.getElementById(list_id);
let obj = document.createElement('div');
let name_text = document.createElement('div');
let img_elm = document.createElement('img');
obj.title = `название:${value["name"].split("/")[0].replace("$"," ")}\nцена:${value["cost"]}\nширена:${value["width"]}\nвысота${value["height"]}\nописание:${value["description"]}`;
obj.id = "object_menu";
obj.classList.add(value["name"]);
obj.classList.add("object");
obj.setAttribute("name",value["name"].split("/")[0].replace("$"," "))
obj.setAttribute("description",value["description"])
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("gid",value["gid"])
name_text.innerText = value["name"].split("/")[0].replace("$"," ");
img_elm.src = img;
obj.append(img_elm)
obj.append(name_text)
obj_list.append(obj)
}
</script>

View File

@ -1,11 +1,17 @@
<h1>objects group</h1>
<style>
#obj_group button,#obj_group select{
height: 25px;
margin: auto 0px;
}
</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: 200px;">
<button onclick="create_new_group()">create new group</button>
<button onclick="delete_group()">delete group</button>
<div style="display: flex;justify-content: space-between;width: 220px;">
<button onclick="create_new_group()">создать группу</button>
<button onclick="delete_group()">удалить группу</button>
</div>
</div>
</div>
@ -15,8 +21,8 @@
function delete_group() {
let select = document.getElementById("group_select");
let group_id = select.options[select.selectedIndex].getAttribute("gid");
if(confirm(`are you sure you want to delete group ${select.options[select.selectedIndex].text}`) == true){
$.post( "/admin/delete/group", { gid:group_id})
if(confirm(`вы уверены вы хотите удалить группу ${select.options[select.selectedIndex].text}`) == true){
$.post( "/admin/groups/delete", { gid:group_id})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
@ -27,9 +33,9 @@
}
}
function create_new_group() {
let group_name = ask("enter group name");
let group_name = ask("название группы");
if(group_name != ""){
$.post( "/admin/new/group", { name:group_name.replace(" ","$")})
$.post( "/admin/groups/new", { name:group_name.replace(" ","$")})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);