281 lines
11 KiB
Plaintext
281 lines
11 KiB
Plaintext
<%- include('./load.ejs') %>
|
||
<style>
|
||
#proj_top_panel{
|
||
display: flex;
|
||
/* width: 90%; */
|
||
justify-content: space-between;
|
||
width: 90%;
|
||
text-align: center;
|
||
margin: auto;
|
||
}
|
||
#top_panel_left{
|
||
/* float: left; */
|
||
justify-content: space-between;
|
||
/* width: 200px; */
|
||
cursor: pointer;
|
||
width: 9vw;
|
||
display: flex;
|
||
/* width: 20vw; */
|
||
}
|
||
#top_panel_center{
|
||
/* float: left; */
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
width: 58vw;
|
||
display: flex;
|
||
/* width: 20vw; */
|
||
}
|
||
#top_panel{
|
||
height: 10vh;
|
||
display: flex;
|
||
margin-bottom: 2vh;
|
||
margin-top: 1vh;
|
||
}
|
||
/* button{
|
||
/* margin-inline: 5px; */
|
||
/* } */
|
||
.tpanel{
|
||
margin: auto 0px;
|
||
/* width: 100%; */
|
||
height: 100%;
|
||
}
|
||
.tpanel button{
|
||
border: 0px;
|
||
background-color: transparent;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.menu_btn{
|
||
background: ghostwhite;
|
||
cursor: pointer;
|
||
border: 1px gray solid;
|
||
padding: 2px;
|
||
width: 220px;
|
||
border-radius: 0.5vw;
|
||
min-height: 2.5vw;
|
||
}
|
||
.cmenu{
|
||
position: absolute;
|
||
display: grid;
|
||
background: ghostwhite;
|
||
color: black;
|
||
cursor: pointer;
|
||
border: 1px gray solid;
|
||
border-radius: 0.5vw;
|
||
border-top-left-radius: 0px;
|
||
border-top-right-radius: 0px;
|
||
border-top: 0px;
|
||
z-index: 500;
|
||
/* width: 218px; */
|
||
}
|
||
#top_panel_right_main{
|
||
/* float: right; */
|
||
justify-content:space-between;
|
||
float: right;
|
||
display: flex;
|
||
cursor: pointer;
|
||
width: 14vw;
|
||
/* width: 20vw; */
|
||
/* height: 60px; */
|
||
}
|
||
#top_panel_right_sec{
|
||
/* float: right; */
|
||
justify-content:space-between;
|
||
float: left;
|
||
display: flex;
|
||
cursor: pointer;
|
||
width: 14vw;
|
||
transform: translateY(100%);
|
||
/* width: 20vw; */
|
||
/* height: 60px; */
|
||
}
|
||
.top_panel_right img{
|
||
width: 2.5vw;
|
||
/* height: 3vh; */
|
||
}
|
||
@media (max-width: 900px) {
|
||
#top_panel_right_main{
|
||
display: none;
|
||
}
|
||
#top_panel_right_sec{
|
||
display: flex;
|
||
}
|
||
#top_panel_center{
|
||
width: 70vw;
|
||
}
|
||
}
|
||
@media (min-width: 900px) {
|
||
#top_panel_right_main{
|
||
display: flex;
|
||
}
|
||
#top_panel_right_sec{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
#top_panel_center button{
|
||
border-radius: 0.5vw;
|
||
}
|
||
#top_panel_center :hover{
|
||
border: 1px solid black;
|
||
}
|
||
</style>
|
||
|
||
<header id="top_panel">
|
||
<!-- <div id="user_name"></div> -->
|
||
<div id="proj_top_panel">
|
||
<div id="top_panel_left" class="tpanel"></div>
|
||
<div id="top_panel_center" class="tpanel">
|
||
<button id="page_btn_main" onclick="goto('/main')">Мои проекты</button>
|
||
<button id="page_btn_tamp" onclick="goto('/temp')">Шаблоны</button>
|
||
<button id="page_btn_gallery" onclick="goto('/gallery')">Галерея</button>
|
||
<button id="page_btn_faq" onclick="goto('/faq')">FAQ</button>
|
||
<button id="page_btn_help" onclick="goto('/help')">Связаться с поддержкой</button>
|
||
|
||
</div>
|
||
<div id="top_panel_right_main" class="tpanel top_panel_right">
|
||
<a href=""><img src="/img/vk.svg" alt=""></a>
|
||
<a href=""><img src="/img/youtube.svg" alt=""></a>
|
||
<a href=""><img src="/img/ok.svg" alt=""></a>
|
||
<a href=""><img src="/img/telegram.svg" alt=""></a>
|
||
</div>
|
||
<div class="tpanel">
|
||
<button onclick='logout();'>Выход</button>
|
||
</div>
|
||
</div> <!-- <div><button onclick="logout();">logout</button></div> -->
|
||
</header>
|
||
<div id="user_menu" class="cmenu"></div>
|
||
|
||
|
||
<div id="top_div" style="background-color: transparent; width: 100%;height: 100%;position: absolute;inset: 0px;z-index: 300;" onclick="hide_menus()"></div>
|
||
|
||
<script>
|
||
get_from_uuid((res)=>{
|
||
// let uname = document.getElementById("user_name");
|
||
// let menu = document.getElementById("user_menu");
|
||
// let header = document.getElementById("top_panel");
|
||
// let right = document.getElementById("top_panel_right");
|
||
// let left = document.getElementById("top_panel_left");
|
||
|
||
// if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">проекты</button> <br>`;
|
||
// right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
|
||
|
||
let menu = document.getElementById("top_panel_center");
|
||
if (res["admin"] == true){
|
||
if (typeof admin != "undefined"){Object.values(admin).forEach(afunc => {afunc()});}
|
||
menu.innerHTML += `<button id="page_btn_admin" onclick='goto("/admin")'>Админ. панель</button><br>`;
|
||
switch (document.URL.split("/").at(-1)) {
|
||
case ("admin"):document.getElementById("page_btn_admin").style.border = "1px solid black";break;
|
||
case ("objects"):document.getElementById("page_btn_admin").style.border = "1px solid black";break;
|
||
case ("users"):document.getElementById("page_btn_admin").style.border = "1px solid black";break;
|
||
default:break;
|
||
}
|
||
}
|
||
switch (document.URL.split("/").at(-1)) {
|
||
case ("main"):
|
||
document.getElementById("page_btn_main").style.border = "1px solid black";
|
||
break;
|
||
default:break;
|
||
}
|
||
});
|
||
|
||
// console.log("asd");
|
||
|
||
// onscroll = (e)=>{
|
||
// hide_menus();
|
||
// }
|
||
onresize = (e)=>{
|
||
hide_menus();
|
||
}
|
||
onclick = (e) => {
|
||
// e.preventDefault()
|
||
// console.log(e);
|
||
// console.log(document.getElementById(e.target.id).parentElement);
|
||
// if(e.target.onclick != null){
|
||
// if(document.title == "login"){
|
||
// // console.log(document.title);
|
||
// log_by_sid();
|
||
// }else if(document.title != "login"){
|
||
// check_sid(true);
|
||
// // console.log("check");
|
||
// }
|
||
// }
|
||
if(e.target.id == "user_name"){
|
||
hide_menus();
|
||
let menu = document.getElementById("user_menu");
|
||
menu.style.display = 'block';
|
||
menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}px`;
|
||
// menu.onmouseleave = () => menu.style.display = 'none';
|
||
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
|
||
// document.body.appendChild(menu)
|
||
open_menu();
|
||
}else if(e.target.id == "proj_menu"){
|
||
hide_menus();
|
||
let menu = document.getElementById("project_menu");
|
||
menu.style.display = 'block';
|
||
menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}px`;
|
||
// menu.onmouseleave = () => menu.style.display = 'none';
|
||
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
|
||
// document.body.appendChild(menu)
|
||
open_menu();
|
||
}
|
||
else if(e.target.id == "user_buttons"){
|
||
hide_menus();
|
||
let menu = document.getElementById("user_edit_menu");
|
||
menu.setAttribute("login_id",e.target.classList[0]);
|
||
menu.setAttribute("login_name",document.getElementById(`login_${e.target.classList[0]}`).innerText);
|
||
menu.setAttribute("login_pass",document.getElementById(`pass_${e.target.classList[0]}`).innerText);
|
||
menu.setAttribute("login_admin",document.getElementById(`admin_${e.target.classList[0]}`).innerText);
|
||
menu.style.display = 'block';
|
||
menu.style = `top:${e.target.getBoundingClientRect().top + 20}px;left:${e.target.getBoundingClientRect().left - 8}px`;
|
||
// menu.onmouseleave = () => menu.style.display = 'none';
|
||
// menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
|
||
// document.body.appendChild(menu)
|
||
open_menu();
|
||
|
||
}
|
||
else if(e.target.id == "proj_cost"){
|
||
hide_menus();
|
||
document.getElementById("cost_list").style = `margin-top:2.5vw;left:${e.target.getBoundingClientRect().left}px`;
|
||
console.log("cost_list");
|
||
open_menu();
|
||
}
|
||
else if(`${e.target.id}`.split("-")[0] == "group_drop"){
|
||
hide_menus();
|
||
document.getElementById("group").innerHTML = "";
|
||
|
||
// console.log(e.target.getAttribute("groups").split(","));
|
||
console.log("group");
|
||
open_menu();
|
||
|
||
if (document.URL.split("/").at(-1) == "objects" && document.URL.split("/").at(-2) == "admin"){
|
||
document.getElementById("group").style = `margin-top:4vw;left:${e.target.getBoundingClientRect().left}px;width: 14vw;padding: 0.45vw;display:block;padding-bottom: 0.7vw;`;
|
||
if(e.target.getAttribute("count") != 0)load_groups(()=>{},e.target.getAttribute("groups").split(","),true)
|
||
let groups = document.getElementById("group");
|
||
let new_grp_btn = document.createElement("button");
|
||
new_grp_btn.setAttribute("onclick",`create_new_group(${e.target.getAttribute("pid")})`);
|
||
new_grp_btn.innerText = "Добавить группу";
|
||
new_grp_btn.classList.add("btn_blue");
|
||
new_grp_btn.style.width = "14vw";
|
||
groups.append(new_grp_btn)
|
||
}
|
||
else{
|
||
document.getElementById("group").style = `margin-top:2.5vw;left:${e.target.getBoundingClientRect().left}px;width: 14vw;padding: 0.45vw;display:block;padding-bottom: 0.7vw;`;
|
||
if(e.target.getAttribute("count") != 0)load_groups(()=>{},e.target.getAttribute("groups").split(","))
|
||
}
|
||
// hide_menus();
|
||
// let menu = document.getElementById("object_edit_menu");
|
||
// let obj = e.target;
|
||
// menu.style.display = 'block';
|
||
// // menu.style = `top:${e.target.getBoundingClientRect().top+27}px;left:${e.target.getBoundingClientRect().left-13}px`;
|
||
// menu.style = `top:${e.target.getBoundingClientRect().top + 40}px;left:${e.target.getBoundingClientRect().left - 5}px`;
|
||
// // menu.onmouseleave = () => menu.style.display = 'none';
|
||
// // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
|
||
// // document.body.appendChild(menu)
|
||
|
||
}
|
||
// else{
|
||
// hide_menus();
|
||
// }
|
||
}
|
||
</script> |