130 lines
4.2 KiB
JavaScript
130 lines
4.2 KiB
JavaScript
import config from "./config_local.js";
|
|
|
|
class TgApp {
|
|
constructor(containerId, userId) {
|
|
this.container = document.getElementById(containerId);
|
|
this.userId = userId;
|
|
this.btnBox = this.createBox("btnBox");
|
|
this.container.appendChild(this.btnBox);
|
|
}
|
|
|
|
actionMain() {
|
|
this.createCardBox();
|
|
|
|
// this.createDefaultBox();
|
|
this.getScanBtn();
|
|
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) => {
|
|
console.log(data)
|
|
this.cardBox.innerHTML = templates.cardBox(data.card_file.file, data.balance)
|
|
// {title: "foo", body: "bar", userId: 1, id: 101}
|
|
})
|
|
}
|
|
|
|
getScanBtn() {
|
|
fetch(config.config.apiUrl + `api/tg-bot/get-scan-btn/${this.userId}`, {
|
|
method: 'GET', // Здесь так же могут быть GET, PUT, DELETE
|
|
headers: {
|
|
// Добавляем необходимые заголовки
|
|
'Content-type': 'text/html; charset=UTF-8',
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
this.btnBox.innerHTML = data.html
|
|
// {title: "foo", body: "bar", userId: 1, id: 101}
|
|
})
|
|
}
|
|
|
|
createBox(id) {
|
|
let box = document.createElement("div");
|
|
box.setAttribute("id", id);
|
|
|
|
return box;
|
|
}
|
|
|
|
// createScanner() {
|
|
// let html5QrcodeScanner = new Html5QrcodeScanner(
|
|
// "scanner_box",
|
|
// {fps: 10, qrbox: {width: 250, height: 250}},
|
|
// /* verbose= */ false);
|
|
// html5QrcodeScanner.render(this.onScanSuccess);
|
|
// }
|
|
|
|
onScanSuccess(decodedText, decodedResult) {
|
|
console.log(`Code matched = ${decodedText}`, decodedResult);
|
|
}
|
|
|
|
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}
|
|
|