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

added groups, stated adding object edit

Browse Source
This commit is contained in:
N0rdye
2023-07-10 11:13:50 +05:00
parent fc4b567c87
commit 387a0d135f
13 changed files with 354 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/admin.ejs
View File

@ -10,6 +10,8 @@
<h1 style="text-align: center;"><%= lang("hello admin") %></h1> <br>
<section>
<%- include('./admin/objects/object_creation.ejs') %>
<%- include('./admin/objects/object_groups.ejs') %>
<%- include('./admin/objects/object_edit.ejs') %>
</section>
<section>

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

@ -60,7 +60,7 @@
</div>
<script>
function obj_size_change(type){
function obj_size_change(type){
if(type == "height"){
let img = document.getElementById('img_prev');
let range = document.getElementById('obj_height');
@ -93,7 +93,8 @@
}
function new_obj(name,img,height,width,description,callback){
$.post( "/new_obj", { name:name,img:img,desc:description,height:height,width:width })
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")})
.done(function( res ) {
// if(res["out"] == "good"){
// console.log(res["body"]);
@ -108,7 +109,7 @@
let height = document.getElementById("obj_height").value;
let width = document.getElementById("obj_width").value;
var img = document.querySelector('img').src;
name = name.replace(" ","_");
name = name.replace(" ","$");
if (img != "http://n0rsrv2:3002/admin"){
document.getElementById("obj_resp").innerHTML = "creating object";
new_obj(name,img,height,width,description,(res)=>{
@ -117,6 +118,9 @@
}
else if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "object created";
setTimeout(()=>{
edit_get_objs();
},1000)
}
});
}

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

@ -0,0 +1,97 @@
<style>
.object{
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
height: 50px;
width: 50px;
margin: 5px;
margin-top: 0px;
}
img{
width: 100%;
height: 100%;
}
#objs_in_group{
display: flex;
flex-wrap: wrap;
}
</style>
<h1>object edit</h1>
<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>
<script>
load_groups(()=>{
edit_get_objs();
});
function edit_get_objs(){
document.getElementById("objs_in_group").innerHTML = "";
edit_load_objs((data)=>{
data.forEach(value => {
// console.log(value);
// // console.log($.cookie("cache"));
// console.log(localStorage.getItem(`${value["name"]}`));
if ($.cookie("cache") == "true"){
if (localStorage.getItem(`${value["name"]}`) == null){
edit_load_obj(value["name"],"`img`",(odata)=>{
localStorage.setItem(value["name"],odata["img"]);
make(odata["img"]);
})
}
else{
make(localStorage.getItem(value["name"]))
}
}
else{
$.cookie("cache","true",{path:"/;SameSite=Strict"})
edit_load_obj(value["name"],"`img`",(odata)=>{
localStorage.setItem(value["name"],odata["img"]);
make(odata["img"]);
})
}
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)
}
});
})
}
function edit_load_obj(name,key,callback){
$.post( "/get_obj",{name:name,key:key})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
callback(res["body"]);
}
});
}
function edit_load_objs(callback){
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"]);
}
});
}
</script>

40
views/admin/objects/object_groups.ejs Normal file
View File

@ -0,0 +1,40 @@
<h1>objects group</h1>
<div id="obj_group">
<div style="display: flex;justify-content: space-between;">
<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>
</div>
</div>
<script>
load_groups();
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})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
load_groups();
}
});
}
}
function create_new_group() {
let group_name = ask("enter group name");
if(group_name != ""){
$.post( "/admin/new/group", { name:group_name.replace(" ","$")})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
load_groups();
}
});
}
}
</script>

1
views/header.ejs
View File

@ -42,6 +42,7 @@
color: black;
cursor: pointer;
border: 1px black solid;
z-index: 100;
}
</style>
<script>

70
views/project.ejs
View File

@ -23,7 +23,7 @@
transition: background-color 0.3s;
position: absolute;
inset: 0px;
margin: 250px auto;
margin: 5px auto;
width: 400px;
height: 200px;
background-color: #fff;
@ -43,6 +43,7 @@
height: 22px;
width: 22px;
margin: 10px;
margin-top: 0px;
padding: 10px;
transition: background-color 0.3s;
}
@ -51,7 +52,7 @@
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
/* margin: 10px auto 30px; */
/* padding: 10px; */
height: 50px;
width: 50px;
@ -61,11 +62,11 @@
}
.czones{
display: flex;
margin: auto;
margin: 0px auto;
/* justify-content: space-around; */
flex-wrap: wrap;
width: 80%;
height: 100px;
width: 75%;
/* height: 100px; */
/* overflow-x: auto; */
}
@ -102,13 +103,24 @@
</style>
<div id="project_menu" class="cmenu"></div>
<div id="project_menu" class="cmenu">
<button id='proj_csave_btn' onclick='save_proj()'><%= lang(`save to cloud`) %></button> <br>
<button id='proj_cload_btn' onclick='load_proj_cloud()'><%=lang('load from cloud')%></button> <br>
<button id='proj_lsave_btn' onclick='save_proj_local()'><%=lang('save to local') %></button> <br>
<button id='proj_lload_btn' onclick='load_proj_local()'><%=lang('load from local')%></button> <br>
</div>
<!-- <div class="dropzone"></div> -->
<div class="inputs">
<div id="wall_input">
<div id="obj_group">
<div style="display: flex;justify-content: space-between;">
<div style="width: 50px;">object group</div>
<select name="" id="group_select" onchange="get_objs()"></select>
</div>
</div><br>
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="wall_height"><%= lang("height") %> </label>
@ -128,41 +140,50 @@
<img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="<%= lang('black hole') %>">
</div>
<div id="drags"></div>
<div class="zones" style="position: relative;">
<div id="drags"></div>
<div class="wall dropzone" id="wall"></div>
</div>
<script src="/lib/inter.js"></script>
<script>
load_objs((data)=>{
data.forEach(value => {
// console.log(value);
let czones = document.getElementsByClassName("czones")[0];
let czone = document.createElement('div');
czone.classList.add(value["name"]);
czone.classList.add("createzone");
czones.append(czone)
});
load_groups(()=>{
get_objs();
load_proj_cloud();
})
});
function get_objs(){
document.getElementsByClassName("czones")[0].innerHTML = "";
load_objs((data)=>{
data.forEach(value => {
let czones = document.getElementsByClassName("czones")[0];
let czone = document.createElement('div');
czone.classList.add(value["name"]);
czone.classList.add("createzone");
czones.append(czone)
});
drag_start()
})
}
let proj_name = "<%= proj_name %>";
if($.cookie("cache") ==null)$.cookie("cache","true",{path:"/proj;SameSite=Strict"});
if($.cookie("cache") ==null)$.cookie("cache","true",{path:"/;SameSite=Strict"});
// console.log(proj_name);
let menu = document.getElementById("project_menu");
document.getElementById("top_panel_left").innerHTML = `<div id='proj_menu' class="menu_btn"><%= lang("project settings") %></div>`;
menu.innerHTML += "<button id='proj_csave_btn' onclick='save_proj()'><%= lang(`save to cloud`) %></button> <br>";
menu.innerHTML += "<button id='proj_cload_btn' onclick='load_proj_cloud()'><%=lang('load from cloud')%></button> <br>";
menu.innerHTML += "<button id='proj_lsave_btn' onclick='save_proj_local()'><%=lang('save to local') %></button> <br>";
menu.innerHTML += "<button id='proj_lload_btn' onclick='load_proj_local()'><%=lang('load from local')%></button> <br>";
// menu.innerHTML += "<button id='proj_csave_btn' onclick='save_proj()'><%= lang(`save to cloud`) %></button> <br>";
// menu.innerHTML += "<button id='proj_cload_btn' onclick='load_proj_cloud()'><%=lang('load from cloud')%></button> <br>";
// menu.innerHTML += "<button id='proj_lsave_btn' onclick='save_proj_local()'><%=lang('save to local') %></button> <br>";
// menu.innerHTML += "<button id='proj_lload_btn' onclick='load_proj_local()'><%=lang('load from local')%></button> <br>";
if ($.cookie("cache") == "false") menu.innerHTML += "<div id='cache_switch' title='<%=lang('cache_title')%>'><button onclick='cache_change(true);'><%=lang('cache_off')%></button></div>";
else if ($.cookie("cache") == "true") menu.innerHTML += "<div id='cache_switch' title='<%=lang('cache_title')%>'><button onclick='cache_change(false);'><%=lang('cache_on')%></button></div>";
function cache_change(to){
let cache_switch = document.getElementById("cache_switch");
if(to) {cache_switch.innerHTML = "<button onclick='cache_change(false);' title='<%=lang('cache_title')%>'><%=lang('cache_on')%></button></div>";$.cookie("cache","true",{path:"/proj;SameSite=Strict"});}
else if(!to) {cache_switch.innerHTML = "<button onclick='cache_change(true);' title='<%=lang('cache_title')%>'><%=lang('cache_off')%></button></div>";$.cookie("cache","false",{path:"/proj;SameSite=Strict"});}
if(to) {cache_switch.innerHTML = "<button onclick='cache_change(false);' title='<%=lang('cache_title')%>'><%=lang('cache_on')%></button></div>";$.cookie("cache","true",{path:"/;SameSite=Strict"});}
else if(!to) {cache_switch.innerHTML = "<button onclick='cache_change(true);' title='<%=lang('cache_title')%>'><%=lang('cache_off')%></button></div>";$.cookie("cache","false",{path:"/;SameSite=Strict"});}
}
function save_proj(type){
document.getElementById('top_panel_center').innerHTML=` <%=lang("saving")%> ${proj_name}`;
@ -191,5 +212,6 @@
function isZooming(){
resize_drags();
}
</script>
<%- include('./static/end.ejs') %>