852 lines
26 KiB
JavaScript
852 lines
26 KiB
JavaScript
"use strict";
|
|
|
|
class CsvxmlValidator {
|
|
|
|
fieldList; // {}{}
|
|
toValidate; // []{}
|
|
errors; // {}array
|
|
|
|
constructor(fieldList, csvRaw) {
|
|
|
|
this.errors = {
|
|
parsing: [],
|
|
mandatoryTags: [],
|
|
duplicateInvNos: [],
|
|
dependentColumns: [],
|
|
controlledLists: [],
|
|
mainImageResource: [],
|
|
};
|
|
|
|
let list = {};
|
|
for (let sectionName in fieldList) {
|
|
list = Object.assign(list, fieldList[sectionName]);
|
|
}
|
|
this.fieldList = Object.freeze(list);
|
|
console.log(this.fieldList);
|
|
|
|
const lines = csvRaw.trim().replace("\r\n", "\n").split("\n");
|
|
|
|
let separator;
|
|
let delimiter;
|
|
if (csvRaw.substr(0, 1) === '"') {
|
|
separator = '";"';
|
|
delimiter = '"'
|
|
}
|
|
else {
|
|
separator = ';';
|
|
delimiter = '';
|
|
}
|
|
|
|
// Gets first line
|
|
let headersFields = lines.shift();
|
|
let headers;
|
|
if (delimiter === "") headers = headersFields.split(separator);
|
|
else headers = headersFields.substr(1, headersFields.length - 2).split(separator);
|
|
let expectedFieldCount = headers.length;
|
|
|
|
let toValidate = [];
|
|
let lineCounter = 1;
|
|
for (let line of lines) {
|
|
|
|
if (delimiter !== '') {
|
|
line = line.substr(1, line.length - 2);
|
|
}
|
|
|
|
// Remove fully empty lines (both without content and those with fields set up,
|
|
// but without content there.
|
|
if (line.length <= headers.length) continue;
|
|
|
|
let lineContents = {};
|
|
let fields = line.split(separator);
|
|
|
|
if (fields.length !== headers.length) {
|
|
this.errors.parsing.push("Number of columns in line " + lineCounter + " does not match number of headers");
|
|
}
|
|
|
|
for (let i = 0, max = fields.length; i < max; i++) {
|
|
if (headers[i] === undefined || headers[i] === null) {
|
|
this.errors.parsing.push("ERROR parsing line " + lineCounter + "; column " + i);
|
|
continue;
|
|
}
|
|
lineContents[headers[i]] = fields[i];
|
|
}
|
|
|
|
// Skip totally empty lines
|
|
if (Object.values(lineContents).join("").length === 0) continue;
|
|
|
|
toValidate.push(lineContents);
|
|
lineCounter++;
|
|
}
|
|
|
|
this.toValidate = toValidate;
|
|
|
|
if (toValidate.length === 0) {
|
|
alert("Error: No lines of content identified");
|
|
}
|
|
|
|
this.validate();
|
|
}
|
|
|
|
validate() {
|
|
|
|
this.validateMandatoryTagsPresent();
|
|
this.checkDuplicateInvNos();
|
|
this.checkDependentColumns();
|
|
this.checkControlledLists();
|
|
// this.checkMainImageResource();
|
|
|
|
}
|
|
|
|
validateMandatoryTagsPresent() {
|
|
|
|
let mandatoryFields = [];
|
|
for (let fieldName in this.fieldList) {
|
|
if (this.fieldList[fieldName].required === true) {
|
|
mandatoryFields.push(fieldName);
|
|
}
|
|
}
|
|
|
|
console.log(this.toValidate);
|
|
let lineCounter = 1;
|
|
for (let line of this.toValidate) {
|
|
for (let mandatoryField of mandatoryFields) {
|
|
if (line[mandatoryField] === undefined || line[mandatoryField] === null || line[mandatoryField] === '') {
|
|
this.errors.mandatoryTags.push("Missing or empty mandatory tag " + mandatoryField + " on line " + lineCounter);
|
|
}
|
|
}
|
|
lineCounter++;
|
|
}
|
|
|
|
}
|
|
|
|
checkDuplicateInvNos() {
|
|
|
|
let invNoEncountered = [];
|
|
let lineCounter = 1;
|
|
for (let line of this.toValidate) {
|
|
if (invNoEncountered.includes(line.inventory_number)) {
|
|
this.errors.duplicateInvNos.push("Duplicate inventory number " + line.inventory_number + " on line " + lineCounter);
|
|
}
|
|
invNoEncountered.push(line.inventory_number);
|
|
lineCounter++;
|
|
}
|
|
|
|
}
|
|
|
|
checkDependentColumns() {
|
|
|
|
const headers = Object.keys(this.toValidate[0]);
|
|
|
|
for (let header of headers) {
|
|
if (this.fieldList[header] === undefined || this.fieldList[header].dependsOn === undefined || this.fieldList[header].dependsOn === null) continue;
|
|
|
|
let dependencies = this.fieldList[header].dependsOn;
|
|
for (let dep of dependencies) {
|
|
if (headers.includes(dep) === false) {
|
|
this.errors.dependentColumns.push("Dependency issue at column " + header + ": Corresponding column " + dep + " is missing");
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
checkControlledLists() {
|
|
|
|
let lineCounter = 1;
|
|
for (let line of this.toValidate) {
|
|
for (let fieldName in line) {
|
|
|
|
if (this.fieldList[fieldName] === undefined) {
|
|
console.log("Undefined but requested field " + fieldName);
|
|
continue;
|
|
}
|
|
|
|
let allowedValues = this.fieldList[fieldName].allowedValues;
|
|
|
|
// No error if the field doesn't have a controlled list
|
|
if (allowedValues === undefined || allowedValues === null) continue;
|
|
// No error if the line's content is in the list
|
|
if (Object.values(allowedValues).length === 0 || Object.values(allowedValues).includes(line[fieldName])) {
|
|
continue;
|
|
}
|
|
|
|
this.errors.controlledLists.push("Disallowed value used for column " + fieldName + " at line " + lineCounter + " (Allowed values are: " + Object.values(allowedValues).join(", ") + ")");
|
|
}
|
|
lineCounter++;
|
|
}
|
|
|
|
}
|
|
|
|
checkMainImageResource() {
|
|
|
|
}
|
|
|
|
isValid() {
|
|
|
|
for (let errorClass in this.errors) {
|
|
if (this.errors[errorClass].length !== 0) return false;
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
/**
|
|
* Generates XML for the parsed lines
|
|
*/
|
|
generateXml() {
|
|
|
|
let output = [];
|
|
|
|
let xmlDoc = document.implementation.createDocument(null, "record");
|
|
for (let line of this.toValidate) {
|
|
let root = xmlDoc.createElement("record");
|
|
for (let fieldName in line) {
|
|
const elem = xmlDoc.createElement(fieldName);
|
|
elem.textContent = line[fieldName];
|
|
root.appendChild(elem);
|
|
}
|
|
output.push(root)
|
|
}
|
|
|
|
return output;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class CsvxmlTooltip {
|
|
|
|
/**
|
|
* Function for setting the alignment of an element.
|
|
*
|
|
* @param {Event} e Event triggering the execution of this function.
|
|
* @param {DOMElement} elem Dom element to position.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
static getDirection(e, elem) {
|
|
|
|
if (window.innerHeight < e.clientY + elem.clientHeight) {
|
|
elem.style.top = "";
|
|
elem.style.bottom = (window.innerHeight - e.clientY) + "px";
|
|
}
|
|
else {
|
|
elem.style.bottom = "";
|
|
elem.style.top = (e.clientY + 4) + "px";
|
|
}
|
|
if (window.innerWidth < e.clientX + elem.clientWidth) {
|
|
elem.style.left = "";
|
|
elem.style.right = (window.innerWidth - e.clientX) + "px";
|
|
} else {
|
|
elem.style.right = "";
|
|
elem.style.left = (e.clientX + 3) + "px";
|
|
}
|
|
|
|
}
|
|
|
|
static positionMobile(newMain) {
|
|
|
|
if (window.matchMedia && window.matchMedia('(max-width:75em)').matches) {
|
|
|
|
newMain.style.left = "";
|
|
newMain.style.right = "";
|
|
newMain.style.top = "";
|
|
newMain.style.bottom = "";
|
|
|
|
if (newMain.classList.contains("atBottom") === false) {
|
|
newMain.classList.add("atBottom");
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
static triggerMouseMove(e) {
|
|
const newMain = document.getElementById("newToolTipMain");
|
|
if (newMain === undefined || newMain === null) return;
|
|
CsvxmlTooltip.getDirection(e, newMain);
|
|
CsvxmlTooltip.positionMobile(newMain);
|
|
}
|
|
|
|
static triggerMouseOut(e) {
|
|
|
|
const newMain = document.getElementById("newToolTipMain");
|
|
if (newMain !== undefined && newMain !== null) {
|
|
newMain.classList.remove("visible");
|
|
document.body.removeChild(newMain);
|
|
}
|
|
e.target.removeEventListener('mouseout', CsvxmlTooltip.triggerMouseOut);
|
|
|
|
}
|
|
|
|
static bindTooltipToElement(elem, tooltipTitle, tooltipContent) {
|
|
|
|
elem.addEventListener('mouseover', function(e) {
|
|
|
|
let newMain = document.getElementById("newToolTipMain");
|
|
if (newMain !== null) return;
|
|
newMain = document.createElement("div");
|
|
newMain.classList.add("newToolTip");
|
|
newMain.id = "newToolTipMain";
|
|
|
|
// Insert contents loaded.
|
|
|
|
newMain.setAttribute("data-title", tooltipTitle);
|
|
|
|
newMain.appendChild(tooltipContent);
|
|
|
|
document.body.appendChild(newMain);
|
|
newMain.classList.add("visible");
|
|
CsvxmlTooltip.getDirection(e, newMain);
|
|
CsvxmlTooltip.positionMobile(newMain);
|
|
|
|
newMain.addEventListener("mouseout", function(e) {
|
|
const newMain = document.getElementById("newToolTipMain");
|
|
if (newMain !== undefined && newMain !== null) {
|
|
newMain.classList.remove("visible");
|
|
document.body.removeChild(newMain);
|
|
}
|
|
});
|
|
|
|
elem.addEventListener("mouseout", CsvxmlTooltip.triggerMouseOut);
|
|
|
|
}, {passive: true});
|
|
|
|
elem.addEventListener("mousemove", CsvxmlTooltip.triggerMouseMove, {passive: true});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class CsvxmlDialogue {
|
|
|
|
static closeDialogue(e) {
|
|
|
|
if (e !== undefined) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
let dialogueArea = document.getElementById("dialogueArea");
|
|
if (dialogueArea !== null && dialogueArea !== false) {
|
|
while (dialogueArea.firstChild) {
|
|
dialogueArea.removeChild(dialogueArea.firstChild);
|
|
}
|
|
dialogueArea.parentElement.removeChild(dialogueArea);
|
|
|
|
document.removeEventListener('keydown', CsvxmlDialogue.closeDialogueByEscape, false);
|
|
}
|
|
|
|
}
|
|
|
|
static closeDialogueByEscape(e) {
|
|
|
|
if (e.keyCode === 27) { // 27 = Esc
|
|
|
|
CsvxmlDialogue.closeDialogue(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Function for drawing a dialogue and attaching it to the body elem.
|
|
*
|
|
* @param {DOMElement} contents Contents.
|
|
*/
|
|
static drawDialogue(contents) {
|
|
let dialogueArea = document.createElement("div");
|
|
dialogueArea.id = "dialogueArea";
|
|
|
|
let dialogue = document.createElement("div");
|
|
dialogue.id = "dialogue";
|
|
|
|
dialogue.appendChild(contents);
|
|
dialogueArea.appendChild(dialogue);
|
|
|
|
document.body.appendChild(dialogueArea);
|
|
|
|
document.addEventListener('keydown', CsvxmlDialogue.closeDialogueByEscape);
|
|
|
|
return dialogue;
|
|
}
|
|
|
|
}
|
|
|
|
class CsvxmlPage {
|
|
|
|
fieldList;
|
|
tls;
|
|
domUploaderWrapper;
|
|
domMainWrapper;
|
|
selectedFields;
|
|
|
|
csvBySelectionButton;
|
|
unsetSelectionButton;
|
|
|
|
constructor(fieldList) {
|
|
this.fieldList = Object.freeze(fieldList);
|
|
this.tls = Object.freeze(JSON.parse(document.body.getAttribute("data-tls")));
|
|
|
|
let domUploaderWrapper = document.createElement("div");
|
|
domUploaderWrapper.id = "uploader";
|
|
domUploaderWrapper.classList.add("uploader");
|
|
this.domUploaderWrapper = domUploaderWrapper;
|
|
|
|
let domMainWrapper = document.createElement("main");
|
|
this.domMainWrapper = domMainWrapper;
|
|
|
|
this.selectedFields = [];
|
|
}
|
|
|
|
generateCsv(selectedFields = []) {
|
|
|
|
let line1 = [];
|
|
let line2 = [];
|
|
let line3 = [];
|
|
|
|
for (let sectionName in this.fieldList) {
|
|
const sectionFields = this.fieldList[sectionName];
|
|
for (let fieldName in sectionFields) {
|
|
console.log(fieldName);
|
|
console.log(selectedFields);
|
|
|
|
if (selectedFields.length !== 0 && selectedFields.includes(fieldName) === false) continue;
|
|
const field = sectionFields[fieldName];
|
|
|
|
line1.push(fieldName);
|
|
line2.push(field.name_human_readable);
|
|
|
|
if (field.allowedValues !== undefined) {
|
|
// Join for object
|
|
let values = [];
|
|
for (let key in field.allowedValues) values.push(field.allowedValues[key]);
|
|
line3.push(values.join(","));
|
|
}
|
|
else line3.push("");
|
|
|
|
}
|
|
}
|
|
|
|
const csvLine1 = '"' + line1.join('";"') + '"';
|
|
const csvLine2 = '"' + line2.join('";"') + '"';
|
|
const csvLine3 = '"' + line3.join('";"') + '"';
|
|
|
|
const toStore = csvLine1 + "\n" + csvLine2 + "\n" + csvLine3;
|
|
|
|
// Download
|
|
const triggerLink = document.createElement('a');
|
|
triggerLink.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(toStore));
|
|
triggerLink.setAttribute('download', "csvxml_museum-digital_template.csv");
|
|
|
|
triggerLink.style.display = 'none';
|
|
|
|
document.body.appendChild(triggerLink);
|
|
triggerLink.click();
|
|
document.body.removeChild(triggerLink);
|
|
|
|
|
|
}
|
|
|
|
zipUploadToXml(validator) {
|
|
|
|
let zip = new JSZip();
|
|
|
|
let xmlFiles = validator.generateXml();
|
|
const serializer = new XMLSerializer();
|
|
let lineCounter = 0;
|
|
for (let xml of xmlFiles) {
|
|
zip.file(lineCounter + ".xml", serializer.serializeToString(xml));
|
|
lineCounter++;
|
|
}
|
|
|
|
zip.generateAsync({type:"blob"})
|
|
.then(function(content) {
|
|
const triggerLink = document.createElement('a');
|
|
triggerLink.href = window.URL.createObjectURL(content);
|
|
triggerLink.setAttribute('download', "csvxml.zip");
|
|
|
|
triggerLink.style.display = 'none';
|
|
|
|
document.body.appendChild(triggerLink);
|
|
triggerLink.click();
|
|
document.body.removeChild(triggerLink);
|
|
});
|
|
|
|
}
|
|
|
|
listValidationErrors(validator) {
|
|
|
|
const dialogueContent = document.createElement("div");
|
|
|
|
const headline = document.createElement("h3");
|
|
headline.textContent = this.tls.validation_errors;
|
|
|
|
const cancelB = document.createElement("a");
|
|
cancelB.classList.add("icons");
|
|
cancelB.classList.add("iconsClose");
|
|
cancelB.classList.add("dialogueCloseX");
|
|
cancelB.id = "dialogueClose";
|
|
cancelB.textContent = "X";
|
|
cancelB.title = "Close";
|
|
cancelB.href = "#" + location.href;
|
|
cancelB.addEventListener('click', CsvxmlDialogue.closeDialogue);
|
|
headline.appendChild(cancelB);
|
|
|
|
dialogueContent.appendChild(headline);
|
|
|
|
const domErrorsSection = document.createElement("div");
|
|
|
|
for (let errorType in validator.errors) {
|
|
|
|
if (validator.errors[errorType].length === 0) continue;
|
|
|
|
const ulHl = document.createElement("h4");
|
|
ulHl.textContent = this.tls['errors_' + errorType] + " (" + validator.errors[errorType].length + ")";
|
|
ulHl.style.cursor = "pointer";
|
|
domErrorsSection.appendChild(ulHl);
|
|
|
|
const ul = document.createElement("ul");
|
|
|
|
for (let error of validator.errors[errorType]) {
|
|
const li = document.createElement("li");
|
|
li.textContent = error;
|
|
ul.appendChild(li);
|
|
}
|
|
|
|
ulHl.addEventListener('click', function() {
|
|
ul.classList.toggle("minimized");
|
|
});
|
|
|
|
domErrorsSection.appendChild(ul);
|
|
|
|
}
|
|
|
|
dialogueContent.appendChild(domErrorsSection);
|
|
|
|
const domDlSection = document.createElement("div");
|
|
const domDlA = document.createElement("span");
|
|
domDlA.textContent = this.tls.download;
|
|
domDlA.classList.add("buttonLike");
|
|
let app = this;
|
|
domDlA.addEventListener('click', function() {
|
|
app.zipUploadToXml(validator);
|
|
});
|
|
domDlSection.appendChild(domDlA);
|
|
dialogueContent.appendChild(domDlSection);
|
|
|
|
dialogue = CsvxmlDialogue.drawDialogue(dialogueContent);
|
|
|
|
}
|
|
|
|
uploadFileForValidation(file) {
|
|
|
|
const reader = new FileReader();
|
|
reader.readAsText(file);
|
|
|
|
let app = this;
|
|
|
|
reader.onload = function() {
|
|
|
|
// On loading success, check if the upload is valid JSON
|
|
console.log("Read file");
|
|
// Validate the file
|
|
let validator = new CsvxmlValidator(app.fieldList, reader.result);
|
|
if (validator.isValid() === true) {
|
|
alert("Document is valid. Press ok to download.");
|
|
app.zipUploadToXml(validator);
|
|
}
|
|
else {
|
|
app.listValidationErrors(validator);
|
|
}
|
|
|
|
};
|
|
reader.onerror = function() {
|
|
alert(reader.error);
|
|
};
|
|
|
|
}
|
|
|
|
renderUploader() {
|
|
|
|
let app = this;
|
|
(async function() {
|
|
|
|
const form = document.createElement("form");
|
|
|
|
const label = document.createElement("label");
|
|
label.textContent = app.tls.select_csv_file_for_upload;
|
|
label.setAttribute("for", "fileToUpload");
|
|
form.appendChild(label);
|
|
|
|
const input = document.createElement("input");
|
|
input.type = "file";
|
|
input.id = "fileToUpload";
|
|
input.accept = ".csv";
|
|
input.required = "required";
|
|
input.addEventListener('change', async function() {
|
|
app.uploadFileForValidation(input.files[0]);
|
|
});
|
|
form.appendChild(input);
|
|
|
|
/*
|
|
const button = document.createElement("button");
|
|
button.textContent = "Upload"; // TODO
|
|
button.type = "submit";
|
|
form.appendChild(button);
|
|
*/
|
|
|
|
app.domUploaderWrapper.appendChild(form);
|
|
|
|
})();
|
|
|
|
document.body.appendChild(this.domUploaderWrapper);
|
|
|
|
}
|
|
|
|
// Takes a callback function
|
|
doForFieldList(callback) {
|
|
let fieldLists = document.getElementsByClassName("fieldList");
|
|
for (let i = 0, max = fieldLists.length; i < max; i++) {
|
|
|
|
let fields = fieldLists[i].getElementsByTagName("li");
|
|
for (let j = 0, maxj = fields.length; j < maxj; j++) {
|
|
|
|
callback(fields[j]);
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
toggleListFieldSelectionState(field) {
|
|
|
|
let app = this;
|
|
|
|
let newValue = field.getAttribute("data-alt");
|
|
field.setAttribute("data-alt", field.textContent);
|
|
field.textContent = newValue;
|
|
field.classList.toggle("humanTLToggled");
|
|
|
|
if (field.classList.contains("humanTLToggled") === false) return;
|
|
|
|
let dependencies = field.getAttribute("data-dependencies");
|
|
if (dependencies !== undefined && dependencies !== null) {
|
|
let linkedFields = dependencies.split(";");
|
|
for (let i = 0, max = linkedFields.length; i < max; i++) {
|
|
let linkedField = document.getElementById(linkedFields[i]);
|
|
if (linkedField.classList.contains("humanTLToggled") === true) continue;
|
|
app.toggleListFieldSelectionState(linkedField);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
checkCSVBySelectionAccessibility() {
|
|
|
|
let selected = document.getElementsByClassName("humanTLToggled");
|
|
if (selected.length === 0) {
|
|
this.csvBySelectionButton.classList.add("invisible");
|
|
this.unsetSelectionButton.classList.add("invisible");
|
|
}
|
|
else {
|
|
this.csvBySelectionButton.classList.remove("invisible");
|
|
this.unsetSelectionButton.classList.remove("invisible");
|
|
}
|
|
|
|
}
|
|
|
|
getOptionsSection() {
|
|
|
|
function genButton(id, text, link = "") {
|
|
|
|
const output = document.createElement("a");
|
|
output.id = id;
|
|
output.textContent = text;
|
|
output.classList.add("buttonLike");
|
|
if (link !== "") output.href = link;
|
|
return output;
|
|
|
|
}
|
|
|
|
const options = document.createElement("div");
|
|
options.classList.add("options");
|
|
|
|
const app = this;
|
|
|
|
const dlAllButton = genButton("dlAll", this.tls.download_csv_all);
|
|
dlAllButton.cursor = "pointer";
|
|
dlAllButton.addEventListener('click', function() {
|
|
app.generateCsv();
|
|
});
|
|
options.appendChild(dlAllButton);
|
|
|
|
this.csvBySelectionButton = genButton("csvBySelection", this.tls.download_csv_by_selection);
|
|
this.csvBySelectionButton.classList.add("invisible");
|
|
options.appendChild(this.csvBySelectionButton);
|
|
|
|
const optionSelectRequired = genButton("selectRequired", this.tls.select_required_fields);
|
|
options.appendChild(optionSelectRequired);
|
|
|
|
const optionSelectAll = genButton("selectAll", this.tls.select_all_fields);
|
|
options.appendChild(optionSelectAll);
|
|
|
|
this.unsetSelectionButton = genButton("unsetSelection", this.tls.unset_selection);
|
|
this.unsetSelectionButton.classList.add("invisible");
|
|
options.appendChild(this.unsetSelectionButton);
|
|
|
|
this.csvBySelectionButton.addEventListener('click', function(e) {
|
|
|
|
let selected = document.getElementsByClassName("humanTLToggled");
|
|
let selectedFields = [];
|
|
for (let i = 0, max = selected.length; i < max; i++) {
|
|
selectedFields += selected[i].getAttribute("data-value");
|
|
}
|
|
app.generateCsv(selectedFields);
|
|
|
|
});
|
|
|
|
optionSelectRequired.addEventListener('click', function(e) {
|
|
|
|
app.doForFieldList(function(field) {
|
|
if (field.classList.contains("requiredField") === false) return;
|
|
if (field.classList.contains("humanTLToggled") === true) return;
|
|
|
|
app.toggleListFieldSelectionState(field);
|
|
app.checkCSVBySelectionAccessibility();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
optionSelectAll.addEventListener('click', function(e) {
|
|
|
|
app.doForFieldList(function(field) {
|
|
if (field.classList.contains("humanTLToggled") === true) return;
|
|
|
|
app.toggleListFieldSelectionState(field);
|
|
app.checkCSVBySelectionAccessibility();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.unsetSelectionButton.addEventListener('click', function(e) {
|
|
|
|
app.doForFieldList(function(field) {
|
|
if (field.classList.contains("humanTLToggled") === false) return;
|
|
|
|
app.toggleListFieldSelectionState(field);
|
|
app.checkCSVBySelectionAccessibility();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
return options;
|
|
|
|
}
|
|
|
|
renderMain() {
|
|
|
|
const domH2 = document.createElement("h2");
|
|
domH2.textContent = this.tls.currently_approved_tags;
|
|
this.domMainWrapper.appendChild(domH2);
|
|
|
|
this.domMainWrapper.appendChild(this.getOptionsSection());
|
|
|
|
for (let sectionName in this.fieldList) {
|
|
|
|
const domDiv = document.createElement("div");
|
|
|
|
const domH3 = document.createElement("h3");
|
|
domH3.textContent = sectionName;
|
|
domDiv.appendChild(domH3);
|
|
|
|
const domUl = document.createElement("ul");
|
|
domUl.classList.add("fieldList");
|
|
|
|
const sectionFields = this.fieldList[sectionName];
|
|
for (let fieldName in sectionFields) {
|
|
const field = sectionFields[fieldName];
|
|
|
|
const domLi = document.createElement("li");
|
|
domLi.textContent = fieldName;
|
|
domLi.id = fieldName;
|
|
domLi.setAttribute("data-alt", field.name_human_readable)
|
|
domLi.setAttribute("data-value", fieldName)
|
|
if (field.required === true) domLi.classList.add("requiredField");
|
|
domUl.appendChild(domLi);
|
|
|
|
const tooltipContent = document.createElement("div");
|
|
const explicaP = document.createElement("p");
|
|
explicaP.textContent = field.explica;
|
|
tooltipContent.appendChild(explicaP);
|
|
|
|
if (field.remarks !== undefined && field.remarks !== '') {
|
|
|
|
const remarkHl = document.createElement("h4");
|
|
remarkHl.textContent = this.tls.remarks;
|
|
tooltipContent.appendChild(remarkHl)
|
|
const remarkCont = document.createElement("p");
|
|
remarkCont = field.remarks;
|
|
tooltipContent.appendChild(remarkCont);
|
|
|
|
}
|
|
|
|
if (field.allowedValues !== undefined && Object.values(field.allowedValues).length !== 0) {
|
|
const allowedHl = document.createElement("h4");
|
|
allowedHl.textContent = this.tls.allowed_values;
|
|
tooltipContent.appendChild(allowedHl);
|
|
const allowedList = document.createElement("p");
|
|
allowedList.textContent = Object.values(field.allowedValues).join(', ');
|
|
tooltipContent.appendChild(allowedList);
|
|
}
|
|
|
|
CsvxmlTooltip.bindTooltipToElement(domLi, field.name_human_readable, tooltipContent);
|
|
|
|
}
|
|
|
|
domDiv.appendChild(domUl);
|
|
|
|
this.domMainWrapper.appendChild(domDiv);
|
|
|
|
}
|
|
|
|
document.body.appendChild(this.domMainWrapper);
|
|
|
|
let app = this;
|
|
this.doForFieldList(function(field) {
|
|
|
|
// Each field should switch its visible content and human-readable
|
|
// translation on a click.
|
|
field.addEventListener('click', function(e) {
|
|
|
|
app.toggleListFieldSelectionState(field);
|
|
app.checkCSVBySelectionAccessibility();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
document.body.classList.add("loading");
|
|
|
|
window.fetch('/?output=json', {
|
|
method: 'GET', cache: 'no-cache',
|
|
credentials: 'same-origin',
|
|
}).then(function(response) {
|
|
return response.json();
|
|
}).then(function(elements) {
|
|
|
|
document.body.classList.remove("loading");
|
|
|
|
const page = new CsvxmlPage(elements);
|
|
page.renderUploader();
|
|
page.renderMain();
|
|
|
|
});
|