added multiple language support

This commit is contained in:
2023-07-06 17:13:59 +05:00
parent 1f5085490f
commit c25bd2e274
16 changed files with 605 additions and 350 deletions

View File

@ -18,14 +18,12 @@
height: 200px;
width: 200px;
}
</style>
<style>
.main_sec{
margin: auto;
/* display: flex; */
text-align: center;
}
#reg_form{
section{
width: 80vw;
margin: auto;
}
@ -34,61 +32,69 @@
<%- include('./static/start.ejs',{name:"admin",async: true}) %>
<%- include('./header.ejs') %>
<section class="main">
<h1>hello admin</h1>
<h1 style="text-align: center;"><%= lang("hello admin") %></h1> <br>
<section>
<h1><%= lang("create new object") %></h1>
<div class="nobj">
<div>
<div class="img_preview">
<label for="img_file">max size 2mb</label><br>
<label for="img_file"><%= lang("img max size") %></label><br>
<input type="file" id="img_file" onchange="previewFile()" accept="image/*" value="" maxlength="1"><br>
</div>
<div style="width: 200px; height: 200px;">
<img src="" id="img_prev" height="100" alt="Image preview...">
<img src="" id="img_prev" height="100" alt="<%= lang('Image preview') %>">
</div>
</div>
<textarea name="" id="nobj_description" cols="30" rows="5" placeholder="object description"></textarea>
<div>
<div class="nobj_options">
<input type="text" id="nobj_name" placeholder="object name">
<button onclick="create_obj()">create object</button>
<div id="obj_resp"></div>
</div>
<div id="obj_input">
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="obj_height">height </label>
<div id="obj_height_value">100см</div>
<textarea id="nobj_description" cols="30" rows="5" placeholder="<%= lang("object description") %>"></textarea>
<div>
<div class="nobj_options">
<input type="text" id="nobj_name" placeholder="<%= lang("object name") %>">
<button onclick="create_obj()"><%= lang("create object")%></button>
<div id="obj_resp"></div>
</div>
<div id="obj_input">
<div>
<div style="display: flex;width: 100%;justify-content: space-between;">
<label for="obj_height"><%= lang("height") %> </label>
<div id="obj_height_value">100см</div>
</div>
<input style="width: 100%;" type="range" step="0.5" min="1" max="100" id="obj_height" value="100" oninput="obj_size_change('height')">
</div>
<input type="range" step="0.1" min="1" max="100" id="obj_height" value="100" oninput="obj_size_change('height')">
</div>
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="obj_width">width</label>
<div id="obj_width_value">100см</div>
<div>
<div style="display: flex;width: 100%;justify-content: space-between;">
<label for="obj_width"><%= lang("width") %></label>
<div id="obj_width_value">100см</div>
</div>
<input style="width: 100%;" type="range" step="0.5" min="1" max="100" id="obj_width" value="100" oninput="obj_size_change('width')">
</div>
<input type="range" step="0.1" min="1" max="100" id="obj_width" value="100" oninput="obj_size_change('width')">
</div>
</div>
</div>
</div>
</section>
<form action="" method="get" onsubmit="return false;" id="reg_form">
<h1>user registration</h1>
<section class="main_sec">
<section>
<h1><%= lang("user registration") %></h1>
<div class="main_sec">
<div>
<input type="text" id="login" name="login" placeholder="login">
<input type="password" id="pass" name="pass" placeholder="password">
<button onclick='reg();'>reg</button>
<input type="text" id="login" name="login" placeholder="<%= lang("login") %>">
<input type="password" id="pass" name="pass" placeholder="<%= lang("password") %>">
<button onclick='reg();'><%= lang("register") %></button>
</div>
<div>
<label for="admin_check">admin</label>
<label for="admin_check"><%= lang("admin") %></label>
<input type="checkbox" name="admin" value='false' id="admin_check">
</div>
<div id="reg_response"></div>
</section>
</form>
</div>
</section>
<section style="display: flex; justify-content: space-between;">
<h1><%= lang("logs") %></h1> <br>
<div class="logs_div" style="margin: auto 0px;display: flex;">
<button onclick="goto('/get_logs');"><%= lang("download logs") %></button>
</div>
</section>
<%- include('./static/end.ejs') %>

View File

@ -44,7 +44,11 @@
border: 1px black solid;
}
</style>
<script>
"<%- include('./static/language.ejs') %>"
let language = JSON.parse('<%= lang_json() %>'.replaceAll("&#34;",'"'));
lang = (text)=>{return language["<%= cur_lang %>"][text]}
</script>
<header id="top_panel">
<!-- <div id="user_name"></div> -->
@ -56,8 +60,6 @@
</header>
<div id="user_menu" class="cmenu"></div>
<script>get_from_uuid((res)=>{
let uname = document.getElementById("user_name");
let menu = document.getElementById("user_menu");
@ -65,26 +67,26 @@
let right = document.getElementById("top_panel_right");
let left = document.getElementById("top_panel_left");
if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">main page</button> <br>`;
if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');"><%= lang("main page") %></button> <br>`;
right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
if (res["admin"] == true){
menu.innerHTML += `<button onclick='goto("/admin")'>admin panel</button><br>`;
menu.innerHTML += `<button onclick='goto("/admin")'><%= lang("admin panel") %></button><br>`;
}
menu.innerHTML += "<button onclick='logout();'>logout</button><br>";
menu.innerHTML += "<button onclick='logout();'><%= lang('logout') %></button><br>";
});
onclick = (e) => {
e.preventDefault()
// 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);
// console.log(document.title);
log_by_sid();
}else if(document.title != "login"){
check_sid(true);
console.log("check");
// console.log("check");
}
}
if(e.target.id == "user_name"){

View File

@ -45,7 +45,7 @@
<!-- <script src="/lib/interact.min.js"></script> -->
<section class="main">
<button onclick="new_proj()">new project</button>
<button onclick="new_proj()"><%= lang("new project") %></button>
<div id="projs_div"></div>
</section>
@ -72,7 +72,7 @@
projs.forEach(proj => {
// console.log(proj);
let div = document.getElementById("projs_div");
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')"><img height="200" width="290" src='${proj["img"]}' alt='${proj["name"]}'></img> <br>${proj["name"]}</button>`;
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')">${proj["name"]}<br><img height="200" width="290" src='${proj["img"]}' alt='${proj["name"]}'></img></button>`;
});
});
</script>

View File

@ -108,11 +108,10 @@
</style>
<%- include('./static/start.ejs',{name:proj_name,async: true}) %>
<%- include('./header.ejs') %>
<%- include('./header.ejs',{async: true}) %>
<script src="/lib/interact.js"></script>
<script src="/lib/html2canvas.js"></script>
<div id="drags">
<!-- <div class="cube drag spawn" id="cube_0" style="transform: translate(197.7px, 57.8667px);" data-x="197.6999969482422" data-y="57.866668701171875" >cube</div> -->
</div>
@ -126,32 +125,21 @@
<div id="wall_input">
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="wall_height">height </label>
<label for="wall_height"><%= lang("height") %> </label>
<div id="wall_height_value">0</div>
</div>
<input type="range" step="0.1" min="0" max="5" id="wall_height" value="2" oninput="wall_size_change('height')">
</div>
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="wall_width">width</label>
<label for="wall_width"><%= lang("width") %></label>
<div id="wall_width_value">0</div>
</div>
<input type="range" step="0.1" min="0" max="7" id="wall_width" value="4" oninput="wall_size_change('width')" onchange="resize_drags()">
</div>
</div>
<div class="czones">
<!-- <div class="cube createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div> -->
</div>
<img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="black hole">
<div class="czones"></div>
<img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="<%= lang('black hole') %>">
</div>
<div class="wall dropzone" id="wall"></div>
@ -196,37 +184,37 @@
if($.cookie("cache") ==null)$.cookie("cache","true",{path:"/proj;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">file</div>`;
menu.innerHTML += "<button id='proj_csave_btn' onclick='save_proj()'>save to cloud</button> <br>";
menu.innerHTML += "<button id='proj_cload_btn' onclick='load_proj_cloud()'>load from cloud</button> <br>";
menu.innerHTML += "<button id='proj_lsave_btn' onclick='save_proj_local()'>save to local storage</button> <br>";
menu.innerHTML += "<button id='proj_lload_btn' onclick='load_proj_local()'>load from local storage</button> <br>";
if ($.cookie("cache") == "false") menu.innerHTML += "<div id='cache_switch' title='if its on browser will stop large data in local storage (better performance)'><button onclick='cache_change(true);'>cache is off</button></div>";
else if ($.cookie("cache") == "true") menu.innerHTML += "<div id='cache_switch' title='if its on browser will stop large data in local storage (better performance)'><button onclick='cache_change(false);'>cache is on</button></div>";
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>";
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='if its on browser will stop large data in local storage (better performance)'>cache is on</button></div>";$.cookie("cache","true",{path:"/proj;SameSite=Strict"});}
else if(!to) {cache_switch.innerHTML = "<button onclick='cache_change(true);' title='if its on browser will stop large data in local storage (better performance)'>cache is 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:"/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"});}
}
function save_proj(type){
document.getElementById('top_panel_center').innerHTML=`saving ${proj_name}`;
document.getElementById('top_panel_center').innerHTML=` <%=lang("saving")%> ${proj_name}`;
save((res)=>{
document.getElementById('top_panel_center').innerHTML=`saved ${proj_name} to cloud`;
document.getElementById('top_panel_center').innerHTML=`<%=lang("saved")%> ${proj_name} <%=lang("to cloud")%>`;
setTimeout((res)=>{
document.getElementById("top_panel_center").innerText = `${proj_name} (cloud)`;
document.getElementById("top_panel_center").innerText = `${proj_name} (<%=lang("cloud")%>)`;
},3000)
})
}
function save_proj_local(type){
document.getElementById('top_panel_center').innerHTML=`saving ${proj_name}`;
document.getElementById('top_panel_center').innerHTML=` <%=lang("saving")%> ${proj_name}`;
save_local();
document.getElementById('top_panel_center').innerHTML=`saved ${proj_name} to local storage`;
document.getElementById('top_panel_center').innerHTML=`<%=lang("saved")%> ${proj_name} <%=lang("to local")%>`;
setTimeout((res)=>{
document.getElementById("top_panel_center").innerText = `${proj_name} (local)`;
document.getElementById("top_panel_center").innerText = `${proj_name} (<%=lang("local")%>)`;
},3000)
}

View File

@ -13,11 +13,11 @@
}
$(window).focus(function(){
if(document.title == "login"){
console.log(document.title);
// console.log(document.title);
log_by_sid();
}else if(document.title != "login"){
check_sid(true);
console.log("check");
// console.log("check");
}
});
</script>

92
views/static/language.ejs Normal file
View File

@ -0,0 +1,92 @@
<%
cur_lang = "ru";
lang = (text) => language[cur_lang][text];
ch_lang = (lang) => cur_lang = lang;
lang_json = () => JSON.stringify(language);
language = {
"ru":{
"main page": "проекты",
"admin panel": "админ панель",
"logout": "выйти",
"new project": "создать новый проект",
"Image preview": "превью картинки...",
"hello admin": "привет админ",
"height": "высота",
"width": "ширина",
"img max size": "макс. размер 2мб",
"user registration": "регистрация пользователя",
"create object": "создать обьект",
"admin": "админ",
"register": "зарегистрировать",
"download logs": "скачать логи",
"create new object": "создание нового обьекта",
"logs": "логи",
"password": "пароль",
"login": "логин",
"object name": "название обьекта",
"object description": "описание обьекта",
"black hole": "чёрная дыра",
"project settings": "настройки проекта",
"save to cloud": "сохранить в облако",
"load from cloud": "загрузить из облака",
"save to local": "сохранить в локальное хранилище",
"load from local": "загрузить из локального хранилища",
"cache_title": "если включено большые файлы будут сохраняться на локальное хранильще (улучшенная проиводительность)",
"cache_on": "кеш включен",
"cache_off": "кеш выключен",
"to local": "в локальное хранилище",
"local": "локальное хранилище",
"to cloud": "в облако",
"cloud": "облако",
"saved": "сохранено",
"saving": "сохраняется",
"loading": "загружается",
"loaded": "загружено",
"from": "из",
"to": "в",
"in": "в"
},
"en":{
"main page": "main page",
"admin panel": "admin panel",
"Image preview": "Image preview...",
"hello admin": "hello admin",
"height": "height",
"width": "width",
"img max size": "max size 2mb",
"user registration": "user registration",
"create object": "create object",
"admin": "admin",
"register": "register",
"download logs": "download logs",
"create new object": "create new object",
"cache_title": "if its on browser will store large data in local storage (better performance)",
"logout": "logout",
"new project": "new project",
"logs": "logs",
"password": "password",
"login": "login",
"object name": "object name",
"object description": "object description",
"black hole": "black hole",
"project settings": "project settings",
"save to cloud": "save to cloud",
"load from cloud": "load from cloud",
"save to local": "save to local",
"load from local": "load from local",
"cache_on": "cache is on",
"cache_off": "cache is off",
"to local": "to local",
"local": "local",
"to cloud": "to cloud",
"cloud": "cloud",
"saved": "saved",
"saving": "saving",
"loading": "loading",
"loaded": "loaded",
"from": "from",
"to": "to",
"in": "in"
}
}
%>

View File

@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/lib/ejs.js"></script>
<script src="/lib/fn.js"></script>
<!-- <script src="/lib/interact.min.js"></script> -->
<script src="/lib/jquery.js"></script>
<script src="/lib/jquery.cookie.js"></script>
<script src="/lib/ejs.js"></script>
<script src="/lib/aes.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -22,12 +22,13 @@
</style>
<script>
if(document.title == "login"){
console.log(document.title);
// console.log(document.title);
log_by_sid();
}else if(document.title != "login"){
check_sid(true);
console.log("check");
// console.log("check");
}
</script>
</head>
<body>