406 lines
15 KiB
JavaScript
406 lines
15 KiB
JavaScript
import { getFileName } from "./storage.js";
|
|
|
|
function transformTemplateObject(objects) {
|
|
let form = document.createElement("FORM");
|
|
form.setAttribute("method", "post");
|
|
form.setAttribute("action", "javascript:void(0)");
|
|
form.setAttribute("id", "mainFormObj");
|
|
form.classList.add("w3-row");
|
|
|
|
let sidebarList = document.createElement("ul");
|
|
sidebarList.classList.add("w3-ul");
|
|
|
|
for (let i = 0; i < objects.length; i++) {
|
|
buildField(objects[i], form, sidebarList);
|
|
}
|
|
|
|
//console.log(objects);
|
|
|
|
//create sidebar submit button
|
|
let sidebarSubmitButton = document.createElement("li");
|
|
sidebarSubmitButton.classList.add(
|
|
"w3-bar-item",
|
|
"w3-padding-large",
|
|
"w3-button"
|
|
);
|
|
sidebarSubmitButton.style.borderTop = "2px solid #ddd";
|
|
sidebarSubmitButton.id = "sb-submit";
|
|
sidebarSubmitButton.innerHTML = "Save & Copy";
|
|
sidebarList.appendChild(sidebarSubmitButton);
|
|
|
|
//add sidebar elemnts to sidebar
|
|
document.getElementById("sidebar").appendChild(sidebarList);
|
|
|
|
//add form to mainForm Div
|
|
document.getElementById("mainForm").appendChild(form);
|
|
|
|
//create username and append field to site
|
|
let fileName = getFileName();
|
|
document.getElementById("submitContainer").appendChild(userFileNameDiv(fileName));
|
|
|
|
// create a Save button
|
|
let saveBtn = document.createElement("input");
|
|
saveBtn.setAttribute("type", "submit");
|
|
saveBtn.setAttribute("value", "Save");
|
|
saveBtn.classList.add("w3-button");
|
|
saveBtn.classList.add("w3-grey");
|
|
saveBtn.style.margin = "20px";
|
|
//append submit button to submitContainer
|
|
document.getElementById("submitContainer").appendChild(saveBtn);
|
|
|
|
// create a Copy button
|
|
let copyBtn = document.createElement("input");
|
|
copyBtn.setAttribute("type", "submit");
|
|
copyBtn.setAttribute("value", "Copy");
|
|
copyBtn.classList.add("w3-button");
|
|
copyBtn.classList.add("w3-grey");
|
|
copyBtn.style.margin = "20px 0px";
|
|
//append submit button to submitContainer
|
|
document.getElementById("submitContainer").appendChild(copyBtn);
|
|
|
|
}
|
|
|
|
|
|
function buildField(obj, form, sidebarList) {
|
|
//create template Input fields
|
|
|
|
let divContainer = document.createElement("DIV");
|
|
divContainer.classList.add("w3-half");
|
|
divContainer.classList.add("w3-container");
|
|
|
|
let div = document.createElement("DIV");
|
|
div.classList.add("w3-section");
|
|
div.classList.add("w3-left-align");
|
|
|
|
div.setAttribute("style", "padding: 10px");
|
|
|
|
let label = document.createElement("LABEL");
|
|
label.style.display = "inline-block";
|
|
label.style.width = "100%";
|
|
label.style.paddingBottom = "5px";
|
|
label.style.borderBottom = "thin solid #9e9e9e";
|
|
label.style.fontWeight = "800";
|
|
|
|
let connectedListsArray = [];
|
|
|
|
let ltPlaceholder;
|
|
|
|
//check for longtext:!li and convert it to standard longText
|
|
if (obj.type.indexOf("longText") !== -1) {
|
|
if (obj.type.indexOf(":") !== -1) {
|
|
ltPlaceholder = obj.type.split(":")[1];
|
|
if (ltPlaceholder !== undefined) {
|
|
let textarea = document.createElement("textarea");
|
|
textarea.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
textarea.setAttribute("id", obj.word.replace(/ /g, "_"));
|
|
textarea.setAttribute("cols", "100");
|
|
textarea.setAttribute("rows", "15");
|
|
textarea.classList.add("w3-input");
|
|
textarea.id = obj.word.replace(/ /g, "_");
|
|
divContainer.classList.remove("w3-half");
|
|
divContainer.classList.add("w3-center");
|
|
label.innerHTML = obj.word;
|
|
div.appendChild(label);
|
|
div.appendChild(textarea);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if (obj.type.indexOf("simpleInput") !== -1) {
|
|
if (obj.type.indexOf(":") !== -1) {
|
|
ltPlaceholder = obj.type.split(":")[1];
|
|
if (ltPlaceholder !== undefined) {
|
|
let input = document.createElement("input");
|
|
input.setAttribute("type", "text");
|
|
input.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
input.setAttribute("id", obj.word.replace(/ /g, "_"));
|
|
input.classList.add("w3-input");
|
|
input.id = obj.word.replace(/ /g, "_");
|
|
label.innerHTML = obj.word;
|
|
div.appendChild(label);
|
|
div.appendChild(input);
|
|
}
|
|
}
|
|
}
|
|
|
|
//check for markup:title and display it as none
|
|
if (obj.type.indexOf("markup") !== -1) {
|
|
if (obj.type.indexOf(":") !== -1) {
|
|
ltPlaceholder = obj.type.split(":")[1];
|
|
if (ltPlaceholder !== undefined) {
|
|
divContainer.classList.add("hidden");
|
|
let input = document.createElement("input");
|
|
input.setAttribute("type", "text");
|
|
input.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
input.id = obj.word.replace(/ /g, "_");
|
|
input.value = obj.word;
|
|
divContainer.style.display = "none";
|
|
label.innerHTML = obj.word;
|
|
div.appendChild(label);
|
|
div.appendChild(input);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
switch (obj.type) {
|
|
case "genderSpecific":
|
|
let select = document.createElement("select");
|
|
select.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
select.id = obj.word.replace(/ /g, "_");
|
|
select.classList.add("w3-select");
|
|
if (typeof obj.m !== "undefined") {
|
|
let optionM = document.createElement("option");
|
|
optionM.value = obj.m;
|
|
optionM.text = obj.m;
|
|
select.appendChild(optionM);
|
|
}
|
|
if (typeof obj.w !== "undefined") {
|
|
let optionW = document.createElement("option");
|
|
optionW.value = obj.w;
|
|
optionW.text = obj.w;
|
|
select.appendChild(optionW);
|
|
}
|
|
if (typeof obj.d !== "undefined") {
|
|
let optionD = document.createElement("option");
|
|
optionD.value = obj.d;
|
|
optionD.text = obj.d;
|
|
select.appendChild(optionD);
|
|
}
|
|
label.innerHTML = obj.word;
|
|
div.appendChild(label);
|
|
div.appendChild(select);
|
|
break;
|
|
|
|
case "list":
|
|
let select2 = document.createElement("select");
|
|
select2.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
select2.classList.add("w3-select");
|
|
select2.id = obj.word.replace(/ /g, "_");
|
|
select2.setAttribute("id", obj.word.replace(/ /g, "_"));
|
|
|
|
for (let listItem = 0; listItem < obj.listCount + 1; listItem++) {
|
|
//console.log(obj[listItem]);
|
|
if (typeof obj[listItem] !== "undefined") {
|
|
let optionL = document.createElement("option");
|
|
optionL.value = obj[listItem];
|
|
optionL.text = obj[listItem];
|
|
select2.appendChild(optionL);
|
|
}
|
|
}
|
|
label.innerHTML = obj.word;
|
|
div.appendChild(label);
|
|
div.appendChild(select2);
|
|
break;
|
|
|
|
case "conList":
|
|
let select3 = document.createElement("select");
|
|
select3.setAttribute("name", "clM-"+obj.word.replace(/ /g, "_"));
|
|
select3.classList.add("w3-select");
|
|
select3.id = obj.word.replace(/ /g, "_");
|
|
let optionDefault = document.createElement("option");
|
|
optionDefault.value = "!none";
|
|
optionDefault.text = "Choose one";
|
|
select3.appendChild(optionDefault);
|
|
|
|
|
|
for (let listItem = 0; listItem < obj.listCount + 1; listItem++) {
|
|
//console.log(obj[listItem]);
|
|
if (typeof obj[listItem] !== "undefined") {
|
|
let optionL = document.createElement("option");
|
|
let item = obj[listItem];
|
|
optionL.value = item;
|
|
optionL.text = item;
|
|
select3.appendChild(optionL);
|
|
connectedListsArray.push({
|
|
word: item,
|
|
type: obj["clType-"+item],
|
|
cl: obj.word
|
|
});
|
|
}
|
|
}
|
|
label.innerHTML = obj.word;
|
|
|
|
if (obj.listCount == 0) {
|
|
select3 = document.createElement("button");
|
|
select3.setAttribute("value", "!none");
|
|
select3.classList.add("w3-button", "w3-grey", "w3-left-align", "w3-padding-16");
|
|
select3.id = obj.word.replace(/ /g, "_");
|
|
select3.innerHTML = connectedListsArray[0].word;
|
|
select3.setAttribute("name", "clM-"+obj.word.replace(/ /g, "_"));
|
|
select3.setAttribute("data-word", connectedListsArray[0].word);
|
|
label = document.createElement("LABEL");
|
|
label.innerHTML = '';
|
|
//div.classList.add("w3-center");
|
|
div.classList.replace("w3-flat-silver", "w3-flat-clouds");
|
|
div.appendChild(label);
|
|
div.appendChild(select3);
|
|
} else {
|
|
div.appendChild(label);
|
|
div.appendChild(document.createElement("br"));
|
|
div.appendChild(select3);
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
case "simpleInput":
|
|
let input = document.createElement("input");
|
|
input.setAttribute("type", "text");
|
|
input.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
input.classList.add("w3-input");
|
|
input.id = obj.word.replace(/ /g, "_");
|
|
label.innerHTML = obj.word;
|
|
div.appendChild(label);
|
|
div.appendChild(input);
|
|
break;
|
|
case "longText":
|
|
let textarea = document.createElement("textarea");
|
|
textarea.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
textarea.setAttribute("cols", "100");
|
|
textarea.setAttribute("rows", "15");
|
|
textarea.classList.add("w3-input");
|
|
textarea.id = obj.word.replace(/ /g, "_");
|
|
label.innerHTML = obj.word;
|
|
divContainer.classList.remove("w3-half");
|
|
divContainer.classList.add("w3-center");
|
|
div.appendChild(label);
|
|
div.appendChild(textarea);
|
|
break;
|
|
case "current_time":
|
|
let input2 = document.createElement("input");
|
|
let today = new Date();
|
|
let currentTime =
|
|
today.getHours() + ":" + ("0" + today.getMinutes()).slice(-2);
|
|
//console.log(currentTime);
|
|
input2.setAttribute("type", "text");
|
|
input2.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
input2.setAttribute("value", currentTime);
|
|
input2.id = obj.word.replace(/ /g, "_");
|
|
div.setAttribute("style", "display: none;");
|
|
input2.classList.add("w3-input");
|
|
label.innerHTML = obj.word;
|
|
div.appendChild(label);
|
|
div.appendChild(input2);
|
|
break;
|
|
case "current_date":
|
|
let input3 = document.createElement("input");
|
|
var today2 = new Date();
|
|
var dd = String(today2.getDate()).padStart(2, "0");
|
|
var mm = String(today2.getMonth() + 1).padStart(2, "0"); //January is 0!
|
|
var yyyy = today2.getFullYear();
|
|
currentDate = dd + "." + mm + "." + yyyy;
|
|
input3.setAttribute("type", "text");
|
|
input3.setAttribute("name", obj.word.replace(/ /g, "_"));
|
|
input3.setAttribute("value", currentDate);
|
|
input3.id = obj.word.replace(/ /g, "_");
|
|
div.setAttribute("style", "display: none;");
|
|
input3.classList.add("w3-input");
|
|
label.innerHTML = obj.word;
|
|
div.appendChild(label);
|
|
div.appendChild(input3);
|
|
break;
|
|
}
|
|
|
|
//check if item is connected list item cl
|
|
if (obj.cl !== undefined) divContainer.classList.add("hidden");
|
|
if (obj.cl !== undefined) {
|
|
div.lastChild.setAttribute("name",
|
|
(ltPlaceholder !== undefined) ? "cl-"+obj.word.replace(/ /g, "_") +":"+ltPlaceholder : "cl-"+obj.word.replace(/ /g, "_"));
|
|
divContainer.classList.add("w3-animate-opacity")
|
|
}
|
|
|
|
//append field to wrapper and add to mainForm
|
|
divContainer.appendChild(div);
|
|
form.appendChild(divContainer);
|
|
|
|
buildSidebarList(obj, sidebarList)
|
|
|
|
//handle conList items
|
|
if (obj.type == "conList") {
|
|
//build connected list fields according to obj
|
|
for (let conObj of connectedListsArray) {
|
|
buildField(conObj, form, sidebarList);
|
|
}
|
|
|
|
//set formEvent for selection detection to mainForm
|
|
if (obj.listCount == 0) {
|
|
document.getElementById("mainForm").addEventListener("click", (e) => {
|
|
if (e.target && e.target.matches("button#"+obj.word.replace(/ /g, "_"))) {
|
|
let button = document.getElementById(obj.word.replace(/ /g, "_"));
|
|
let con = button.dataset.word;
|
|
let conElement = document.getElementById(con);
|
|
if (conElement.parentElement.parentElement.classList.contains("hidden")) {
|
|
conElement.parentElement.parentElement.classList.remove("hidden");
|
|
button.value = "!selected";
|
|
} else {
|
|
conElement.parentElement.parentElement.classList.add("hidden");
|
|
button.value = "!none";
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
document.getElementById("mainForm").addEventListener("change", (e) => {
|
|
if (e.target && e.target.matches("select#"+obj.word.replace(/ /g, "_"))) {
|
|
let select = document.getElementById(obj.word.replace(/ /g, "_"));
|
|
for (let opt of select.options) {
|
|
if (opt.value == "!none") continue;
|
|
if (opt.innerHTML != select.value) {
|
|
document.getElementById(opt.innerHTML.replace(/ /g, "_")).parentElement.parentElement.classList.add("hidden");
|
|
} else {
|
|
document.getElementById(select.value.replace(/ /g, "_")).parentElement.parentElement.classList.remove("hidden");
|
|
}
|
|
}
|
|
for (let hiddenItems of document.getElementsByClassName("cl")) {
|
|
if (hiddenItems.innerHTML != select.value) {
|
|
hiddenItems.classList.add("hidden");
|
|
} else {
|
|
hiddenItems.classList.remove("hidden");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function buildSidebarList(obj, sidebarList) {
|
|
//build sidebarlist item and append
|
|
let sidebarListItem = document.createElement("li");
|
|
sidebarListItem.classList.add(
|
|
"w3-bar-item",
|
|
"w3-padding-large",
|
|
"w3-button",
|
|
"sb-item"
|
|
);
|
|
if (obj.cl !== undefined) sidebarListItem.classList.add("hidden", "cl");
|
|
sidebarListItem.style.borderBottom = "1px solid #ddd";
|
|
sidebarListItem.id = "sb-item";
|
|
sidebarListItem.setAttribute("data-item", obj.word.replace(/ /g, "_"));
|
|
sidebarListItem.innerHTML = obj.word;
|
|
sidebarListItem;
|
|
sidebarList.appendChild(sidebarListItem);
|
|
}
|
|
|
|
function userFileNameDiv(fileName) {
|
|
let divContainer = document.createElement("DIV");
|
|
divContainer.classList.add("w3-third", "w3-container");
|
|
divContainer.setAttribute("style", "padding: 0px");
|
|
let div = document.createElement("DIV");
|
|
div.classList.add("w3-section", "w3-flat-silver");
|
|
div.setAttribute("style", "padding: 5px");
|
|
let userFileNameInput = document.createElement("input");
|
|
userFileNameInput.setAttribute("type", "text");
|
|
userFileNameInput.setAttribute("name", "userFileName");
|
|
userFileNameInput.setAttribute("placeholder", fileName);
|
|
userFileNameInput.classList.add("w3-input");
|
|
userFileNameInput.id = "userFileName";
|
|
div.appendChild(userFileNameInput);
|
|
divContainer.appendChild(div);
|
|
return divContainer;
|
|
}
|
|
|
|
export default transformTemplateObject;
|