ed
This commit is contained in:
Nordi98
parent
48a36209b5
commit
884f3df7cf
262 changed files with 223207 additions and 2 deletions
|
|
@ -0,0 +1,14 @@
|
|||
class FileSearch{
|
||||
constructor(){
|
||||
this.timeout = null
|
||||
}
|
||||
|
||||
startTimer(value, element){
|
||||
if(this.timeout != null){
|
||||
clearTimeout(this.timeout);
|
||||
}
|
||||
this.timeout = setTimeout(function(){
|
||||
SearchFiles(element)
|
||||
},value);
|
||||
}
|
||||
}
|
||||
685
resources/[jobs]/[mdt]/myMechanicMDT/html/js/classes/form.js
Normal file
685
resources/[jobs]/[mdt]/myMechanicMDT/html/js/classes/form.js
Normal file
|
|
@ -0,0 +1,685 @@
|
|||
class Form{
|
||||
constructor(){
|
||||
}
|
||||
static TextBox(mandatory, translation_key, value){
|
||||
let validateClass = "";
|
||||
if(mandatory){
|
||||
validateClass = " needs-validation"
|
||||
}
|
||||
return `
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">${getTranslation(translation_key)}</span>
|
||||
</label>
|
||||
<input id="input-${translation_key}" type="text" placeholder="" class="input input-sm input-bordered ${validateClass}" value="${value}" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
static Hidden(translation_key, value){
|
||||
return `
|
||||
<div class="form-control" style="display:none">
|
||||
<input id="input-${translation_key}" type="text" placeholder="" class="input input-sm input-bordered" value="${value}" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static NumberField(mandatory, translation_key, value, field_class = "", readonly = false, includeLabel = true){
|
||||
let validateClass = "";
|
||||
|
||||
let disabled = "";
|
||||
|
||||
if(mandatory){
|
||||
validateClass = " needs-validation"
|
||||
}
|
||||
|
||||
if(field_class != ""){
|
||||
field_class = " " + field_class;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(readonly){
|
||||
disabled = " disabled";
|
||||
}
|
||||
|
||||
let disabledKeys = ["+", "." , "-", ","];
|
||||
let step = "1";
|
||||
|
||||
let onkeydownkeyCodes = "";
|
||||
for(var i=0; i < disabledKeys.length;i++){
|
||||
onkeydownkeyCodes += (onkeydownkeyCodes == "" ? "" : " || " ) + "event.key==='"+disabledKeys[i]+"'";
|
||||
}
|
||||
|
||||
|
||||
if(includeLabel){
|
||||
return `
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">${getTranslation(translation_key)}</span>
|
||||
</label>
|
||||
<input id="input-${translation_key}" type="number" onpaste="return false;" onkeydown="if(${onkeydownkeyCodes}){event.preventDefault();}" placeholder="" class="input input-sm input-bordered ${validateClass} ${field_class}" value="${value}" ${disabled}/>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
else{
|
||||
return `
|
||||
<div class="form-control">
|
||||
<input id="input-${translation_key}" type="number" onpaste="return false;" onkeydown="if(${onkeydownkeyCodes}){event.preventDefault();}" placeholder="" class="input input-sm input-bordered ${validateClass} ${field_class}" value="${value}" ${disabled}/>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
static TextAreaGrow(){
|
||||
Array.from(document.querySelectorAll(".ta-autogrow")).forEach(function(ta){
|
||||
ta.style.height='auto';
|
||||
ta.style.height = (ta.scrollHeight + 2) + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
static TextArea(mandatory, translation_key, value, autogrow = false, rows = 3){
|
||||
let validateClass = "";
|
||||
let onInput = "";
|
||||
let autoGrowClass = "";
|
||||
|
||||
if(mandatory){
|
||||
validateClass = " needs-validation"
|
||||
}
|
||||
|
||||
|
||||
if(autogrow){
|
||||
onInput = `onInput="this.style.height='auto'; this.style.height = (this.scrollHeight + 2) + 'px';"`;
|
||||
autoGrowClass = " ta-autogrow";
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">${getTranslation(translation_key)}</span>
|
||||
</label>
|
||||
<textarea rows="${rows}" id="input-${translation_key}" type="text" placeholder="" ${onInput} class="textarea textarea-sm textarea-bordered ${validateClass}${autoGrowClass}" >${value}</textarea>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static DateField(mandatory, translation_key, value){
|
||||
let validateClass = "";
|
||||
|
||||
if(mandatory){
|
||||
validateClass = " needs-validation"
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">${getTranslation(translation_key)}</span>
|
||||
</label>
|
||||
<input id="input-${translation_key}" type="date" placeholder=""class="input input-sm input-bordered ${validateClass}" value="${value}" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static Combobox(mandatory, translation_key, value, options){
|
||||
let validateClass = "";
|
||||
|
||||
if(mandatory){
|
||||
validateClass = " needs-validation";
|
||||
}
|
||||
|
||||
let optionsHtml = ``;
|
||||
for(let i=0; i<options.length; i++){
|
||||
let selected = "";
|
||||
if(options[i].id == value){
|
||||
selected = " selected";
|
||||
}
|
||||
|
||||
optionsHtml += `<option value="${options[i].id}" ${selected}>${options[i].name}</option>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">${getTranslation(translation_key)}</span>
|
||||
</label>
|
||||
<select id="input-${translation_key}" class="select select-sm select-bordered ${validateClass}" value="${value}">
|
||||
${optionsHtml}
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static refillFilesDropDown(element, data){
|
||||
data = data.data
|
||||
|
||||
let filesOptions = [
|
||||
{"id":-1, "name":getTranslation("unknown")}
|
||||
,{"id":-2, "name":getTranslation("new_file"), "show_extra_field":true}
|
||||
];
|
||||
|
||||
if(sync.isActive("files")){
|
||||
filesOptions = [
|
||||
{"id":-1, "name":getTranslation("unknown")}
|
||||
];
|
||||
}
|
||||
|
||||
data = [...filesOptions, ...data];
|
||||
|
||||
|
||||
let parentDiv = element.parentElement;
|
||||
|
||||
let buttonLabel = "...";
|
||||
let mandatory = element.getAttribute("data-mandatory") == "true";
|
||||
let translation_key = element.getAttribute("data-translationkey");
|
||||
|
||||
let li = parentDiv.getElementsByTagName("li");
|
||||
|
||||
while (li[0]){
|
||||
parentDiv.removeChild(li[0])
|
||||
}
|
||||
|
||||
|
||||
for(let i=0; i<data.length; i++){
|
||||
let selected = "";
|
||||
if(data[i].id == -1){
|
||||
buttonLabel = data[i].name;
|
||||
selected = " active"
|
||||
}
|
||||
|
||||
let el = document.createElement("li");
|
||||
el.setAttribute("data-validate", mandatory);
|
||||
el.setAttribute("parentId", `input-${translation_key}`);
|
||||
el.setAttribute("value", data[i].id);
|
||||
el.setAttribute("show-childtext", data[i].show_extra_field ?? "false");
|
||||
el.innerHTML = `<a class="${selected}">${data[i].name}</a>`;
|
||||
|
||||
el.onclick = function(){
|
||||
if(!this.classList.contains("active")){
|
||||
Array.from(this.parentElement.querySelectorAll(".active")).forEach(function(itm){
|
||||
itm.classList.remove("active");
|
||||
});
|
||||
|
||||
Array.from(this.getElementsByTagName("a")).forEach(function(itm){
|
||||
itm.classList.add("active");
|
||||
});
|
||||
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").value = "";
|
||||
document.getElementById(this.getAttribute("parentId") + "-button").innerText = this.innerText;
|
||||
document.getElementById(this.getAttribute("parentId") + "-dropdown").blur();
|
||||
document.getElementById(this.getAttribute("parentId")).value = this.getAttribute("value");
|
||||
|
||||
if(this.getAttribute("show-childtext") == "true"){
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").style.display = "";
|
||||
if(this.getAttribute("data-validate") == "true"){
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").classList.add("needs-validation");
|
||||
}
|
||||
}
|
||||
else{
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").style.display = "none";
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").classList.remove("needs-validation");
|
||||
}
|
||||
}
|
||||
Form.validate();
|
||||
}
|
||||
|
||||
|
||||
parentDiv.appendChild(el)
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
static initSearchComboboxes(){
|
||||
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll(".filterablecombobox-search")).forEach(function(item){
|
||||
item.onkeyup = function(){
|
||||
globalFileSearcher.startTimer(500, this)
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll(".filterablecombobox")).forEach(function(item){
|
||||
//get children
|
||||
let childs = item.getElementsByTagName("li");
|
||||
for(let i=0; i<childs.length; i++){
|
||||
childs[i].onclick = function(){
|
||||
if(!this.classList.contains("active")){
|
||||
Array.from(this.parentElement.querySelectorAll(".active")).forEach(function(itm){
|
||||
itm.classList.remove("active");
|
||||
});
|
||||
|
||||
Array.from(this.getElementsByTagName("a")).forEach(function(itm){
|
||||
itm.classList.add("active");
|
||||
});
|
||||
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").value = "";
|
||||
document.getElementById(this.getAttribute("parentId") + "-button").innerText = this.innerText;
|
||||
document.getElementById(this.getAttribute("parentId") + "-dropdown").blur();
|
||||
document.getElementById(this.getAttribute("parentId")).value = this.getAttribute("value");
|
||||
|
||||
if(this.getAttribute("show-childtext") == "true"){
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").style.display = "";
|
||||
if(this.getAttribute("data-validate") == "true"){
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").classList.add("needs-validation");
|
||||
}
|
||||
}
|
||||
else{
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").style.display = "none";
|
||||
document.getElementById(this.getAttribute("parentId") + "-new-name").classList.remove("needs-validation");
|
||||
}
|
||||
}
|
||||
Form.validate();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
static SearchCombobox(mandatory, translation_key, value, options, database_id){
|
||||
let validateClass = "";
|
||||
|
||||
if(mandatory){
|
||||
validateClass = " needs-validation";
|
||||
}
|
||||
let optionsHtml = ``;
|
||||
let buttonLabel = "..."
|
||||
|
||||
let activeFound = false;
|
||||
|
||||
for(let i=0; i<options.length; i++){
|
||||
let selected = "";
|
||||
|
||||
if(options[i].id == value){
|
||||
buttonLabel = options[i].name;
|
||||
selected = " active"
|
||||
activeFound = true;
|
||||
|
||||
|
||||
}
|
||||
optionsHtml += `<li data-validate="${mandatory}" parentId="input-${translation_key}" value="${options[i].id}" show-childtext="${options[i].show_extra_field ?? "false"}"><a class="${selected}">${options[i].name}</a></li>`;
|
||||
}
|
||||
|
||||
|
||||
return `
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">${getTranslation(translation_key)}</span>
|
||||
</label>
|
||||
<div class="dropdown" >
|
||||
<button tabindex="0" class="select select-sm select-bordered w-full filterabledropdownbutton" id="input-${translation_key}-button">${buttonLabel}</button>
|
||||
|
||||
|
||||
<ul tabindex="0" id="input-${translation_key}-dropdown" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 filterablecombobox">
|
||||
<input type="text" class="input input-sm input-bordered filterablecombobox-search" data-parentid = "${database_id}" data-mandatory="${mandatory}" data-translationkey="${translation_key}" placeholder="Search..">
|
||||
${optionsHtml}
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" style="display:none" class="input input-sm input-bordered" id="input-${translation_key}-new-name">
|
||||
<input type="text" style="display:none" class="input input-sm input-bordered input-searchableDropDown ${validateClass}" id="input-${translation_key}" value="${value}" >
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static Divier(text = ""){
|
||||
return `
|
||||
<div class="divider">${text}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
static validate(){
|
||||
if(document.getElementById("input-save-button")){
|
||||
let valid = true;
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll(".needs-validation")).forEach(function(el){
|
||||
if(el.value.trim() === ""){
|
||||
valid = false;
|
||||
if(!el.classList.contains("text-pink-600")){
|
||||
el.classList.add("text-pink-600");
|
||||
el.classList.add("border-pink-500");
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(el.classList.contains("text-pink-600")){
|
||||
el.classList.remove("text-pink-600");
|
||||
el.classList.remove("border-pink-500");
|
||||
}
|
||||
}
|
||||
});
|
||||
document.getElementById("input-save-button").disabled = !valid;
|
||||
}
|
||||
}
|
||||
|
||||
static initValidation(){
|
||||
|
||||
let ignoreValidationClass = "ignore-validation";
|
||||
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
|
||||
if(!el.classList.contains("filterablecombobox-search")){
|
||||
el.onkeyup = function(){
|
||||
Form.validate();
|
||||
}
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
|
||||
if(!el.classList.contains(ignoreValidationClass)){
|
||||
el.onchange = function(){
|
||||
Form.validate();
|
||||
}
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("textarea")).forEach(function(el){
|
||||
if(!el.classList.contains(ignoreValidationClass)){
|
||||
el.onkeyup = function(){
|
||||
Form.validate();
|
||||
}
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("select")).forEach(function(el){
|
||||
if(!el.classList.contains(ignoreValidationClass)){
|
||||
el.onchange = function(){
|
||||
Form.validate();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
static getFormData(){
|
||||
let retval = {};
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
|
||||
if(!el.classList.contains("filterablecombobox-search")){
|
||||
let key = el.id.replace("input-","");
|
||||
|
||||
if(el.type != "checkbox"){
|
||||
retval[key] = el.value;
|
||||
}
|
||||
else{
|
||||
retval[key] = el.checked ? 1 : 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("textarea")).forEach(function(el){
|
||||
let key = el.id.replace("input-","");
|
||||
retval[key] = el.value;
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("onchange")).forEach(function(el){
|
||||
let key = el.id.replace("input-","");
|
||||
retval[key] = el.value;
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("select")).forEach(function(el){
|
||||
let key = el.id.replace("input-","");
|
||||
retval[key] = el.value;
|
||||
});
|
||||
|
||||
return retval;
|
||||
}
|
||||
|
||||
static disableAll(){
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
|
||||
if(!el.classList.contains("ignore-readonly")){
|
||||
el.readOnly = true;
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("textarea")).forEach(function(el){
|
||||
if(!el.classList.contains("ignore-readonly")){
|
||||
el.readOnly = true;
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll("select")).forEach(function(el){
|
||||
if(!el.classList.contains("ignore-readonly")){
|
||||
el.disabled = true;
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll(".filterabledropdownbutton")).forEach(function(el){
|
||||
if(!el.classList.contains("ignore-readonly")){
|
||||
el.disabled = true;
|
||||
el.readOnly = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
static cancelButton(source, destination, destination_id){
|
||||
return `<button id="input-cancel-button" data-destination="${destination}" data-destination-id="${destination_id}" class="btn btn-error btn-sm">${getTranslation("cancel")}</button>`;
|
||||
}
|
||||
static saveButton(source, destination, uid, destination_id){
|
||||
return `<button id="input-save-button" class="btn btn-primary btn-sm" data-destination="${destination}" data-destination-id="${destination_id}" data-uid="${uid}" data-source="${source}" disabled>${getTranslation("save")}</button>`;
|
||||
}
|
||||
|
||||
static initSaveButtons(){
|
||||
document.getElementById("input-cancel-button").onclick = function(){
|
||||
loadData(
|
||||
this.getAttribute("data-destination"),
|
||||
this.getAttribute("data-destination-id"),
|
||||
true
|
||||
)
|
||||
}
|
||||
document.getElementById("input-save-button").onclick = function(){
|
||||
saveData(
|
||||
this.getAttribute("data-source"),
|
||||
this.getAttribute("data-destination"),
|
||||
this.getAttribute("data-uid"),
|
||||
this.getAttribute("data-destination-id")
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
static initViewModeTopButtons(){
|
||||
if(document.getElementById("input-back-button")){
|
||||
document.getElementById("input-back-button").onclick=function(){
|
||||
loadPage(this.getAttribute("data-destination"), this.getAttribute("data-destinationId"), "true");
|
||||
}
|
||||
}
|
||||
if(document.getElementById("input-edit-button")){
|
||||
document.getElementById("input-edit-button").onclick=function(){
|
||||
loadPage(this.getAttribute("data-destination"), this.getAttribute("data-destinationId"));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
static BackEditBtn(backDestination, editDest, editId, allowEditButton, backDestinationId = -1 ){
|
||||
let editBtn = ``;
|
||||
if(allowEditButton){
|
||||
editBtn = `<button id="input-edit-button" data-destination="${editDest}" data-destinationId="${editId}" class="btn btn-sm btn-warning">${getTranslation("edit")}</button>`;
|
||||
}
|
||||
return `
|
||||
<div class="text-xl font-semibold inline-block mb-6">
|
||||
<button id="input-back-button" data-destination="${backDestination}" data-destinationId="${backDestinationId}" class="btn btn-sm btn-error"><i class="fa-solid fa-arrow-left"></i></button>
|
||||
${editBtn}
|
||||
</div>
|
||||
`;
|
||||
|
||||
}
|
||||
|
||||
static getViewButtonIcon(recordid, destination){
|
||||
return `
|
||||
<button class="btn btn-sm btn-accent table-viewbutton" data-id="${recordid}" data-destination="${destination}">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
static getEditButtonIcon(recordid, destination, allowButton=true){
|
||||
if(!allowButton){
|
||||
return "";
|
||||
}
|
||||
|
||||
return `
|
||||
<button class="btn btn-sm btn-warning table-editbutton" data-id="${recordid}" data-destination="${destination}">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
static getDeleteButtonIcon(recordid, delete_destination , allowButton=true){
|
||||
if(!allowButton){
|
||||
return ``;
|
||||
}
|
||||
return `
|
||||
<button class="btn btn-sm btn-error table-deletebutton" data-deleteDestination="${delete_destination}" data-id="${recordid}">
|
||||
<i class="fa-solid fa-trash-can"></i>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
static overviewHeadline(destination, inclSearch = true, allowAddNew = true){
|
||||
let search = "";
|
||||
if(inclSearch){
|
||||
|
||||
let addBtn = "";
|
||||
if(allowAddNew){
|
||||
addBtn = `<button class="btn px-6 btn-sm normal-case btn-primary table-addbutton mr-1" data-destination="${destination}"><i class="fa-solid fa-circle-plus"></i></button>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="input-group">
|
||||
${addBtn}
|
||||
<input id="global-searchbar" type="text" placeholder="${getTranslation("search")}" class="input input-sm input-bordered w-72 mr-1" value="${document.body.getAttribute("data-quicksearch") ?? ""}" />
|
||||
<button id="global-searchbar-start" class="btn btn-sm btn-square">
|
||||
<i class="fa-solid fa-magnifying-glass"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
else{
|
||||
if(allowAddNew){
|
||||
return `
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="text-left">
|
||||
<button class="btn px-6 btn-sm normal-case btn-primary table-addbutton" data-destination="${destination}"><i class="fa-solid fa-circle-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
else{
|
||||
return ``;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
static getPageChanger(curPage, maxPage){
|
||||
curPage = curPage + 1;
|
||||
let nextDisabled = "";
|
||||
let prevDisabled = "";
|
||||
if(curPage == 1){
|
||||
prevDisabled = " disabled";
|
||||
}
|
||||
if(curPage >= maxPage){
|
||||
nextDisabled = " disabled";
|
||||
}
|
||||
|
||||
|
||||
document.body.setAttribute("data-cur-pageNum", curPage);
|
||||
|
||||
return `
|
||||
<div class="btn-group">
|
||||
<button id="global-previous-page" class="btn btn-primary btn-sm" ${prevDisabled}>«</button>
|
||||
<button class="btn btn-ghost btn-sm" data-currentpage="${curPage}" id="global-page-current">${curPage}</button>
|
||||
<button id="global-next-page" class="btn btn-primary btn-sm" ${nextDisabled}>»</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static initPageChange(){
|
||||
if(document.getElementById("global-previous-page")){
|
||||
document.getElementById("global-previous-page").onclick=function(){
|
||||
let curpage = document.body.getAttribute("data-cur-pageNum");
|
||||
curpage = 1*curpage;
|
||||
let destPage = curpage-1;
|
||||
document.body.setAttribute("data-cur-pageNum", destPage);
|
||||
reload();
|
||||
}
|
||||
}
|
||||
|
||||
if(document.getElementById("global-next-page")){
|
||||
document.getElementById("global-next-page").onclick=function(){
|
||||
let curpage = document.body.getAttribute("data-cur-pageNum");
|
||||
curpage = 1*curpage;
|
||||
let destPage = curpage+1;
|
||||
|
||||
document.body.setAttribute("data-cur-pageNum", destPage);
|
||||
|
||||
reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static openInfoModal(){
|
||||
|
||||
document.getElementById("delete-modal-title").innerHTML = getTranslation("info");
|
||||
document.getElementById("delete-modal-message").innerHTML = getTranslation("no_valid_data_found");
|
||||
document.getElementById("delete-modal-cancel").innerHTML = getTranslation("okay");
|
||||
|
||||
document.getElementById("delete-modal-delete").style.display="none";
|
||||
document.getElementById("delete-modal").checked = true;
|
||||
}
|
||||
|
||||
static openDeleteModal(id, source){
|
||||
|
||||
document.getElementById("delete-modal-title").innerHTML = getTranslation("delete");
|
||||
document.getElementById("delete-modal-message").innerHTML = getTranslation("delete_message");
|
||||
document.getElementById("delete-modal-cancel").innerHTML = getTranslation("cancel");
|
||||
document.getElementById("delete-modal-delete").innerHTML = getTranslation("delete");
|
||||
|
||||
document.getElementById("delete-modal").setAttribute("data-id", id);
|
||||
document.getElementById("delete-modal").setAttribute("data-delete-destination", source);
|
||||
document.getElementById("delete-modal-delete").style.display="block";
|
||||
document.getElementById("delete-modal").checked = true;
|
||||
}
|
||||
|
||||
|
||||
static initTableButtons(){
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-deletebutton")).forEach(function(el){
|
||||
el.onclick = function(){
|
||||
Form.openDeleteModal(this.getAttribute("data-id"), this.getAttribute("data-deleteDestination"));
|
||||
}
|
||||
});
|
||||
|
||||
if(document.getElementById("global-searchbar")){
|
||||
document.getElementById("global-searchbar").focus();
|
||||
document.getElementById("global-searchbar").setSelectionRange(document.getElementById("global-searchbar").value.length, document.getElementById("global-searchbar").value.length);
|
||||
|
||||
document.getElementById("global-searchbar").onkeyup = function(e){
|
||||
if(e.key.toLowerCase() == "enter"){
|
||||
resetPageNum();
|
||||
reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(document.getElementById("global-searchbar-start")){
|
||||
document.getElementById("global-searchbar-start").onclick=function(){
|
||||
resetPageNum();
|
||||
reload();
|
||||
}
|
||||
}
|
||||
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-addbutton")).forEach(function(el){
|
||||
el.onclick = function(){
|
||||
loadPage(this.getAttribute("data-destination"), -1);
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-editbutton")).forEach(function(el){
|
||||
el.onclick = function(){
|
||||
loadPage(this.getAttribute("data-destination"), this.getAttribute("data-id"));
|
||||
}
|
||||
});
|
||||
Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-viewbutton")).forEach(function(el){
|
||||
el.onclick = function(){
|
||||
loadPage(this.getAttribute("data-destination"), this.getAttribute("data-id"));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
78
resources/[jobs]/[mdt]/myMechanicMDT/html/js/classes/menu.js
Normal file
78
resources/[jobs]/[mdt]/myMechanicMDT/html/js/classes/menu.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
class NavMenu{
|
||||
|
||||
constructor(navigation, cursystem){
|
||||
this.navid = "main_navigation";
|
||||
|
||||
let navEl = document.getElementById(this.navid);
|
||||
|
||||
Array.from(navEl.getElementsByTagName("li")).forEach(function(itm){
|
||||
if(!itm.classList.contains("noremoveonrebuild")){
|
||||
itm.remove();
|
||||
}
|
||||
|
||||
});
|
||||
Array.from(navEl.querySelectorAll(".divider")).forEach(function(itm){
|
||||
itm.remove();
|
||||
});
|
||||
|
||||
if(!navigation[cursystem]){
|
||||
cursystem = "default";
|
||||
}
|
||||
|
||||
if(navigation[cursystem]){
|
||||
|
||||
navigation = navigation[cursystem]
|
||||
Object.keys(navigation).forEach(key=>{
|
||||
|
||||
if(key !== "none"){
|
||||
navEl.innerHTML+=`<div class="divider no-translation nav-checkfor-nextelements mt-1 mb-1" data-tkey="${key}">{{${key}}}</div>`
|
||||
}
|
||||
|
||||
Object.keys(navigation[key]).forEach(subKey=>{
|
||||
let skeyname = navigation[key][subKey].key;
|
||||
let destination = navigation[key][subKey].destination;
|
||||
let forceReload = navigation[key][subKey].forceReload;
|
||||
navEl.innerHTML+=`
|
||||
<li id="menuItem-li-${skeyname}" class="nav-checkrights divier-${key}" data-rightkey="${navigation[key][subKey].rightkey ?? ""}">
|
||||
<a id="menuitem-${skeyname}" class="font-normal no-translation is-navigation-link" data-iconclasses="${navigation[key][subKey].img}" data-tkey="${destination}" data-destination="${destination}", data-forceReload="${forceReload}">
|
||||
<i class="${navigation[key][subKey].img}"></i>
|
||||
{{${skeyname}}}
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
Array.from(document.getElementById(this.navid).querySelectorAll(".is-navigation-link")).forEach(function(item){
|
||||
|
||||
item.onclick=function(){
|
||||
handleMenuItemClick(this);
|
||||
}
|
||||
});
|
||||
|
||||
Array.from(document.getElementById(this.navid).querySelectorAll(".no-translation")).forEach(function(item){
|
||||
let icon = "";
|
||||
if(item.getAttribute("data-iconclasses") !== null){
|
||||
icon = `<i class="${item.getAttribute("data-iconclasses")}"></i> `;
|
||||
}
|
||||
|
||||
item.innerHTML = icon + Translations[locale][item.getAttribute("data-tkey")];
|
||||
item.classList.remove("no-translation");
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
setItemActive(item){
|
||||
Array.from(document.getElementById(this.navid).querySelectorAll(".bordered")).forEach(function(currentitem){
|
||||
currentitem.classList.remove("bordered");
|
||||
});
|
||||
item.parentElement.classList.add("bordered");
|
||||
|
||||
setCurrentPageHeadLine(item.innerText);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
class RadioHud{
|
||||
constructor(){
|
||||
this.DefaultMargin = 1.5;
|
||||
}
|
||||
|
||||
SetLocation(value){
|
||||
this.location = value;
|
||||
if(value.vertical == "left"){
|
||||
document.getElementById("radiostates").style.left = 0;
|
||||
}
|
||||
else if(value.vertical == "middle"){
|
||||
document.getElementById("radiostates").style.right = 0;
|
||||
document.getElementById("radiostates").style.left = 0;
|
||||
document.getElementById("radiostates").style.marginLeft = "auto";
|
||||
document.getElementById("radiostates").style.marginRight = "auto";
|
||||
}
|
||||
else{
|
||||
document.getElementById("radiostates").style.right = 0;
|
||||
}
|
||||
|
||||
if(value.horizontal == "top"){
|
||||
document.getElementById("radiostates").style.top = 0;
|
||||
}
|
||||
else if(value.horizontal == "middle"){
|
||||
document.getElementById("radiostates").style.top = 0;
|
||||
document.getElementById("radiostates").style.bottom = 0;
|
||||
document.getElementById("radiostates").style.marginTop = "auto";
|
||||
document.getElementById("radiostates").style.marginBottom = "auto";
|
||||
}
|
||||
else{
|
||||
document.getElementById("radiostates").style.bottom = 0;
|
||||
}
|
||||
}
|
||||
|
||||
SetExtraMargins(value){
|
||||
if(this.location.vertical != "middle"){
|
||||
document.getElementById("radiostates").style.marginLeft = value.left + this.DefaultMargin + "%";
|
||||
document.getElementById("radiostates").style.marginRight = value.right + this.DefaultMargin + "%";
|
||||
}
|
||||
if(this.location.horizontal != "middle"){
|
||||
document.getElementById("radiostates").style.marginTop = value.top + this.DefaultMargin + "%";
|
||||
document.getElementById("radiostates").style.marginBottom = value.bottom + this.DefaultMargin + "%";
|
||||
}
|
||||
}
|
||||
|
||||
DrawInfo(radioDetails){
|
||||
document.getElementById("radiostates_info").innerHTML = `
|
||||
<table class="text-white">
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa-solid fa-car-on pr-1"></i>
|
||||
</td>
|
||||
<td>
|
||||
${radioDetails.vehicle ?? ""}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa-solid fa-tower-broadcast pr-1"></i>
|
||||
</td>
|
||||
<td>
|
||||
${radioDetails.radio ?? radioDetails.radio_default}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
DrawButtons(radiostates, current_id, default_state){
|
||||
let buttons = ``;
|
||||
|
||||
if(current_id != -1){
|
||||
buttons += `<button onclick="SetRadioStateShortcut(-1)" class="btn btn-block btn-sm btn-primary my-1">${default_state}</button>`;
|
||||
}
|
||||
|
||||
if(radiostates.length > 0){
|
||||
radiostates.forEach(function(element){
|
||||
if(current_id != element.id){
|
||||
let bgcolor = element.color;
|
||||
let FgColor = System.GetFgColorByBgColor(bgcolor);
|
||||
|
||||
buttons += `<button onclick="SetRadioStateShortcut(${element.id})" class="btn btn-block btn-sm my-1" style="background-color:${bgcolor}; color:${FgColor}">${element.short_name}</button>`;
|
||||
}
|
||||
});
|
||||
}
|
||||
document.getElementById("radiostates_actions").innerHTML = buttons;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
class Rights{
|
||||
constructor(rights){
|
||||
this.fullright = "*"
|
||||
this.rights = rights;
|
||||
}
|
||||
|
||||
has(right_key){
|
||||
let retval = false;
|
||||
|
||||
if(this.rights[right_key] !== undefined){
|
||||
retval = this.rights[right_key];
|
||||
}
|
||||
|
||||
if(!retval && this.rights["*"] !== undefined){
|
||||
retval = this.rights["*"]
|
||||
}
|
||||
|
||||
return retval;
|
||||
}
|
||||
}
|
||||
22
resources/[jobs]/[mdt]/myMechanicMDT/html/js/classes/sync.js
Normal file
22
resources/[jobs]/[mdt]/myMechanicMDT/html/js/classes/sync.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
class Sync{
|
||||
constructor(syncData){
|
||||
this.sync = {}
|
||||
|
||||
this.sync.licenses = syncData.LicensesSync
|
||||
|
||||
if(syncData.MainSync.active){
|
||||
this.sync.files = syncData.MainSync.types.Users
|
||||
this.sync.files_licenses = syncData.MainSync.types.Users && syncData.MainSync.types.UserLicenses
|
||||
this.sync.regvehicle = syncData.MainSync.types.Vehicles
|
||||
}
|
||||
}
|
||||
|
||||
isActive(key){
|
||||
let retval = false;
|
||||
|
||||
if(this.sync[key] !== undefined){
|
||||
retval = this.sync[key];
|
||||
}
|
||||
return retval;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue