mirror of
https://github.com/lnbits/lnbits.git
synced 2025-03-17 13:21:48 +01:00
another approach
This commit is contained in:
parent
9755efbb42
commit
733baacc7b
@ -5,6 +5,7 @@
|
||||
{% from "macros.jinja" import window_vars with context %}
|
||||
<!---->
|
||||
{% block scripts %} {{ window_vars(user, wallet) }}
|
||||
<script src="{{ static_url_for('static', 'js/base.js') }}"></script>
|
||||
<script src="{{ static_url_for('static', 'js/wallet.js') }}"></script>
|
||||
{% endblock %}
|
||||
<!---->
|
||||
|
@ -1,43 +1,83 @@
|
||||
window.router = VueRouter.createRouter({
|
||||
history: VueRouter.createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/wallet',
|
||||
name: 'Wallet',
|
||||
component: {
|
||||
template: '<div ref="content"></div>',
|
||||
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');
|
||||
|
@ -179,7 +179,7 @@
|
||||
:updateTrigger="updateTrigger"
|
||||
:balance="balance"
|
||||
></lnbits-wallet-list>
|
||||
<q-btn to="/wallet">test</q-btn>
|
||||
<q-btn onclick="navigateTo('/wallet')">Go to Wallet</q-btn>
|
||||
<lnbits-manage
|
||||
:show-admin="'{{LNBITS_ADMIN_UI}}' == 'True'"
|
||||
:show-users="'{{LNBITS_ADMIN_UI}}' == 'True'"
|
||||
@ -193,7 +193,8 @@
|
||||
<q-page-container>
|
||||
|
||||
<q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
|
||||
<router-view></router-view>{% block page %}{% endblock %}
|
||||
{% block page %}{% endblock %}
|
||||
<div id="content-container"></div>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
{% endblock %} {% block footer %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user