121 lines
3.1 KiB
JavaScript
121 lines
3.1 KiB
JavaScript
import { emit } from "./bus.js";
|
|
|
|
// Mapeo de rutas a vistas
|
|
const ROUTES = [
|
|
{ pattern: /^\/$/, view: "chat", params: [] },
|
|
{ pattern: /^\/chat$/, view: "chat", params: [] },
|
|
{ pattern: /^\/conversaciones$/, view: "conversations", params: [] },
|
|
{ pattern: /^\/usuarios$/, view: "users", params: [] },
|
|
{ pattern: /^\/usuarios\/([^/]+)$/, view: "users", params: ["id"] },
|
|
{ pattern: /^\/productos$/, view: "products", params: [] },
|
|
{ pattern: /^\/productos\/([^/]+)$/, view: "products", params: ["id"] },
|
|
{ pattern: /^\/equivalencias$/, view: "aliases", params: [] },
|
|
{ pattern: /^\/crosssell$/, view: "crosssell", params: [] },
|
|
{ pattern: /^\/crosssell\/([^/]+)$/, view: "crosssell", params: ["id"] },
|
|
{ pattern: /^\/cantidades$/, view: "quantities", params: [] },
|
|
{ pattern: /^\/pedidos$/, view: "orders", params: [] },
|
|
{ pattern: /^\/pedidos\/([^/]+)$/, view: "orders", params: ["id"] },
|
|
{ pattern: /^\/test$/, view: "test", params: [] },
|
|
];
|
|
|
|
// Mapeo de vistas a rutas base (para navegación sin parámetros)
|
|
const VIEW_TO_PATH = {
|
|
chat: "/chat",
|
|
conversations: "/conversaciones",
|
|
users: "/usuarios",
|
|
products: "/productos",
|
|
aliases: "/equivalencias",
|
|
crosssell: "/crosssell",
|
|
quantities: "/cantidades",
|
|
orders: "/pedidos",
|
|
test: "/test",
|
|
};
|
|
|
|
/**
|
|
* Parsea el pathname y devuelve { view, params }
|
|
*/
|
|
export function parseRoute(pathname) {
|
|
const path = pathname || "/";
|
|
|
|
for (const route of ROUTES) {
|
|
const match = path.match(route.pattern);
|
|
if (match) {
|
|
const params = {};
|
|
route.params.forEach((name, i) => {
|
|
params[name] = match[i + 1];
|
|
});
|
|
return { view: route.view, params };
|
|
}
|
|
}
|
|
|
|
// Fallback a chat si no matchea ninguna ruta
|
|
return { view: "chat", params: {} };
|
|
}
|
|
|
|
/**
|
|
* Obtiene la ruta actual del browser
|
|
*/
|
|
export function getCurrentRoute() {
|
|
return parseRoute(window.location.pathname);
|
|
}
|
|
|
|
/**
|
|
* Navega a una nueva ruta sin recargar la página
|
|
*/
|
|
export function navigate(path, { replace = false } = {}) {
|
|
if (replace) {
|
|
history.replaceState(null, "", path);
|
|
} else {
|
|
history.pushState(null, "", path);
|
|
}
|
|
|
|
const route = parseRoute(path);
|
|
emit("router:change", route);
|
|
}
|
|
|
|
/**
|
|
* Navega a una vista (sin parámetros)
|
|
*/
|
|
export function navigateToView(view) {
|
|
const path = VIEW_TO_PATH[view] || "/";
|
|
navigate(path);
|
|
}
|
|
|
|
/**
|
|
* Navega a una vista con un ID específico
|
|
*/
|
|
export function navigateToItem(view, id) {
|
|
const basePath = VIEW_TO_PATH[view];
|
|
if (!basePath) return;
|
|
|
|
const path = id ? `${basePath}/${encodeURIComponent(id)}` : basePath;
|
|
navigate(path);
|
|
}
|
|
|
|
/**
|
|
* Inicializa el router - debe llamarse después de que los componentes estén listos
|
|
*/
|
|
export function initRouter() {
|
|
// Escuchar popstate (botón atrás/adelante del browser)
|
|
window.addEventListener("popstate", () => {
|
|
const route = getCurrentRoute();
|
|
emit("router:change", route);
|
|
});
|
|
|
|
// Emitir la ruta inicial
|
|
const route = getCurrentRoute();
|
|
emit("router:change", route);
|
|
|
|
return route;
|
|
}
|
|
|
|
export const router = {
|
|
parseRoute,
|
|
getCurrentRoute,
|
|
navigate,
|
|
navigateToView,
|
|
navigateToItem,
|
|
initRouter,
|
|
VIEW_TO_PATH,
|
|
};
|