Add ATC Team chat, soft identity, and update Present decks.
Ship team/DM chat with files, avatars, unread alerts, and a first-open identity gate (including Guest); fold Team into Ops desk; clarify Datacenter Engineer vs "Data Plumbers" FDE roles; refresh Present story/tech slides to match. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
root
@@ -2785,7 +2785,7 @@
|
||||
setTimeout(() => {
|
||||
const input = document.getElementById("chat-input");
|
||||
if (input) {
|
||||
input.value = `Give operational context for ${node.name} (${node.ip || "no IP"}). Status ${node.status}, connected=${node.connected}, watts=${node.watts ?? "n/a"}. Suggest next actions for ATC admins.`;
|
||||
input.value = `Give operational context for ${node.name} (${node.ip || "no IP"}). Status ${node.status}, connected=${node.connected}, watts=${node.watts ?? "n/a"}. Suggest next actions for Datacenter Engineers.`;
|
||||
input.focus();
|
||||
}
|
||||
}, 150);
|
||||
@@ -3113,9 +3113,10 @@
|
||||
mode === "reports-drawer" ||
|
||||
mode === "an-context" ||
|
||||
mode === "network-drawer" ||
|
||||
mode === "console-drawer"
|
||||
mode === "console-drawer" ||
|
||||
mode === "team-drawer"
|
||||
) {
|
||||
/* reports.js / ops.js / network.js / console.js also listen */
|
||||
/* reports.js / ops.js / network.js / console.js / team.js also listen */
|
||||
} else closeAi();
|
||||
});
|
||||
$("#btn-ome-console").addEventListener("click", () => {
|
||||
|
||||
+1
-1
@@ -127,7 +127,7 @@
|
||||
}
|
||||
|
||||
function closeOtherDrawers() {
|
||||
["#chat-drawer", "#ops-drawer", "#ai-drawer", "#reports-drawer", "#network-drawer"].forEach((id) => {
|
||||
["#chat-drawer", "#ops-drawer", "#ai-drawer", "#reports-drawer", "#network-drawer", "#team-drawer"].forEach((id) => {
|
||||
const el = $(id);
|
||||
if (el) {
|
||||
el.classList.remove("open");
|
||||
|
||||
+115
-29
@@ -7,7 +7,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/styles.css?v=console2" />
|
||||
<link rel="stylesheet" href="/styles.css?v=team6" />
|
||||
<link rel="icon" href="/dell.png" type="image/png" />
|
||||
<link rel="stylesheet" href="/vendor/xterm/xterm.css?v=home1" />
|
||||
<script>
|
||||
@@ -41,7 +41,25 @@
|
||||
<button type="button" class="btn ghost" id="btn-network" title="Fabric map & ATC racks">Network</button>
|
||||
<button type="button" class="btn console-btn" id="btn-console" title="Live iDRAC console wall">Console</button>
|
||||
<button type="button" class="btn ghost" id="btn-reports" title="Fleet reports & Dell compliance">Reports</button>
|
||||
<button type="button" class="btn ghost" id="btn-ops" title="ATC admin tickets">Ops desk</button>
|
||||
<div class="ops-team-combo" title="Ops desk & team chat">
|
||||
<button type="button" class="btn ghost" id="btn-ops" title="ATC admin tickets">Ops desk</button>
|
||||
<button type="button" class="btn team-btn" id="btn-team" title="ATC team chat · files">
|
||||
<span class="team-btn-label">Team</span>
|
||||
<span class="team-unread hidden" id="team-unread" aria-label="Unread messages">0</span>
|
||||
<span class="team-btn-who hidden" id="team-identity-badge" title="Switch identity"></span>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="btn theme-toggle" id="btn-theme" title="Switch theme" aria-label="Switch light or dark theme">
|
||||
<svg class="theme-ico theme-ico-to-dark" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
|
||||
<path fill="currentColor" d="M12 3a9 9 0 1 0 9 9c0-.3 0-.6-.05-.9A7 7 0 0 1 12 3z"/>
|
||||
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.6"/>
|
||||
</svg>
|
||||
<svg class="theme-ico theme-ico-to-light" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="4" fill="currentColor"/>
|
||||
<path fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
|
||||
d="M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.1 5.1l1.6 1.6M17.3 17.3l1.6 1.6M18.9 5.1l-1.6 1.6M6.7 17.3l-1.6 1.6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="btn present-btn" id="btn-present" title="Customer presentation · mid or fullscreen slides">Present</button>
|
||||
<button type="button" class="btn primary" id="btn-chat">Cockpit Copilot</button>
|
||||
</div>
|
||||
@@ -242,15 +260,6 @@
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<button type="button" class="theme-fab" id="btn-theme" title="Switch theme" aria-label="Switch light or dark theme">
|
||||
<svg class="theme-ico theme-ico-moon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
|
||||
<path fill="currentColor" d="M21 14.3A8.5 8.5 0 0 1 9.7 3 7 7 0 1 0 21 14.3z"/>
|
||||
</svg>
|
||||
<svg class="theme-ico theme-ico-sun" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
|
||||
<path fill="currentColor" d="M12 4.5a1 1 0 0 1 1 1V7a1 1 0 1 1-2 0V5.5a1 1 0 0 1 1-1zm0 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM5.5 11a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h1.5a1 1 0 0 1 1 1zm15.5 0a1 1 0 0 1-1 1H18.5a1 1 0 1 1 0-2H20a1 1 0 0 1 1 1zM6.7 6.7a1 1 0 0 1 0 1.4L5.6 9.2A1 1 0 1 1 4.2 7.8l1.1-1.1a1 1 0 0 1 1.4 0zm11.6 0a1 1 0 0 1 1.4 0l1.1 1.1a1 1 0 1 1-1.4 1.4l-1.1-1.1a1 1 0 0 1 0-1.4zM12 17a1 1 0 0 1 1 1v1.5a1 1 0 1 1-2 0V18a1 1 0 0 1 1-1zm-5.3.3a1 1 0 0 1 1.4 0l1.1 1.1a1 1 0 1 1-1.4 1.4L6.7 18.7a1 1 0 0 1 0-1.4zm11.6 0a1 1 0 0 1 0 1.4l-1.1 1.1a1 1 0 1 1-1.4-1.4l1.1-1.1a1 1 0 0 1 1.4 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Cockpit chat / Copilot -->
|
||||
<div class="drawer chat-copilot" id="chat-drawer" aria-hidden="true">
|
||||
<div class="drawer-head">
|
||||
@@ -301,19 +310,25 @@
|
||||
<img src="/dell.png" alt="Dell" height="22" />
|
||||
<span>ATC Ops desk</span>
|
||||
</div>
|
||||
<button type="button" class="btn ghost" id="btn-ops-close">Close</button>
|
||||
<div class="ops-head-actions">
|
||||
<button type="button" class="btn team-btn compact" id="btn-ops-open-team" title="Open team chat">Team chat</button>
|
||||
<button type="button" class="btn ghost" id="btn-ops-close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ops-layout">
|
||||
<div class="ops-side">
|
||||
<label class="ops-identity">Acting as
|
||||
<select id="ops-actor">
|
||||
<optgroup label="ATC Admins">
|
||||
<option value="jody">Jody van Dongen · Admin</option>
|
||||
<option value="laurens">Laurens Rammers · Admin</option>
|
||||
<optgroup label="Datacenter Engineers">
|
||||
<option value="jody">Jody van Dongen · DC Engineer</option>
|
||||
<option value="laurens">Laurens Rammers · DC Engineer</option>
|
||||
</optgroup>
|
||||
<optgroup label="Data FDE team">
|
||||
<option value="mo">Mohamed El Kadi · Data FDE</option>
|
||||
<option value="bart">Bart Sjerps · Data FDE</option>
|
||||
<option value="mo">Mohamed El Kadi · Data FDE · "Data Plumbers" 😉</option>
|
||||
<option value="bart">Bart Sjerps · Data FDE · "Data Plumbers" 😉</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other">
|
||||
<option value="guest">Guest · Visitor</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</label>
|
||||
@@ -342,20 +357,20 @@
|
||||
<div class="ops-main" id="ops-main">
|
||||
<div class="ops-empty" id="ops-empty">
|
||||
<h3>ATC Ops desk</h3>
|
||||
<p class="ops-intro">Select a ticket or create one to collaborate across ATC admins and Data Forward Deployed Engineers.</p>
|
||||
<p class="ops-intro">Select a ticket or create one to collaborate across Datacenter Engineers and Data Forward Deployed Engineers.</p>
|
||||
<div class="ops-team-grid" id="ops-team-grid">
|
||||
<section class="ops-team-card admin">
|
||||
<h4>ATC Admins</h4>
|
||||
<h4>Datacenter Engineers</h4>
|
||||
<ul>
|
||||
<li><strong>Jody van Dongen</strong><span>OME fleet · racks · warranty / compliance</span></li>
|
||||
<li><strong>Laurens Rammers</strong><span>Datacenter ops · handoffs · escalation</span></li>
|
||||
<li><strong>Jody van Dongen</strong><span>Datacenter Engineer · storage · servers · network · rack & stack · installs</span></li>
|
||||
<li><strong>Laurens Rammers</strong><span>Datacenter Engineer · storage · servers · network · rack & stack · installs</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="ops-team-card fde">
|
||||
<h4>Data Forward Deployed Engineers</h4>
|
||||
<ul>
|
||||
<li><strong>Mohamed El Kadi</strong><span>Data Forward Deployed Engineer · Cockpit · OpenManage AI</span></li>
|
||||
<li><strong>Bart Sjerps</strong><span>Data Forward Deployed Engineer · FDE cluster · AI workloads</span></li>
|
||||
<li><strong>Mohamed El Kadi</strong><span>Data FDE · "Data Plumbers" 😉 · Cockpit · OpenManage AI</span></li>
|
||||
<li><strong>Bart Sjerps</strong><span>Data FDE · "Data Plumbers" 😉 · FDE cluster · AI workloads</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
@@ -363,9 +378,10 @@
|
||||
<h4>Quick actions</h4>
|
||||
<div class="ops-quick-row">
|
||||
<button type="button" class="btn primary" data-ops-quick="ticket">New ticket</button>
|
||||
<button type="button" class="btn" data-ops-quick="to-admin">Handoff to admin</button>
|
||||
<button type="button" class="btn" data-ops-quick="to-admin">Handoff to DC engineer</button>
|
||||
<button type="button" class="btn" data-ops-quick="to-fde">Ask FDE / AI cluster</button>
|
||||
<button type="button" class="btn" data-ops-quick="active">Show active tickets</button>
|
||||
<button type="button" class="btn" data-ops-quick="team">Team chat</button>
|
||||
<button type="button" class="btn" data-ops-quick="chat">Open Copilot</button>
|
||||
<button type="button" class="btn" data-ops-quick="reports">Fleet reports</button>
|
||||
</div>
|
||||
@@ -501,6 +517,72 @@
|
||||
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> & <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
|
||||
</div>
|
||||
|
||||
<!-- ATC Team Chat -->
|
||||
<div class="drawer wide team-drawer" id="team-drawer" aria-hidden="true">
|
||||
<div class="drawer-head team-head">
|
||||
<div class="drawer-brand">
|
||||
<img src="/dell.png" alt="Dell" height="22" />
|
||||
<div>
|
||||
<span class="team-title">Team chat</span>
|
||||
<p class="team-sub">Jody · Laurens · Mo · Bart — messages & files</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-head-actions">
|
||||
<div id="team-presence" class="team-presence"></div>
|
||||
<button type="button" class="btn ghost" id="btn-team-switch">Switch identity</button>
|
||||
<button type="button" class="btn ghost" id="btn-team-close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-body">
|
||||
<aside class="team-rail">
|
||||
<div class="team-room-list" id="team-room-list"></div>
|
||||
</aside>
|
||||
<section class="team-chat-main" id="team-chat-main">
|
||||
<header class="team-chat-head">
|
||||
<div>
|
||||
<h2 id="team-chat-title">ATC Team</h2>
|
||||
<p class="modal-sub" id="team-chat-sub">—</p>
|
||||
</div>
|
||||
<span id="team-typing" class="team-typing"></span>
|
||||
</header>
|
||||
<div class="team-messages" id="team-messages"></div>
|
||||
<form class="team-composer" id="team-form">
|
||||
<label class="team-attach btn ghost compact" title="Attach file">
|
||||
📎
|
||||
<input type="file" id="team-file" multiple hidden />
|
||||
</label>
|
||||
<input type="text" id="team-input" placeholder="Message the team… (drop files anywhere)" autocomplete="off" maxlength="8000" />
|
||||
<button type="submit" class="btn primary">Send</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> & <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
|
||||
</div>
|
||||
|
||||
<div class="identity-gate hidden" id="identity-gate" aria-hidden="true" role="dialog" aria-labelledby="identity-gate-title">
|
||||
<div class="identity-gate-card">
|
||||
<img src="/dell.png" alt="Dell" width="48" height="48" />
|
||||
<p class="modal-kicker">ATC Cockpit</p>
|
||||
<h2 id="identity-gate-title">Who are you?</h2>
|
||||
<p class="modal-sub">Select yourself to continue — Team chat, Ops desk, and handoffs use this identity. Guests welcome.</p>
|
||||
<div class="identity-gate-grid" id="identity-gate-grid"></div>
|
||||
<div class="identity-avatar-row" id="identity-avatar-row">
|
||||
<div class="id-avatar-preview" id="identity-avatar-preview" aria-hidden="true">
|
||||
<img id="identity-avatar-img" alt="" hidden />
|
||||
<span id="identity-avatar-initials">?</span>
|
||||
</div>
|
||||
<div class="identity-avatar-copy">
|
||||
<strong id="identity-avatar-label">Profile photo</strong>
|
||||
<p class="modal-sub">JPG, PNG, WebP or GIF · max 5 MB</p>
|
||||
</div>
|
||||
<label class="btn ghost compact" id="identity-avatar-btn">
|
||||
Upload photo
|
||||
<input type="file" id="identity-avatar-file" accept="image/jpeg,image/png,image/webp,image/gif" hidden />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scrim" id="scrim"></div>
|
||||
<div class="node-tip hidden" id="node-tip" role="tooltip"></div>
|
||||
|
||||
@@ -512,7 +594,7 @@
|
||||
<div>
|
||||
<p class="modal-kicker">ATC Ops desk</p>
|
||||
<h2 id="ticket-modal-title">Create ticket</h2>
|
||||
<p class="modal-sub">Handoff between ATC admins (Jody / Laurens) and Data FDEs (Mo / Bart)</p>
|
||||
<p class="modal-sub">Handoff between Datacenter Engineers (Jody / Laurens) and Data FDEs (Mo / Bart)</p>
|
||||
</div>
|
||||
</div>
|
||||
<form id="ticket-form" class="ticket-form">
|
||||
@@ -530,7 +612,7 @@
|
||||
</label>
|
||||
<label>Assign to
|
||||
<select id="ticket-assignee">
|
||||
<optgroup label="ATC Admins">
|
||||
<optgroup label="Datacenter Engineers">
|
||||
<option value="jody">Jody van Dongen</option>
|
||||
<option value="laurens">Laurens Rammers</option>
|
||||
</optgroup>
|
||||
@@ -538,6 +620,9 @@
|
||||
<option value="mo">Mohamed El Kadi</option>
|
||||
<option value="bart">Bart Sjerps</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other">
|
||||
<option value="guest">Guest</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
@@ -714,13 +799,14 @@
|
||||
|
||||
<script src="/vendor/xterm/xterm.min.js?v=home1"></script>
|
||||
<script src="/vendor/xterm/xterm-addon-fit.min.js?v=home1"></script>
|
||||
<script src="/app.js?v=power4"></script>
|
||||
<script src="/ops.js?v=opsfde2"></script>
|
||||
<script src="/app.js?v=power5"></script>
|
||||
<script src="/ops.js?v=opsfde6"></script>
|
||||
<script src="/ssh.js?v=fabric4"></script>
|
||||
<script src="/rdp.js?v=fabric4"></script>
|
||||
<script src="/reports.js?v=anctx1"></script>
|
||||
<script src="/network.js?v=vlanall1"></script>
|
||||
<script src="/console.js?v=console2"></script>
|
||||
<script src="/present.js?v=present17"></script>
|
||||
<script src="/team.js?v=team6"></script>
|
||||
<script src="/present.js?v=present20"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -95,7 +95,7 @@
|
||||
const drawer = $("#network-drawer");
|
||||
const scrim = $("#scrim");
|
||||
if (!drawer) return;
|
||||
["#chat-drawer", "#ops-drawer", "#ai-drawer", "#reports-drawer", "#console-drawer"].forEach((id) => {
|
||||
["#chat-drawer", "#ops-drawer", "#ai-drawer", "#reports-drawer", "#console-drawer", "#team-drawer"].forEach((id) => {
|
||||
const el = $(id);
|
||||
if (el) {
|
||||
el.classList.remove("open");
|
||||
|
||||
@@ -44,10 +44,11 @@
|
||||
let gpuData = null;
|
||||
let chatModelsLoaded = false;
|
||||
let opsUsers = [
|
||||
{ id: "jody", name: "Jody van Dongen", team: "admin", role: "ATC Datacenter Admin" },
|
||||
{ id: "laurens", name: "Laurens Rammers", team: "admin", role: "ATC Datacenter Admin" },
|
||||
{ id: "mo", name: "Mohamed El Kadi", team: "fde", role: "Data Forward Deployed Engineer" },
|
||||
{ id: "bart", name: "Bart Sjerps", team: "fde", role: "Data Forward Deployed Engineer" },
|
||||
{ id: "jody", name: "Jody van Dongen", team: "admin", role: "Datacenter Engineer" },
|
||||
{ id: "laurens", name: "Laurens Rammers", team: "admin", role: "Datacenter Engineer" },
|
||||
{ id: "mo", name: "Mohamed El Kadi", team: "fde", role: "Data Forward Deployed Engineer · \"Data Plumbers\" 😉" },
|
||||
{ id: "bart", name: "Bart Sjerps", team: "fde", role: "Data Forward Deployed Engineer · \"Data Plumbers\" 😉" },
|
||||
{ id: "guest", name: "Guest", team: "guest", role: "Visitor" },
|
||||
];
|
||||
|
||||
function selectedChatModel() {
|
||||
@@ -98,16 +99,19 @@
|
||||
if (me === "laurens") return "jody";
|
||||
if (me === "mo") return "bart";
|
||||
if (me === "bart") return "mo";
|
||||
if (me === "guest") return "jody";
|
||||
return "jody";
|
||||
}
|
||||
|
||||
function assigneeOptionsHtml(selected) {
|
||||
const admins = opsUsers.filter((u) => u.team === "admin");
|
||||
const fde = opsUsers.filter((u) => u.team === "fde");
|
||||
const guests = opsUsers.filter((u) => u.team === "guest");
|
||||
const opt = (u) =>
|
||||
`<option value="${u.id}" ${u.id === selected ? "selected" : ""}>${escape(u.name)}</option>`;
|
||||
return `<optgroup label="ATC Admins">${admins.map(opt).join("")}</optgroup>
|
||||
<optgroup label="FDE team">${fde.map(opt).join("")}</optgroup>`;
|
||||
return `<optgroup label="Datacenter Engineers">${admins.map(opt).join("")}</optgroup>
|
||||
<optgroup label="FDE team">${fde.map(opt).join("")}</optgroup>
|
||||
${guests.length ? `<optgroup label="Other">${guests.map(opt).join("")}</optgroup>` : ""}`;
|
||||
}
|
||||
|
||||
async function loadOpsUsers() {
|
||||
@@ -856,7 +860,7 @@
|
||||
((node && node.ip) || (a && a.ip) || "no-ip") +
|
||||
"): " +
|
||||
it.message +
|
||||
". Suggest next steps for ATC admins Jody and Laurens."
|
||||
". Suggest next steps for Datacenter Engineers Jody and Laurens."
|
||||
);
|
||||
});
|
||||
$("#triage-inspect")?.addEventListener("click", () => {
|
||||
@@ -952,6 +956,9 @@
|
||||
activeTicketId = null;
|
||||
});
|
||||
$("#btn-ops-close")?.addEventListener("click", closeDrawers);
|
||||
$("#btn-ops-open-team")?.addEventListener("click", () => {
|
||||
window.cockpitTeam?.open?.();
|
||||
});
|
||||
$("#btn-ops-refresh")?.addEventListener("click", () => loadTickets().catch((e) => alert(e.message)));
|
||||
|
||||
$("#ops-quick")?.addEventListener("click", (e) => {
|
||||
@@ -962,10 +969,14 @@
|
||||
openTicketModal();
|
||||
return;
|
||||
}
|
||||
if (q === "team") {
|
||||
window.cockpitTeam?.open?.();
|
||||
return;
|
||||
}
|
||||
if (q === "to-admin") {
|
||||
openTicketModal({
|
||||
title: "Handoff to ATC admin",
|
||||
body: "Context for Jody / Laurens:\n\n",
|
||||
title: "Handoff to Datacenter Engineer",
|
||||
body: "Context for Jody / Laurens (storage · servers · network · rack & stack · installs):\n\n",
|
||||
assignee: "jody",
|
||||
priority: "normal",
|
||||
});
|
||||
@@ -974,7 +985,7 @@
|
||||
if (q === "to-fde") {
|
||||
openTicketModal({
|
||||
title: "Data FDE / AI cluster request",
|
||||
body: "Request for Mohamed El Kadi / Bart Sjerps (Data Forward Deployed Engineers · AI workloads):\n\n",
|
||||
body: "Request for Mohamed El Kadi / Bart Sjerps (Data FDEs · \"Data Plumbers\" 😉 · AI workloads):\n\n",
|
||||
assignee: "mo",
|
||||
priority: "normal",
|
||||
});
|
||||
|
||||
+47
-26
@@ -28,16 +28,17 @@
|
||||
title: "What we will cover",
|
||||
anim: "rise",
|
||||
html: `
|
||||
<p class="ps-lead">ATC admins asked us to help them see OME data faster and explain it with AI. This briefing shows the result — and why a cockpit like this adds value.</p>
|
||||
<p class="ps-lead">Datacenter Engineers asked us to help them see OME data faster and explain it with AI. This briefing shows the result — and why a cockpit like this adds value.</p>
|
||||
<ol class="ps-steps ps-stagger">
|
||||
<li><strong>Why</strong> — the gap around OME and why AI alone is not enough.</li>
|
||||
<li><strong>Architecture</strong> — one design: Browser → Cockpit BFF → OME / AI (with logos).</li>
|
||||
<li><strong>Apps</strong> — map, network, reports, <em>Console wall</em>, ops desk, copilots.</li>
|
||||
<li><strong>Apps</strong> — map, network, reports, Console wall, Ops + Team chat, copilots.</li>
|
||||
<li><strong>Remote ops</strong> — power via OME→iDRAC and live consoles in-panel.</li>
|
||||
<li><strong>People</strong> — who asked, who built, who runs it.</li>
|
||||
<li><strong>Team</strong> — soft identity, chat, files, avatars, live unread alerts.</li>
|
||||
<li><strong>People</strong> — Datacenter Engineers & Data FDEs (<em>"Data Plumbers"</em> 😉).</li>
|
||||
<li><strong>Value</strong> — what customers can take away.</li>
|
||||
</ol>
|
||||
<p class="ps-sub">Requested by <strong>Jody van Dongen</strong> & <strong>Laurens Rammers</strong> · delivered by the FDE team (<strong>Mohamed El Kadi</strong> & <strong>Bart Sjerps</strong>).</p>`,
|
||||
<p class="ps-sub">Requested by <strong>Jody van Dongen</strong> & <strong>Laurens Rammers</strong> · delivered by the FDE team (<strong>Mo</strong> & <strong>Bart</strong> — <em>"Data Plumbers"</em> 😉).</p>`,
|
||||
},
|
||||
{
|
||||
id: "problem",
|
||||
@@ -51,7 +52,7 @@
|
||||
<div class="ps-card"><h4>Context loss</h4><p>Warranty, firmware, and offline state are related — rarely one story.</p></div>
|
||||
<div class="ps-card"><h4>Ungrounded AI</h4><p>Generic chatbots guess. Useful AI must start from OME.</p></div>
|
||||
</div>
|
||||
<p class="ps-sub">Jody and Laurens asked the FDE team to assist — build a practical ops lens on top of OME, not replace OME.</p>`,
|
||||
<p class="ps-sub">Jody and Laurens (Datacenter Engineers) asked the FDE team to assist — build a practical ops lens on top of OME, not replace OME.</p>`,
|
||||
},
|
||||
{
|
||||
id: "value",
|
||||
@@ -63,8 +64,8 @@
|
||||
<div class="ps-card"><h4>One Service Tag story</h4><p>Map, inventory, compliance, warranty, fabric, and tickets around the same ST.</p></div>
|
||||
<div class="ps-card"><h4>Remote ops in UI</h4><p>Power via OME jobs · live iDRAC Console wall (4/8) without tab sprawl.</p></div>
|
||||
<div class="ps-card"><h4>AI that cites the fleet</h4><p>Copilot answers from live OME facts — or says it does not know.</p></div>
|
||||
<div class="ps-card"><h4>Faster briefings</h4><p>Click a chart → named systems → hand off in Ops desk.</p></div>
|
||||
<div class="ps-card"><h4>Admin ↔ Data FDE</h4><p>Clear roles: ATC admins own the estate; Data FDEs deliver the AI/ops surface.</p></div>
|
||||
<div class="ps-card"><h4>Ops + Team chat</h4><p>Tickets and live team / DM chat with files, avatars, and unread alerts.</p></div>
|
||||
<div class="ps-card"><h4>DC Engineer ↔ Data FDE</h4><p>Jody & Laurens own the estate; Mo & Bart (<em>"Data Plumbers"</em> 😉) deliver the surface.</p></div>
|
||||
<div class="ps-card"><h4>Copyable pattern</h4><p>OME API + BFF + grounded AI — a blueprint, not a Dell SKU.</p></div>
|
||||
</div>`,
|
||||
},
|
||||
@@ -117,7 +118,7 @@
|
||||
<div class="ps-arch-node app"><strong>Console</strong><span>iDRAC wall</span></div>
|
||||
<div class="ps-arch-node app core-app"><strong>Cockpit UI</strong><span>Drawers · KPIs</span></div>
|
||||
<div class="ps-arch-node app"><strong>Network</strong><span>Fabric · Racks</span></div>
|
||||
<div class="ps-arch-node app"><strong>Ops / AI</strong><span>Tickets · Copilot</span></div>
|
||||
<div class="ps-arch-node app"><strong>Ops / Team</strong><span>Tickets · chat</span></div>
|
||||
</div>
|
||||
<div class="ps-arch-layer mid">
|
||||
<div class="ps-arch-node bff">
|
||||
@@ -163,10 +164,10 @@
|
||||
<div class="ps-app"><i></i><strong>Console wall</strong><span>4 / 8 live iDRAC embeds · drag</span></div>
|
||||
<div class="ps-app"><i></i><strong>Network</strong><span>Fabric · 42U racks · VLANs</span></div>
|
||||
<div class="ps-app"><i></i><strong>Reports</strong><span>Compliance · warranty analytics</span></div>
|
||||
<div class="ps-app"><i></i><strong>Ops desk</strong><span>Admin ↔ Data FDE tickets</span></div>
|
||||
<div class="ps-app"><i></i><strong>Ops + Team</strong><span>Tickets · chat · files · avatars</span></div>
|
||||
<div class="ps-app"><i></i><strong>Copilot</strong><span>Grounded chat on Service Tags</span></div>
|
||||
</div>
|
||||
<p class="ps-sub">One join key everywhere: <strong>Service Tag</strong>. Power and console actions ride OME → iDRAC — not a second inventory.</p>`,
|
||||
<p class="ps-sub">One join key everywhere: <strong>Service Tag</strong>. Soft identity on open so Jody, Laurens, Mo, Bart (or Guest) act as themselves.</p>`,
|
||||
},
|
||||
{
|
||||
id: "console-wall",
|
||||
@@ -200,6 +201,22 @@
|
||||
</div>
|
||||
<p class="ps-sub">Demo power with care — production change windows still belong in official OME / iDRAC process.</p>`,
|
||||
},
|
||||
{
|
||||
id: "team-chat",
|
||||
kicker: "Collaboration",
|
||||
title: "Team chat · who you are, what you share",
|
||||
anim: "rise",
|
||||
html: `
|
||||
<p class="ps-lead">First popup on open: pick yourself (or Guest). Then Ops desk and Team chat share one soft identity — tickets, DMs, and files stay attributable without SSO.</p>
|
||||
<div class="ps-grid3">
|
||||
<div class="ps-card"><h4>Identity gate</h4><p>Jody · Laurens · Mo · Bart · Guest — profile photo upload optional.</p></div>
|
||||
<div class="ps-card"><h4>Team + DMs</h4><p>Shared ATC room and 1:1 chats · WebSocket live presence.</p></div>
|
||||
<div class="ps-card"><h4>Files & avatars</h4><p>Drop files into chat · avatars on bubbles, presence, and the Team chip.</p></div>
|
||||
<div class="ps-card"><h4>Unread alerts</h4><p>Badge on Ops|Team · room counters · browser notify when the tab is in the background.</p></div>
|
||||
<div class="ps-card"><h4>Ops|Team combo</h4><p>One topbar control: tickets left, Team + who-you-are right — KPIs keep a single row.</p></div>
|
||||
<div class="ps-card"><h4>Roles that match reality</h4><p>Datacenter Engineers own rack & stack; FDEs are <em>"Data Plumbers"</em> 😉.</p></div>
|
||||
</div>`,
|
||||
},
|
||||
{
|
||||
id: "ai",
|
||||
kicker: "AI + OME",
|
||||
@@ -219,24 +236,24 @@
|
||||
{
|
||||
id: "origin",
|
||||
kicker: "How this started",
|
||||
title: "Admins set the need · Data FDEs delivered the surface",
|
||||
title: "Datacenter Engineers set the need · Data FDEs delivered the surface",
|
||||
anim: "rise",
|
||||
html: `
|
||||
<p class="ps-lead"><strong>Jody van Dongen</strong> and <strong>Laurens Rammers</strong> defined the operational need and asked the FDE team to help. Together they produced a cockpit that sits on OME: topology, reports, network context, tickets, and AI — for ATC use and customer conversations, explicitly not a product SKU.</p>
|
||||
<p class="ps-lead"><strong>Jody van Dongen</strong> and <strong>Laurens Rammers</strong> (Datacenter Engineers — storage, servers, network, rack & stack, installs) defined the operational need and asked the FDE team to help. Together they produced a cockpit that sits on OME: topology, reports, network context, tickets, and AI — for ATC use and customer conversations, explicitly not a product SKU.</p>
|
||||
<div class="ps-cols">
|
||||
<div>
|
||||
<h4>ATC Admins · the ask</h4>
|
||||
<h4>Datacenter Engineers · the ask</h4>
|
||||
<ul class="ps-bullets ps-stagger">
|
||||
<li><strong>Jody van Dongen</strong> — fleet, racks, warranty / compliance</li>
|
||||
<li><strong>Laurens Rammers</strong> — datacenter ops & escalation</li>
|
||||
<li><strong>Jody van Dongen</strong> — storage, servers, network, rack & stack, installs</li>
|
||||
<li><strong>Laurens Rammers</strong> — storage, servers, network, rack & stack, installs</li>
|
||||
<li>Better visibility and faster OME storytelling</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Data FDEs · the delivery</h4>
|
||||
<ul class="ps-bullets ps-stagger">
|
||||
<li><strong>Mohamed El Kadi</strong> — cockpit UX/API, OME integration, Copilot, Present</li>
|
||||
<li><strong>Bart Sjerps</strong> — FDE cluster, Open WebUI / AI workloads, hosting</li>
|
||||
<li><strong>Mohamed El Kadi</strong> — cockpit UX/API, OME integration, Copilot, Present · <em>"Data Plumbers"</em> 😉</li>
|
||||
<li><strong>Bart Sjerps</strong> — FDE cluster, Open WebUI / AI workloads, hosting · <em>"Data Plumbers"</em> 😉</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -252,7 +269,7 @@
|
||||
<div class="ps-card"><h4>Clarity</h4><p>One place for connectivity, compliance, warranty, and hardware depth.</p></div>
|
||||
<div class="ps-card"><h4>Credibility</h4><p>Claims trace to a Service Tag from OME.</p></div>
|
||||
<div class="ps-card"><h4>Speed</h4><p>AI drafts explanations; humans own change windows.</p></div>
|
||||
<div class="ps-card"><h4>Collaboration</h4><p>Admins and Data FDEs share one Ops language.</p></div>
|
||||
<div class="ps-card"><h4>Collaboration</h4><p>Datacenter Engineers and Data FDEs (<em>"Data Plumbers"</em> 😉) share Ops + Team chat.</p></div>
|
||||
<div class="ps-card"><h4>Pattern</h4><p>OME + Docker BFF + grounded AI — repeatable.</p></div>
|
||||
<div class="ps-card"><h4>Honesty</h4><p>Demo power with an explicit non-product disclaimer.</p></div>
|
||||
</div>`,
|
||||
@@ -264,10 +281,11 @@
|
||||
anim: "zoom",
|
||||
html: `
|
||||
<ol class="ps-steps ps-stagger">
|
||||
<li>Pick yourself on the identity gate (or Guest) when the UI opens.</li>
|
||||
<li>Pick a Service Tag on the map and open the inspector.</li>
|
||||
<li>Open <strong>Console</strong> — Auto-fill live iDRACs (4 or 8 screens).</li>
|
||||
<li>From Servers KPI: Power on a cold node · open iDRAC console in-panel.</li>
|
||||
<li>Open Reports · Analytics and click a colored segment.</li>
|
||||
<li>Open <strong>Ops|Team</strong> — create a ticket, then send a Team or DM message with a file.</li>
|
||||
<li>Ask Copilot a question that must cite Service Tags.</li>
|
||||
<li>Switch to <strong>Technical architecture</strong> for API and trust-boundary depth.</li>
|
||||
</ol>
|
||||
@@ -308,8 +326,9 @@
|
||||
<li>AI completion path</li>
|
||||
<li>Portal containers & key <code>/api/*</code> contracts</li>
|
||||
<li>iDRAC proxy · power jobs · Console wall</li>
|
||||
<li>Team chat · soft identity · WebSocket · file / avatar store</li>
|
||||
</ol>
|
||||
<p class="ps-sub">Delivered for ATC admins Jody & Laurens by Data FDEs Mo & Bart.</p>`,
|
||||
<p class="ps-sub">Delivered for Datacenter Engineers Jody & Laurens by Data FDEs Mo & Bart (<em>"Data Plumbers"</em> 😉).</p>`,
|
||||
},
|
||||
{
|
||||
id: "arch-design",
|
||||
@@ -360,7 +379,7 @@
|
||||
<div class="ps-arch-node app"><strong>Console</strong><span>iDRAC wall</span></div>
|
||||
<div class="ps-arch-node app core-app"><strong>Cockpit UI</strong><span>Drawers · KPIs</span></div>
|
||||
<div class="ps-arch-node app"><strong>Network</strong><span>Fabric · Racks</span></div>
|
||||
<div class="ps-arch-node app"><strong>Ops / AI</strong><span>Tickets · Copilot</span></div>
|
||||
<div class="ps-arch-node app"><strong>Ops / Team</strong><span>Tickets · chat</span></div>
|
||||
</div>
|
||||
<div class="ps-arch-layer mid">
|
||||
<div class="ps-arch-node bff">
|
||||
@@ -496,7 +515,7 @@
|
||||
<div class="ps-card tech"><h4>/api/fleet</h4><p>Cached device graph for canvas & KPIs.</p></div>
|
||||
<div class="ps-card tech"><h4>/api/devices/…/power</h4><p>OME JobService POWER_CONTROL · on / off / cycle.</p></div>
|
||||
<div class="ps-card tech"><h4>/api/idrac-proxy/…</h4><p>Same-origin HTML + WebSocket bridge · strips XFO.</p></div>
|
||||
<div class="ps-card tech"><h4>/api/reports/*</h4><p>Analytics, firmware, warranty, brief.</p></div>
|
||||
<div class="ps-card tech"><h4>/api/team/* · /ws/team-chat</h4><p>Rooms, DMs, files, avatars · live presence & messages.</p></div>
|
||||
<div class="ps-card tech"><h4>/api/chat · /api/models</h4><p>Grounded completions · model list.</p></div>
|
||||
<div class="ps-card tech"><h4>/api/network/*</h4><p>Fabric ports · racks · VLANs.</p></div>
|
||||
</div>`,
|
||||
@@ -531,12 +550,14 @@
|
||||
<h4 style="margin-top:0.85rem">Cockpit-local (write)</h4>
|
||||
<ul class="ps-bullets ps-stagger">
|
||||
<li>Fabric / racks / tickets / presentation decks</li>
|
||||
<li>Team chat messages, files, and profile avatars (<code>/data/team-chat</code>)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Security notes</h4>
|
||||
<ul class="ps-bullets ps-stagger">
|
||||
<li>Secrets only in portal environment variables</li>
|
||||
<li>Soft identity is localStorage (ops convenience — not SSO)</li>
|
||||
<li>iDRAC proxy is an ops convenience — credentials stay with the user</li>
|
||||
<li>Production change windows still belong in official OME / iDRAC process</li>
|
||||
</ul>
|
||||
@@ -552,7 +573,7 @@
|
||||
<ol class="ps-steps ps-stagger">
|
||||
<li>Return to the map and pick a Service Tag.</li>
|
||||
<li>Open <strong>Console</strong> and drop two iDRACs onto the wall.</li>
|
||||
<li>Open Reports and click a compliance segment.</li>
|
||||
<li>Open <strong>Ops|Team</strong> — ticket + a chat message with unread badge.</li>
|
||||
<li>Ask Copilot a question that must cite that ST.</li>
|
||||
<li>Use <strong>Customer story</strong> for business / ops audiences.</li>
|
||||
</ol>
|
||||
@@ -560,20 +581,20 @@
|
||||
},
|
||||
];
|
||||
|
||||
const BUILTIN_VERSION = 9;
|
||||
const BUILTIN_VERSION = 10;
|
||||
|
||||
const BUILTIN_DECKS = [
|
||||
{
|
||||
id: "story",
|
||||
name: "Customer story",
|
||||
description: "Customer briefing — ask, Console wall, power, architecture, value",
|
||||
description: "Customer briefing — Console, power, Team chat, roles, value",
|
||||
builtin: true,
|
||||
slides: structuredClone(STORY_SLIDES),
|
||||
},
|
||||
{
|
||||
id: "technical",
|
||||
name: "Technical architecture",
|
||||
description: "Engineer deep dive — design, BFF, APIs, trust",
|
||||
description: "Engineer deep dive — design, BFF, APIs, Team chat, trust",
|
||||
builtin: true,
|
||||
slides: structuredClone(TECH_SLIDES),
|
||||
},
|
||||
|
||||
+1
-1
@@ -77,7 +77,7 @@
|
||||
const drawer = $("#reports-drawer");
|
||||
const scrim = $("#scrim");
|
||||
if (!drawer) return;
|
||||
["#chat-drawer", "#ops-drawer", "#ai-drawer", "#network-drawer", "#console-drawer"].forEach((id) => {
|
||||
["#chat-drawer", "#ops-drawer", "#ai-drawer", "#network-drawer", "#console-drawer", "#team-drawer"].forEach((id) => {
|
||||
const el = $(id);
|
||||
if (el) {
|
||||
el.classList.remove("open");
|
||||
|
||||
+530
-55
@@ -146,22 +146,24 @@ button { cursor: pointer; }
|
||||
.kpi-strip {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
overflow: visible;
|
||||
padding: 0.35rem 0;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25rem;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0.2rem 0;
|
||||
min-width: 0;
|
||||
justify-content: flex-start;
|
||||
align-content: center;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.kpi {
|
||||
appearance: none;
|
||||
border: 1px solid transparent;
|
||||
background: rgba(0, 118, 206, 0.12);
|
||||
border-radius: 6px;
|
||||
padding: 0.28rem 0.55rem;
|
||||
padding: 0.22rem 0.42rem;
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
flex: 0 0 auto;
|
||||
text-align: left;
|
||||
transition: border-color 0.15s, background 0.15s, transform 0.15s;
|
||||
}
|
||||
@@ -5233,58 +5235,47 @@ html[data-theme="light"] .rs-prod-meta strong { color: #122033; }
|
||||
html[data-theme="light"] .rs-prod-meta em,
|
||||
html[data-theme="light"] .rs-lib-hint { color: #4a5d72; }
|
||||
|
||||
/* Theme FAB — parks left while Full Inventory is open (inspector is right) */
|
||||
.theme-fab {
|
||||
position: fixed;
|
||||
right: 14px;
|
||||
left: auto;
|
||||
bottom: 48px;
|
||||
z-index: 9000;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.35);
|
||||
background: linear-gradient(145deg, #00a8e8, #0076ce);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow:
|
||||
0 4px 14px rgba(0, 118, 206, 0.45),
|
||||
0 0 0 3px rgba(0, 168, 232, 0.2);
|
||||
cursor: pointer;
|
||||
/* Theme toggle — in topbar (FAB removed so it no longer blocks the map) */
|
||||
.btn.theme-toggle {
|
||||
width: 2.15rem;
|
||||
min-width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
padding: 0;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, left 0.2s ease, right 0.2s ease, opacity 0.15s ease;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
body.inv-open .theme-fab {
|
||||
right: auto;
|
||||
left: 14px;
|
||||
bottom: 56px;
|
||||
opacity: 0.92;
|
||||
box-shadow:
|
||||
0 4px 14px rgba(255, 154, 60, 0.35),
|
||||
0 0 0 3px rgba(255, 154, 60, 0.18);
|
||||
border-color: rgba(255, 184, 77, 0.55);
|
||||
}
|
||||
.theme-fab:hover {
|
||||
border-color: #fff;
|
||||
.btn.theme-toggle .theme-ico { display: none; }
|
||||
html[data-theme="light"] .btn.theme-toggle .theme-ico-to-dark { display: block; }
|
||||
html[data-theme="dark"] .btn.theme-toggle .theme-ico-to-light,
|
||||
html:not([data-theme]) .btn.theme-toggle .theme-ico-to-light { display: block; }
|
||||
.theme-fab { display: none !important; }
|
||||
|
||||
.team-unread {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
min-width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
padding: 0 0.28rem;
|
||||
border-radius: 999px;
|
||||
background: #e53935;
|
||||
color: #fff;
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
filter: brightness(1.08);
|
||||
box-shadow:
|
||||
0 8px 20px rgba(0, 118, 206, 0.55),
|
||||
0 0 0 4px rgba(0, 168, 232, 0.28);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
font-family: var(--mono);
|
||||
line-height: 1;
|
||||
}
|
||||
.theme-fab .theme-ico { display: none; }
|
||||
html[data-theme="light"] .theme-fab .theme-ico-moon { display: block; }
|
||||
html[data-theme="dark"] .theme-fab .theme-ico-sun,
|
||||
html:not([data-theme]) .theme-fab .theme-ico-sun { display: block; }
|
||||
html[data-theme="light"] .theme-fab {
|
||||
background: linear-gradient(145deg, #1aa3e8, #0062b0);
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0 4px 14px rgba(0, 98, 176, 0.35),
|
||||
0 0 0 3px rgba(0, 118, 206, 0.15);
|
||||
.team-unread.hidden { display: none !important; }
|
||||
.ops-team-combo.has-unread {
|
||||
box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.55);
|
||||
}
|
||||
@keyframes team-pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55); }
|
||||
50% { box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.15); }
|
||||
}
|
||||
.ops-team-combo.has-unread.pulse {
|
||||
animation: team-pulse 1.2s ease 2;
|
||||
}
|
||||
|
||||
/* Present button + deck */
|
||||
@@ -5553,7 +5544,7 @@ html[data-theme="light"] .theme-fab {
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
background: rgba(0,0,0,0.35);
|
||||
}
|
||||
body.present-open .theme-fab { opacity: 0; pointer-events: none; }
|
||||
body.present-open .theme-fab { display: none !important; }
|
||||
.network-drawer.drawer,
|
||||
.reports-drawer.drawer {
|
||||
display: flex;
|
||||
@@ -8812,3 +8803,487 @@ html[data-theme="light"] .ctc-name { color: #102033; }
|
||||
min-height: 0;
|
||||
}
|
||||
.console-fleet-card { cursor: grab; }
|
||||
|
||||
/* ===== ATC Team chat + identity gate ===== */
|
||||
.ops-head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
.ops-team-combo {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(45, 212, 191, 0.45);
|
||||
background: rgba(14, 116, 144, 0.12);
|
||||
}
|
||||
html[data-theme="light"] .ops-team-combo {
|
||||
border-color: rgba(0, 118, 206, 0.35);
|
||||
background: rgba(0, 118, 206, 0.06);
|
||||
}
|
||||
html[data-theme="light"] .ops-team-combo #btn-ops {
|
||||
border-right-color: rgba(0, 118, 206, 0.25);
|
||||
color: var(--text);
|
||||
}
|
||||
.ops-team-combo .btn {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ops-team-combo #btn-ops {
|
||||
border-right: 1px solid rgba(45, 212, 191, 0.35);
|
||||
background: transparent;
|
||||
padding-inline: 0.65rem;
|
||||
}
|
||||
.ops-team-combo #btn-ops:hover {
|
||||
background: rgba(45, 212, 191, 0.12);
|
||||
}
|
||||
.ops-team-combo .btn.team-btn {
|
||||
background: linear-gradient(135deg, rgba(14, 116, 144, 0.35), rgba(45, 212, 191, 0.45));
|
||||
border-color: transparent;
|
||||
color: #d7fffa;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding-right: 0.35rem;
|
||||
}
|
||||
.team-btn-label { padding-left: 0.15rem; }
|
||||
.team-btn-who {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.28rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 500;
|
||||
padding: 0.12rem 0.4rem 0.12rem 0.25rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.28);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
max-width: 6.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.team-btn-who.hidden { display: none !important; }
|
||||
.team-btn-who:hover {
|
||||
border-color: rgba(45, 212, 191, 0.55);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.team-btn-who strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #e8fffb;
|
||||
}
|
||||
.tib-av {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.tib-av img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.tib-dot {
|
||||
width: 0.35rem;
|
||||
height: 0.35rem;
|
||||
border-radius: 50%;
|
||||
background: #3dffa0;
|
||||
box-shadow: 0 0 6px #3dffa0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tib-dot.admin { background: #ffb06a; box-shadow: 0 0 6px #ffb06a; }
|
||||
.tib-dot.guest { background: #9eb4c8; box-shadow: none; }
|
||||
|
||||
.btn.team-btn {
|
||||
background: linear-gradient(135deg, rgba(14, 116, 144, 0.35), rgba(45, 212, 191, 0.45));
|
||||
border-color: rgba(45, 212, 191, 0.65);
|
||||
color: #d7fffa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.identity-gate {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 120;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.5rem;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(0, 168, 232, 0.2), transparent 55%),
|
||||
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(45, 212, 191, 0.12), transparent 50%),
|
||||
rgba(4, 10, 18, 0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.identity-gate.hidden { display: none !important; }
|
||||
.identity-gate-card {
|
||||
width: min(820px, 96vw);
|
||||
background: rgba(8, 16, 28, 0.95);
|
||||
border: 1px solid rgba(45, 212, 191, 0.35);
|
||||
border-radius: 18px;
|
||||
padding: 1.5rem 1.6rem 1.75rem;
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
|
||||
text-align: center;
|
||||
}
|
||||
.identity-gate-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.1rem;
|
||||
text-align: left;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.identity-gate-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.id-card.guest {
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-style: dashed;
|
||||
}
|
||||
.id-card.team-guest .id-kicker { color: #a8b8c8; }
|
||||
body.identity-locked {
|
||||
overflow: hidden;
|
||||
}
|
||||
.id-card {
|
||||
appearance: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.28);
|
||||
color: inherit;
|
||||
border-radius: 14px;
|
||||
padding: 0.9rem 1rem 0.9rem 4.1rem;
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
.id-card.selected {
|
||||
border-color: rgba(45, 212, 191, 0.7);
|
||||
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.35);
|
||||
}
|
||||
.id-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(45, 212, 191, 0.55);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.id-card.team-admin:hover { border-color: rgba(255, 154, 60, 0.65); }
|
||||
.id-av {
|
||||
position: absolute;
|
||||
left: 0.85rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: rgba(45, 212, 191, 0.15);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
.id-av img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.id-av.fallback img { display: none; }
|
||||
.id-av-fallback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
place-items: center;
|
||||
font-weight: 700;
|
||||
color: #7ee8d8;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.id-av.fallback .id-av-fallback { display: grid; }
|
||||
.id-kicker {
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: #7ee8d8;
|
||||
}
|
||||
.id-card.team-admin .id-kicker { color: #ffb06a; }
|
||||
.id-card strong { font-size: 1rem; color: #fff; }
|
||||
.id-role, .id-focus { font-size: 0.72rem; color: #9eb4c8; }
|
||||
|
||||
.identity-avatar-row {
|
||||
margin-top: 1.15rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
.identity-avatar-row.dim { opacity: 0.55; }
|
||||
.id-avatar-preview {
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: rgba(45, 212, 191, 0.12);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.id-avatar-preview img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.id-avatar-preview span {
|
||||
font-weight: 700;
|
||||
color: #7ee8d8;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.identity-avatar-copy { flex: 1; min-width: 0; }
|
||||
.identity-avatar-copy strong { display: block; color: #e8f0f8; font-size: 0.9rem; }
|
||||
.identity-avatar-copy .modal-sub { margin: 0.15rem 0 0; font-size: 0.72rem; }
|
||||
|
||||
.team-drawer.drawer,
|
||||
.drawer.team-drawer {
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
max-height: 100vh !important;
|
||||
border: none;
|
||||
transform: translateY(110%);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 80;
|
||||
background:
|
||||
radial-gradient(ellipse 50% 35% at 10% 0%, rgba(45, 212, 191, 0.14), transparent 55%),
|
||||
radial-gradient(ellipse 40% 40% at 90% 20%, rgba(0, 118, 206, 0.12), transparent 50%),
|
||||
#050b12;
|
||||
}
|
||||
.team-drawer.drawer.open { transform: translateY(0); }
|
||||
.team-head { flex-wrap: wrap; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(45, 212, 191, 0.2); }
|
||||
.team-title { display: block; font-weight: 700; color: #7ee8d8; }
|
||||
.team-sub { margin: 0.1rem 0 0; font-size: 0.72rem; color: #9eb4c8; }
|
||||
.team-head-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-left: auto; }
|
||||
.team-presence { display: flex; flex-wrap: wrap; gap: 0.3rem; }
|
||||
.tp-pill {
|
||||
font-size: 0.66rem;
|
||||
font-family: var(--mono);
|
||||
padding: 0.15rem 0.45rem 0.15rem 0.2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
color: #c5d6e6;
|
||||
}
|
||||
.tp-av {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.tp-pill i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #667788; }
|
||||
.tp-pill.on { border-color: rgba(61,255,160,0.4); }
|
||||
.tp-pill.on i { background: #3dffa0; box-shadow: 0 0 8px #3dffa0; }
|
||||
|
||||
.team-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: min(280px, 34vw) 1fr;
|
||||
}
|
||||
.team-rail {
|
||||
border-right: 1px solid rgba(45, 212, 191, 0.15);
|
||||
overflow: auto;
|
||||
background: rgba(0, 12, 20, 0.4);
|
||||
padding: 0.65rem;
|
||||
}
|
||||
.team-room-group {
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: #7ee8d8;
|
||||
margin: 0.55rem 0 0.3rem;
|
||||
}
|
||||
.team-room {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
appearance: none;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.tr-av {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
.tr-av.hidden { display: none; }
|
||||
.tr-text { min-width: 0; display: grid; gap: 0.15rem; flex: 1; }
|
||||
.team-room:hover { background: rgba(45, 212, 191, 0.08); }
|
||||
.team-room.active {
|
||||
border-color: rgba(45, 212, 191, 0.4);
|
||||
background: rgba(45, 212, 191, 0.12);
|
||||
}
|
||||
.team-room.live .tr-title::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.35rem;
|
||||
height: 0.35rem;
|
||||
margin-left: 0.35rem;
|
||||
border-radius: 50%;
|
||||
background: #3dffa0;
|
||||
box-shadow: 0 0 6px #3dffa0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tr-unread {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
min-width: 1rem;
|
||||
height: 1rem;
|
||||
margin-left: 0.35rem;
|
||||
padding: 0 0.25rem;
|
||||
border-radius: 999px;
|
||||
background: #e53935;
|
||||
color: #fff;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tr-title { font-weight: 600; color: #fff; font-size: 0.84rem; }
|
||||
.tr-preview { font-size: 0.68rem; color: #8aa0b4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.team-room.has-unread .tr-title { color: #fff; }
|
||||
.team-room.has-unread .tr-preview { color: #c5d6e6; }
|
||||
|
||||
.team-chat-main {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.team-chat-main.drag-files::after {
|
||||
content: "Drop files to share";
|
||||
position: absolute;
|
||||
inset: 0.75rem;
|
||||
border: 2px dashed rgba(45, 212, 191, 0.55);
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(4, 20, 28, 0.72);
|
||||
color: #7ee8d8;
|
||||
font-weight: 600;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.team-chat-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem 0.4rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.team-chat-head h2 { margin: 0; font-size: 1.05rem; color: #e8f0f8; }
|
||||
.team-typing { font-size: 0.72rem; color: #7ee8d8; min-height: 1em; }
|
||||
.team-messages {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 0.85rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
.team-bubble {
|
||||
max-width: min(560px, 88%);
|
||||
border-radius: 14px;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background: rgba(12, 22, 34, 0.9);
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.team-bubble.mine {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
background: linear-gradient(135deg, rgba(0, 118, 206, 0.28), rgba(45, 212, 191, 0.18));
|
||||
border-color: rgba(45, 212, 191, 0.35);
|
||||
}
|
||||
.team-bubble.theirs.team-admin {
|
||||
border-color: rgba(255, 154, 60, 0.28);
|
||||
}
|
||||
.tb-av {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255,255,255,0.06);
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.tb-av.hidden { display: none; }
|
||||
.tb-content { min-width: 0; flex: 1; }
|
||||
.tb-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.66rem;
|
||||
color: #8aa0b4;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.tb-meta strong { color: #d7e6f4; }
|
||||
.tb-body { font-size: 0.88rem; color: #f0f4f8; white-space: pre-wrap; word-break: break-word; }
|
||||
.team-file {
|
||||
display: block;
|
||||
margin-top: 0.4rem;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(45, 212, 191, 0.3);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
text-decoration: none;
|
||||
color: #7ee8d8;
|
||||
}
|
||||
.team-file:hover { border-color: #7ee8d8; }
|
||||
.tf-name { display: block; font-weight: 600; font-size: 0.8rem; }
|
||||
.tf-meta { font-size: 0.66rem; color: #9eb4c8; font-family: var(--mono); }
|
||||
.team-composer {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
padding: 0.65rem 1rem 0.85rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
align-items: center;
|
||||
}
|
||||
.team-composer input[type="text"] {
|
||||
flex: 1;
|
||||
background: rgba(0,0,0,0.35);
|
||||
border: 1px solid rgba(45, 212, 191, 0.28);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
.team-attach { cursor: pointer; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.team-body { grid-template-columns: 1fr; }
|
||||
.team-rail { max-height: 28vh; border-right: none; border-bottom: 1px solid rgba(45, 212, 191, 0.15); }
|
||||
}
|
||||
|
||||
+713
@@ -0,0 +1,713 @@
|
||||
/**
|
||||
* ATC Team Chat — identity gate, team room + DMs, file share, profile photos.
|
||||
* Soft identity via localStorage.atc_actor (shared with Ops desk).
|
||||
*/
|
||||
(() => {
|
||||
const $ = (sel, root = document) => root.querySelector(sel);
|
||||
const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
|
||||
const ACTOR_KEY = "atc_actor";
|
||||
|
||||
const USERS = [
|
||||
{ id: "jody", name: "Jody van Dongen", short: "Jody", team: "admin", role: "Datacenter Engineer", focus: "Storage · servers · network · rack & stack · installs" },
|
||||
{ id: "laurens", name: "Laurens Rammers", short: "Laurens", team: "admin", role: "Datacenter Engineer", focus: "Storage · servers · network · rack & stack · installs" },
|
||||
{ id: "mo", name: "Mohamed El Kadi", short: "Mo", team: "fde", role: "Data FDE", focus: "\"Data Plumbers\" 😉 · OME Cockpit · OpenManage AI" },
|
||||
{ id: "bart", name: "Bart Sjerps", short: "Bart", team: "fde", role: "Data FDE", focus: "\"Data Plumbers\" 😉 · FDE cluster · AI workloads" },
|
||||
{ id: "guest", name: "Guest", short: "Guest", team: "guest", role: "Visitor", focus: "Temporary access — select yourself next time" },
|
||||
];
|
||||
|
||||
const state = {
|
||||
me: null,
|
||||
rooms: [],
|
||||
presence: [],
|
||||
activeRoomId: null,
|
||||
messages: [],
|
||||
ws: null,
|
||||
typing: null,
|
||||
avatarBust: {},
|
||||
unread: {},
|
||||
notifyAsked: false,
|
||||
origTitle: document.title,
|
||||
};
|
||||
|
||||
function esc(s) {
|
||||
return String(s ?? "")
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
function shortName(u) {
|
||||
if (!u) return "?";
|
||||
return u.short || (u.name || u.id || "?").split(" ")[0];
|
||||
}
|
||||
|
||||
function avatarUrl(userId, fallbackUrl) {
|
||||
if (!userId) return "";
|
||||
const base = fallbackUrl || `/api/team/avatar/${userId}`;
|
||||
const bust = state.avatarBust[userId];
|
||||
if (!bust) return base;
|
||||
return base.includes("?") ? `${base}&t=${bust}` : `${base}?t=${bust}`;
|
||||
}
|
||||
|
||||
function userById(id) {
|
||||
return USERS.find((u) => u.id === id) || state.presence.find((u) => u.id === id) || null;
|
||||
}
|
||||
|
||||
function getActor() {
|
||||
const v = localStorage.getItem(ACTOR_KEY);
|
||||
return USERS.some((u) => u.id === v) ? v : null;
|
||||
}
|
||||
|
||||
function setActor(id) {
|
||||
if (!USERS.some((u) => u.id === id)) return;
|
||||
localStorage.setItem(ACTOR_KEY, id);
|
||||
state.me = id;
|
||||
const sel = $("#ops-actor");
|
||||
if (sel && sel.value !== id) sel.value = id;
|
||||
updateIdentityBadge();
|
||||
refreshAvatarPreview();
|
||||
ensureNotifyPermission();
|
||||
connectWs(true);
|
||||
}
|
||||
|
||||
function unreadTotal() {
|
||||
return Object.values(state.unread).reduce((a, b) => a + (b || 0), 0);
|
||||
}
|
||||
|
||||
function updateUnreadBadge() {
|
||||
const el = $("#team-unread");
|
||||
const combo = document.querySelector(".ops-team-combo");
|
||||
const n = unreadTotal();
|
||||
if (el) {
|
||||
if (n > 0) {
|
||||
el.classList.remove("hidden");
|
||||
el.textContent = n > 99 ? "99+" : String(n);
|
||||
} else {
|
||||
el.classList.add("hidden");
|
||||
el.textContent = "0";
|
||||
}
|
||||
}
|
||||
if (combo) {
|
||||
combo.classList.toggle("has-unread", n > 0);
|
||||
if (n > 0) {
|
||||
combo.classList.remove("pulse");
|
||||
void combo.offsetWidth;
|
||||
combo.classList.add("pulse");
|
||||
}
|
||||
}
|
||||
document.title = n > 0 ? `(${n}) Team · ${state.origTitle}` : state.origTitle;
|
||||
}
|
||||
|
||||
function clearUnread(roomId) {
|
||||
if (roomId == null) return;
|
||||
delete state.unread[String(roomId)];
|
||||
updateUnreadBadge();
|
||||
}
|
||||
|
||||
function bumpUnread(roomId) {
|
||||
const key = String(roomId);
|
||||
state.unread[key] = (state.unread[key] || 0) + 1;
|
||||
updateUnreadBadge();
|
||||
}
|
||||
|
||||
function ensureNotifyPermission() {
|
||||
if (!("Notification" in window) || state.notifyAsked) return;
|
||||
state.notifyAsked = true;
|
||||
if (Notification.permission === "default") {
|
||||
Notification.requestPermission().catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
function notifyNewMessage(msg) {
|
||||
if (!msg || msg.author_id === state.me) return;
|
||||
const who = msg.author_short || shortName({ name: msg.author_name, id: msg.author_id });
|
||||
const body = (msg.body || (msg.file ? "Shared a file" : "New message")).slice(0, 120);
|
||||
const room = state.rooms.find((r) => Number(r.id) === Number(msg.room_id));
|
||||
const roomLabel =
|
||||
room?.kind === "team"
|
||||
? "ATC Team"
|
||||
: room?.peer_short || shortName(userById(room?.peer_id)) || "Team chat";
|
||||
|
||||
// soft soundless flash via badge already; browser notification when allowed
|
||||
if ("Notification" in window && Notification.permission === "granted" && document.hidden) {
|
||||
try {
|
||||
const n = new Notification(`${who} · ${roomLabel}`, {
|
||||
body,
|
||||
tag: `team-${msg.room_id}`,
|
||||
renotify: true,
|
||||
});
|
||||
n.onclick = () => {
|
||||
window.focus();
|
||||
openTeam();
|
||||
selectRoom(Number(msg.room_id)).catch(() => {});
|
||||
n.close();
|
||||
};
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
|
||||
function onIncomingMessage(msg) {
|
||||
if (!msg) return;
|
||||
const teamOpen = $("#team-drawer")?.classList.contains("open");
|
||||
const viewing = teamOpen && Number(msg.room_id) === Number(state.activeRoomId);
|
||||
if (viewing) {
|
||||
if (!state.messages.some((m) => m.id === msg.id)) {
|
||||
state.messages.push(msg);
|
||||
renderMessages(true);
|
||||
}
|
||||
clearUnread(msg.room_id);
|
||||
} else if (msg.author_id !== state.me) {
|
||||
bumpUnread(msg.room_id);
|
||||
notifyNewMessage(msg);
|
||||
}
|
||||
const room = state.rooms.find((r) => Number(r.id) === Number(msg.room_id));
|
||||
if (room) room.last_message = msg;
|
||||
renderRoomList();
|
||||
}
|
||||
|
||||
function updateIdentityBadge() {
|
||||
const badge = $("#team-identity-badge");
|
||||
const btn = $("#btn-team");
|
||||
const u = userById(state.me);
|
||||
if (!badge) return;
|
||||
if (!u) {
|
||||
badge.classList.add("hidden");
|
||||
badge.innerHTML = "";
|
||||
if (btn) btn.title = "ATC team chat · files";
|
||||
return;
|
||||
}
|
||||
badge.classList.remove("hidden");
|
||||
const url = avatarUrl(u.id, u.avatar_url);
|
||||
badge.innerHTML = `<span class="tib-av"><img src="${esc(url)}" alt="" onerror="this.remove()"/></span><span class="tib-dot ${esc(u.team)}"></span><strong>${esc(shortName(u))}</strong>`;
|
||||
badge.title = `Acting as ${u.name} — click to switch`;
|
||||
if (btn) btn.title = `Team chat · as ${u.name}`;
|
||||
}
|
||||
|
||||
function refreshAvatarPreview() {
|
||||
const u = userById(state.me || getActor());
|
||||
const img = $("#identity-avatar-img");
|
||||
const initials = $("#identity-avatar-initials");
|
||||
const label = $("#identity-avatar-label");
|
||||
const row = $("#identity-avatar-row");
|
||||
if (!row) return;
|
||||
if (!u) {
|
||||
row.classList.add("dim");
|
||||
if (label) label.textContent = "Profile photo";
|
||||
if (img) {
|
||||
img.hidden = true;
|
||||
img.removeAttribute("src");
|
||||
}
|
||||
if (initials) {
|
||||
initials.hidden = false;
|
||||
initials.textContent = "?";
|
||||
}
|
||||
return;
|
||||
}
|
||||
row.classList.remove("dim");
|
||||
if (label) label.textContent = `${u.name} · profile photo`;
|
||||
const url = avatarUrl(u.id, u.avatar_url);
|
||||
if (img) {
|
||||
img.hidden = false;
|
||||
img.onerror = () => {
|
||||
img.hidden = true;
|
||||
if (initials) {
|
||||
initials.hidden = false;
|
||||
initials.textContent = (u.name || "?").slice(0, 1).toUpperCase();
|
||||
}
|
||||
};
|
||||
img.onload = () => {
|
||||
if (initials) initials.hidden = true;
|
||||
};
|
||||
img.src = url;
|
||||
}
|
||||
if (initials) {
|
||||
initials.hidden = false;
|
||||
initials.textContent = (u.name || "?").slice(0, 1).toUpperCase();
|
||||
}
|
||||
}
|
||||
|
||||
function needsIdentityGate() {
|
||||
return !getActor();
|
||||
}
|
||||
|
||||
function openIdentityGate(force = false, { mustPick = false } = {}) {
|
||||
const gate = $("#identity-gate");
|
||||
if (!gate) return;
|
||||
if (!force && !needsIdentityGate() && !mustPick) {
|
||||
gate.classList.add("hidden");
|
||||
gate.setAttribute("aria-hidden", "true");
|
||||
return;
|
||||
}
|
||||
state._identityMustPick = mustPick || needsIdentityGate();
|
||||
const grid = $("#identity-gate-grid");
|
||||
if (grid) {
|
||||
grid.innerHTML = USERS.map((u) => {
|
||||
const url = avatarUrl(u.id, u.avatar_url);
|
||||
const selected = (state.me || getActor()) === u.id ? "selected" : "";
|
||||
const guest = u.team === "guest" ? "guest" : "";
|
||||
return `<button type="button" class="id-card team-${esc(u.team)} ${selected} ${guest}" data-actor="${esc(u.id)}">
|
||||
<span class="id-av"><img src="${esc(url)}" alt="" onerror="this.parentElement.classList.add('fallback')"/><span class="id-av-fallback">${esc((u.short || u.name || "?").slice(0, 1))}</span></span>
|
||||
<span class="id-kicker">${u.team === "admin" ? "DC Engineer" : u.team === "guest" ? "Visitor" : "Data FDE · \"Data Plumbers\" 😉"}</span>
|
||||
<strong>${esc(u.name)}</strong>
|
||||
<span class="id-role">${esc(u.role)}</span>
|
||||
<span class="id-focus">${esc(u.focus)}</span>
|
||||
</button>`;
|
||||
}).join("");
|
||||
}
|
||||
refreshAvatarPreview();
|
||||
gate.classList.remove("hidden");
|
||||
gate.setAttribute("aria-hidden", "false");
|
||||
document.body.classList.add("identity-locked");
|
||||
}
|
||||
|
||||
function closeIdentityGate() {
|
||||
if (state._identityMustPick && needsIdentityGate()) return;
|
||||
const gate = $("#identity-gate");
|
||||
gate?.classList.add("hidden");
|
||||
gate?.setAttribute("aria-hidden", "true");
|
||||
state._identityMustPick = false;
|
||||
document.body.classList.remove("identity-locked");
|
||||
}
|
||||
|
||||
function confirmIdentity(id) {
|
||||
setActor(id);
|
||||
state._identityMustPick = false;
|
||||
refreshAvatarPreview();
|
||||
closeIdentityGate();
|
||||
if (state._openTeamAfterId) {
|
||||
state._openTeamAfterId = false;
|
||||
openTeam();
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadAvatar(file) {
|
||||
const me = state.me || getActor();
|
||||
if (!me || !file) return;
|
||||
const fd = new FormData();
|
||||
fd.append("user_id", me);
|
||||
fd.append("file", file, file.name);
|
||||
const res = await fetch("/api/team/avatar", { method: "POST", body: fd });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
alert(data.detail || res.statusText || "Avatar upload failed");
|
||||
return;
|
||||
}
|
||||
state.avatarBust[me] = Date.now();
|
||||
if (data.avatar_url) {
|
||||
const u = userById(me);
|
||||
if (u) u.avatar_url = data.avatar_url;
|
||||
}
|
||||
updateIdentityBadge();
|
||||
refreshAvatarPreview();
|
||||
openIdentityGate(true);
|
||||
renderPresence();
|
||||
renderMessages(false);
|
||||
}
|
||||
|
||||
function closeOtherDrawers() {
|
||||
["#chat-drawer", "#ops-drawer", "#ai-drawer", "#reports-drawer", "#network-drawer", "#console-drawer"].forEach((id) => {
|
||||
const el = $(id);
|
||||
if (el) {
|
||||
el.classList.remove("open");
|
||||
el.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openTeam() {
|
||||
if (needsIdentityGate()) {
|
||||
openIdentityGate(true);
|
||||
return;
|
||||
}
|
||||
state.me = getActor();
|
||||
const drawer = $("#team-drawer");
|
||||
const scrim = $("#scrim");
|
||||
if (!drawer) return;
|
||||
closeOtherDrawers();
|
||||
drawer.classList.add("open");
|
||||
drawer.setAttribute("aria-hidden", "false");
|
||||
if (scrim) {
|
||||
scrim.classList.add("open");
|
||||
scrim.dataset.mode = "team-drawer";
|
||||
}
|
||||
connectWs();
|
||||
refreshRooms().then(() => {
|
||||
const team = state.rooms.find((r) => r.kind === "team");
|
||||
if (team) selectRoom(team.id);
|
||||
else if (state.rooms[0]) selectRoom(state.rooms[0].id);
|
||||
});
|
||||
}
|
||||
|
||||
function closeTeam() {
|
||||
const drawer = $("#team-drawer");
|
||||
const scrim = $("#scrim");
|
||||
drawer?.classList.remove("open");
|
||||
drawer?.setAttribute("aria-hidden", "true");
|
||||
if (scrim?.dataset.mode === "team-drawer") {
|
||||
scrim.classList.remove("open");
|
||||
delete scrim.dataset.mode;
|
||||
}
|
||||
}
|
||||
|
||||
function connectWs(force = false) {
|
||||
if (!state.me) return;
|
||||
if (!force && state.ws && state.ws.readyState <= 1) return;
|
||||
if (force && state.ws) {
|
||||
try {
|
||||
state.ws.close();
|
||||
} catch (_) {}
|
||||
state.ws = null;
|
||||
}
|
||||
const proto = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${proto}://${location.host}/ws/team-chat?user=${encodeURIComponent(state.me)}`);
|
||||
state.ws = ws;
|
||||
ws.addEventListener("message", (ev) => {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(ev.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (data.type === "presence" || data.type === "hello" || data.type === "pong") {
|
||||
if (data.presence) {
|
||||
state.presence = data.presence;
|
||||
renderRoomList();
|
||||
renderPresence();
|
||||
}
|
||||
} else if (data.type === "avatar" && data.user_id) {
|
||||
state.avatarBust[data.user_id] = Date.now();
|
||||
const u = userById(data.user_id);
|
||||
if (u && data.avatar_url) u.avatar_url = data.avatar_url;
|
||||
updateIdentityBadge();
|
||||
refreshAvatarPreview();
|
||||
renderPresence();
|
||||
renderMessages(false);
|
||||
renderRoomList();
|
||||
} else if (data.type === "message" && data.message) {
|
||||
onIncomingMessage(data.message);
|
||||
} else if (data.type === "typing") {
|
||||
if (Number(data.room_id) === Number(state.activeRoomId) && data.user_id !== state.me) {
|
||||
const el = $("#team-typing");
|
||||
if (el) {
|
||||
el.textContent = `${data.name || "Someone"} is typing…`;
|
||||
clearTimeout(state.typing);
|
||||
state.typing = setTimeout(() => {
|
||||
el.textContent = "";
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
ws.addEventListener("close", () => {
|
||||
state.ws = null;
|
||||
setTimeout(() => {
|
||||
if (state.me) connectWs();
|
||||
}, 2500);
|
||||
});
|
||||
}
|
||||
|
||||
// heartbeat once
|
||||
if (!window.__teamChatHeartbeat) {
|
||||
window.__teamChatHeartbeat = setInterval(() => {
|
||||
if (state.ws?.readyState === 1) state.ws.send(JSON.stringify({ type: "ping" }));
|
||||
}, 25000);
|
||||
}
|
||||
|
||||
async function refreshRooms() {
|
||||
const res = await fetch(`/api/team/rooms?me=${encodeURIComponent(state.me)}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.detail || res.statusText);
|
||||
state.rooms = data.rooms || [];
|
||||
state.presence = data.presence || [];
|
||||
if (data.users?.length) {
|
||||
data.users.forEach((nu) => {
|
||||
const local = USERS.find((u) => u.id === nu.id);
|
||||
if (local) {
|
||||
if (nu.name) local.name = nu.name;
|
||||
if (nu.short) local.short = nu.short;
|
||||
if (nu.avatar_url) local.avatar_url = nu.avatar_url;
|
||||
}
|
||||
});
|
||||
updateIdentityBadge();
|
||||
}
|
||||
renderRoomList();
|
||||
renderPresence();
|
||||
}
|
||||
|
||||
function renderPresence() {
|
||||
const host = $("#team-presence");
|
||||
if (!host) return;
|
||||
host.innerHTML = (state.presence || [])
|
||||
.map((u) => {
|
||||
const on = u.online ? "on" : "off";
|
||||
const url = avatarUrl(u.id, u.avatar_url);
|
||||
return `<span class="tp-pill ${on}" title="${esc(u.name)}"><img class="tp-av" src="${esc(url)}" alt="" onerror="this.remove()"/><i></i>${esc(shortName(u))}</span>`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderRoomList() {
|
||||
const host = $("#team-room-list");
|
||||
if (!host) return;
|
||||
const team = state.rooms.filter((r) => r.kind === "team");
|
||||
const dms = state.rooms.filter((r) => r.kind === "dm");
|
||||
const item = (r) => {
|
||||
const active = Number(r.id) === Number(state.activeRoomId) ? "active" : "";
|
||||
const title =
|
||||
r.kind === "team"
|
||||
? "ATC Team"
|
||||
: r.peer_short || shortName(userById(r.peer_id)) || r.peer_name || r.title;
|
||||
const preview = r.last_message
|
||||
? `${r.last_message.author_short || shortName({ name: r.last_message.author_name })}: ${r.last_message.body || "file"}`
|
||||
: "No messages yet";
|
||||
const peer = r.peer_id ? state.presence.find((p) => p.id === r.peer_id) : null;
|
||||
const live = r.kind === "team" ? "" : peer?.online ? "live" : "";
|
||||
const av =
|
||||
r.kind === "dm" && r.peer_id
|
||||
? `<img class="tr-av" src="${esc(avatarUrl(r.peer_id, r.peer_avatar))}" alt="" onerror="this.classList.add('hidden')"/>`
|
||||
: "";
|
||||
const unread = state.unread[String(r.id)] || 0;
|
||||
const unreadHtml = unread
|
||||
? `<span class="tr-unread">${unread > 99 ? "99+" : unread}</span>`
|
||||
: "";
|
||||
return `<button type="button" class="team-room ${active} ${live} ${unread ? "has-unread" : ""}" data-room-id="${r.id}">
|
||||
${av}
|
||||
<span class="tr-text"><span class="tr-title">${esc(title)}${unreadHtml}</span>
|
||||
<span class="tr-preview">${esc(preview.slice(0, 64))}</span></span>
|
||||
</button>`;
|
||||
};
|
||||
host.innerHTML = `
|
||||
<div class="team-room-group"><span>Team</span></div>
|
||||
${team.map(item).join("")}
|
||||
<div class="team-room-group"><span>Direct</span></div>
|
||||
${dms.map(item).join("") || `<p class="hint">No DMs yet</p>`}`;
|
||||
}
|
||||
|
||||
async function selectRoom(roomId) {
|
||||
state.activeRoomId = roomId;
|
||||
clearUnread(roomId);
|
||||
renderRoomList();
|
||||
const res = await fetch(`/api/team/rooms/${roomId}/messages?limit=300`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.detail || res.statusText);
|
||||
state.messages = data.messages || [];
|
||||
const title = $("#team-chat-title");
|
||||
const sub = $("#team-chat-sub");
|
||||
const room = data.room || state.rooms.find((r) => Number(r.id) === Number(roomId));
|
||||
if (title) {
|
||||
title.textContent =
|
||||
room?.kind === "team"
|
||||
? "ATC Team"
|
||||
: room?.peer_short || shortName(userById(room?.peer_id)) || room?.title || "Chat";
|
||||
}
|
||||
if (sub) {
|
||||
if (room?.kind === "dm") {
|
||||
const peer = room.peer_id || (room.key || "").split(":").filter((x) => x !== "dm" && x !== state.me)[0];
|
||||
const p = userById(peer);
|
||||
sub.textContent = p ? `${p.role} · ${p.focus || ""}` : "Direct message";
|
||||
} else {
|
||||
sub.textContent = "Jody · Laurens · Mo · Bart — shared room";
|
||||
}
|
||||
}
|
||||
renderMessages(false);
|
||||
}
|
||||
|
||||
function fmtTime(ts) {
|
||||
if (!ts) return "";
|
||||
try {
|
||||
return new Date(ts * 1000).toLocaleString();
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function formatBytes(n) {
|
||||
if (n < 1024) return `${n} B`;
|
||||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
||||
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function renderMessages(stickBottom) {
|
||||
const host = $("#team-messages");
|
||||
if (!host) return;
|
||||
const nearBottom = host.scrollHeight - host.scrollTop - host.clientHeight < 80;
|
||||
host.innerHTML = state.messages
|
||||
.map((m) => {
|
||||
const mine = m.author_id === state.me;
|
||||
const name = m.author_short || shortName({ name: m.author_name, id: m.author_id });
|
||||
const url = avatarUrl(m.author_id, m.author_avatar);
|
||||
const file = m.file
|
||||
? `<a class="team-file" href="${esc(m.file.url)}" target="_blank" rel="noopener">
|
||||
<span class="tf-name">${esc(m.file.filename)}</span>
|
||||
<span class="tf-meta">${esc(formatBytes(m.file.size || 0))} · ${esc(m.file.mime || "file")}</span>
|
||||
</a>`
|
||||
: "";
|
||||
return `<div class="team-bubble ${mine ? "mine" : "theirs"} team-${esc(m.author_team || "")}">
|
||||
<img class="tb-av" src="${esc(url)}" alt="" onerror="this.classList.add('hidden')"/>
|
||||
<div class="tb-content">
|
||||
<div class="tb-meta"><strong>${esc(name)}</strong><span>${esc(fmtTime(m.created_at))}</span></div>
|
||||
${m.body ? `<div class="tb-body">${esc(m.body)}</div>` : ""}
|
||||
${file}
|
||||
</div>
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
if (stickBottom || nearBottom) host.scrollTop = host.scrollHeight;
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const input = $("#team-input");
|
||||
const body = (input?.value || "").trim();
|
||||
if (!body || !state.activeRoomId) return;
|
||||
input.value = "";
|
||||
const res = await fetch(`/api/team/rooms/${state.activeRoomId}/messages`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ author_id: state.me, body }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
alert(data.detail || res.statusText);
|
||||
return;
|
||||
}
|
||||
if (data.message && !state.messages.some((m) => m.id === data.message.id)) {
|
||||
state.messages.push(data.message);
|
||||
renderMessages(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadFiles(fileList) {
|
||||
if (!state.activeRoomId || !fileList?.length) return;
|
||||
for (const file of fileList) {
|
||||
const fd = new FormData();
|
||||
fd.append("uploader_id", state.me);
|
||||
fd.append("body", "");
|
||||
fd.append("file", file, file.name);
|
||||
const res = await fetch(`/api/team/rooms/${state.activeRoomId}/files`, { method: "POST", body: fd });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
alert(data.detail || `Upload failed: ${file.name}`);
|
||||
continue;
|
||||
}
|
||||
if (data.message && !state.messages.some((m) => m.id === data.message.id)) {
|
||||
state.messages.push(data.message);
|
||||
renderMessages(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function notifyTyping() {
|
||||
if (state.ws?.readyState === 1 && state.activeRoomId) {
|
||||
state.ws.send(JSON.stringify({ type: "typing", room_id: state.activeRoomId }));
|
||||
}
|
||||
}
|
||||
|
||||
function bind() {
|
||||
state.me = getActor();
|
||||
updateIdentityBadge();
|
||||
updateUnreadBadge();
|
||||
// Always first popup on UI open so everyone can pick themselves immediately
|
||||
openIdentityGate(true, { mustPick: needsIdentityGate() });
|
||||
if (state.me) {
|
||||
ensureNotifyPermission();
|
||||
connectWs();
|
||||
refreshRooms().catch(() => {});
|
||||
}
|
||||
$("#identity-gate-grid")?.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest("[data-actor]");
|
||||
if (!btn) return;
|
||||
confirmIdentity(btn.dataset.actor);
|
||||
});
|
||||
|
||||
$("#identity-avatar-file")?.addEventListener("change", (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!getActor()) {
|
||||
alert("Pick who you are first, then upload a photo.");
|
||||
e.target.value = "";
|
||||
return;
|
||||
}
|
||||
uploadAvatar(file).catch((err) => alert(err.message));
|
||||
e.target.value = "";
|
||||
});
|
||||
|
||||
$("#team-identity-badge")?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openIdentityGate(true);
|
||||
});
|
||||
$("#btn-team")?.addEventListener("click", (e) => {
|
||||
if (e.target.closest("#team-identity-badge")) return;
|
||||
if (needsIdentityGate()) {
|
||||
state._openTeamAfterId = true;
|
||||
openIdentityGate(true, { mustPick: true });
|
||||
return;
|
||||
}
|
||||
openTeam();
|
||||
});
|
||||
$("#btn-team-close")?.addEventListener("click", closeTeam);
|
||||
$("#btn-team-switch")?.addEventListener("click", () => openIdentityGate(true));
|
||||
$("#scrim")?.addEventListener("click", () => {
|
||||
if ($("#scrim")?.dataset.mode === "team-drawer") closeTeam();
|
||||
});
|
||||
|
||||
$("#team-room-list")?.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest("[data-room-id]");
|
||||
if (!btn) return;
|
||||
selectRoom(Number(btn.dataset.roomId)).catch((err) => alert(err.message));
|
||||
});
|
||||
|
||||
$("#team-form")?.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
sendMessage().catch((err) => alert(err.message));
|
||||
});
|
||||
$("#team-input")?.addEventListener("input", () => notifyTyping());
|
||||
$("#team-file")?.addEventListener("change", (e) => {
|
||||
const files = e.target.files;
|
||||
uploadFiles(files).catch((err) => alert(err.message));
|
||||
e.target.value = "";
|
||||
});
|
||||
|
||||
const drop = $("#team-chat-main");
|
||||
drop?.addEventListener("dragover", (e) => {
|
||||
e.preventDefault();
|
||||
drop.classList.add("drag-files");
|
||||
});
|
||||
drop?.addEventListener("dragleave", () => drop.classList.remove("drag-files"));
|
||||
drop?.addEventListener("drop", (e) => {
|
||||
e.preventDefault();
|
||||
drop.classList.remove("drag-files");
|
||||
if (e.dataTransfer?.files?.length) uploadFiles(e.dataTransfer.files).catch((err) => alert(err.message));
|
||||
});
|
||||
|
||||
$("#ops-actor")?.addEventListener("change", (e) => {
|
||||
if (e.target.value) setActor(e.target.value);
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
if (!$("#identity-gate")?.classList.contains("hidden")) {
|
||||
if (!state._identityMustPick && !needsIdentityGate()) closeIdentityGate();
|
||||
} else if ($("#team-drawer")?.classList.contains("open")) {
|
||||
closeTeam();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#identity-gate")?.addEventListener("click", (e) => {
|
||||
if (e.target.id === "identity-gate" && !state._identityMustPick && !needsIdentityGate()) {
|
||||
closeIdentityGate();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bind();
|
||||
window.cockpitTeam = {
|
||||
open: openTeam,
|
||||
close: closeTeam,
|
||||
setActor,
|
||||
getActor,
|
||||
openIdentityGate,
|
||||
uploadAvatar,
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user