la_bot_back/resources/main/js/tg_app/TgApp.js

import config from "./config_local.js";

class TgApp {
    constructor(containerId, userId) {
        this.container = document.getElementById(containerId);
        this.userId = userId;
    }

    actionMain(){
        console.log("main 123")
        this.createCardBox();
        // this.createDefaultBox();
        this.getCard();
    }

    setUserId(userId) {
        this.userId = userId;
    }

    createCardBox() {
        this.cardBox = document.createElement("div");
        this.cardBox.setAttribute("id", "cardBox");

        this.cardBox.innerHTML = templates.preloader();

        this.container.appendChild(this.cardBox);
    }

    createDefaultBox() {
        this.defaultBox = document.createElement("div");
        this.defaultBox.setAttribute("id", "defaultBox");

        this.defaultBox.innerHTML = templates.defaultBox();

        this.container.appendChild(this.defaultBox);
    }

    getCard() {
        let botId = config.config.botId;
        fetch(config.config.apiUrl + `api/tg-bot/get-card-by-dialog/${this.userId}/${botId}`, {
            method: 'GET', // Здесь так же могут быть GET, PUT, DELETE
            headers: {
                // Добавляем необходимые заголовки
                'Content-type': 'application/json; charset=UTF-8',
            },
        })
            .then((response) => response.json())
            .then((data) => {
                this.cardBox.innerHTML = templates.cardBox(data.card_file.file, data.balance)
                // {title: "foo", body: "bar", userId: 1, id: 101}
            })
    }

    getAction(action){
        if (action === "actionMain"){
            return this.actionMain;
        }

        return false;
    }


}

const templates =
    {
        preloader: () => {
            return '<img src="/resources/main/images/l.gif">';
        },
        defaultBox: () => {
            return `<div class="card">
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp" class="card-img-top" alt="Fissure in Sandstone"/>
                        <div class="card-body">
                            <h5 class="card-title">Акция на Старый Новый Год</h5>
                            <p class="card-text">Акция на Старый Новый Год Акция на Старый Новый Год Акция на Старый Новый Год Акция на Старый Новый Год</p>
                            <a href="#!" data-mdb-ripple-init class="btn btn-primary">Принять участие</a>
                        </div>
                    </div>`;
        },
        cardBox: (cardUrl, balance) => {
            return `<div class="card" style="padding: 10px;">
                        <img src="${cardUrl}" class="card-img-top"/>
                        <div class="card-body">
                            <h4 class="card-title">Баланс: ${balance}</h4>
                        </div>
                    </div>`;
        }
    }

export {TgApp}