card page

resources/main/css/tgApp.css

@@ -0,0 +1,7 @@
+#cardBox {
+    text-align: center;
+}
+
+.card {
+    margin-bottom: 10px;
+}

resources/main/js/tg.js

@@ -1,9 +1,7 @@
-document.addEventListener("DOMContentLoaded", () => {
-    let tg = window.Telegram.WebAppUser;
-    let username_tag = document.getElementById("username_tag")
-    let user_id_tag = document.getElementById("user_id_tag")
-    username_tag.innerHTML = tg.initDataUnsafe.user.username;
-    user_id_tag.innerHTML = "tg.initDataUnsafe.user.id";
 
-    console.log(123)
+import {TgApp} from "./tg_app/TgApp.js";
+document.addEventListener("DOMContentLoaded", () => {
+    let tg = window.Telegram.WebApp;
+    let tgApp = new TgApp("tg_app", tg.initDataUnsafe.user.id);
+
 });

resources/main/js/tg_app/TgApp.js

@@ -0,0 +1,78 @@
+import config from "./config_local.js";
+
+class TgApp {
+    constructor(containerId, userId) {
+        this.container = document.getElementById(containerId);
+        this.createCardBox();
+        this.createDefaultBox();
+        this.userId = userId;
+        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}
+            })
+    }
+
+}
+
+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">
+                            <h6 class="card-title">Баланс: ${balance}</h6>
+                        </div>
+                    </div>`;
+        }
+    }
+
+export {TgApp}
+

resources/main/js/tg_app/config.js

@@ -0,0 +1,6 @@
+const config = {
+    botId: 6911686987,
+    apiUrl: 'https://6b7b-185-5-38-195.ngrok-free.app/',
+}
+
+export default {config}