Move on to a fully pre-compiled setup

See #14

public/assets/js/csvxmlV2.js

@@ -380,7 +380,7 @@ class CsvxmlPage {
     csvBySelectionButton;
     unsetSelectionButton;
 
-    constructor(fieldList) {
+    constructor(fieldList, tls) {
         this.fieldList = Object.freeze(fieldList);
 
         let list = {};
@@ -389,7 +389,7 @@ class CsvxmlPage {
         }
         this.fieldListFlat = Object.freeze(list);
 
-        this.tls = Object.freeze(JSON.parse(document.body.getAttribute("data-tls")));
+        this.tls = Object.freeze(tls);
 
         let domUploaderWrapper = document.createElement("div");
         domUploaderWrapper.id = "uploader";
@@ -587,6 +587,29 @@ class CsvxmlPage {
 
     }
 
+    renderHeader() {
+
+        const header = document.createElement("header");
+
+        const h1 = document.createElement("h1");
+
+        const img = document.createElement("img");
+        img.width = "70";
+        img.height = "70";
+        img.src = "assets/img/mdlogo-csvxml.svg";
+        img.alt = "";
+        h1.appendChild(img);
+
+        const h1Span = document.createElement("span");
+        h1Span.textContent = "museum-digital:csvxml";
+        h1.appendChild(h1Span);
+
+        header.appendChild(h1);
+
+        document.body.appendChild(header);
+
+    }
+
     renderUploader() {
 
         let app = this;
@@ -853,19 +876,60 @@ class CsvxmlPage {
 
 }
 
-document.body.classList.add("loading");
+(async function() {
 
-window.fetch('/?output=json', {
-    method: 'GET', cache: 'no-cache',
-    credentials: 'same-origin',
-}).then(function(response) {
-    return response.json();
-}).then(function(elements) {
+    function getLang() {
 
-    document.body.classList.remove("loading");
+        const allowedLangs = document.documentElement.getAttribute("data-allowed-langs").split(',');
 
-    const page = new CsvxmlPage(elements);
-    page.renderUploader();
-    page.renderMain();
+        if (navigator.language === undefined) return 'en';
 
-});
+        const browserLang = navigator.language.toLowerCase().substr(0, 2);
+        console.log(browserLang);
+
+        if (allowedLangs.includes(browserLang)) return browserLang;
+        else return 'en';
+
+    }
+
+    const lang = getLang();
+
+    document.body.classList.add("loading");
+
+    let loaded = 0;
+
+    let fieldList;
+    let tls;
+
+    function loadPage() {
+
+        document.body.classList.remove("loading");
+
+        const page = new CsvxmlPage(fieldList, tls);
+        page.renderHeader();
+        page.renderUploader();
+        page.renderMain();
+
+    }
+
+    window.fetch('/json/fields.' + lang + '.json', {
+        method: 'GET', cache: 'no-cache', credentials: 'same-origin',
+    }).then(function(response) {
+        return response.json();
+    }).then(function(elements) {
+        fieldList = elements;
+        loaded++;
+        if (loaded === 2) loadPage();
+    });
+
+    window.fetch('/json/tls.' + lang + '.json', {
+        method: 'GET', cache: 'no-cache', credentials: 'same-origin',
+    }).then(function(response) {
+        return response.json();
+    }).then(function(elements) {
+        tls = elements;
+        loaded++;
+        if (loaded === 2) loadPage();
+    });
+
+})();