383 lines
12 KiB
JavaScript
383 lines
12 KiB
JavaScript
import buildForm from "./form.js";
|
|
import { loadFileDivCallBack } from "./files.js";
|
|
import { retrieveData, clearData, getFileName } from "./storage.js";
|
|
import { insertTextBlocks, modalNotifier, resetNavBar } from "./evts.js";
|
|
import { createTemplate, createTemplateCallBack} from "./createTemplate.js";
|
|
import { logout, passwordHash } from "./scripts.js";
|
|
import buildSettings from "./settings.js";
|
|
|
|
|
|
function loadTemplate(template, newFlag = false, loadOnly = false) {
|
|
document.getElementById("siteTitle").innerHTML = template.replace(/_/g, " ");
|
|
activeState.loadedTemplate = template;
|
|
|
|
if (newFlag) {
|
|
activeState.fileName = "none";
|
|
} else {
|
|
activeState.fileName = getFileName();
|
|
}
|
|
|
|
document.getElementById("navMob").className = document
|
|
.getElementById("navMob")
|
|
.className.replace(" w3-show", "");
|
|
|
|
if (screen.width < 993) {
|
|
let sidebar = document.getElementById("sidebar");
|
|
sidebar.style.display = "none";
|
|
document.getElementById("siteTitle").innerHTML = "TG";
|
|
document.getElementById("logo").innerHTML = "TG";
|
|
}
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
let respText = decodeURIComponent(this.responseText);
|
|
if (loadOnly == "createTemplate") {
|
|
createTemplateCallBack(template, respText.split("!JSON_placeholder:")[0]);
|
|
return;
|
|
}
|
|
buildForm(respText, loadOnly);
|
|
if (loadOnly) {
|
|
loadFileDivCallBack();
|
|
return;
|
|
}
|
|
|
|
//retrieve previos userData / or preset data if newFile is called
|
|
let cdata;
|
|
if (newFlag) {
|
|
cdata = retrieveData("templatePreset", template);
|
|
} else {
|
|
cdata = retrieveData("userInputForce");
|
|
clearData("userInputForce");
|
|
}
|
|
if (cdata != "") {
|
|
if (cdata != null) {
|
|
retrieveForm(cdata);
|
|
}
|
|
}
|
|
|
|
//select first object and focus on it
|
|
let obj = activeState.templateObjectsPurified;
|
|
let firstElement = document.getElementById(obj[0].word.replace(/ /g, "_"));
|
|
if (firstElement != null) firstElement.focus();
|
|
|
|
}
|
|
};
|
|
xhttp.open("GET", "php/?template=" + template, true);
|
|
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
xhttp.send();
|
|
}
|
|
|
|
function loadNewTemplate(template) {
|
|
|
|
//reset navbar above all else
|
|
resetNavBar();
|
|
|
|
//sessionVerfication check
|
|
if (!passwordHash.verify()) {
|
|
modalNotifier("Error: Session is not authenticated...", 0, false);
|
|
}
|
|
|
|
//set current page value in activeState object
|
|
activeState.activePage = "template";
|
|
|
|
let sidebarDiv = document.getElementById("sidebar");
|
|
sidebarDiv.replaceWith(sidebarDiv.cloneNode(true));
|
|
|
|
clearData("userInput", template);
|
|
loadTemplate(template, true);
|
|
}
|
|
|
|
function loadNavBar() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
let res = "";
|
|
try {
|
|
res = JSON.parse(this.responseText);
|
|
} catch (e) {
|
|
console.log("error", this.responseText);
|
|
return;
|
|
}
|
|
|
|
let divMob = document.getElementById("navMob");
|
|
for (let x in res) {
|
|
let aMob = document.createElement("a");
|
|
|
|
aMob.setAttribute("href", "javascript:void(0)");
|
|
aMob.setAttribute("data-template", res[x][1]);
|
|
aMob.classList.add("w3-bar-item", "w3-button", "w3-padding-large");
|
|
aMob.innerHTML = res[x][0];
|
|
|
|
divMob.appendChild(aMob);
|
|
|
|
activeState.templates.push(res[x][1]);
|
|
}
|
|
let createEntry = document.createElement("a");
|
|
createEntry.setAttribute("href", "javascript:void(0)");
|
|
createEntry.setAttribute("data-template", "!createNew");
|
|
createEntry.classList.add("w3-bar-item", "w3-button", "w3-padding-large");
|
|
createEntry.style.borderTop = "2px solid rgb(221, 221, 221)";
|
|
createEntry.innerHTML = "Manage templates";
|
|
divMob.appendChild(createEntry);
|
|
|
|
createEntry = document.createElement("a");
|
|
createEntry.setAttribute("href", "javascript:void(0)");
|
|
createEntry.setAttribute("data-template", "!settings");
|
|
createEntry.classList.add("w3-bar-item", "w3-button", "w3-padding-large");
|
|
createEntry.innerHTML = "Settings";
|
|
divMob.appendChild(createEntry);
|
|
|
|
createEntry = document.createElement("a");
|
|
createEntry.setAttribute("href", "javascript:void(0)");
|
|
createEntry.setAttribute("data-template", "!logout");
|
|
createEntry.classList.add("w3-bar-item", "w3-button", "w3-padding-large", "w3-flat-pomegranate");
|
|
createEntry.innerHTML = "Logout";
|
|
divMob.appendChild(createEntry);
|
|
|
|
divMob.addEventListener("click", (e) => {
|
|
e.preventDefault;
|
|
if (e.target && e.target.matches("a.w3-bar-item")) {
|
|
let template = e.target.dataset.template;
|
|
if (template == "!createNew") {
|
|
createTemplate();
|
|
return;
|
|
}
|
|
if (template == "!logout") {
|
|
logout();
|
|
return;
|
|
}
|
|
if (template == "!settings") {
|
|
buildSettings();
|
|
return;
|
|
}
|
|
loadNewTemplate(template);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
xhttp.open("GET", "php/?templates", true);
|
|
xhttp.send();
|
|
}
|
|
function initTextBlocks() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
let res = "";
|
|
try {
|
|
res = JSON.parse(this.responseText);
|
|
} catch (e) {
|
|
console.log("error", this.responseText)
|
|
return;
|
|
}
|
|
const textBlocksHolder = document.getElementById("textBlocks");
|
|
const divReg = document.getElementById("navTb");
|
|
for (let x in res) {
|
|
if (res[x][1].length < 1) continue;
|
|
|
|
let aReg = document.createElement("a");
|
|
aReg.setAttribute("href", "javascript:void(0)");
|
|
aReg.classList.add("w3-bar-item", "w3-hide-small", "w3-padding-small");
|
|
let textBlockText = res[x][1];
|
|
if (res[x][1].length > 80) {
|
|
textBlockText = res[x][1].substr(0, 80) + "...";
|
|
}
|
|
aReg.innerHTML = "<b>" + res[x][0] + ":</b> " + textBlockText;
|
|
divReg.appendChild(aReg);
|
|
|
|
const text = document.createTextNode(
|
|
res[x][0] + ": " + res[x][1] + "\n"
|
|
);
|
|
textBlocksHolder.appendChild(text);
|
|
}
|
|
divReg.addEventListener("click", (e) => {
|
|
if (e.target && e.target.matches("a.w3-bar-item")) {
|
|
insertTextBlocks(e.target);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
xhttp.open("GET", "php/?textBlocks", true);
|
|
xhttp.send();
|
|
}
|
|
|
|
function setTemplatePreset(template, formData) {
|
|
//console.log(template +" : "+ formData);
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.open("POST", "php/?setForm");
|
|
xhttp.setRequestHeader("Accept", "application/json");
|
|
xhttp.setRequestHeader("Content-Type", "application/json");
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
//console.log(this.responseText);
|
|
}
|
|
};
|
|
let data = {
|
|
template: template,
|
|
data: JSON.stringify(formData),
|
|
};
|
|
|
|
xhttp.send(JSON.stringify(data));
|
|
}
|
|
|
|
function setNewTemplate(fileName, data) {
|
|
let obj = {
|
|
fileName: fileName,
|
|
data: data,
|
|
};
|
|
//console.log(template +" : "+ formData);
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.open("POST", "php/?setTemplate");
|
|
xhttp.setRequestHeader("Accept", "application/json");
|
|
xhttp.setRequestHeader("Content-Type", "application/json");
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
//console.log(this.responseText);
|
|
}
|
|
};
|
|
|
|
xhttp.send(JSON.stringify(obj));
|
|
}
|
|
|
|
function storeFilesToServer(data) {
|
|
//console.log(template +" : "+ formData);
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
if (this.responseText == "success") {
|
|
console.log("files saved");
|
|
}
|
|
}
|
|
};
|
|
xhttp.open("POST", "php/?storeFiles", true);
|
|
xhttp.setRequestHeader("Accept", "application/json");
|
|
xhttp.setRequestHeader("Content-Type", "application/json");
|
|
xhttp.send(JSON.stringify(data));
|
|
}
|
|
|
|
function checkForStoredDataOnServer() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
if (this.responseText == "none") {
|
|
} else {
|
|
activeState.serverFilesTs = this.responseText;
|
|
let btn = document.getElementById("importModalBtn");
|
|
btn.style.display = "";
|
|
}
|
|
}
|
|
};
|
|
xhttp.open("GET", "php/?storedFiles="+activeState.userId, true);
|
|
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
xhttp.send();
|
|
}
|
|
|
|
function delStoredDataOnServer() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
if (this.responseText == "none") {
|
|
let btn = document.getElementById("importModalBtn");
|
|
btn.style.display = "none";
|
|
}
|
|
}
|
|
};
|
|
xhttp.open("GET", "php/?storedFiles="+activeState.userId+"&del", true);
|
|
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
xhttp.send();
|
|
}
|
|
|
|
|
|
function retrieveForm(arr) {
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
|
if (arr[i].name == "") continue;
|
|
let e = document.getElementById(arr[i].name);
|
|
if (e === null) {
|
|
//parse connected list
|
|
let id = arr[i].name.split("cl-")[1];
|
|
//escape cl-text:!ls
|
|
if (id != undefined) id = id.split(":")[0];
|
|
e = document.getElementById(id);
|
|
if (e === null) {
|
|
//parse connected list main
|
|
let id = arr[i].name.split("clM-")[1];
|
|
e = document.getElementById(id);
|
|
if (e === null) continue;
|
|
}
|
|
|
|
}
|
|
//handle connected list Main item button or list
|
|
if (e.name.substr(0, 4) == "clM-") {
|
|
if (arr[i].value != "!none") {
|
|
let clElement = document.getElementById(e.dataset.word);
|
|
if (clElement === null) {
|
|
clElement = document.getElementById(arr[i].value.replace(/ /g, "_"));
|
|
}
|
|
//make shure it is visible if selected before
|
|
if (clElement != undefined) clElement.parentElement.parentElement.classList.remove("hidden");
|
|
e.value = arr[i].value;
|
|
}
|
|
|
|
continue;
|
|
}
|
|
|
|
switch (e.nodeName) {
|
|
case "TEXTAREA":
|
|
|
|
arr[i].value = arr[i].value.replace(/<div>/g, "");
|
|
arr[i].value = arr[i].value.replace(/<\/div>/g, "\n");
|
|
arr[i].value = arr[i].value.replace(/<.{1,4}>/g, "");
|
|
|
|
if (e.parentElement != undefined) {
|
|
if (e.parentElement.getElementsByClassName("pell-content")[0] != undefined) {
|
|
let contentArray = arr[i].value.split("\n");
|
|
let parsedContent = "";
|
|
if (contentArray.length != 0) {
|
|
for (let contentLine of contentArray) {
|
|
if (contentLine != "") {
|
|
contentLine = "<div>" + contentLine + "</div>";
|
|
}
|
|
parsedContent += contentLine;
|
|
}
|
|
} else {
|
|
parsedContent = arr[i].value;
|
|
}
|
|
e.innerHTML = arr[i].value;
|
|
|
|
arr[i].value = parsedContent;
|
|
e = e.parentElement.getElementsByClassName("pell-content")[0];
|
|
}
|
|
}
|
|
e.innerHTML = arr[i].value;
|
|
break;
|
|
case "INPUT":
|
|
e.value = arr[i].value;
|
|
break;
|
|
case "SELECT":
|
|
for (let j = 0; j < e.options.length; j++) {
|
|
if (e.options[j].value == arr[i].value) {
|
|
// Item is found. Set its property and exit
|
|
e.options[j].selected = true;
|
|
break;
|
|
}
|
|
}
|
|
break;
|
|
default:
|
|
e.innerHTML = arr[i].value;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
export {
|
|
loadTemplate,
|
|
loadNavBar,
|
|
initTextBlocks,
|
|
loadNewTemplate,
|
|
setTemplatePreset,
|
|
setNewTemplate,
|
|
storeFilesToServer,
|
|
checkForStoredDataOnServer,
|
|
delStoredDataOnServer
|
|
};
|