lkzwieder/botino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

routes updated

Browse Source
This commit is contained in:
Lucas Tettamanti
2026-01-18 20:28:27 -03:00
parent 9754347a36
commit b91ece867b
8 changed files with 372 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
public/components/ops-shell.js
View File

@@ -1,10 +1,12 @@
import { on } from "../lib/bus.js";
import { emit, on } from "../lib/bus.js";
import { navigateToView, navigateToItem } from "../lib/router.js";
class OpsShell extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this._currentView = "chat";
this._currentParams = {};
this.shadowRoot.innerHTML = `
<style>
@@ -14,7 +16,7 @@ class OpsShell extends HTMLElement {
header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header h1 { font-size:14px; margin:0; color:var(--muted); font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.nav { display:flex; gap:4px; margin-left:24px; flex-wrap:wrap; }
.nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; }
.nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; text-decoration:none; }
.nav-btn:hover { border-color:var(--blue); color:var(--text); }
.nav-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.spacer { flex:1; }
@@ -38,15 +40,15 @@ class OpsShell extends HTMLElement {
<header>
<h1>Bot Ops Console</h1>
<nav class="nav">
<button class="nav-btn active" data-view="chat">Chat</button>
<button class="nav-btn" data-view="conversations">Conversaciones</button>
<button class="nav-btn" data-view="users">Usuarios</button>
<button class="nav-btn" data-view="products">Productos</button>
<button class="nav-btn" data-view="aliases">Equivalencias</button>
<button class="nav-btn" data-view="crosssell">Cross-sell</button>
<button class="nav-btn" data-view="quantities">Cantidades</button>
<button class="nav-btn" data-view="orders">Pedidos</button>
<button class="nav-btn" data-view="test">Test</button>
<a class="nav-btn active" href="/chat" data-view="chat">Chat</a>
<a class="nav-btn" href="/conversaciones" data-view="conversations">Conversaciones</a>
<a class="nav-btn" href="/usuarios" data-view="users">Usuarios</a>
<a class="nav-btn" href="/productos" data-view="products">Productos</a>
<a class="nav-btn" href="/equivalencias" data-view="aliases">Equivalencias</a>
<a class="nav-btn" href="/crosssell" data-view="crosssell">Cross-sell</a>
<a class="nav-btn" href="/cantidades" data-view="quantities">Cantidades</a>
<a class="nav-btn" href="/pedidos" data-view="orders">Pedidos</a>
<a class="nav-btn" href="/test" data-view="test">Test</a>
</nav>
<div class="spacer"></div>
<div class="status" id="sseStatus">SSE: connecting…</div>
@@ -119,23 +121,34 @@ class OpsShell extends HTMLElement {
// Listen for view switch requests from other components
this._unsubSwitch = on("ui:switchView", ({ view }) => {
if (view) this.setView(view);
if (view) this.setView(view, {}, { updateUrl: true });
});
// Navigation
// Listen for router changes (popstate, initial load)
this._unsubRouter = on("router:change", ({ view, params }) => {
this.setView(view, params, { updateUrl: false });
});
// Navigation - intercept clicks on nav links
const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
for (const btn of navBtns) {
btn.onclick = () => this.setView(btn.dataset.view);
btn.onclick = (e) => {
e.preventDefault();
const view = btn.dataset.view;
this.setView(view, {}, { updateUrl: true });
};
}
}
disconnectedCallback() {
this._unsub?.();
this._unsubSwitch?.();
this._unsubRouter?.();
}
setView(viewName) {
setView(viewName, params = {}, { updateUrl = true } = {}) {
this._currentView = viewName;
this._currentParams = params;
// Update nav buttons
const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
@@ -149,6 +162,18 @@ class OpsShell extends HTMLElement {
const isActive = view.id === `view${viewName.charAt(0).toUpperCase() + viewName.slice(1)}`;
view.classList.toggle("active", isActive);
}
// Update URL if requested
if (updateUrl) {
if (params.id) {
navigateToItem(viewName, params.id);
} else {
navigateToView(viewName);
}
}
// Emit event for components that need to know about route params
emit("router:viewChanged", { view: viewName, params });
}
}