diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html index ee44ec69d..3a0a87918 100644 --- a/lnbits/core/templates/core/wallet.html +++ b/lnbits/core/templates/core/wallet.html @@ -5,6 +5,7 @@ {% from "macros.jinja" import window_vars with context %} {% block scripts %} {{ window_vars(user, wallet) }} + {% endblock %} diff --git a/lnbits/static/js/init-app.js b/lnbits/static/js/init-app.js index a846f51e1..5bd553583 100644 --- a/lnbits/static/js/init-app.js +++ b/lnbits/static/js/init-app.js @@ -1,43 +1,83 @@ -window.router = VueRouter.createRouter({ - history: VueRouter.createWebHistory(), - routes: [ - { - path: '/wallet', - name: 'Wallet', - component: { - template: '
', - async mounted() { - try { - const response = await fetch('/wallet', { - credentials: 'include', - headers: { - 'Accept': 'text/html', - 'X-Requested-With': 'XMLHttpRequest' - } - }) - const html = await response.text() - this.$refs.content.innerHTML = html - this.$nextTick(() => { - if (this.$forceUpdate) { - this.$forceUpdate() - } - }) - } catch (error) { - console.error('Error loading wallet:', error) - } - } - } - } - ] - }) - - window.router.beforeEach((to, from, next) => { - console.log('Route changing from', from.path, 'to', to.path) - next() - }) +// Utility function to dynamically load a script +function loadScript(src) { + return new Promise((resolve, reject) => { + if (document.querySelector(`script[src="${src}"]`)) { + resolve(); // Already loaded + return; + } -window.app.use(VueQrcodeReader) -window.app.use(Quasar) -window.app.use(window.i18n) -window.app.use(window.router) -window.app.mount('#vue') + const script = document.createElement('script'); + script.src = src; + script.async = true; + script.onload = resolve; + script.onerror = () => reject(new Error(`Failed to load script: ${src}`)); + document.head.appendChild(script); + }); +} + +// Function to load content based on the route +function loadContent(route) { + const contentContainer = document.getElementById('content-container'); + const routes = { + '/wallet': '/wallet', + // '/admin': '/admin', + // Add other routes here + }; + + if (routes[route]) { + // Load the scripts first + loadScript('/static/js/base.js') + .then(() => loadScript('/static/js/components.js')) + .then(() => loadScript('/static/js/wallet.js')) + .then(() => { + // Now fetch the content after all scripts are loaded + return fetch(routes[route], { + credentials: 'include', + headers: { + 'Accept': 'text/html', + 'X-Requested-With': 'XMLHttpRequest', + }, + }); + }) + .then((response) => response.text()) + .then((html) => { + contentContainer.innerHTML = html; // Inject the HTML content + // After the content is injected, initialize Vue if necessary + + }) + .catch((error) => { + console.error('Error loading content or scripts:', error); + }); + } else { + console.error('Route not found'); + } +} + +// Event listener to detect route change +window.addEventListener('popstate', function () { + const currentRoute = window.location.pathname; + loadContent(currentRoute); // Load content for the current route +}); + +// Function to navigate to a new route and load content +function navigateTo(route) { + window.history.pushState({}, '', route); + loadContent(route); +} + +// Initial content load based on the current path +loadContent(window.location.pathname); + +// Listen for route changes and load corresponding content +function onRouteChange() { + const currentRoute = window.location.pathname; + loadContent(currentRoute); +} + +window.addEventListener('popstate', onRouteChange); + +console.log('Scripts loaded and content injected.'); +window.app.use(VueQrcodeReader); +window.app.use(Quasar); +window.app.use(window.i18n); +window.app.mount('#vue'); diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html index 4029c380e..3c0cd6589 100644 --- a/lnbits/templates/base.html +++ b/lnbits/templates/base.html @@ -179,7 +179,7 @@ :updateTrigger="updateTrigger" :balance="balance" > -