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

added object edit

Browse Source
This commit is contained in:
N0rdye
2023-07-10 14:41:59 +05:00
parent 387a0d135f
commit c9321dc7e5
8 changed files with 265 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,10 @@
}
</style>
<h1><%= lang("create new object") %></h1>
<div style="display: flex;justify-content: space-between;">
<h1>object</h1>
<h1 id="object_edit_type">creation</h1>
</div>
<div class="nobj">
<div>
<div class="img_preview">
@ -37,7 +40,7 @@
<div>
<div class="nobj_options">
<input type="text" id="nobj_name" placeholder="<%= lang("object name") %>">
<button onclick="create_obj()"><%= lang("create object")%></button>
<button onclick="create_obj()" id="obj_apply_btn"><%= lang("create object")%></button>
<div id="obj_resp"></div>
</div>
<div id="obj_input">
@ -56,6 +59,9 @@
<input style="width: 100%;" type="range" step="0.5" 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>
</div>
</div>
@ -76,6 +82,41 @@
}
}
function set_obj_edit_params(img = "",name = "",description="",height = 100,width = 100){
if(img ==""&&name ==""&&description == ""){
document.getElementById("object_edit_type").innerText = "creation";
document.getElementById("obj_apply_btn").innerText = "create object";
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("obj_apply_btn").setAttribute("onclick","save_edited_obj()");
}
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");
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;
height_slider.value = height;
width_slider.value = width;
height_text.innerText = `${height}см`;
width_text.innerText = `${width}см`;
}
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
@ -94,7 +135,7 @@
function new_obj(name,img,height,width,description,callback){
let select = document.getElementById("group_select");
$.post( "/new_obj", { name:name,img:img,desc:description,height:height,width:width,gid:select.options[select.selectedIndex].getAttribute("gid")})
$.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"]);
@ -108,7 +149,7 @@
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').src;
var img = document.querySelector('#img_prev').src;
name = name.replace(" ","$");
if (img != "http://n0rsrv2:3002/admin"){
document.getElementById("obj_resp").innerHTML = "creating object";

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

@ -11,6 +11,7 @@
img{
width: 100%;
height: 100%;
pointer-events: none;
}
#objs_in_group{
display: flex;
@ -22,10 +23,9 @@
<div>
<div id="objs_in_group"></div>
</div>
<div class="cmenu" id="object_menu">
<button>del object</button>
<button>change name</button>
<button>change size</button>
<div class="cmenu" id="object_edit_menu">
<button onclick="obj_del()">del object</button>
<button onclick="set_edit()">edit object</button>
</div>
<script>
@ -33,11 +33,16 @@
edit_get_objs();
});
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"));
}
function edit_get_objs(){
document.getElementById("objs_in_group").innerHTML = "";
edit_load_objs((data)=>{
data.forEach(value => {
// console.log(value);
console.log(value);
// // console.log($.cookie("cache"));
// console.log(localStorage.getItem(`${value["name"]}`));
if ($.cookie("cache") == "true"){
@ -59,17 +64,92 @@
})
}
function make(img){
let czones = document.getElementById("objs_in_group");
let czone = document.createElement('div');
czone.classList.add(value["name"]);
czone.classList.add("object");
czone.innerHTML = `<img src="${img}">`
czones.append(czone)
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)
}
});
})
}
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")})
.done(function( res ) {
if(res["out"] == "good"){
edit_get_objs();
}
});
}
}
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 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
}
let changes = {}
localStorage.removeItem((cur_atts["name"]+"/g/"+select.options[select.selectedIndex].value).replace(" ","$"));
attributes.forEach(element => {
// console.log(cur_atts[element],menu.getAttribute(`obj_${element}`));
if(element != attributes.at(-1)){
check_change(element);
// console.log(element);
}
else{
check_change(element);
// console.log(changes);
if(Object.keys(changes).length > 0){
make_obj_save(changes);
}
}
});
function check_change(element){
if(element == "name" && cur_atts[element] != menu.getAttribute(`obj_${element}`).split("/")[0]){
changes[element] = cur_atts[element];
}
else if (element != "name" && cur_atts[element] != menu.getAttribute(`obj_${element}`)){
changes[element] = cur_atts[element];
}
}
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")})
.done(function( res ) {
// console.log(res);
if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "object saved";
setTimeout(()=>{
edit_get_objs();
set_obj_edit_params();
if(res["name_err"]){
document.getElementById("obj_resp").innerHTML = ("name was not changed because its taken");
}
},1000)
}
});
}
}
function edit_load_obj(name,key,callback){
$.post( "/get_obj",{name:name,key:key})
.done(function( res ) {

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

@ -21,6 +21,7 @@
if(res["out"] == "good"){
// console.log(res["body"]);
load_groups();
edit_get_objs();
}
});
}
@ -33,6 +34,7 @@
if(res["out"] == "good"){
// console.log(res["body"]);
load_groups();
edit_get_objs();
}
});
}