|
|
@@ -1,6 +1,7 @@
|
|
|
+//--- Imports ---
|
|
|
import { sendMessage as serviceSendMessage } from './service/chat.js';
|
|
|
import { getProducts, sendOrder } from './service/product.js';
|
|
|
-import { login } from './service/auth.js'
|
|
|
+import { login } from './service/auth.js';
|
|
|
import { createGlobalLoader, showGlobalLoader, hideGlobalLoader } from './utils/loader.js';
|
|
|
import { updateProgress, claimReward } from './utils/progressBar.js';
|
|
|
import { showError } from './utils/error.js';
|
|
|
@@ -8,28 +9,64 @@ import { addHistoryRow, setupShoppingCart } from './utils/shoppingCart.js';
|
|
|
import { hideGUI, showGUI } from './utils/gui.js';
|
|
|
import { smartSearch } from './utils/searching.js';
|
|
|
import { getUserData } from './service/user.js';
|
|
|
-// --- Variables de Usuario ---
|
|
|
+
|
|
|
+// --- Variables Globales ---
|
|
|
+
|
|
|
+// --- User Data ---
|
|
|
let userId = -1;
|
|
|
let userName = "Cliente";
|
|
|
+let chatUserName = "prueba_mesa43"
|
|
|
let userTable = null;
|
|
|
let userToken = null;
|
|
|
-// --- Datos de Productos y Carrito ---
|
|
|
+let chatWebsocket = null;
|
|
|
+
|
|
|
+// --- Products & Cart ---
|
|
|
let Allproducts = [];
|
|
|
let cart = [];
|
|
|
let itsEmpty = true;
|
|
|
-let cacheMode = false
|
|
|
+let cacheMode = false;
|
|
|
|
|
|
-// --- Categorias Importantes ---
|
|
|
+// --- Configuration ---
|
|
|
+const favoriteCategories = ["Shop", "Pizzas Familiares", "Pizza Medianas"];
|
|
|
|
|
|
-const favoriteCategories = ["Shop", "Pizzas Familiares", "Pizza Medianas" ];
|
|
|
-
|
|
|
-// --- Historial de Chat ---
|
|
|
+// --- Chat History ---
|
|
|
let chatHistory = [
|
|
|
- { role: "system", content: "¡Hola! Soy tu asistente en Biergarten Klein. ¿Te gustaría una recomendación de nuestras cervezas artesanales?" }
|
|
|
+ {
|
|
|
+ user: "name",
|
|
|
+ time: "00:00",
|
|
|
+ content: "Hola Mundo"
|
|
|
+ }
|
|
|
+];
|
|
|
+
|
|
|
+const userColors = [
|
|
|
+ // Rojos
|
|
|
+ "text-red-500", "text-red-600", "text-rose-500", "text-rose-600",
|
|
|
+ "text-orange-500", "text-orange-600", "text-amber-500", "text-amber-600",
|
|
|
+
|
|
|
+ // Amarillos / dorados
|
|
|
+ "text-yellow-500", "text-yellow-600", "text-lime-500", "text-lime-600",
|
|
|
+
|
|
|
+ // Verdes
|
|
|
+ "text-green-500", "text-green-600", "text-emerald-500", "text-emerald-600",
|
|
|
+ "text-teal-500", "text-teal-600", "text-cyan-500", "text-cyan-600",
|
|
|
+
|
|
|
+ // Azules
|
|
|
+ "text-sky-500", "text-sky-600", "text-blue-500", "text-blue-600",
|
|
|
+ "text-indigo-500", "text-indigo-600",
|
|
|
+
|
|
|
+ // Violetas / púrpuras æ
|
|
|
+ "text-violet-500", "text-violet-600", "text-purple-500", "text-purple-600",
|
|
|
+ "text-fuchsia-500", "text-fuchsia-600", "text-pink-500", "text-pink-600",
|
|
|
+
|
|
|
+ // Neutros variados
|
|
|
+ "text-gray-500", "text-gray-600", "text-zinc-500", "text-zinc-600",
|
|
|
+ "text-neutral-500", "text-neutral-600", "text-stone-500", "text-stone-600"
|
|
|
];
|
|
|
|
|
|
|
|
|
-// --- Elementos del DOM: Productos y Carrito ---
|
|
|
+//--- Elementos del DOM ---
|
|
|
+
|
|
|
+// --- Product & Cart Elements ---
|
|
|
const productListElement = document.getElementById("productList");
|
|
|
const cartItemsElement = document.getElementById("cartItems");
|
|
|
const cartTotalElement = document.getElementById("cartTotal");
|
|
|
@@ -38,41 +75,50 @@ const checkoutButton = document.getElementById("checkoutButton");
|
|
|
const originalCheckoutButtonText = checkoutButton ? checkoutButton.textContent : "Finalizar Pedido";
|
|
|
const cartCountElement = document.getElementById("cartCount");
|
|
|
|
|
|
-// --- Elementos del DOM: Chat ---
|
|
|
+// --- Chat Elements ---
|
|
|
const chatMessagesElement = document.getElementById("chatMessages");
|
|
|
const chatInputElement = document.getElementById("chatInput");
|
|
|
const chatForm = document.getElementById("chatForm");
|
|
|
-const aiLoadingIndicator = document.getElementById("aiLoadingIndicator");
|
|
|
-const chatSuggestionsElement = document.getElementById("chatSuggestions");
|
|
|
+const userList = document.getElementById("userList")
|
|
|
+// --- Reward Elements ---
|
|
|
+const rewardBtn = document.getElementById('rewardBtn');
|
|
|
+const rewardModal = document.getElementById('rewardModal');
|
|
|
+const closeRewardModal = document.getElementById('closeRewardModal');
|
|
|
+const closeSuccessRewardModalButton = document.getElementById('closeSuccessRewardModal');
|
|
|
+const cancelRewardBtn = document.getElementById('cancelRewardBtn');
|
|
|
+const acceptTermsCheckbox = document.getElementById('acceptTermsCheckbox');
|
|
|
+const claimRewardBtn = document.getElementById('claimRewardBtn');
|
|
|
|
|
|
+//--- Inicialización y Configuración ---
|
|
|
|
|
|
-//#region --- Inicialización y Configuracion ---
|
|
|
+/**
|
|
|
+ * Main application initialization
|
|
|
+ */
|
|
|
async function initializeApp() {
|
|
|
showGlobalLoader("Cargando productos...");
|
|
|
+ chatUserName = userName.split(" ")[0].toLowerCase() + "_mesa"+userTable
|
|
|
+ initializeChat();
|
|
|
+ initializeWebSocket();
|
|
|
await initializeProducts();
|
|
|
await renderProducts(Allproducts);
|
|
|
setupSearchListener();
|
|
|
updateCartDisplay();
|
|
|
setupShoppingCart(userId, userToken, userName);
|
|
|
- initializeChat();
|
|
|
setupBasicListeners();
|
|
|
showGUI();
|
|
|
hideGlobalLoader();
|
|
|
-
|
|
|
- const chatSuggestions = Array.from(chatSuggestionsElement.children);
|
|
|
-
|
|
|
- chatSuggestions.forEach(suggestion => {
|
|
|
- suggestion.addEventListener("click", () => {
|
|
|
- sendSuggestion(suggestion.querySelector(".chat-suggestion").textContent);
|
|
|
- });
|
|
|
- });
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Initialize login modal and authentication
|
|
|
+ */
|
|
|
function initializeLoginModal() {
|
|
|
const sessionModal = document.getElementById('sessionModal');
|
|
|
const loginForm = document.getElementById('loginForm');
|
|
|
const logoutBtn = document.getElementById('logoutBtn');
|
|
|
sessionModal.classList.remove('hidden');
|
|
|
|
|
|
+ // Login form submission
|
|
|
loginForm.addEventListener('submit', async (event) => {
|
|
|
event.preventDefault();
|
|
|
event.stopPropagation();
|
|
|
@@ -92,7 +138,7 @@ function initializeLoginModal() {
|
|
|
return;
|
|
|
}
|
|
|
try {
|
|
|
- const { data } = await login(email, pin)
|
|
|
+ const { data } = await login(email, pin);
|
|
|
userToken = data.token;
|
|
|
userName = data.name;
|
|
|
userId = data.id;
|
|
|
@@ -104,15 +150,15 @@ function initializeLoginModal() {
|
|
|
}
|
|
|
|
|
|
sessionModal.classList.add('hidden');
|
|
|
-
|
|
|
initializeApp();
|
|
|
} catch (error) {
|
|
|
- console.error(error)
|
|
|
+ console.error(error);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
+ // Logout functionality
|
|
|
if (logoutBtn) {
|
|
|
logoutBtn.addEventListener('click', () => {
|
|
|
- setCookie("userToken", "", -1); // Eliminar cookie
|
|
|
+ setCookie("userToken", "", -1);
|
|
|
userId = -1;
|
|
|
userName = "Cliente";
|
|
|
userTable = null;
|
|
|
@@ -120,40 +166,95 @@ function initializeLoginModal() {
|
|
|
cacheMode = false;
|
|
|
hideGUI();
|
|
|
sessionModal.classList.remove('hidden');
|
|
|
+
|
|
|
+ // Reset UI elements
|
|
|
document.querySelector("#emailInputContainer").classList.remove("hidden");
|
|
|
document.querySelector("#pinInputContainer").classList.remove("hidden");
|
|
|
- const loginTitle = document.getElementById("loginTitle");
|
|
|
- loginTitle.textContent = "¡Bienvenido!";
|
|
|
- // Restaurar atributos required a los inputs
|
|
|
+ document.getElementById("loginTitle").textContent = "¡Bienvenido!";
|
|
|
document.querySelector("#emailInput").setAttribute("required", "");
|
|
|
document.querySelector("#pinInput").setAttribute("required", "");
|
|
|
logoutBtn.classList.add("hidden");
|
|
|
document.querySelector("#recoveryPIN").classList.remove("hidden");
|
|
|
});
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
-}
|
|
|
+function initializeWebSocket() {
|
|
|
+ if (!chatWebsocket) {
|
|
|
+ const wsProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
|
|
+ chatWebsocket = new WebSocket(`${wsProtocol}://${location.host}/api/chat/ws?token=${userToken}`);
|
|
|
+ chatWebsocket.onopen = () => {
|
|
|
+ chatWebsocket.send(JSON.stringify({
|
|
|
+ type: "join",
|
|
|
+ username: chatUserName
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ chatWebsocket.onmessage = (event) => {
|
|
|
+ const data = JSON.parse(event.data);
|
|
|
+ if (data.type === "message") {
|
|
|
+ displayChatMessage(data.username, data.message);
|
|
|
+ }
|
|
|
+ else if (data.type === "join") {
|
|
|
+ newUserInChat(data.username);
|
|
|
+ }
|
|
|
+ else if (data.type === "leave") {
|
|
|
+ userLeftChat(data.username);
|
|
|
+ }
|
|
|
+ else if (data.type === "ping") {
|
|
|
+ chatWebsocket.send(JSON.stringify({
|
|
|
+ type: "pong"
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * Initialize chat functionality
|
|
|
+ */
|
|
|
function initializeChat() {
|
|
|
if (!chatForm) return;
|
|
|
chatForm.addEventListener("submit", (event) => {
|
|
|
event.preventDefault();
|
|
|
if (chatInputElement.value.trim() === "") return;
|
|
|
|
|
|
- sendMessageToAI();
|
|
|
- chatInputElement.addEventListener("input", () => {
|
|
|
- if (chatInputElement.value.trim() === "") {
|
|
|
- chatSuggestionsElement.classList.remove("hidden");
|
|
|
- } else {
|
|
|
- chatSuggestionsElement.classList.add("hidden");
|
|
|
- }
|
|
|
- });
|
|
|
+ // sendMessageToAI();
|
|
|
+ if (chatWebsocket) {
|
|
|
+ chatWebsocket.send(JSON.stringify({
|
|
|
+ type: "message",
|
|
|
+ username: chatUserName,
|
|
|
+ message: chatInputElement.value
|
|
|
+ }));
|
|
|
+ chatInputElement.value = "";
|
|
|
+ }
|
|
|
+ // displayChatMessage(chatUserName, chatInputElement.value)
|
|
|
+ });
|
|
|
+ chatInputElement.addEventListener("input", () => {
|
|
|
+ const lastWord = chatInputElement.value.split(" ").at(-1)
|
|
|
+ if (lastWord.trim().startsWith("@")) {
|
|
|
+ userList.classList.remove("hidden")
|
|
|
+
|
|
|
+ }else{
|
|
|
+ userList.classList.add("hidden")
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Setup basic event listeners
|
|
|
+ */
|
|
|
function setupBasicListeners() {
|
|
|
if (!checkoutButton) return;
|
|
|
+
|
|
|
checkoutButton.addEventListener("click", processOrder);
|
|
|
initializeRewards();
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Setup search functionality with debouncing
|
|
|
+ */
|
|
|
function setupSearchListener() {
|
|
|
const searchInput = document.getElementById("searchInput");
|
|
|
if (!searchInput) return;
|
|
|
@@ -161,38 +262,39 @@ function setupSearchListener() {
|
|
|
let debounceTimer;
|
|
|
|
|
|
searchInput.addEventListener("input", () => {
|
|
|
- // Limpiar el timer anterior si existe
|
|
|
clearTimeout(debounceTimer);
|
|
|
- const specialCases = {
|
|
|
- "shop": ["cerveza"]
|
|
|
- }
|
|
|
- // Agregar una clase de "buscando" para el feedback visual
|
|
|
+
|
|
|
+ // Visual feedback during search
|
|
|
productListElement.style.opacity = "0.7";
|
|
|
productListElement.style.transform = "scale(0.98)";
|
|
|
productListElement.style.transition = "opacity 0.2s ease, transform 0.2s ease";
|
|
|
|
|
|
- // Debounce de 200ms para evitar muchas llamadas
|
|
|
+ // Debounce search for 200ms
|
|
|
debounceTimer = setTimeout(() => {
|
|
|
const searchTerm = searchInput.value.toLowerCase();
|
|
|
if (searchTerm.trim() === "") {
|
|
|
renderProductsWithAnimation(Allproducts);
|
|
|
return;
|
|
|
}
|
|
|
- const finded = smartSearch(Allproducts, searchTerm);
|
|
|
- // Renderizar con animación
|
|
|
- renderProductsWithAnimation(finded, false, searchTerm);
|
|
|
+
|
|
|
+ const foundProducts = smartSearch(Allproducts, searchTerm);
|
|
|
+ renderProductsWithAnimation(foundProducts, false, searchTerm);
|
|
|
}, 200);
|
|
|
});
|
|
|
}
|
|
|
-//#endregion
|
|
|
-//#region ===== Utilidad =====
|
|
|
-
|
|
|
-
|
|
|
+//--- Funciones de Utilidad ---
|
|
|
|
|
|
+/**
|
|
|
+ * Set a cookie with expiration
|
|
|
+ */
|
|
|
function setCookie(name, value, days) {
|
|
|
const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
|
|
|
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Get a cookie value by name
|
|
|
+ */
|
|
|
function getCookie(name) {
|
|
|
const cookies = document.cookie.split('; ');
|
|
|
for (const cookie of cookies) {
|
|
|
@@ -203,28 +305,42 @@ function getCookie(name) {
|
|
|
}
|
|
|
return null;
|
|
|
}
|
|
|
+/**
|
|
|
|
|
|
+ * Check and validate cached user data
|
|
|
+ */
|
|
|
async function checkCache() {
|
|
|
const tokenCache = getCookie("userToken");
|
|
|
- let user = null
|
|
|
+ let user = null;
|
|
|
+
|
|
|
if (tokenCache) {
|
|
|
userToken = tokenCache;
|
|
|
- try{
|
|
|
+ try {
|
|
|
const data = await getUserData(userToken);
|
|
|
- user = data.data
|
|
|
- }catch (error) {
|
|
|
+ user = data.data;
|
|
|
+ } catch (error) {
|
|
|
console.error("Error fetching user data:", error);
|
|
|
console.error("Invalid user token, clearing cache.");
|
|
|
- setCookie("userToken", "", -1); // Eliminar cookie si es inválida
|
|
|
+ setCookie("userToken", "", -1);
|
|
|
return false;
|
|
|
}
|
|
|
+
|
|
|
if (user) {
|
|
|
userId = user.id;
|
|
|
userName = user.name;
|
|
|
updateProgress(user.reward_progress || 0);
|
|
|
- const [emailInputContainer, pinInputContainer] = [document.getElementById("emailInputContainer"), document.getElementById("pinInputContainer")];
|
|
|
- const [emailInput, pinInput] = [document.getElementById("emailInput"), document.getElementById("pinInput")];
|
|
|
+
|
|
|
+ // Update UI for cached user
|
|
|
+ const [emailInputContainer, pinInputContainer] = [
|
|
|
+ document.getElementById("emailInputContainer"),
|
|
|
+ document.getElementById("pinInputContainer")
|
|
|
+ ];
|
|
|
+ const [emailInput, pinInput] = [
|
|
|
+ document.getElementById("emailInput"),
|
|
|
+ document.getElementById("pinInput")
|
|
|
+ ];
|
|
|
const loginTitle = document.getElementById("loginTitle");
|
|
|
+
|
|
|
loginTitle.textContent = `¡Bienvenido ${user.name.split(" ")[0]}!`;
|
|
|
emailInputContainer.classList.add("hidden");
|
|
|
emailInput.removeAttribute("required");
|
|
|
@@ -232,45 +348,61 @@ async function checkCache() {
|
|
|
pinInput.removeAttribute("required");
|
|
|
document.querySelector("#logoutBtn").classList.remove("hidden");
|
|
|
document.querySelector("#recoveryPIN").classList.add("hidden");
|
|
|
- cacheMode = true;
|
|
|
- return true
|
|
|
+ cacheMode = true;
|
|
|
+ return true;
|
|
|
}
|
|
|
}
|
|
|
- return cacheMode
|
|
|
+ return cacheMode;
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Format price to Chilean peso currency
|
|
|
+ */
|
|
|
function formatPrice(price) {
|
|
|
return price.toLocaleString("es-CL", { style: "currency", currency: "CLP" });
|
|
|
}
|
|
|
-//#endregion
|
|
|
-//#region ===== Productos =====
|
|
|
+//--- Gestión de Productos ---
|
|
|
|
|
|
+/**
|
|
|
+ * Initialize products from API
|
|
|
+ */
|
|
|
async function initializeProducts() {
|
|
|
Allproducts = await getProducts(userToken);
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Create category containers for products
|
|
|
+ */
|
|
|
async function createCategories(products) {
|
|
|
let categories = new Set(products.map(product => product.type || "Sin categoría"));
|
|
|
categories = Array.from(categories).sort((a, b) => a.localeCompare(b));
|
|
|
|
|
|
- for (const category of favoriteCategories.reverse() ) {
|
|
|
+ // Prioritize favorite categories
|
|
|
+ for (const category of favoriteCategories.reverse()) {
|
|
|
if (categories.includes(category)) {
|
|
|
categories = categories.filter(cat => cat !== category);
|
|
|
- categories.unshift(category); // Mover la categoría favorita al inicio
|
|
|
+ categories.unshift(category);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
if (!productListElement) return;
|
|
|
|
|
|
const categoryContainers = categories.map(category => {
|
|
|
const container = document.createElement("div");
|
|
|
- container.classList.add("category-container");
|
|
|
- container.classList.add("mb-8", "p-4");
|
|
|
+ container.classList.add("category-container", "mb-8", "p-4");
|
|
|
+
|
|
|
const title = document.createElement("h2");
|
|
|
title.classList.add("category-title", "text-3xl", "font-bold", "border-b-2", "pb-3", "mb-4");
|
|
|
- let titleText = ["a", "e", "i", "o", "u", "á", "é", "í", "ó", "ú", "p"].includes(category.charAt(category.length - 1).toLowerCase()) ? "s" :
|
|
|
- category.charAt(category.length - 1).toLowerCase() === "s" ? "" : "es";
|
|
|
- title.textContent = category + titleText;
|
|
|
+
|
|
|
+ // Pluralize category name
|
|
|
+ const lastChar = category.charAt(category.length - 1).toLowerCase();
|
|
|
+ const pluralSuffix = ["a", "e", "i", "o", "u", "á", "é", "í", "ó", "ú", "p"].includes(lastChar)
|
|
|
+ ? "s"
|
|
|
+ : lastChar === "s" ? "" : "es";
|
|
|
+ title.textContent = category + pluralSuffix;
|
|
|
+
|
|
|
container.appendChild(title);
|
|
|
+
|
|
|
const productList = document.createElement("div");
|
|
|
productList.classList.add("product-list", "space-y-6");
|
|
|
productList.id = `productList-${category}`;
|
|
|
@@ -283,6 +415,9 @@ async function createCategories(products) {
|
|
|
return categoryContainers;
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Render products in their respective categories
|
|
|
+ */
|
|
|
async function renderProducts(products, groupInCategories = true, searchTerm = "") {
|
|
|
if (!productListElement) return;
|
|
|
|
|
|
@@ -291,11 +426,13 @@ async function renderProducts(products, groupInCategories = true, searchTerm = "
|
|
|
|
|
|
productListElement.innerHTML = "";
|
|
|
let categoryContainers = [];
|
|
|
+
|
|
|
if (groupInCategories) {
|
|
|
categoryContainers = await createCategories(products);
|
|
|
- }else{
|
|
|
- categoryContainers = [ { category: searchTerm, container: productListElement } ];
|
|
|
+ } else {
|
|
|
+ categoryContainers = [{ category: searchTerm, container: productListElement }];
|
|
|
}
|
|
|
+
|
|
|
if (products.length === 0) {
|
|
|
const noProductsMessage = document.createElement("p");
|
|
|
noProductsMessage.textContent = "No hay productos disponibles.";
|
|
|
@@ -304,12 +441,9 @@ async function renderProducts(products, groupInCategories = true, searchTerm = "
|
|
|
}
|
|
|
|
|
|
for (const { category, container } of categoryContainers) {
|
|
|
- let productsInCategory
|
|
|
- if (groupInCategories){
|
|
|
- productsInCategory = products.filter(product => product.type === category);
|
|
|
- }else{
|
|
|
- productsInCategory = products;
|
|
|
- }
|
|
|
+ let productsInCategory = groupInCategories
|
|
|
+ ? products.filter(product => product.type === category)
|
|
|
+ : products;
|
|
|
|
|
|
if (productsInCategory.length === 0) continue;
|
|
|
|
|
|
@@ -323,8 +457,7 @@ async function renderProducts(products, groupInCategories = true, searchTerm = "
|
|
|
clone.querySelector(".product-image").style.backgroundImage = `url('${product.image}')`;
|
|
|
|
|
|
const addBtn = clone.querySelector(".add-to-cart-btn");
|
|
|
- addBtn.dataset.productId = product.id; // el listener usa esta info
|
|
|
- // Agregar event listener directamente al botón clonado
|
|
|
+ addBtn.dataset.productId = product.id;
|
|
|
addBtn.addEventListener('click', (event) => {
|
|
|
const productId = parseInt(event.target.dataset.productId);
|
|
|
addToCart(productId, event.target);
|
|
|
@@ -335,24 +468,29 @@ async function renderProducts(products, groupInCategories = true, searchTerm = "
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Render products with smooth animations
|
|
|
+ */
|
|
|
async function renderProductsWithAnimation(products, groupInCategories = true, searchTerm = "") {
|
|
|
if (!productListElement) return;
|
|
|
|
|
|
const template = document.getElementById("product-card-template");
|
|
|
if (!template) return;
|
|
|
|
|
|
- // Fade out actual content
|
|
|
+ // Fade out current content
|
|
|
productListElement.style.opacity = "0";
|
|
|
productListElement.style.transform = "scale(0.95)";
|
|
|
|
|
|
setTimeout(async () => {
|
|
|
productListElement.innerHTML = "";
|
|
|
let categoryContainers = [];
|
|
|
- if (groupInCategories){
|
|
|
+
|
|
|
+ if (groupInCategories) {
|
|
|
categoryContainers = await createCategories(products);
|
|
|
- }else {
|
|
|
- categoryContainers = [ { category: searchTerm, container: productListElement } ];
|
|
|
+ } else {
|
|
|
+ categoryContainers = [{ category: searchTerm, container: productListElement }];
|
|
|
}
|
|
|
+
|
|
|
if (products.length === 0) {
|
|
|
const noProductsMessage = document.createElement("p");
|
|
|
noProductsMessage.textContent = "No hay productos disponibles.";
|
|
|
@@ -375,12 +513,9 @@ async function renderProductsWithAnimation(products, groupInCategories = true, s
|
|
|
|
|
|
let animationDelay = 0;
|
|
|
for (const { category, container } of categoryContainers) {
|
|
|
- let productsInCategory = [];
|
|
|
- if (groupInCategories){
|
|
|
- productsInCategory = products.filter(product => product.type === category);
|
|
|
- }else {
|
|
|
- productsInCategory = products
|
|
|
- }
|
|
|
+ let productsInCategory = groupInCategories
|
|
|
+ ? products.filter(product => product.type === category)
|
|
|
+ : products;
|
|
|
|
|
|
if (productsInCategory.length === 0) continue;
|
|
|
|
|
|
@@ -426,13 +561,15 @@ async function renderProductsWithAnimation(products, groupInCategories = true, s
|
|
|
|
|
|
}, 150); // Wait for fade out to complete
|
|
|
}
|
|
|
-//#endregion
|
|
|
-//#region ===== Carrito =====
|
|
|
-
|
|
|
+//--- Gestión del Carrito ---
|
|
|
|
|
|
+/**
|
|
|
+ * Add product to cart with visual feedback
|
|
|
+ */
|
|
|
window.addToCart = function(productId, buttonElement = null) {
|
|
|
const product = Allproducts.find(p => p.id === productId);
|
|
|
if (!product) return;
|
|
|
+
|
|
|
const cartItem = cart.find(item => item.id === productId);
|
|
|
if (cartItem) {
|
|
|
cartItem.quantity++;
|
|
|
@@ -440,6 +577,7 @@ window.addToCart = function(productId, buttonElement = null) {
|
|
|
cart.push({ ...product, quantity: 1 });
|
|
|
}
|
|
|
|
|
|
+ // Visual feedback for button
|
|
|
if (buttonElement) {
|
|
|
const originalHTML = buttonElement.innerHTML;
|
|
|
buttonElement.textContent = "✔ Agregado!";
|
|
|
@@ -449,12 +587,18 @@ window.addToCart = function(productId, buttonElement = null) {
|
|
|
buttonElement.disabled = false;
|
|
|
}, 300);
|
|
|
}
|
|
|
+
|
|
|
updateCartDisplay();
|
|
|
- // Dentro de addToCart (después de updateCartDisplay())
|
|
|
- if (typeof showToast === "function") showToast(`${product.name} agregado al carrito`);
|
|
|
-
|
|
|
+
|
|
|
+ // Show toast notification if available
|
|
|
+ if (typeof showToast === "function") {
|
|
|
+ showToast(`${product.name} agregado al carrito`);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
+/**
|
|
|
+ * Remove product from cart
|
|
|
+ */
|
|
|
window.removeFromCart = function(productId, removeAll = false) {
|
|
|
const itemIndex = cart.findIndex(item => item.id === productId);
|
|
|
if (itemIndex > -1) {
|
|
|
@@ -467,16 +611,24 @@ window.removeFromCart = function(productId, removeAll = false) {
|
|
|
updateCartDisplay();
|
|
|
};
|
|
|
|
|
|
+/**
|
|
|
+ * Calculate total cart amount
|
|
|
+ */
|
|
|
function calculateTotal() {
|
|
|
if (!cartTotalElement) return;
|
|
|
const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
|
|
cartTotalElement.textContent = formatPrice(total);
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Update cart display with animations
|
|
|
+ */
|
|
|
function updateCartDisplay() {
|
|
|
if (!cartItemsElement || !emptyCartTextElement || !checkoutButton || !cartCountElement) return;
|
|
|
+
|
|
|
cartItemsElement.innerHTML = "";
|
|
|
cartCountElement.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);
|
|
|
+
|
|
|
if (cart.length === 0) {
|
|
|
cartCountElement.classList.add("hidden");
|
|
|
emptyCartTextElement.classList.remove("hidden");
|
|
|
@@ -484,6 +636,8 @@ function updateCartDisplay() {
|
|
|
itsEmpty = true;
|
|
|
} else {
|
|
|
cartCountElement.classList.remove("hidden");
|
|
|
+
|
|
|
+ // Animate cart count badge
|
|
|
if (cartCountElement && itsEmpty) {
|
|
|
itsEmpty = false;
|
|
|
cartCountElement.animate([
|
|
|
@@ -493,21 +647,23 @@ function updateCartDisplay() {
|
|
|
duration: 300,
|
|
|
iterations: 1,
|
|
|
easing: 'ease-in-out'
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
cartCountElement.animate([
|
|
|
{ transform: 'scale(1) rotate(0deg)' },
|
|
|
{ transform: 'scale(1.2) rotate(180deg)' },
|
|
|
{ transform: 'scale(1) rotate(360deg)' }
|
|
|
-
|
|
|
], {
|
|
|
duration: 300,
|
|
|
iterations: 1,
|
|
|
easing: 'ease-in-out'
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
+
|
|
|
emptyCartTextElement.classList.add("hidden");
|
|
|
checkoutButton.disabled = false;
|
|
|
+
|
|
|
+ // Render cart items
|
|
|
cart.forEach(item => {
|
|
|
const cartItemHTML = `
|
|
|
<div class="product-cart flex justify-between items-center border-b border-gray-700 pb-2 last:border-b-0 mb-2">
|
|
|
@@ -526,17 +682,20 @@ function updateCartDisplay() {
|
|
|
`;
|
|
|
cartItemsElement.innerHTML += cartItemHTML;
|
|
|
});
|
|
|
-
|
|
|
}
|
|
|
+
|
|
|
calculateTotal();
|
|
|
}
|
|
|
-//#endregion
|
|
|
-//#region ===== Pedidos =====
|
|
|
-
|
|
|
+//--- Procesamiento de Pedidos ---
|
|
|
|
|
|
+/**
|
|
|
+ * Process and send order to backend
|
|
|
+ */
|
|
|
async function processOrder() {
|
|
|
if (cart.length === 0) return;
|
|
|
+
|
|
|
showGlobalLoader();
|
|
|
+
|
|
|
if (checkoutButton) {
|
|
|
checkoutButton.disabled = true;
|
|
|
checkoutButton.textContent = "Procesando...";
|
|
|
@@ -546,15 +705,24 @@ async function processOrder() {
|
|
|
const orderData = {
|
|
|
customerId: userId,
|
|
|
table: userTable,
|
|
|
- items: cart.map(item => ({ id: item.id, price: item.price, quantity: item.quantity })),
|
|
|
+ items: cart.map(item => ({
|
|
|
+ id: item.id,
|
|
|
+ price: item.price,
|
|
|
+ quantity: item.quantity
|
|
|
+ })),
|
|
|
totalAmount: cart.reduce((sum, item) => sum + item.price * item.quantity, 0),
|
|
|
orderDate: new Date().toLocaleString('sv-SE').replace(' ', 'T')
|
|
|
};
|
|
|
+
|
|
|
const data = await sendOrder(orderData, userToken);
|
|
|
+
|
|
|
if (data && data.new_progress) {
|
|
|
updateProgress(data.new_progress);
|
|
|
}
|
|
|
+
|
|
|
alert("Pedido enviado con éxito.");
|
|
|
+
|
|
|
+ // Add items to history
|
|
|
cart.forEach(item => {
|
|
|
addHistoryRow({
|
|
|
productName: item.name,
|
|
|
@@ -562,41 +730,72 @@ async function processOrder() {
|
|
|
price: item.price,
|
|
|
});
|
|
|
});
|
|
|
- cart = []
|
|
|
+
|
|
|
+ // Clear cart
|
|
|
+ cart = [];
|
|
|
updateCartDisplay();
|
|
|
+
|
|
|
} catch (error) {
|
|
|
console.error("Error al procesar la orden:", error);
|
|
|
alert(`Hubo un problema: ${error.message || "Por favor, inténtalo de nuevo."}`);
|
|
|
-
|
|
|
-
|
|
|
} finally {
|
|
|
hideGlobalLoader();
|
|
|
checkoutButton.disabled = cart.length === 0;
|
|
|
- checkoutButton.textContent = originalCheckoutButtonText
|
|
|
-
|
|
|
+ checkoutButton.textContent = originalCheckoutButtonText;
|
|
|
}
|
|
|
}
|
|
|
-//#endregion
|
|
|
-//#region ===== Chat =====
|
|
|
-function displayChatMessage(sender, message) {
|
|
|
- if (!chatMessagesElement) return;
|
|
|
- const bubbleClass = sender === "user" ? "chat-bubble-user" : "chat-bubble-ai";
|
|
|
- const messageDiv = document.createElement("div");
|
|
|
- messageDiv.classList.add("chat-bubble", bubbleClass);
|
|
|
- messageDiv.innerHTML = sender === "ai" && window.marked ? marked.parse(message) : message;
|
|
|
- chatMessagesElement.appendChild(messageDiv);
|
|
|
+//--- Funcionalidad del Chat ---
|
|
|
+
|
|
|
+/**
|
|
|
+ * Display chat message with proper styling
|
|
|
+ */
|
|
|
+
|
|
|
+function getUserColor(username) {
|
|
|
+ const hash = [...username].reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
|
+ return userColors[hash % userColors.length];
|
|
|
+}
|
|
|
+
|
|
|
+function displayChatMessage(sender, message, time = undefined) {
|
|
|
+ console.log(`[${sender.toUpperCase()}] ${message}`);
|
|
|
+ let realtime = `[${time ? time : new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}] `;
|
|
|
+ let messageTemplate = chatMessagesElement.querySelector("#chatMessageTemplate");
|
|
|
+ if (!messageTemplate) return;
|
|
|
+
|
|
|
+ let messageClone = messageTemplate.content.cloneNode(true).firstElementChild;
|
|
|
+ messageClone.querySelector(".chat-message-text").innerHTML = message;
|
|
|
+ messageClone.querySelector(".chat-message-time").innerHTML = realtime;
|
|
|
+ messageClone.querySelector(".chat-message-user").innerHTML = sender
|
|
|
+ messageClone.querySelector(".chat-message-user").classList.add(getUserColor(sender));
|
|
|
+ chatMessagesElement.appendChild(messageClone);
|
|
|
chatMessagesElement.scrollTop = chatMessagesElement.scrollHeight;
|
|
|
}
|
|
|
|
|
|
-async function sendSuggestion(suggestion) {
|
|
|
- if (!chatInputElement || !aiLoadingIndicator) return;
|
|
|
- chatInputElement.value = suggestion;
|
|
|
- chatInputElement.focus();
|
|
|
+function newUserInChat(userName) {
|
|
|
+ let userTemplate = chatMessagesElement.querySelector("#systemMessageTemplate");
|
|
|
+ if (!userTemplate) return;
|
|
|
+
|
|
|
+ let userClone = userTemplate.content.cloneNode(true).firstElementChild;
|
|
|
+ userClone.classList.add("text-green-600");
|
|
|
+ userClone.querySelector(".chat-message-text").innerHTML = `*** ${userName} se ha unido al chat`;
|
|
|
+ chatMessagesElement.appendChild(userClone);
|
|
|
+}
|
|
|
+
|
|
|
+function removeUserFromChat(userName) {
|
|
|
+ let userTemplate = chatMessagesElement.querySelector("#systemMessageTemplate");
|
|
|
+ if (!userTemplate) return;
|
|
|
|
|
|
+ let userClone = userTemplate.content.cloneNode(true).firstElementChild;
|
|
|
+ userClone.classList.add("text-red-600");
|
|
|
+ userClone.querySelector(".chat-message-text").innerHTML = `*** ${userName} se ha ido del chat`;
|
|
|
+ chatMessagesElement.appendChild(userClone);
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Send message to AI service
|
|
|
+ */
|
|
|
async function sendMessageToAI() {
|
|
|
if (!chatInputElement || !aiLoadingIndicator) return;
|
|
|
+
|
|
|
const userInput = chatInputElement.value.trim();
|
|
|
if (!userInput) return;
|
|
|
|
|
|
@@ -607,14 +806,15 @@ async function sendMessageToAI() {
|
|
|
|
|
|
try {
|
|
|
const response = await serviceSendMessage(userInput, chatHistory, userName, userToken);
|
|
|
+
|
|
|
if (!response) {
|
|
|
displayChatMessage("ai", "Hubo un problema al conectar con el Chef IA.");
|
|
|
} else if (response === "not_init") {
|
|
|
if (await initializeService()) {
|
|
|
- const response = await serviceSendMessage(userInput, chatHistory, userName, userToken);
|
|
|
- if (response) {
|
|
|
- chatHistory = response.messageList;
|
|
|
- displayChatMessage("ai", response.assistantResponse);
|
|
|
+ const retryResponse = await serviceSendMessage(userInput, chatHistory, userName, userToken);
|
|
|
+ if (retryResponse) {
|
|
|
+ chatHistory = retryResponse.messageList;
|
|
|
+ displayChatMessage("ai", retryResponse.assistantResponse);
|
|
|
} else {
|
|
|
displayChatMessage("ai", "Hubo un problema al enviar el mensaje.");
|
|
|
}
|
|
|
@@ -633,120 +833,108 @@ async function sendMessageToAI() {
|
|
|
if (chatInputElement) chatInputElement.focus();
|
|
|
}
|
|
|
}
|
|
|
+//--- Sistema de Recompensas ---
|
|
|
|
|
|
-//#endregion
|
|
|
-//#region ===== Rewards =====
|
|
|
-// Referencias a elementos del DOM
|
|
|
-const rewardBtn = document.getElementById('rewardBtn');
|
|
|
-const rewardModal = document.getElementById('rewardModal');
|
|
|
-const closeRewardModal = document.getElementById('closeRewardModal');
|
|
|
-const closeSuccessRewardModalButton = document.getElementById('closeSuccessRewardModal');
|
|
|
-const cancelRewardBtn = document.getElementById('cancelRewardBtn');
|
|
|
-const acceptTermsCheckbox = document.getElementById('acceptTermsCheckbox');
|
|
|
-const claimRewardBtn = document.getElementById('claimRewardBtn');
|
|
|
-
|
|
|
-
|
|
|
+/**
|
|
|
+ * Initialize rewards functionality
|
|
|
+ */
|
|
|
function initializeRewards() {
|
|
|
- // Abrir modal cuando se hace clic en el botón de recompensa
|
|
|
-
|
|
|
+ // Event listeners for reward system
|
|
|
closeSuccessRewardModalButton.addEventListener("click", closeSuccessRewardModal);
|
|
|
|
|
|
rewardBtn.addEventListener('click', function () {
|
|
|
if (!rewardBtn.disabled) {
|
|
|
rewardModal.classList.remove('hidden');
|
|
|
- document.body.style.overflow = 'hidden'; // Evitar scroll del fondo
|
|
|
+ document.body.style.overflow = 'hidden';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- // Cerrar modal - botón X
|
|
|
+ // Close modal - X button
|
|
|
closeRewardModal.addEventListener('click', function () {
|
|
|
closeModal();
|
|
|
});
|
|
|
|
|
|
- // Cerrar modal - botón Cancelar
|
|
|
+ // Close modal - Cancel button
|
|
|
cancelRewardBtn.addEventListener('click', function () {
|
|
|
closeModal();
|
|
|
});
|
|
|
|
|
|
- // Cerrar modal haciendo clic fuera de él
|
|
|
+ // Close modal - click outside
|
|
|
rewardModal.addEventListener('click', function (e) {
|
|
|
if (e.target === rewardModal) {
|
|
|
closeModal();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- // Cerrar modal con tecla Escape
|
|
|
+ // Close modal - Escape key
|
|
|
document.addEventListener('keydown', function (e) {
|
|
|
if (e.key === 'Escape' && !rewardModal.classList.contains('hidden')) {
|
|
|
closeModal();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- // Manejar el reclamo del premio
|
|
|
+ // Handle reward claim
|
|
|
claimRewardBtn.addEventListener('click', function () {
|
|
|
if (!this.disabled && acceptTermsCheckbox.checked) {
|
|
|
- // Generar código de premio (puedes cambiar esta lógica)
|
|
|
-
|
|
|
- // Mostrar mensaje de éxito
|
|
|
claimReward(userToken, userTable);
|
|
|
- // Cerrar modal
|
|
|
closeModal();
|
|
|
updateProgress(0);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ // Handle terms checkbox
|
|
|
+ acceptTermsCheckbox.addEventListener('change', function () {
|
|
|
+ if (this.checked) {
|
|
|
+ claimRewardBtn.disabled = false;
|
|
|
+ claimRewardBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
|
|
+ } else {
|
|
|
+ claimRewardBtn.disabled = true;
|
|
|
+ claimRewardBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Close success reward modal
|
|
|
+ */
|
|
|
function closeSuccessRewardModal() {
|
|
|
const successRewardModal = document.getElementById("successRewardModal");
|
|
|
successRewardModal.classList.add("hidden");
|
|
|
- document.body.style.overflow = ''; // Restaurar scroll
|
|
|
+ document.body.style.overflow = '';
|
|
|
}
|
|
|
|
|
|
-// Función para cerrar el modal
|
|
|
+/**
|
|
|
+ * Close reward modal and reset form
|
|
|
+ */
|
|
|
function closeModal() {
|
|
|
rewardModal.classList.add('hidden');
|
|
|
- document.body.style.overflow = ''; // Restaurar scroll
|
|
|
+ document.body.style.overflow = '';
|
|
|
|
|
|
- // Reset del formulario al cerrar
|
|
|
+ // Reset form
|
|
|
acceptTermsCheckbox.checked = false;
|
|
|
claimRewardBtn.disabled = true;
|
|
|
claimRewardBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
|
}
|
|
|
|
|
|
-// Manejar el checkbox de términos y condiciones
|
|
|
-acceptTermsCheckbox.addEventListener('change', function () {
|
|
|
- if (this.checked) {
|
|
|
- // Habilitar botón de reclamar
|
|
|
- claimRewardBtn.disabled = false;
|
|
|
- claimRewardBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
|
|
- } else {
|
|
|
- // Deshabilitar botón de reclamar
|
|
|
- claimRewardBtn.disabled = true;
|
|
|
- claimRewardBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-// Función para mostrar mensaje de éxito con el código
|
|
|
+/**
|
|
|
+ * Show reward success notification
|
|
|
+ */
|
|
|
function showRewardSuccess(code) {
|
|
|
- // Crear elemento de notificación de éxito
|
|
|
const successToast = document.createElement('div');
|
|
|
successToast.className = `
|
|
|
- fixed top-4 left-1/2 transform -translate-x-1/2
|
|
|
- bg-green-500 text-white text-sm rounded-lg px-6 py-4
|
|
|
- shadow-lg z-50 max-w-sm text-center
|
|
|
- `;
|
|
|
+ fixed top-4 left-1/2 transform -translate-x-1/2
|
|
|
+ bg-green-500 text-white text-sm rounded-lg px-6 py-4
|
|
|
+ shadow-lg z-50 max-w-sm text-center
|
|
|
+ `;
|
|
|
successToast.innerHTML = `
|
|
|
- <div class="font-bold mb-1">🎉 ¡Premio Reclamado!</div>
|
|
|
- <div class="text-xs opacity-90">Tu código: <strong>${code}</strong></div>
|
|
|
- <div class="text-xs mt-1 opacity-80">Muéstralo al mesero</div>
|
|
|
- `;
|
|
|
+ <div class="font-bold mb-1">🎉 ¡Premio Reclamado!</div>
|
|
|
+ <div class="text-xs opacity-90">Tu código: <strong>${code}</strong></div>
|
|
|
+ <div class="text-xs mt-1 opacity-80">Muéstralo al mesero</div>
|
|
|
+ `;
|
|
|
|
|
|
document.body.appendChild(successToast);
|
|
|
|
|
|
- // Remover después de 5 segundos
|
|
|
+ // Remove after 5 seconds
|
|
|
setTimeout(() => {
|
|
|
if (successToast.parentNode) {
|
|
|
successToast.remove();
|
|
|
@@ -754,34 +942,37 @@ function showRewardSuccess(code) {
|
|
|
}, 5000);
|
|
|
}
|
|
|
|
|
|
-// Función para resetear el progreso de recompensa
|
|
|
+/**
|
|
|
+ * Reset reward progress to 0%
|
|
|
+ */
|
|
|
function resetRewardProgress() {
|
|
|
const progressBar = document.getElementById('progressBar');
|
|
|
const progressText = document.getElementById('progressText');
|
|
|
const rewardBtn = document.getElementById('rewardBtn');
|
|
|
|
|
|
- // Resetear a 0%
|
|
|
progressBar.style.width = '0%';
|
|
|
progressText.textContent = '0%';
|
|
|
|
|
|
- // Deshabilitar botón de recompensa
|
|
|
rewardBtn.disabled = true;
|
|
|
rewardBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
|
rewardBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
|
|
|
rewardBtn.textContent = '🎉 ¡Reclamar!';
|
|
|
}
|
|
|
+//--- Inicialización de la Aplicación ---
|
|
|
|
|
|
-//#endregion
|
|
|
-// --- APP initialization ---
|
|
|
+/**
|
|
|
+ * Initialize the application when DOM is loaded
|
|
|
+ */
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
|
const isCacheValid = await checkCache();
|
|
|
if (!isCacheValid) {
|
|
|
- // Si la caché no es válida, redirigir al usuario o mostrar un mensaje
|
|
|
console.warn("Cache is invalid");
|
|
|
}
|
|
|
+
|
|
|
createGlobalLoader();
|
|
|
+ // Uncomment these lines when ready to initialize the full app:
|
|
|
initializeLoginModal();
|
|
|
hideGUI();
|
|
|
- // initializeApp()
|
|
|
-
|
|
|
+ // initializeApp();
|
|
|
});
|
|
|
+
|
Erwin Jacimino