Taking accurate Components (Input/Button) focus on overlapping Elements

[EL-File4138]

Hi all,

I'm writing a mock ATM UI as a practice. Below is my intended design.

And the current code implementation I've done:

class ATMUI : public ComponentBase {
    Bank& bank;
    BankAccount& currentAccount;

    // State for inputs
    std::string deposit_amount;
    std::string withdraw_amount;
    std::string transaction_recipient;
    std::string transaction_amount;

    std::string information = "Please select an option from the left menu.";

    // Enum representing the different views in the ATM UI
    enum View { DEPOSIT, WITHDRAW, TRANSACTION, HISTORY, INFO } current_view = INFO;

    // FTXUI components
    Table history_table;
    Component left_menu_buttons;
    Component deposit_input = Input(&deposit_amount, "Deposit Amount");
    Component withdraw_input = Input(&withdraw_amount, "Withdraw Amount");
    Component recipient_input = Input(&transaction_recipient, "Recipient Acc#");
    Component amount_input = Input(&transaction_amount, "Amount");

    Component deposit_button = Button("Deposit", [&] {
        try {
            double dpamount = std::stod(deposit_amount);
            if (dpamount < 0) {
                throw std::out_of_range("Negative amount");
            }
            currentAccount.deposit(dpamount);
        }
        catch (const std::invalid_argument& e) {
            information = "Invalid input: " + std::string(e.what());
            current_view = INFO;
        }
        catch (const std::out_of_range& e) {
            information = "Exceeds valid value: " + std::string(e.what());
            current_view = INFO;
        }
        });

    Component withdraw_button = Button("Withdraw", [&] {
        try {
            double wdamount = std::stod(withdraw_amount);
            if (wdamount < 0) {
                throw std::out_of_range("Negative amount");
            }
            currentAccount.withdraw(wdamount);
        }
        catch (const std::invalid_argument& e) {
            information = "Invalid input: " + std::string(e.what());
            current_view = INFO;
        }
        catch (const std::out_of_range& e) {
            information = "Exceeds valid value: " + std::string(e.what());
            current_view = INFO;
        }
        });

    Component make_tx_button = Button("Make Transaction", [&] {
        try {
            int recipient_account = std::stoi(transaction_recipient);
            double txamount = std::stod(transaction_amount);
            if (txamount < 0) {
                throw std::out_of_range("Negative amount");
            }
            currentAccount.transaction(recipient_account, txamount);
        }
        catch (const std::invalid_argument& e) {
            information = "Invalid input: " + std::string(e.what());
            current_view = INFO;
        }
        catch (const std::out_of_range& e) {
            information = "Exceeds valid value: " + std::string(e.what());
            current_view = INFO;
        }
        catch (const std::runtime_error& e) {
            information = "Account not found: " + std::string(e.what());
            current_view = INFO;
        }
        });

    Component home_button = Button("Home", [&] {
        information = "Please select an option from the left menu.";
        current_view = INFO;
        });

    Table historyTableBuilder() {
        auto data = currentAccount.getTransactionHistory();
        std::vector<std::vector<std::string>> transcribedData = {
            {"ID", "Recipient", "Amount"}
        };
        for (const auto& tx : data) {
            transcribedData.push_back({
                std::to_string(std::get<0>(tx)),
                std::to_string(std::get<1>(tx)),
                std::to_string(std::get<2>(tx))
                });
        }

        Table table(transcribedData);
        table.SelectAll().Border(LIGHT);
        table.SelectRow(0).Decorate(bold);
        table.SelectRow(0).SeparatorVertical(LIGHT);
        table.SelectRow(0).Border(DOUBLE);

        return table;
    }

public:
    ATMUI(Bank& bank, int providedAccount) : bank(bank), currentAccount(bank.getAccount(providedAccount)) {
        left_menu_buttons = Container::Vertical({
            Button("Deposit", [&] { current_view = DEPOSIT; }),
            Button("Withdraw", [&] { current_view = WITHDRAW; }),
            Button("Make Transaction", [&] { current_view = TRANSACTION; }),
            Button("View History", [&] { current_view = HISTORY; }),
            Button("Home", [&] { information = "Please select an option from the left menu."; current_view = INFO; })
            });

        Add(left_menu_buttons);

        Component deposit_container = Container::Vertical({
            deposit_input,
            deposit_button,
            });
        Component withdraw_container = Container::Vertical({
            withdraw_input,
            withdraw_button,
            });
        Component transaction_container = Container::Vertical({
            recipient_input,
            amount_input,
            make_tx_button,
            });
        Component info_container = Container::Vertical({
            home_button,
            });

        Add(deposit_container);
        Add(withdraw_container);
        Add(transaction_container);
        Add(info_container);
    }

    Element Render() override {
        history_table = historyTableBuilder();

        auto left_menu = vbox({
            left_menu_buttons->Render()
            }) | border;

        std::vector<std::vector<std::string>> account_info_data = {
            {"AccNum", std::to_string(currentAccount.getAccountNumber())},
            {"Name", currentAccount.getName()},
            {"Balance", std::to_string(currentAccount.getBalance())}
        };

        auto account_info = Table(account_info_data).Render();

        Element content;
        switch (current_view) {
        case DEPOSIT:
            content = vbox({
                text("Deposit") | bold,
                separator(),
                hbox(text("Deposit:  "), deposit_input->Render()),
                deposit_button->Render(),
                }) | border;
            SetActiveChild(ChildAt(1));
            break;
        case WITHDRAW:
            content = vbox({
                text("Withdraw") | bold,
                separator(),
                hbox(text("Withdraw: "), withdraw_input->Render()),
                withdraw_button->Render(),
                }) | border;
            SetActiveChild(ChildAt(2));
            break;
        case TRANSACTION:
            content = vbox({
                text("Transaction") | bold,
                separator(),
                hbox(text("Recipient: "), recipient_input->Render()),
                hbox(text("Amount:    "), amount_input->Render()),
                make_tx_button->Render(),
                }) | border;
            SetActiveChild(ChildAt(3));
            break;
        case HISTORY:
            content = vbox({
                text("History") | bold,
                separator(),
                history_table.Render(),
                }) | border;
            break;
        case INFO:
            content = vbox({
                text("Information") | bold,
                separator(),
                text(information),
                home_button->Render(),
                }) | border;
            SetActiveChild(ChildAt(4));
            break;
        }

        return vbox({
            text("Automatic Teller Machine") | center | bold,
            separator(),
            hbox({
                left_menu,
                separator(),
                content,
                separator(),
                account_info,
            }) | flex,
            }) | center | border | flex;
    }
};

However, the middle column is not behaving properly as intended. All the Input components can't take focus on active pages, and the rendered elements seem to overlap invisibly: When I first switch to the Deposit/Withdraw page, then switch to the Transaction page, upon clicking on "Amount", It would just switch to the Info page and display an input error, like I've just clicked the Deposit/Withdraw button without respective input.

I know I'm probably not dealing with the distinction of components/elements right, but I really cannot bend my mind to comprehend the active/inactive/focus/defocus paradigm. Would be much grateful for any help.

[ArthurSonzogni]

Hello @EL-File4138,

I wasn't able to compile your example. At first sight, I believe I would put all the xxx_container into a Container::Tab to represent that only one of them is active and displayed at a time.

Would that work?

[EL-File4138]

I've tried:

    ATMUI(Bank& bank, int providedAccount) : bank(bank), currentAccount(bank.getAccount(providedAccount)) {
        Add(left_menu_buttons);

        Component deposit_container = Container::Vertical({
            deposit_input,
            deposit_button,
            });
        Component withdraw_container = Container::Vertical({
            withdraw_input,
            withdraw_button,
            });
        Component transaction_container = Container::Vertical({
            recipient_input,
            amount_input,
            make_tx_button,
            });
        Component info_container = Container::Vertical({
            home_button,
            });

        Component content_container = Container::Tab({
            deposit_container,
            withdraw_container,
            transaction_container,
            info_container
            }, &crview2);

        Add(content_container);
    } 

(Since history is a purely Element page, It cannot be put inside a container, so I made another selector to track)
But without luck.

I have to use Element to define page structure (like separator()), but the enable/disable is per component and "set on parent".
I'm not sure why the container isn't just a group that can be enabled/disabled, but binding layout logic and rendering on it.

All the code is available here, If you need to diagnose.