mark/telvero-sales-backoffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

version numbering and loading improved

Browse Source
This commit is contained in:
Mark Pinkster 2026-01-13 10:33:05 +01:00
parent 9c816cb23b
commit db3b1f74d2
3 changed files with 76 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@ -20,22 +20,48 @@
border-radius: 10px;
}
</style>
<!-- Load JavaScript modules -->
<script src="js/services/api.js"></script>
<script src="js/services/bogo.js"></script>
<script src="js/components/cart.js"></script>
<script src="js/components/products.js"></script>
<script src="js/components/forms.js"></script>
<script src="js/app.js"></script>
<!-- Load JavaScript modules with cache busting -->
<script>
// Change this version number to bust cache for all JS files
const APP_VERSION = '1.1';
const scripts = [
'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>
<body class="bg-slate-100 min-h-screen font-sans" x-data="salesApp()">
<template x-if="isLoading">
<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>
</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="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>
</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">
<header
class="flex justify-between items-center mb-8 bg-white p-6 rounded-3xl shadow-sm border-b-4 border-blue-600">

9
js/app.js
View File

@ -9,6 +9,8 @@ function salesApp() {
// Authentication state
isLoggedIn: false,
isLoading: true,
isLoadingProducts: false,
loadingMessage: '',
currentUser: '',
userRole: '',
loginForm: { username: '', password: '' },
@ -75,7 +77,14 @@ function salesApp() {
this.userRole = result.data.role || 'agent';
localStorage.setItem('telvero_user', result.data.user);
localStorage.setItem('telvero_role', result.data.role || 'agent');
// Show loading indicator while fetching products
this.isLoadingProducts = true;
this.loadingMessage = 'Productgegevens ophalen...';
await this.loadProducts();
this.isLoadingProducts = false;
this.loadingMessage = '';
this.isLoggedIn = true;
} else {
alert("Login mislukt");

10
js/components/products.js
View File

@ -31,11 +31,21 @@ const ProductsComponent = {
*/
async loadProducts() {
try {
if (this.isLoadingProducts) {
this.loadingMessage = 'Productgegevens ophalen van server...';
}
const data = await ApiService.getProducts();
if (this.isLoadingProducts) {
this.loadingMessage = 'Producten verwerken...';
}
// Sort products alphabetically by name
this.products = data.sort((a, b) => a.name.localeCompare(b.name, 'nl'));
} catch (e) {
console.error("Failed to load products");
if (this.isLoadingProducts) {
this.loadingMessage = 'Fout bij laden producten';
}
}
},