version numbering and loading improved
This commit is contained in:
parent
9c816cb23b
commit
db3b1f74d2
66
index.html
66
index.html
@ -20,22 +20,48 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<!-- Load JavaScript modules -->
|
<!-- Load JavaScript modules with cache busting -->
|
||||||
<script src="js/services/api.js"></script>
|
<script>
|
||||||
<script src="js/services/bogo.js"></script>
|
// Change this version number to bust cache for all JS files
|
||||||
<script src="js/components/cart.js"></script>
|
const APP_VERSION = '1.1';
|
||||||
<script src="js/components/products.js"></script>
|
|
||||||
<script src="js/components/forms.js"></script>
|
const scripts = [
|
||||||
<script src="js/app.js"></script>
|
'js/services/api.js',
|
||||||
|
'js/services/bogo.js',
|
||||||
|
'js/components/cart.js',
|
||||||
|
'js/components/products.js',
|
||||||
|
'js/components/forms.js',
|
||||||
|
'js/app.js'
|
||||||
|
];
|
||||||
|
|
||||||
|
scripts.forEach(src => {
|
||||||
|
document.write(`<script src="${src}?v=${APP_VERSION}"><\/script>`);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-slate-100 min-h-screen font-sans" x-data="salesApp()">
|
<body class="bg-slate-100 min-h-screen font-sans" x-data="salesApp()">
|
||||||
<template x-if="isLoading">
|
<template x-if="isLoading">
|
||||||
<div class="fixed inset-0 bg-slate-900 flex items-center justify-center z-[60]">
|
<div class="fixed inset-0 bg-slate-900 flex items-center justify-center z-[60]">
|
||||||
<div class="text-white font-black animate-pulse">LAAD SESSIE...</div>
|
<div class="text-center">
|
||||||
|
<div class="relative mb-6 mx-auto w-20 h-20">
|
||||||
|
<!-- Outer spinning ring -->
|
||||||
|
<div class="w-20 h-20 border-4 border-blue-500/30 rounded-full"></div>
|
||||||
|
<!-- Inner spinning ring -->
|
||||||
|
<div class="absolute top-0 left-0 w-20 h-20 border-4 border-transparent border-t-blue-500 rounded-full animate-spin"></div>
|
||||||
|
<!-- Session icon in center -->
|
||||||
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-white font-black text-lg uppercase tracking-wider mb-2">Sessie Laden</h3>
|
||||||
|
<p class="text-blue-400 text-sm font-medium animate-pulse">Even geduld...</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="!isLoggedIn && !isLoading">
|
<template x-if="!isLoggedIn && !isLoading && !isLoadingProducts">
|
||||||
<div class="fixed inset-0 bg-slate-900 flex items-center justify-center p-4 z-50">
|
<div class="fixed inset-0 bg-slate-900 flex items-center justify-center p-4 z-50">
|
||||||
<div
|
<div
|
||||||
class="bg-white p-10 rounded-[2.5rem] shadow-2xl w-full max-w-md text-center border-t-8 border-blue-600">
|
class="bg-white p-10 rounded-[2.5rem] shadow-2xl w-full max-w-md text-center border-t-8 border-blue-600">
|
||||||
@ -54,6 +80,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<!-- Loading Products Overlay -->
|
||||||
|
<template x-if="isLoadingProducts">
|
||||||
|
<div class="fixed inset-0 bg-slate-900 flex items-center justify-center z-[55]">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="relative mb-6 mx-auto w-20 h-20">
|
||||||
|
<!-- Outer spinning ring -->
|
||||||
|
<div class="w-20 h-20 border-4 border-blue-500/30 rounded-full"></div>
|
||||||
|
<!-- Inner spinning ring -->
|
||||||
|
<div class="absolute top-0 left-0 w-20 h-20 border-4 border-transparent border-t-blue-500 rounded-full animate-spin"></div>
|
||||||
|
<!-- Product icon in center -->
|
||||||
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-white font-black text-lg uppercase tracking-wider mb-2">Producten Laden</h3>
|
||||||
|
<p class="text-blue-400 text-sm font-medium animate-pulse" x-text="loadingMessage || 'Even geduld...'"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<div x-show="isLoggedIn && !isLoading" x-cloak class="max-w-[1440px] mx-auto p-6">
|
<div x-show="isLoggedIn && !isLoading" x-cloak class="max-w-[1440px] mx-auto p-6">
|
||||||
<header
|
<header
|
||||||
class="flex justify-between items-center mb-8 bg-white p-6 rounded-3xl shadow-sm border-b-4 border-blue-600">
|
class="flex justify-between items-center mb-8 bg-white p-6 rounded-3xl shadow-sm border-b-4 border-blue-600">
|
||||||
|
|||||||
@ -9,6 +9,8 @@ function salesApp() {
|
|||||||
// Authentication state
|
// Authentication state
|
||||||
isLoggedIn: false,
|
isLoggedIn: false,
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
|
isLoadingProducts: false,
|
||||||
|
loadingMessage: '',
|
||||||
currentUser: '',
|
currentUser: '',
|
||||||
userRole: '',
|
userRole: '',
|
||||||
loginForm: { username: '', password: '' },
|
loginForm: { username: '', password: '' },
|
||||||
@ -75,7 +77,14 @@ function salesApp() {
|
|||||||
this.userRole = result.data.role || 'agent';
|
this.userRole = result.data.role || 'agent';
|
||||||
localStorage.setItem('telvero_user', result.data.user);
|
localStorage.setItem('telvero_user', result.data.user);
|
||||||
localStorage.setItem('telvero_role', result.data.role || 'agent');
|
localStorage.setItem('telvero_role', result.data.role || 'agent');
|
||||||
|
|
||||||
|
// Show loading indicator while fetching products
|
||||||
|
this.isLoadingProducts = true;
|
||||||
|
this.loadingMessage = 'Productgegevens ophalen...';
|
||||||
await this.loadProducts();
|
await this.loadProducts();
|
||||||
|
this.isLoadingProducts = false;
|
||||||
|
this.loadingMessage = '';
|
||||||
|
|
||||||
this.isLoggedIn = true;
|
this.isLoggedIn = true;
|
||||||
} else {
|
} else {
|
||||||
alert("Login mislukt");
|
alert("Login mislukt");
|
||||||
|
|||||||
@ -31,11 +31,21 @@ const ProductsComponent = {
|
|||||||
*/
|
*/
|
||||||
async loadProducts() {
|
async loadProducts() {
|
||||||
try {
|
try {
|
||||||
|
if (this.isLoadingProducts) {
|
||||||
|
this.loadingMessage = 'Productgegevens ophalen van server...';
|
||||||
|
}
|
||||||
const data = await ApiService.getProducts();
|
const data = await ApiService.getProducts();
|
||||||
|
|
||||||
|
if (this.isLoadingProducts) {
|
||||||
|
this.loadingMessage = 'Producten verwerken...';
|
||||||
|
}
|
||||||
// Sort products alphabetically by name
|
// Sort products alphabetically by name
|
||||||
this.products = data.sort((a, b) => a.name.localeCompare(b.name, 'nl'));
|
this.products = data.sort((a, b) => a.name.localeCompare(b.name, 'nl'));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("Failed to load products");
|
console.error("Failed to load products");
|
||||||
|
if (this.isLoadingProducts) {
|
||||||
|
this.loadingMessage = 'Fout bij laden producten';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user