125 lines
3.6 KiB
JavaScript
125 lines
3.6 KiB
JavaScript
/**
|
|
* Main Application - Alpine.js Sales Panel App
|
|
*
|
|
* This file combines all components into the main Alpine.js application.
|
|
*/
|
|
|
|
function salesApp() {
|
|
return {
|
|
// Authentication state
|
|
isLoggedIn: false,
|
|
isLoading: true,
|
|
currentUser: '',
|
|
loginForm: { username: '', password: '' },
|
|
|
|
// Order state
|
|
submitting: false,
|
|
orderComplete: false,
|
|
lastOrder: { id: '', name: '', total: '' },
|
|
|
|
// Include state from components
|
|
...CartComponent.getInitialState(),
|
|
...ProductsComponent.getInitialState(),
|
|
...FormsComponent.getInitialState(),
|
|
|
|
// Computed properties
|
|
get total() {
|
|
return CartComponent.getComputed().total.call(this);
|
|
},
|
|
|
|
get filteredProducts() {
|
|
return ProductsComponent.getComputed().filteredProducts.call(this);
|
|
},
|
|
|
|
get filteredExtraProducts() {
|
|
return ProductsComponent.getComputed().filteredExtraProducts.call(this);
|
|
},
|
|
|
|
/**
|
|
* Initialize the application
|
|
* Runs automatically on page load
|
|
*/
|
|
async init() {
|
|
this.isLoading = true;
|
|
try {
|
|
const data = await ApiService.checkSession();
|
|
if (data.authenticated) {
|
|
this.currentUser = data.user || localStorage.getItem('telvero_user') || 'Agent';
|
|
await this.loadProducts();
|
|
this.isLoggedIn = true;
|
|
}
|
|
} catch (e) {
|
|
console.error("Session check failed");
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handle user login
|
|
*/
|
|
async doLogin() {
|
|
const result = await ApiService.login(this.loginForm.username, this.loginForm.password);
|
|
if (result.ok) {
|
|
this.currentUser = result.data.user;
|
|
localStorage.setItem('telvero_user', result.data.user);
|
|
await this.loadProducts();
|
|
this.isLoggedIn = true;
|
|
} else {
|
|
alert("Login mislukt");
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handle user logout
|
|
*/
|
|
async doLogout() {
|
|
await ApiService.logout();
|
|
localStorage.removeItem('telvero_user');
|
|
location.reload();
|
|
},
|
|
|
|
/**
|
|
* Submit order to API
|
|
*/
|
|
async submitOrder() {
|
|
this.submitting = true;
|
|
|
|
try {
|
|
const payload = this.buildOrderPayload();
|
|
const result = await ApiService.createOrder(payload);
|
|
|
|
if (result.success) {
|
|
this.lastOrder = {
|
|
id: result.order_id,
|
|
name: this.form.initials + ' ' + this.form.lastname,
|
|
total: result.total
|
|
};
|
|
this.orderComplete = true;
|
|
} else {
|
|
alert("Fout: " + result.error);
|
|
}
|
|
} catch (e) {
|
|
alert("Systeemfout");
|
|
}
|
|
|
|
this.submitting = false;
|
|
},
|
|
|
|
/**
|
|
* Reset everything for a new order
|
|
*/
|
|
resetForNewOrder() {
|
|
this.resetCart();
|
|
this.resetProducts();
|
|
this.resetForm();
|
|
this.orderComplete = false;
|
|
},
|
|
|
|
// Include methods from components
|
|
...CartComponent.getMethods(),
|
|
...ProductsComponent.getMethods(),
|
|
...FormsComponent.getMethods()
|
|
};
|
|
}
|