n0rdye
029ba9b1c3
modified: index.js modified: object.js modified: public/lib/fn.js new file: public/lib/inter_group_object.js modified: templates.js new file: views/admin/objects/group_object copy.ejs new file: views/admin/objects/group_object.ejs modified: views/admin/objects/object_creation.ejs modified: views/admin/objects/object_edit.ejs modified: views/project.ejs
286 lines
14 KiB
Plaintext
286 lines
14 KiB
Plaintext
|
||
<style>
|
||
.nobj{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: auto;
|
||
/* margin-bottom: 50px; */
|
||
}
|
||
#img_file{
|
||
text-overflow:ellipsis;
|
||
max-width:100px;
|
||
}
|
||
.img_preview{
|
||
/* width: 50px;
|
||
height: 20px; */
|
||
display: flex;
|
||
}
|
||
#img_prev{
|
||
object-fit: fill;
|
||
width: 200px;
|
||
height: 200px;
|
||
border: 1px black dotted;
|
||
}
|
||
</style>
|
||
|
||
<form action="#" class="nobj">
|
||
<style>
|
||
#img_prev_div:hover{
|
||
border: 1px solid black;
|
||
border-radius: 0.5vw;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
<div id="img_file_div" >
|
||
<div class="img_preview">
|
||
<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="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" onchange="color_warning()">
|
||
<label for="obj_color_check">возможность менять цвет</label><br>
|
||
<script>
|
||
function color_warning(){
|
||
let color_check = document.getElementById("obj_color_check");
|
||
let old_prev = document.getElementById("img_prev").getAttribute("img_static");
|
||
if(color_check.checked == true){
|
||
// obj_colors_load();
|
||
removeImageBackground(document.getElementById("img_prev").src).then((out)=>{
|
||
document.getElementById("img_prev").src = out;
|
||
})
|
||
msg("помните что только hex:#c8c8c8 или rgb:200,200,200 цвета будут заменины при смене цвета ",{type:"help",time:10});
|
||
}
|
||
else{
|
||
document.getElementById("img_prev").src = old_prev;
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<input type="checkbox" id="obj_group_check" onchange="group_object_check()">
|
||
<label for="obj_group_check">Сделать обьект группированным</label>
|
||
<script>
|
||
function group_object_check(){
|
||
let onc = `document.getElementById('img_file').click();msg('помните что граници обозначают элемент с которым можно взаимодействовать даже если он прозрачный',{time:10,type:'help'});msg('старайтесь не оставлять пустые/прозрачные отступы',{time:15,type:'help'})`
|
||
let group_check = document.getElementById("obj_group_check");
|
||
let img_div = document.getElementById("img_prev_div");
|
||
if(group_check.checked == true){
|
||
img_div.setAttribute("onclick",`save_edited_obj(${group_check.getAttribute("object_id")});goto('/admin/group_object?object_id=${group_check.getAttribute("object_id")}')`);
|
||
}
|
||
else{
|
||
img_div.setAttribute("onclick",onc);
|
||
}
|
||
|
||
}
|
||
</script>
|
||
</div>
|
||
</div>
|
||
<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: 50%;justify-content: space-between;">
|
||
<label for="obj_height">Высота</label>
|
||
<div style="display: flex;"><input type="text" class="btn_white" style="width: 3vw;" 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="300" id="obj_height" value="100" oninput="obj_size_change('height','range')">
|
||
</div>
|
||
<div>
|
||
<div style="display: flex;width: 50%;justify-content: space-between;">
|
||
<label for="obj_width" class="vc">Ширина</label>
|
||
<div style="display: flex;"><input type="text" class="btn_white" style="width: 3vw;" 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="300" id="obj_width" value="100" oninput="obj_size_change('width','range')">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<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; 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;" 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,inp){
|
||
if(type == "height"){
|
||
let img = document.getElementById('img_prev');
|
||
let range = document.getElementById('obj_height');
|
||
let text = document.getElementById('obj_height_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');
|
||
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 = "/img/placeholder.png",name = "",height = 100,width = 100,cost = 0,gid = 0,colors = false,grouped = 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.classList.add("btn_blue");
|
||
document.getElementById("object_edit_type").append(del_btn);
|
||
document.getElementById("obj_group_check").setAttribute("object_id",id)
|
||
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;
|
||
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 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");
|
||
let grouped_div = document.getElementById("obj_group_check");
|
||
|
||
name_div.value = name;
|
||
img_file.value = null;
|
||
img_prev.src = img;
|
||
img_prev.setAttribute("onerror",`msg('Изображение объекта "${name}" не найдено')`);
|
||
img_prev.setAttribute("img_static",img);
|
||
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);
|
||
grouped_div.checked = JSON.parse(grouped);
|
||
|
||
height_slider.value = height;
|
||
width_slider.value = width;
|
||
height_text.value = `${height}`;
|
||
width_text.value = `${width}`;
|
||
|
||
group_object_check();
|
||
}
|
||
|
||
function previewFile() {
|
||
var preview = document.querySelector('#img_prev');
|
||
var file = document.querySelector('input[type=file]').files[0];
|
||
var reader = new FileReader();
|
||
|
||
reader.onloadend = function () {
|
||
preview.src = reader.result;
|
||
}
|
||
|
||
if (file) {
|
||
reader.readAsDataURL(file);
|
||
} else {
|
||
preview.src = "/img/placeholder.png";
|
||
}
|
||
}
|
||
|
||
function new_obj(cost,name,img,height,width,gid,colors,callback){
|
||
if(gid != null){
|
||
if(name!=""){
|
||
if(img.split("/img/").at(-1) != "placeholder.png"){
|
||
let wait_msg = msg("добавление товара",{type:"wait"});
|
||
$.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{
|
||
msg("название не должно быть пустым",{type:"warning"})
|
||
}
|
||
}
|
||
else{
|
||
msg("группа не выбранна",{type:"warning"})
|
||
}
|
||
}
|
||
|
||
function create_obj(){
|
||
let gid = gids.at(-1);
|
||
let name = document.getElementById("nobj_name").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(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();
|
||
set_obj_edit_params();
|
||
},500)
|
||
}
|
||
});
|
||
}
|
||
else{
|
||
msg("картинка не выбрана",{type:"warning"})
|
||
}
|
||
}
|
||
else{
|
||
msg("название не должно быть пустым",{type:"warning"})
|
||
}
|
||
}
|
||
else{
|
||
msg("группа не выбранна",{type:"warning"})
|
||
}
|
||
}
|
||
</script> |