1
0
Fork 0
forked from Simnation/Main
Main/resources/[jobs]/[mdt]/myEmergency/html/js/classes/form.js
2025-08-14 13:21:51 +02:00

732 lines
No EOL
25 KiB
JavaScript

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 Float(mandatory, translation_key, value){
let validateClass = "";
if(mandatory){
validateClass = " needs-validation"
}
let disabledKeys = ["+", "-", ","];
let step = "1";
let onkeydownkeyCodes = "";
for(var i=0; i < disabledKeys.length;i++){
onkeydownkeyCodes += (onkeydownkeyCodes == "" ? "" : " || " ) + "event.key==='"+disabledKeys[i]+"'";
}
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}" value="${value}" />
</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, field_class){
let validateClass = "";
if(mandatory){
validateClass = " needs-validation";
}
if(field_class != ""){
field_class = " " + field_class;
}
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} ${field_class}" 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(){
Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
if(!el.classList.contains("filterablecombobox-search")){
el.onkeyup = function(){
if(el.classList.contains("lawbook_laws_calc_penalty")){
FileEntry.ValidateAndCalcLawBookLaws();
}
else{
Form.validate();
}
}
}
});
Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
el.onchange = function(){
Form.validate();
}
});
Array.from(document.getElementById("currentpage-content").querySelectorAll("textarea")).forEach(function(el){
el.onkeyup = function(){
Form.validate();
}
});
Array.from(document.getElementById("currentpage-content").querySelectorAll("select")).forEach(function(el){
el.onchange = function(){
if(el.classList.contains("police_fileentry_type_of_entry")){
FileEntry.ToggleLawBooks();
}
else{
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 getIsWantedButton(recordid, destination, isWanted){
let disabled = isWanted ? " disabled" : ""
return `
<button class="btn btn-sm btn-secondary table-iswantedbutton" data-id="${recordid}" data-destination="${destination}" ${disabled}>
<i class="fa-solid fa-handcuffs"></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 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").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"));
}
});
Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-iswantedbutton")).forEach(function(el){
el.onclick = function(){
let fromObj = this.getAttribute("data-destination").toLowerCase();
let fromId = this.getAttribute("data-id");
if(fromObj == "regvehicle" || fromObj == "regvehicleimpounded"){
changeDataInColumn(fromObj, "is_wanted", fromId, 1, true);
}
else if(fromObj == "regweapons"){
changeDataInColumn(fromObj, "is_wanted", fromId, 1, true);
}
else if(fromObj == "files"){
loadPage('fileentry.add',fromId,'true')
}
}
});
}
}