semi-automatic-ui-process-list/aktionsKonsole.js

/**
 * Der Bereich in dem der aktuell geladene/bearbeitete Eintrag angezeigt wird. 
 * @returns {Component}
 */
function valueRow() {
    return builder.row()
        .addStyleClass("current-entry-area")
        .modifier(
            new Modifier()
                .fillMaxWidth()
                .background(Colors.gold_1)
                .clip(Shapes.RoundedCorner.all(6))
                .padding(6)
        )
}

/**
 * 
 * @param {HTMLElement} entryElement 
 * @param {HTMLElement} to das Elternelement in welches das Eintragselement verschoben werden soll
 * @returns {HTMLElement}
 */
function moveEntry(entryElement, to) {
    entryElement.remove();
    [...entryElement.querySelectorAll('.material-icons')]
        .forEach(e => {
            e.setAttribute("hidden", "hidden");
            e.setAttribute("visibility", "hidden");
            e.style.visibility = "hidden";
        });

    to.insertAdjacentElement(
        "afterbegin",
        entryElement
    );
    return entryElement;
}

function moveCurrent(reverse = false) {
    let currentArea = document.querySelector('div.current-entry-area');
    if (currentArea.children.length === 0) {
        return
    }

    let current = currentArea.children[0];
    return moveEntry(
        current,
        document.querySelector('div.plist' + (reverse
            ? '-upcoming'
            : '-done'
        ))
    );
}

function loadNext() {
    moveCurrent();
    let upcomingArea = document.querySelector('div.plist-upcoming');
    if (upcomingArea.children.length === 0) {
        return
    }
    let upcoming = upcomingArea.children[0];

    upcoming = moveEntry(
        upcoming,
        document.querySelector('div.current-entry-area')
    );

    [...upcoming.querySelectorAll('.material-icons')]
        .forEach(e => {
            e.removeAttribute("hidden");
            e.removeAttribute("visibility");
            e.style.visibility = "";
        });
}

function loadPrev() {
    moveCurrent(true);
    let prevArea = document.querySelector('div.plist-done');
    if (prevArea.children.length === 0) {
        return
    }
    let prev = prevArea.children[0];

    prev = moveEntry(
        prev,
        document.querySelector('div.current-entry-area')
    );

    [...prev.querySelectorAll('.material-icons')]
        .forEach(e => {
            e.removeAttribute("hidden");
            e.removeAttribute("visibility");
            e.style.visibility = "";
        });
}

function aktionsKonsole(modifier = new Modifier()) {
    return builder.column()
        .modifier(componentModifiers.majorArea)
        .modifier(
            new Modifier()
                .fillMaxWidth()
                .background(colorModifiers.active.secondary)
                .padding(32)
        )
        .modifier(modifier)
        .addStyleClass("area")
        .addStyleClass("area-aktiv")
        .childContext([
            builder.div()
                .modifier(
                    new Modifier()
                        .fillMaxSize()
                        .margin().bottom(6)
                )
                .alignment(Alignment.SPACE_EVENLY)
                .arrangement(Arrangement.SPACE_EVENLY)
                .childContext([
                    builder.button().text("NEXT")
                        .addEventListener(
                            "click",
                            loadNext
                        )
                    ,
                    builder.button().text("PREV")
                        .addEventListener(
                            "click",
                            loadPrev
                        )
                ])
            ,
            valueRow()
        ])
}