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>