cards

resources/main/js/tg.js

@@ -1,7 +1,18 @@
 
 import {TgApp} from "./tg_app/TgApp.js";
+import Router from "./tg_app/Router.js";
 document.addEventListener("DOMContentLoaded", () => {
     let tg = window.Telegram.WebApp;
     let tgApp = new TgApp("tg_app", tg.initDataUnsafe.user.id);
 
+    const router = new Router({
+        mode: 'hash',
+        root: '/miniapp'
+    });
+
+    router
+        .add('', () => {
+            tgApp.actionMain();
+        });
+
 });

resources/main/js/tg_app/Router.js

@@ -0,0 +1,84 @@
+class Router {
+    routes = [];
+
+    mode = null;
+
+    root = '/';
+
+    constructor(options) {
+        this.mode = window.history.pushState ? 'history' : 'hash';
+        if (options.mode) this.mode = options.mode;
+        if (options.root) this.root = options.root;
+        this.listen();
+    }
+
+    add = (path, cb) => {
+        this.routes.push({ path, cb });
+        return this;
+    };
+
+    remove = path => {
+        for (let i = 0; i < this.routes.length; i += 1) {
+            if (this.routes[i].path === path) {
+                this.routes.slice(i, 1);
+                return this;
+            }
+        }
+        return this;
+    };
+
+    flush = () => {
+        this.routes = [];
+        return this;
+    };
+
+    clearSlashes = path =>
+        path
+            .toString()
+            .replace(/\/$/, '')
+            .replace(/^\//, '');
+
+    getFragment = () => {
+        let fragment = '';
+        if (this.mode === 'history') {
+            fragment = this.clearSlashes(decodeURI(window.location.pathname + window.location.search));
+            fragment = fragment.replace(/\?(.*)$/, '');
+            fragment = this.root !== '/' ? fragment.replace(this.root, '') : fragment;
+        } else {
+            const match = window.location.href.match(/#(.*)$/);
+            fragment = match ? match[1] : '';
+        }
+        return this.clearSlashes(fragment);
+    };
+
+    navigate = (path = '') => {
+        if (this.mode === 'history') {
+            window.history.pushState(null, null, this.root + this.clearSlashes(path));
+        } else {
+            window.location.href = `${window.location.href.replace(/#(.*)$/, '')}#${path}`;
+        }
+        return this;
+    };
+
+    listen = () => {
+        clearInterval(this.interval);
+        this.interval = setInterval(this.interval, 50);
+    };
+
+    interval = () => {
+        if (this.current === this.getFragment()) return;
+        this.current = this.getFragment();
+
+        this.routes.some(route => {
+            const match = this.current.match(route.path);
+            if (match) {
+                match.shift();
+                route.cb.apply({}, match);
+                return match;
+            }
+            return false;
+        });
+    };
+}
+
+export default Router;

resources/main/js/tg_app/TgApp.js

@@ -3,13 +3,17 @@ 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.userId = userId;
         this.getCard();
     }
 
-    setUserId(userId){
+    setUserId(userId) {
         this.userId = userId;
     }
 
@@ -31,7 +35,7 @@ class TgApp {
         this.container.appendChild(this.defaultBox);
     }
 
-    getCard(){
+    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
@@ -47,6 +51,15 @@ class TgApp {
             })
     }
 
+    getAction(action){
+        if (action === "actionMain"){
+            return this.actionMain;
+        }
+
+        return false;
+    }
+
+
 }
 
 const templates =
@@ -68,7 +81,7 @@ const templates =
             return `<div class="card" style="padding: 10px;">
                         <img src="${cardUrl}" class="card-img-top"/>
                         <div class="card-body">
-                            <h6 class="card-title">Баланс: ${balance}</h6>
+                            <h4 class="card-title">Баланс: ${balance}</h4>
                         </div>
                     </div>`;
         }