tg-prepare 1.1.0__py3-none-any.whl → 2.1.0b1__py3-none-any.whl

tgp_ui/static/js/navbarManager.js

@@ -0,0 +1,151 @@
+define([], function () {
+    const NavbarManager = {
+        resetButtons: function (buttons, additionalClasses = []) {
+            buttons.forEach(btn => {
+                btn.classList.remove('animate-to-long', 'border-primary', ...additionalClasses);
+                const icon = btn.querySelector('i');
+                const subButtons = btn.querySelector('.sub-buttons');
+
+                if (icon) icon.classList.remove('d-none');
+                if (subButtons) {
+                    subButtons.classList.add('d-none');
+                    subButtons.style.opacity = '0';
+                }
+
+                btn.style.width = ''; // Reset width
+
+                // Füge für kleine Buttons die Outline-Secondary-Klasse wieder hinzu
+                if (btn.classList.contains('btn-sm')) {
+                    btn.classList.add('btn-outline-secondary');
+                }
+            });
+        },
+
+        activateButton: function (button, index, buttons) {
+            // Vorherige Buttons hervorheben / Progress anzeigen
+            for (let i = 0; i <= index; i++) {
+                buttons[i].classList.add('border-primary');
+            }
+
+            // Aktuellen Button erweitern
+            button.classList.add('animate-to-long');
+            const icon = button.querySelector('i');
+            const subButtons = button.querySelector('.sub-buttons');
+
+            if (icon) icon.classList.add('d-none');
+            if (subButtons) {
+                subButtons.classList.remove('d-none');
+                setTimeout(() => {
+                    subButtons.style.opacity = '1';
+                }, 300);
+
+                // Ersten kleinen Button klicken, wenn kein last-opened vorhanden
+                const lastOpenedButton = subButtons.querySelector('.last-opened');
+                if (lastOpenedButton) {
+                    lastOpenedButton.click();
+                } else {
+                    const firstSmButton = subButtons.querySelector('.btn-sm');
+                    if (firstSmButton) firstSmButton.click();
+                }
+            }
+
+            // Dynamische Breite basierend auf kleinen Buttons
+            const smallButtonsCount = subButtons?.querySelectorAll('.btn-sm').length || 0;
+            const sizeAdjustment = smallButtonsCount * 5.4;
+            button.style.width = `${sizeAdjustment}rem`;
+        },
+
+        adjustLine: function (button) {
+            const container = document.querySelector('.container.bg'); // Container der Buttons
+            const lineBlue = document.querySelector('.line.blue'); // Zweite Linie
+            const containerRect = container.getBoundingClientRect(); // Position des Containers
+            const buttonRect = button.getBoundingClientRect(); // Position des angeklickten Buttons
+
+            // Berechne die Breite der Linie basierend auf der Position des Buttons
+            const newWidth = buttonRect.left - containerRect.left + buttonRect.width / 2;
+            lineBlue.style.width = `${newWidth}px`; // Setze die neue Breite der Linie
+        },
+
+        triggerLastOpenedTab: function (projectname) {
+            fetch(`/get_last_tab/${projectname}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.initial_tab) {
+                        const initialTab = document.querySelector(`.btn-sm[data-bs-target="#${data.initial_tab}"]`);
+                        if (initialTab) {
+                            initialTab.closest('.btn-xl').click();
+                            initialTab.click();
+                        }
+                    }
+                })
+                .catch(error => console.error('Error fetching initial tab:', error));
+        },
+
+        setLastOpenedTab: function (projectname, tab) {
+            fetch(`/set_last_tab/${projectname}/${tab}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ projectname: projectname, tab: tab })
+            })
+                .then(response => response.json())
+                .catch(error => console.error('Error writing last tab:', error));
+        },
+
+        init: function () {
+            // Event-Listener für große Buttons (btn-xl)
+            document.querySelectorAll('.btn-xl').forEach((button, index, buttons) => {
+                button.addEventListener('click', () => {
+                    // Delete activate class from all small buttons
+                    const smBtnContainer = button.closest('.container.bg');
+                    smBtnContainer.querySelectorAll('.btn-sm').forEach(btn => {
+                        btn.classList.remove('active');
+                    });
+
+                    this.resetButtons(document.querySelectorAll('.btn-xl'));
+                    this.activateButton(button, index, buttons);
+                    this.adjustLine(button);
+                });
+            });
+
+            // Event-Listener für kleine Buttons (btn-sm)
+            document.querySelectorAll('.btn-sm').forEach(button => {
+                button.addEventListener('click', event => {
+                    event.stopPropagation(); // Verhindert, dass der große Button reagiert
+
+                    // Alle kleinen Buttons in der gleichen Sektion zurücksetzen
+                    const parentSection = button.closest('.sub-buttons');
+                    this.resetButtons(parentSection.querySelectorAll('.btn-sm'), ['btn-outline-primary', 'last-opened']);
+
+                    // Aktuellen Button aktivieren
+                    button.classList.add('btn-outline-primary', 'last-opened');
+                    button.classList.remove('btn-outline-secondary');
+
+                    // Setze den zuletzt geöffneten Tab
+                    const projectname = this.getActiveProjectName();
+                    const tab = button.getAttribute('data-bs-target').replace('#', '');
+                    this.setLastOpenedTab(projectname, tab);
+                });
+            });
+
+            // Initialisiere den zuletzt geöffneten Tab
+            const projectname = this.getActiveProjectName();
+            if (projectname) {
+                this.triggerLastOpenedTab(projectname);
+            }
+        },
+
+        getActiveProjectName: function () {
+            const activeBtn = Array.from(document.querySelectorAll('.project-btn'))
+                .find(btn => btn.querySelector('.bi.bi-circle-fill'));
+            if (activeBtn) {
+                const nameSpan = activeBtn.querySelector('.projectname');
+                return nameSpan ? nameSpan.textContent : null;
+            }
+            return null;
+        }
+    };
+
+    return NavbarManager;
+});

tgp_ui/static/js/projectManager.js

@@ -0,0 +1,60 @@
+define([], function () {
+    const ProjectManager = {
+        addMultiInputAttributes: function (event) {
+            event.preventDefault();
+
+            // Clone the current input group element
+            const currentInputGroup = event.target.closest('.input-group');
+            const newInputGroup = currentInputGroup.cloneNode(true);
+
+            // Clear the input field in the cloned element
+            const input = newInputGroup.querySelector('input');
+            if (input) {
+                input.value = '';
+            }
+
+            // Replace the plus symbol with a minus symbol and add the 'remove-multi-input' class
+            const button = newInputGroup.querySelector('.add-multi-input');
+            if (button) {
+                button.classList.remove('add-multi-input');
+                button.classList.add('remove-multi-input');
+                const logo = button.querySelector('i');
+                logo.classList.remove('bi-plus-circle-dotted');
+                logo.classList.add('bi-dash-circle-dotted');
+            }
+
+            // Append the cloned element at the end of the parent container
+            currentInputGroup.parentNode.appendChild(newInputGroup);
+        },
+
+        removeMultiInputAttributes: function (event) {
+            event.preventDefault();
+
+            // Remove the parent div of the minus button
+            const inputGroup = event.target.closest('.input-group');
+            if (inputGroup) {
+                inputGroup.remove();
+            }
+        },
+
+        focusInputProjectname: function () {
+            const projectInput = document.getElementById('projectNameInput');
+            if (projectInput) {
+                projectInput.focus();
+            }
+        },
+
+        init: function () {
+            // Event binding for adding a new multi-input field
+            $(document).on('click', '.add-multi-input', this.addMultiInputAttributes);
+
+            // Event binding for removing a multi-input field
+            $(document).on('click', '.remove-multi-input', this.removeMultiInputAttributes);
+
+            // Event binding for focusing on the project name input in the modal
+            $(document).on('shown.bs.modal', '#newProject', this.focusInputProjectname);
+        }
+    };
+
+    return ProjectManager;
+});

tgp_ui/static/js/require.js

@@ -0,0 +1,5 @@
+/** vim: et:ts=4:sw=4:sts=4
+ * @license RequireJS 2.3.7 Copyright jQuery Foundation and other contributors.
+ * Released under MIT license, https://github.com/requirejs/requirejs/blob/master/LICENSE
+ */
+var requirejs, require, define; !function (global, setTimeout) { var req, s, head, baseElement, dataMain, src, interactiveScript, currentlyAddingScript, mainScript, subPath, version = "2.3.7", commentRegExp = /\/\*[\s\S]*?\*\/|([^:"'=]|^)\/\/.*$/gm, cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g, jsSuffixRegExp = /\.js$/, currDirRegExp = /^\.\//, op = Object.prototype, ostring = op.toString, hasOwn = op.hasOwnProperty, isBrowser = !("undefined" == typeof window || "undefined" == typeof navigator || !window.document), isWebWorker = !isBrowser && "undefined" != typeof importScripts, readyRegExp = isBrowser && "PLAYSTATION 3" === navigator.platform ? /^complete$/ : /^(complete|loaded)$/, defContextName = "_", isOpera = "undefined" != typeof opera && "[object Opera]" === opera.toString(), contexts = {}, cfg = {}, globalDefQueue = [], useInteractive = !1, disallowedProps = ["__proto__", "constructor"]; function commentReplace(e, t) { return t || "" } function isFunction(e) { return "[object Function]" === ostring.call(e) } function isArray(e) { return "[object Array]" === ostring.call(e) } function each(e, t) { if (e) for (var i = 0; i < e.length && (!e[i] || !t(e[i], i, e)); i += 1); } function eachReverse(e, t) { if (e) for (var i = e.length - 1; -1 < i && (!e[i] || !t(e[i], i, e)); --i); } function hasProp(e, t) { return hasOwn.call(e, t) } function getOwn(e, t) { return hasProp(e, t) && e[t] } function eachProp(e, t) { for (var i in e) if (hasProp(e, i) && -1 == disallowedProps.indexOf(i) && t(e[i], i)) break } function mixin(i, e, r, n) { e && eachProp(e, function (e, t) { !r && hasProp(i, t) || (!n || "object" != typeof e || !e || isArray(e) || isFunction(e) || e instanceof RegExp ? i[t] = e : (i[t] || (i[t] = {}), mixin(i[t], e, r, n))) }) } function bind(e, t) { return function () { return t.apply(e, arguments) } } function scripts() { return document.getElementsByTagName("script") } function defaultOnError(e) { throw e } function getGlobal(e) { var t; return e && (t = global, each(e.split("."), function (e) { t = t[e] }), t) } function makeError(e, t, i, r) { t = new Error(t + "\nhttps://requirejs.org/docs/errors.html#" + e); return t.requireType = e, t.requireModules = r, i && (t.originalError = i), t } if (void 0 === define) { if (void 0 !== requirejs) { if (isFunction(requirejs)) return; cfg = requirejs, requirejs = void 0 } void 0 === require || isFunction(require) || (cfg = require, require = void 0), req = requirejs = function (e, t, i, r) { var n, o = defContextName; return isArray(e) || "string" == typeof e || (n = e, isArray(t) ? (e = t, t = i, i = r) : e = []), n && n.context && (o = n.context), r = (r = getOwn(contexts, o)) || (contexts[o] = req.s.newContext(o)), n && r.configure(n), r.require(e, t, i) }, req.config = function (e) { return req(e) }, req.nextTick = void 0 !== setTimeout ? function (e) { setTimeout(e, 4) } : function (e) { e() }, require = require || req, req.version = version, req.jsExtRegExp = /^\/|:|\?|\.js$/, req.isBrowser = isBrowser, s = req.s = { contexts: contexts, newContext: newContext }, req({}), each(["toUrl", "undef", "defined", "specified"], function (t) { req[t] = function () { var e = contexts[defContextName]; return e.require[t].apply(e, arguments) } }), isBrowser && (head = s.head = document.getElementsByTagName("head")[0], baseElement = document.getElementsByTagName("base")[0], baseElement) && (head = s.head = baseElement.parentNode), req.onError = defaultOnError, req.createNode = function (e, t, i) { var r = e.xhtml ? document.createElementNS("http://www.w3.org/1999/xhtml", "html:script") : document.createElement("script"); return r.type = e.scriptType || "text/javascript", r.charset = "utf-8", r.async = !0, r }, req.load = function (t, i, r) { var e, n = t && t.config || {}; if (isBrowser) return (e = req.createNode(n, i, r)).setAttribute("data-requirecontext", t.contextName), e.setAttribute("data-requiremodule", i), !e.attachEvent || e.attachEvent.toString && e.attachEvent.toString().indexOf("[native code") < 0 || isOpera ? (e.addEventListener("load", t.onScriptLoad, !1), e.addEventListener("error", t.onScriptError, !1)) : (useInteractive = !0, e.attachEvent("onreadystatechange", t.onScriptLoad)), e.src = r, n.onNodeCreated && n.onNodeCreated(e, n, i, r), currentlyAddingScript = e, baseElement ? head.insertBefore(e, baseElement) : head.appendChild(e), currentlyAddingScript = null, e; if (isWebWorker) try { setTimeout(function () { }, 0), importScripts(r), t.completeLoad(i) } catch (e) { t.onError(makeError("importscripts", "importScripts failed for " + i + " at " + r, e, [i])) } }, isBrowser && !cfg.skipDataMain && eachReverse(scripts(), function (e) { if (head = head || e.parentNode, dataMain = e.getAttribute("data-main")) return mainScript = dataMain, cfg.baseUrl || -1 !== mainScript.indexOf("!") || (mainScript = (src = mainScript.split("/")).pop(), subPath = src.length ? src.join("/") + "/" : "./", cfg.baseUrl = subPath), mainScript = mainScript.replace(jsSuffixRegExp, ""), req.jsExtRegExp.test(mainScript) && (mainScript = dataMain), cfg.deps = cfg.deps ? cfg.deps.concat(mainScript) : [mainScript], !0 }), define = function (e, i, t) { var r, n; "string" != typeof e && (t = i, i = e, e = null), isArray(i) || (t = i, i = null), !i && isFunction(t) && (i = [], t.length) && (t.toString().replace(commentRegExp, commentReplace).replace(cjsRequireRegExp, function (e, t) { i.push(t) }), i = (1 === t.length ? ["require"] : ["require", "exports", "module"]).concat(i)), useInteractive && (r = currentlyAddingScript || getInteractiveScript()) && (e = e || r.getAttribute("data-requiremodule"), n = contexts[r.getAttribute("data-requirecontext")]), n ? (n.defQueue.push([e, i, t]), n.defQueueMap[e] = !0) : globalDefQueue.push([e, i, t]) }, define.amd = { jQuery: !0 }, req.exec = function (text) { return eval(text) }, req(cfg) } function newContext(u) { var t, e, f, c, i, b = { waitSeconds: 7, baseUrl: "./", paths: {}, bundles: {}, pkgs: {}, shim: {}, config: {} }, d = {}, p = {}, r = {}, l = [], h = {}, n = {}, m = {}, g = 1, x = 1; function v(e, t, i) { var r, n, o, a, s, u, c, d, p, f = t && t.split("/"), l = b.map, h = l && l["*"]; if (e) { t = (e = e.split("/")).length - 1, b.nodeIdCompat && jsSuffixRegExp.test(e[t]) && (e[t] = e[t].replace(jsSuffixRegExp, "")); for (var m, g = e = "." === e[0].charAt(0) && f ? f.slice(0, f.length - 1).concat(e) : e, x = 0; x < g.length; x++)"." === (m = g[x]) ? (g.splice(x, 1), --x) : ".." !== m || 0 === x || 1 === x && ".." === g[2] || ".." === g[x - 1] || 0 < x && (g.splice(x - 1, 2), x -= 2); e = e.join("/") } if (i && l && (f || h)) { e: for (o = (n = e.split("/")).length; 0 < o; --o) { if (s = n.slice(0, o).join("/"), f) for (a = f.length; 0 < a; --a)if (r = (r = getOwn(l, f.slice(0, a).join("/"))) && getOwn(r, s)) { u = r, c = o; break e } !d && h && getOwn(h, s) && (d = getOwn(h, s), p = o) } !u && d && (u = d, c = p), u && (n.splice(0, c, u), e = n.join("/")) } return getOwn(b.pkgs, e) || e } function q(t) { isBrowser && each(scripts(), function (e) { if (e.getAttribute("data-requiremodule") === t && e.getAttribute("data-requirecontext") === f.contextName) return e.parentNode.removeChild(e), !0 }) } function E(e) { var t = getOwn(b.paths, e); return t && isArray(t) && 1 < t.length && (t.shift(), f.require.undef(e), f.makeRequire(null, { skipMap: !0 })([e]), 1) } function w(e) { var t, i = e ? e.indexOf("!") : -1; return -1 < i && (t = e.substring(0, i), e = e.substring(i + 1, e.length)), [t, e] } function y(e, t, i, r) { var n, o, a, s = null, u = t ? t.name : null, c = e, d = !0, p = ""; return e || (d = !1, e = "_@r" + (g += 1)), s = (a = w(e))[0], e = a[1], s && (s = v(s, u, r), o = getOwn(h, s)), e && (s ? p = i ? e : o && o.normalize ? o.normalize(e, function (e) { return v(e, u, r) }) : -1 === e.indexOf("!") ? v(e, u, r) : e : (s = (a = w(p = v(e, u, r)))[0], i = !0, n = f.nameToUrl(p = a[1]))), { prefix: s, name: p, parentMap: t, unnormalized: !!(e = !s || o || i ? "" : "_unnormalized" + (x += 1)), url: n, originalName: c, isDefine: d, id: (s ? s + "!" + p : p) + e } } function S(e) { var t = e.id; return getOwn(d, t) || (d[t] = new f.Module(e)) } function k(e, t, i) { var r = e.id, n = getOwn(d, r); !hasProp(h, r) || n && !n.defineEmitComplete ? (n = S(e)).error && "error" === t ? i(n.error) : n.on(t, i) : "defined" === t && i(h[r]) } function M(t, e) { var i = t.requireModules, r = !1; e ? e(t) : (each(i, function (e) { e = getOwn(d, e); e && (e.error = t, e.events.error) && (r = !0, e.emit("error", t)) }), r || req.onError(t)) } function O() { globalDefQueue.length && (each(globalDefQueue, function (e) { var t = e[0]; "string" == typeof t && (f.defQueueMap[t] = !0), l.push(e) }), globalDefQueue = []) } function j(e) { delete d[e], delete p[e] } function P() { var r, e = 1e3 * b.waitSeconds, n = e && f.startTime + e < (new Date).getTime(), o = [], a = [], s = !1, u = !0; if (!t) { if (t = !0, eachProp(p, function (e) { var t = e.map, i = t.id; if (e.enabled && (t.isDefine || a.push(e), !e.error)) if (!e.inited && n) E(i) ? s = r = !0 : (o.push(i), q(i)); else if (!e.inited && e.fetched && t.isDefine && (s = !0, !t.prefix)) return u = !1 }), n && o.length) return (e = makeError("timeout", "Load timeout for modules: " + o, null, o)).contextName = f.contextName, M(e); u && each(a, function (e) { !function r(n, o, a) { var e = n.map.id; n.error ? n.emit("error", n.error) : (o[e] = !0, each(n.depMaps, function (e, t) { var e = e.id, i = getOwn(d, e); !i || n.depMatched[t] || a[e] || (getOwn(o, e) ? (n.defineDep(t, h[e]), n.check()) : r(i, o, a)) }), a[e] = !0) }(e, {}, {}) }), n && !r || !s || (isBrowser || isWebWorker) && (i = i || setTimeout(function () { i = 0, P() }, 50)), t = !1 } } function a(e) { hasProp(h, e[0]) || S(y(e[0], null, !0)).init(e[1], e[2]) } function o(e, t, i, r) { e.detachEvent && !isOpera ? r && e.detachEvent(r, t) : e.removeEventListener(i, t, !1) } function s(e) { e = e.currentTarget || e.srcElement; return o(e, f.onScriptLoad, "load", "onreadystatechange"), o(e, f.onScriptError, "error"), { node: e, id: e && e.getAttribute("data-requiremodule") } } function R() { var e; for (O(); l.length;) { if (null === (e = l.shift())[0]) return M(makeError("mismatch", "Mismatched anonymous define() module: " + e[e.length - 1])); a(e) } f.defQueueMap = {} } return c = { require: function (e) { return e.require || (e.require = f.makeRequire(e.map)) }, exports: function (e) { if (e.usingExports = !0, e.map.isDefine) return e.exports ? h[e.map.id] = e.exports : e.exports = h[e.map.id] = {} }, module: function (e) { return e.module || (e.module = { id: e.map.id, uri: e.map.url, config: function () { return getOwn(b.config, e.map.id) || {} }, exports: e.exports || (e.exports = {}) }) } }, (e = function (e) { this.events = getOwn(r, e.id) || {}, this.map = e, this.shim = getOwn(b.shim, e.id), this.depExports = [], this.depMaps = [], this.depMatched = [], this.pluginMaps = {}, this.depCount = 0 }).prototype = { init: function (e, t, i, r) { r = r || {}, this.inited || (this.factory = t, i ? this.on("error", i) : this.events.error && (i = bind(this, function (e) { this.emit("error", e) })), this.depMaps = e && e.slice(0), this.errback = i, this.inited = !0, this.ignore = r.ignore, r.enabled || this.enabled ? this.enable() : this.check()) }, defineDep: function (e, t) { this.depMatched[e] || (this.depMatched[e] = !0, --this.depCount, this.depExports[e] = t) }, fetch: function () { if (!this.fetched) { this.fetched = !0, f.startTime = (new Date).getTime(); var e = this.map; if (!this.shim) return e.prefix ? this.callPlugin() : this.load(); f.makeRequire(this.map, { enableBuildCallback: !0 })(this.shim.deps || [], bind(this, function () { return e.prefix ? this.callPlugin() : this.load() })) } }, load: function () { var e = this.map.url; n[e] || (n[e] = !0, f.load(this.map.id, e)) }, check: function () { if (this.enabled && !this.enabling) { var t, i, e = this.map.id, r = this.depExports, n = this.exports, o = this.factory; if (this.inited) { if (this.error) this.emit("error", this.error); else if (!this.defining) { if (this.defining = !0, this.depCount < 1 && !this.defined) { if (isFunction(o)) { if (this.events.error && this.map.isDefine || req.onError !== defaultOnError) try { n = f.execCb(e, o, r, n) } catch (e) { t = e } else n = f.execCb(e, o, r, n); if (this.map.isDefine && void 0 === n && ((r = this.module) ? n = r.exports : this.usingExports && (n = this.exports)), t) return t.requireMap = this.map, t.requireModules = this.map.isDefine ? [this.map.id] : null, t.requireType = this.map.isDefine ? "define" : "require", M(this.error = t) } else n = o; this.exports = n, this.map.isDefine && !this.ignore && (h[e] = n, req.onResourceLoad) && (i = [], each(this.depMaps, function (e) { i.push(e.normalizedMap || e) }), req.onResourceLoad(f, this.map, i)), j(e), this.defined = !0 } this.defining = !1, this.defined && !this.defineEmitted && (this.defineEmitted = !0, this.emit("defined", this.exports), this.defineEmitComplete = !0) } } else hasProp(f.defQueueMap, e) || this.fetch() } }, callPlugin: function () { var s = this.map, u = s.id, e = y(s.prefix); this.depMaps.push(e), k(e, "defined", bind(this, function (e) { var o, t, i = getOwn(m, this.map.id), r = this.map.name, n = this.map.parentMap ? this.map.parentMap.name : null, a = f.makeRequire(s.parentMap, { enableBuildCallback: !0 }); this.map.unnormalized ? (e.normalize && (r = e.normalize(r, function (e) { return v(e, n, !0) }) || ""), k(t = y(s.prefix + "!" + r, this.map.parentMap, !0), "defined", bind(this, function (e) { this.map.normalizedMap = t, this.init([], function () { return e }, null, { enabled: !0, ignore: !0 }) })), (r = getOwn(d, t.id)) && (this.depMaps.push(t), this.events.error && r.on("error", bind(this, function (e) { this.emit("error", e) })), r.enable())) : i ? (this.map.url = f.nameToUrl(i), this.load()) : ((o = bind(this, function (e) { this.init([], function () { return e }, null, { enabled: !0 }) })).error = bind(this, function (e) { this.inited = !0, (this.error = e).requireModules = [u], eachProp(d, function (e) { 0 === e.map.id.indexOf(u + "_unnormalized") && j(e.map.id) }), M(e) }), o.fromText = bind(this, function (e, t) { var i = s.name, r = y(i), n = useInteractive; t && (e = t), n && (useInteractive = !1), S(r), hasProp(b.config, u) && (b.config[i] = b.config[u]); try { req.exec(e) } catch (e) { return M(makeError("fromtexteval", "fromText eval for " + u + " failed: " + e, e, [u])) } n && (useInteractive = !0), this.depMaps.push(r), f.completeLoad(i), a([i], o) }), e.load(s.name, a, o, b)) })), f.enable(e, this), this.pluginMaps[e.id] = e }, enable: function () { (p[this.map.id] = this).enabled = !0, this.enabling = !0, each(this.depMaps, bind(this, function (e, t) { var i, r; if ("string" == typeof e) { if (e = y(e, this.map.isDefine ? this.map : this.map.parentMap, !1, !this.skipMap), this.depMaps[t] = e, r = getOwn(c, e.id)) return void (this.depExports[t] = r(this)); this.depCount += 1, k(e, "defined", bind(this, function (e) { this.undefed || (this.defineDep(t, e), this.check()) })), this.errback ? k(e, "error", bind(this, this.errback)) : this.events.error && k(e, "error", bind(this, function (e) { this.emit("error", e) })) } r = e.id, i = d[r], hasProp(c, r) || !i || i.enabled || f.enable(e, this) })), eachProp(this.pluginMaps, bind(this, function (e) { var t = getOwn(d, e.id); t && !t.enabled && f.enable(e, this) })), this.enabling = !1, this.check() }, on: function (e, t) { (this.events[e] || (this.events[e] = [])).push(t) }, emit: function (e, t) { each(this.events[e], function (e) { e(t) }), "error" === e && delete this.events[e] } }, (f = { config: b, contextName: u, registry: d, defined: h, urlFetched: n, defQueue: l, defQueueMap: {}, Module: e, makeModuleMap: y, nextTick: req.nextTick, onError: M, configure: function (e) { e.baseUrl && "/" !== e.baseUrl.charAt(e.baseUrl.length - 1) && (e.baseUrl += "/"), "string" == typeof e.urlArgs && (i = e.urlArgs, e.urlArgs = function (e, t) { return (-1 === t.indexOf("?") ? "?" : "&") + i }); var i, r = b.shim, n = { paths: !0, bundles: !0, config: !0, map: !0 }; eachProp(e, function (e, t) { n[t] ? (b[t] || (b[t] = {}), mixin(b[t], e, !0, !0)) : b[t] = e }), e.bundles && eachProp(e.bundles, function (e, t) { each(e, function (e) { e !== t && (m[e] = t) }) }), e.shim && (eachProp(e.shim, function (e, t) { !(e = isArray(e) ? { deps: e } : e).exports && !e.init || e.exportsFn || (e.exportsFn = f.makeShimExports(e)), r[t] = e }), b.shim = r), e.packages && each(e.packages, function (e) { var t = (e = "string" == typeof e ? { name: e } : e).name; e.location && (b.paths[t] = e.location), b.pkgs[t] = e.name + "/" + (e.main || "main").replace(currDirRegExp, "").replace(jsSuffixRegExp, "") }), eachProp(d, function (e, t) { e.inited || e.map.unnormalized || (e.map = y(t, null, !0)) }), (e.deps || e.callback) && f.require(e.deps || [], e.callback) }, makeShimExports: function (t) { return function () { var e; return (e = t.init ? t.init.apply(global, arguments) : e) || t.exports && getGlobal(t.exports) } }, makeRequire: function (o, a) { function s(e, t, i) { var r, n; return a.enableBuildCallback && t && isFunction(t) && (t.__requireJsBuild = !0), "string" == typeof e ? isFunction(t) ? M(makeError("requireargs", "Invalid require call"), i) : o && hasProp(c, e) ? c[e](d[o.id]) : req.get ? req.get(f, e, o, s) : (r = y(e, o, !1, !0).id, hasProp(h, r) ? h[r] : M(makeError("notloaded", 'Module name "' + r + '" has not been loaded yet for context: ' + u + (o ? "" : ". Use require([])")))) : (R(), f.nextTick(function () { R(), (n = S(y(null, o))).skipMap = a.skipMap, n.init(e, t, i, { enabled: !0 }), P() }), s) } return a = a || {}, mixin(s, { isBrowser: isBrowser, toUrl: function (e) { var t, i = e.lastIndexOf("."), r = e.split("/")[0]; return -1 !== i && (!("." === r || ".." === r) || 1 < i) && (t = e.substring(i, e.length), e = e.substring(0, i)), f.nameToUrl(v(e, o && o.id, !0), t, !0) }, defined: function (e) { return hasProp(h, y(e, o, !1, !0).id) }, specified: function (e) { return e = y(e, o, !1, !0).id, hasProp(h, e) || hasProp(d, e) } }), o || (s.undef = function (i) { O(); var e = y(i, o, !0), t = getOwn(d, i); t.undefed = !0, q(i), delete h[i], delete n[e.url], delete r[i], eachReverse(l, function (e, t) { e[0] === i && l.splice(t, 1) }), delete f.defQueueMap[i], t && (t.events.defined && (r[i] = t.events), j(i)) }), s }, enable: function (e) { getOwn(d, e.id) && S(e).enable() }, completeLoad: function (e) { var t, i, r, n = getOwn(b.shim, e) || {}, o = n.exports; for (O(); l.length;) { if (null === (i = l.shift())[0]) { if (i[0] = e, t) break; t = !0 } else i[0] === e && (t = !0); a(i) } if (f.defQueueMap = {}, r = getOwn(d, e), !t && !hasProp(h, e) && r && !r.inited) { if (!(!b.enforceDefine || o && getGlobal(o))) return E(e) ? void 0 : M(makeError("nodefine", "No define call for " + e, null, [e])); a([e, n.deps || [], n.exportsFn]) } P() }, nameToUrl: function (e, t, i) { var r, n, o, a, s, u = getOwn(b.pkgs, e); if (u = getOwn(m, e = u ? u : e)) return f.nameToUrl(u, t, i); if (req.jsExtRegExp.test(e)) a = e + (t || ""); else { for (r = b.paths, o = (n = e.split("/")).length; 0 < o; --o)if (s = getOwn(r, n.slice(0, o).join("/"))) { isArray(s) && (s = s[0]), n.splice(0, o, s); break } a = n.join("/"), a = ("/" === (a += t || (/^data\:|^blob\:|\?/.test(a) || i ? "" : ".js")).charAt(0) || a.match(/^[\w\+\.\-]+:/) ? "" : b.baseUrl) + a } return b.urlArgs && !/^blob\:/.test(a) ? a + b.urlArgs(e, a) : a }, load: function (e, t) { req.load(f, e, t) }, execCb: function (e, t, i, r) { return t.apply(r, i) }, onScriptLoad: function (e) { "load" !== e.type && !readyRegExp.test((e.currentTarget || e.srcElement).readyState) || (interactiveScript = null, e = s(e), f.completeLoad(e.id)) }, onScriptError: function (e) { var i, r = s(e); if (!E(r.id)) return i = [], eachProp(d, function (e, t) { 0 !== t.indexOf("_@r") && each(e.depMaps, function (e) { if (e.id === r.id) return i.push(t), !0 }) }), M(makeError("scripterror", 'Script error for "' + r.id + (i.length ? '", needed by: ' + i.join(", ") : '"'), e, [r.id])) } }).require = f.makeRequire(), f } function getInteractiveScript() { return interactiveScript && "interactive" === interactiveScript.readyState || eachReverse(scripts(), function (e) { if ("interactive" === e.readyState) return interactiveScript = e }), interactiveScript } }(this, "undefined" == typeof setTimeout ? void 0 : setTimeout);

tgp_ui/static/js/sidebarManager.js

@@ -0,0 +1,32 @@
+define([], function () {
+    const SidebarManager = {
+        sidebar: document.querySelector("#sidebar"),
+
+        toggleSidebar: function () {
+            this.sidebar.classList.toggle("expand");
+        },
+
+        checkSidebarVisibility: function () {
+            const isCurrentlyVisible = window.innerWidth >= 1080;
+            this.sidebar.classList.toggle("expand", isCurrentlyVisible);
+        },
+
+        init: function () {
+            // Toggle Sidebar on Button Click
+            document.querySelector(".toggle-btn").addEventListener("click", () => {
+                this.toggleSidebar();
+            });
+
+            // Check Sidebar Visibility on Resize
+            window.addEventListener("resize", () => {
+                this.checkSidebarVisibility();
+            });
+
+            // Initial Sidebar Visibility Check
+            this.checkSidebarVisibility();
+
+        }
+    };
+
+    return SidebarManager;
+});

tgp_ui/static/js/tabManager.js

@@ -0,0 +1,79 @@
+define([], function () {
+    const TabManager = {
+        loadTab: function () {
+            const self = $(this);
+            const tab = $(self.data('bs-target'));
+            if (!tab.hasClass('loaded')) {
+                tab.load('/tabs/container')
+                tab.load(self.data('url'), function () {
+                    tab.addClass('loaded');
+                });
+            }
+        },
+
+        formSubmit: function (event) {
+            event.preventDefault();
+            const form = $(this);
+            const formData = new FormData(this);
+
+            const submitButton = form.find('button[type="submit"]');
+            submitButton.prop('disabled', true);
+            const originalButtonText = submitButton.html();
+            submitButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
+            $.ajax({
+                url: form.attr('action'),
+                type: form.attr("method") || 'POST',
+                data: formData,
+                processData: false,  // Important for file upload
+                contentType: false,  // Important for file upload
+                success: function (response) {
+                    const next_target_id = form.data('next-target');
+                    const reload_subtab_id = form.data('reload-subtab');
+                    if (next_target_id) {
+                        $(form.closest('.tab-pane')).html(response);
+                        const nextTarget = $(next_target_id);
+                        const nextTargetButton = $('[data-bs-target="' + next_target_id + '"]')
+                        nextTarget.removeClass('loaded');
+                        nextTargetButton.trigger('click');
+
+                    } else if (reload_subtab_id) {
+                        const response_html = $(response);
+                        const filteredContent = response_html.find(reload_subtab_id);
+                        $(reload_subtab_id).html(filteredContent.html());
+                    }
+                    else {
+                        $(form.closest('.tab-pane')).html(response);
+                    }
+                },
+                complete: function () {
+                    submitButton.prop('disabled', false);
+                    submitButton.html(originalButtonText);
+                }
+            });
+        },
+
+        loadNextTab: function (e) {
+            e.preventDefault();
+            const self = $(this);
+            const nextTargetId = self.data('next-target');
+            const additionalButtonId = self.data('additional-button');
+            const nextTarget = $(nextTargetId);
+            const nextTargetButton = $(`[data-bs-target="${nextTargetId}"]`);
+
+            nextTarget.removeClass('loaded');
+            nextTargetButton.trigger('click');
+            if (additionalButtonId) {
+                const additionalButton = $(additionalButtonId);
+                additionalButton.trigger('click');
+            }
+        },
+
+        init: function () {
+            $(document).on('show.bs.tab', 'div[data-bs-toggle="tab"].btn-sm', this.loadTab);
+            $(document).on('click', 'button.btn-next', this.loadNextTab);
+            $(document).on('submit', '.tab-area form.js-tab-submit', this.formSubmit);
+        }
+    };
+
+    return TabManager;
+});

tgp_ui/templates/layout.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/simpleXML.css') }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/navbar.css') }}" />
 </head>
 
 <body>
@@ -27,14 +28,14 @@
             </div>
             <ul class="sidebar-nav">
                 <li class="sidebar-item">
-                    <a href={{ url_for("projects") }} class="sidebar-link" title="Projects">
+                    <a href="{{ url_for('views.overview') }}" class="sidebar-link" title="Projects">
                         <i class="bi bi-view-list"></i>
                         <span>Overview</span>
                     </a>
                 </li>
                 {% for project in get_projects() %}
-                <li class="sidebar-item">
-                    <a href="{{ url_for('project', projectname=project.name) }}" class="sidebar-link"
+                <li class="sidebar-item project-btn">
+                    <a href="{{ url_for('views.project_view', projectname=project.name) }}" class="sidebar-link"
                         data-bs-target="#project_{{ loop.index }}" aria-expanded="false"
                         aria-controls="project_{{ loop.index }}">
                         {% if current_project == project.name %}
@@ -42,59 +43,19 @@
                         {% else %}
                         <i class="bi bi-circle"></i>
                         {% endif %}
-                        <span>{{ project.name }}</span>
+                        <span class="projectname">{{ project.name }}</span>
                     </a>
-                    <ul id="project_{{ loop.index }}"
-                        class="sidebar-dropdown nav list-unstyled ps-3 {{ 'collapse' if current_project != project.name }}"
-                        data-bs-parent="#sidebar">
-                        <li class="sidebar-item">
-                            <a class="sidebar-link nav-link" data-bs-toggle="tab" href="#tab_storage" role="tab"
-                                aria-controls="tab_storage" aria-selected="false">
-                                <i class="bi bi-folder2-open"></i>
-                                Storage
-                            </a>
-                        </li>
-                        {% for c in project.collections %}
-                        {% set collection_config = project.collections[c]['config'] %}
-                        <li class="sidebar-item">
-                            <a class="sidebar-link nav-link collection-tab" data-bs-toggle="tab" href="#tab_{{ c }}"
-                                role="tab" aria-controls="tab_{{ c }} aria-selected=" false"
-                                data-url="{{ url_for('collection', projectname=project.name, name=c) }}"
-                                data-name="{{ c }}">
-                                <i class="spinner-border spinner-border-sm" role="status" style="display:none;"></i>
-                                <i class="bi bi-{{ loop.index }}-circle"></i>
-                                {{collection_config.short_title}}
-                            </a>
-                        </li>
-                        {% endfor %}
-                        <li class="sidebar-item">
-                            <a class="sidebar-link nav-link publication-tab" data-bs-toggle="tab" href="#tab_publish"
-                                role="tab" aria-controls="tab_publish" data-projectname="{{ project.name }}"
-                                aria-selected="false">
-                                <i class="bi bi-cloud-upload"></i>
-                                Publish
-                            </a>
-                        </li>
-                    </ul>
+
                 </li>
                 {% endfor %}
+            </ul>
         </aside>
         <div class="main p-3">
-            <div class="text-center">
-                <h1>
-                    <span>
-                        {{ sub_title }}
-                    </span>
-                </h1>
-            </div>
             {% block content %}{% endblock content %}
+            {% include 'modal/empty_container.html' %}
         </div>
     </div>
-    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/simpleXML.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
-    </script>
+    <script data-main="/static/js/main" src="{{ url_for('static', filename='js/require.js') }}"></script>
 </body>
 
 </html>

tgp_ui/templates/macros.html

@@ -1,94 +1,101 @@
-{% macro form_field_with_xpath(label, field_key, elem, has_next=False) %}
+{% macro multi_input(_items, input_name) %}
+{% set items = _items or [None] %}
+{% for item in items %}
+<div class="input-group mb-2">
+    <input type="text" class="form-control" title="Name" name="{{input_name}}_name" placeholder="e.g.: Jane Doe"
+        value="{{ item.fullname or item.name }}" required>
+    <input type="url" class="form-control" title="URL" name="{{input_name}}_url" value="{{ item.url or '' }}"
+        placeholder="e.g.: https://orcid.org/0000-0001-2345-6789">
+    {% if loop.first %}
+    <button class="input-group-text add-multi-input">
+        <i class="bi bi-plus-circle-dotted"></i>
+    </button>
+    {% else %}
+    <button class="input-group-text remove-multi-input">
+        <i class="bi bi-dash-circle-dotted"></i>
+    </button>
+    {% endif %}
+</div>
+{% endif %}
+{% endfor %}
+{% endmacro %}
+
+{% macro form_field_with_xpath(type, label, field_key, elem, delete_button=False) %}
 <div class="mb-2 row">
-    <div class="col-12 {{'pb-2 border-top' if has_next }}">
-        <label class="form-label">{{label}}
-            <a href="#" class="badge text-dark remove-multi-field">
-                <span class="bi bi-trash"></span>
-            </a>
+    <div class="col-12 d-flex justify-content-between align-items-center">
+        <label class="form-label mb-0">
+            {{ label }}
         </label>
+        {% if delete_button %}
+        <a href="#" class="badge text-dark remove-multi-field-classification ms-3">
+            <span class="bi bi-trash"></span>
+        </a>
+        {% endif %}
+    </div>
+    <div class="col-12">
         <div class="input-group">
             <input type="text" class="form-control" data-key="{{ field_key }}" data-type="value" placeholder="Value"
-                value="{{ elem['value'] if elem and elem.get('value') }}">
+                value="{{ elem['value'] if elem and elem.get('value') }}" name="{{ type }}-{{ field_key }}-value">
             <input type="text" class="form-control" data-key="{{ field_key }}" data-type="xpath" placeholder="XPath"
-                value="{{ elem['xpath'] if elem and elem.get('xpath') }}">
+                value="{{ elem['xpath'] if elem and elem.get('xpath') }}" name="{{ type }}-{{ field_key }}-xpath">
         </div>
     </div>
 </div>
 {% endmacro %}
 
-{% macro multi_input(type, heading, elements, version=1) %}
-<div class="border-top mb-3 row">
-    <label class="col-sm-12 col-form-label">
-        <div class="d-flex justify-content-between align-items-center">
-            <b>{{ heading }}</b>
-            <a href="#" class="add-multi-input btn btn-md" title="Add {{ heading }}">
-                <span class="bi bi-plus-circle"></span>
-            </a>
-        </div>
-    </label>
-</div>
-{% for item in elements or [None] %}
-{% if version == 1 %}
-<div class="multi-input-xpath" data-name="{{ type }}">
-    {{ form_field_with_xpath('ID', 'id', item.get('id') if item) }}
-    {{ form_field_with_xpath('URL', 'url', item.get('url') if item) }}
-    {{ form_field_with_xpath('Value', 'value', item.get('value') if item, has_next=loop.nextitem) }}
-</div>
-{% elif version == 2 %}
-<div class="multi-input-fixed" data-name="{{ type }}">
-    <div class="mb-3 row {{'pb-2 border-bottom' if not loop.last }}">
-        <label class="col-lg-2 col-form-label">
-            Fullname
+{% macro classification_input(type, heading, elements) %}
+<div class="border-bottom mb-3 row">
+    <div class="d-flex justify-content-between align-items-center">
+        <label class="form-label text-center flex-grow-1 mb-0">
+            <i>{{ heading }}</i>
         </label>
-        <div class="col-lg-4">
-            <input type="text" class="form-control" data-key="fullname"
-                value="{{ item['fullname'] if item['fullname'] }}">
-        </div>
-        <label class="col-lg-1 col-form-label">URL</label>
-        <div class="col-lg-4 ">
-            <input type="text" class="form-control" data-key="url" value="{{ item['url'] if item['url'] }}">
-        </div>
-        <div class="col-lg-1 mt-lg-0 mt-2">
-            <a href="#" class="btn btn-md remove-multi-field">
-                <span class="bi bi-trash"></span>
-            </a>
-        </div>
+        <a href="#" class="add-multi-input-classifications btn btn-md ms-3" title="Add {{ heading }}">
+            <span class="bi bi-plus-circle"></span>
+        </a>
     </div>
 </div>
-{% endif %}
+{% for item in elements or [None] %}
+<div class="multi-input {{'mb-3 pb-3 border-bottom' if loop.nextitem }}" data-name="{{ type }}">
+    {{ form_field_with_xpath(type, 'ID', 'id', item.get('id') if item, delete_button=True) }}
+    {{ form_field_with_xpath(type, 'URL', 'url', item.get('url') if item) }}
+    {{ form_field_with_xpath(type, 'Value', 'value', item.get('value') if item) }}
+</div>
 {% endfor %}
 {% endmacro %}
 
-{% macro xpath_or_value_input(heading, input_name, item, collection_parser, is_subsection=True) %}
-<div class="mb-1 row gap-1 align-items-center xpath-or-value-input">
-    <label class="col-lg-2 col-form-label">
-        {% if is_subsection %}
-        {{ heading }}
-        {% else %}
-        <b>{{ heading }}</b>
-        {% endif %}
+
+{% macro xpath_or_value_input(heading, input_name, item, collection_parser, required=False) %}
+<div class="mb-3">
+    <label class="form-label">
+        <span>{{ heading }}</span>
+        {% if required %}<span class="text-danger">*</span>{% endif %}
     </label>
-    <div class="col-lg-5">
-        <div class="form-floating">
-            <input type="text" class="form-control" id="valueInput_{{ input_name }}" data-name="{{ input_name }}"
-                data-type="value" value="{{ item['value'] if item['value'] }}" placeholder="Value">
-            <label for="valueInput_{{ input_name }}">Value</label>
+    <div class="row g-2">
+        <!-- Value Input -->
+        <div class="col-lg-6">
+            <input type="text" class="form-control" id="valueInput_{{ input_name }}" name="{{ input_name }}_value"
+                value="{{ item['value'] if item['value'] }}" placeholder="Value">
         </div>
-    </div>
-    <div class="col-lg-4 position-relative">
-        <div class="form-floating">
-            <input type="text" class="form-control" id="xpathInput_{{ input_name }}" data-name="{{ input_name }}"
-                data-type="xpath" value="{{ item['xpath'] if item['xpath'] }}" placeholder="XPath">
-            <label for="xpathInput_{{ input_name }}">XPath</label>
+
+        <!-- XPath Input -->
+        <div class="col-lg-6 position-relative">
+            <input type="text" class="form-control" id="xpathInput_{{ input_name }}" name="{{ input_name }}_xpath"
+                value="{{ item['xpath'] if item['xpath'] }}" placeholder="XPath">
+            <a href="#" class="load-modal" title="Hitrate of xpath (in %) - CLICK to see results"
+                data-args_xpath="{{ item['xpath'] }}"
+                data-url="{{ url_for('collection.modal_xpath_parser', projectname=project.name, collectionname=collectionname) }}">
+                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success"
+                    data-bs-placement="top" title="Hitrate of XPath in percentage">
+                    {{ collection_parser.test_xpath(item['xpath'])['count']['percentage'] if item['xpath'] else '-' }}
+                </span>
+            </a>
         </div>
-        <a href="#" class="show-xpath-in-tei-explorer" title="Hitrate of xpath (in %) - CLICK to see results"
-            data-url="{{ url_for('xpath_parser_modal', projectname=project.name, title=collection_title) }}"
-            data-xpath="{{ item['xpath'] }}">
-            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success"
-                data-bs-toggle="tooltip" data-bs-placement="top" title="Hitrate of XPath in percentage">
-                {{ collection_parser.test_xpath(item['xpath'])['count']['percentage'] if item['xpath'] else '-' }}
-            </span>
-        </a>
     </div>
 </div>
+{% endmacro %}
+
+{% macro required_fields_disclaimer() %}
+<div class="mb-3 mt-3">
+    <small class="text-muted"><span class="text-danger">*</span> indicates required fields</small>
+</div>
 {% endmacro %}