feat: implement spatial quick actions with follow camera
- Add right-click context menus on 3D elements (blobs, nodes, zones) - Implement follow camera functionality with visual indicator - Add zone detection in context menu based on position - Integrate with state management system for data lookups - Support both mouse right-click and touch long-press interactions - Add ESC key handler to stop following Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jedarden
parent
7d342b95a0
commit
6b22ba65ac
13 changed files with 9278 additions and 14 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
a48fc8134ba7c42ebedc5ef0d3840215b754fa0f
|
||||
6d30c6341441df56c3d7d2cea37f4d31144eda47
|
||||
|
|
|
|||
457
dashboard/css/command-palette.css
Normal file
457
dashboard/css/command-palette.css
Normal file
|
|
@ -0,0 +1,457 @@
|
|||
/**
|
||||
* Spaxel Dashboard - Command Palette Styles
|
||||
*
|
||||
* Ctrl+K / Cmd+K universal search and command interface.
|
||||
*/
|
||||
|
||||
/* ===== Command Palette Container ===== */
|
||||
.command-palette {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.command-palette.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.command-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===== Command Container ===== */
|
||||
.command-container {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 70vh;
|
||||
background: var(--command-bg, #1e1e1e);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: slideUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Command Header ===== */
|
||||
.command-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.command-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.command-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--command-text, #eee);
|
||||
font-size: 16px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.command-input::placeholder {
|
||||
color: var(--command-placeholder, #666);
|
||||
}
|
||||
|
||||
.command-hint {
|
||||
font-size: 11px;
|
||||
color: var(--command-hint, #666);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===== Command Body ===== */
|
||||
.command-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.command-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.command-body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.command-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.command-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* ===== Command Results ===== */
|
||||
.command-results {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Category Headers */
|
||||
.command-header {
|
||||
padding: 8px 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--command-header, #666);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--command-bg, #1e1e1e);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Command Items */
|
||||
.command-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
.command-item:hover {
|
||||
background: var(--command-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.command-item.selected {
|
||||
background: var(--command-selected, rgba(79, 195, 247, 0.15));
|
||||
border-left-color: var(--command-accent, #4fc3f7);
|
||||
}
|
||||
|
||||
.command-item-icon {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.command-item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.command-item-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--command-text, #eee);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.command-item-description {
|
||||
font-size: 12px;
|
||||
color: var(--command-description, #888);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.command-item-shortcut {
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
color: var(--command-shortcut, #666);
|
||||
background: var(--command-shortcut-bg, rgba(255, 255, 255, 0.1));
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Highlight matches in search results */
|
||||
.command-item-title mark,
|
||||
.command-item-description mark {
|
||||
background: var(--command-mark-bg, rgba(79, 195, 247, 0.3));
|
||||
color: var(--command-mark-text, #4fc3f7);
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ===== Empty State ===== */
|
||||
.command-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--command-empty, #666);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ===== Command Footer ===== */
|
||||
.command-footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
background: var(--command-footer-bg, rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.footer-hints {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 11px;
|
||||
color: var(--command-hint, #666);
|
||||
}
|
||||
|
||||
.hint-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.hint-item kbd {
|
||||
background: var(--command-kbd-bg, rgba(255, 255, 255, 0.1));
|
||||
border: 1px solid var(--command-kbd-border, rgba(255, 255, 255, 0.2));
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
color: var(--command-kbd, #999);
|
||||
}
|
||||
|
||||
/* ===== Help Modal ===== */
|
||||
.command-help-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.command-help-modal.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.help-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.help-container {
|
||||
position: relative;
|
||||
background: var(--command-bg, #1e1e1e);
|
||||
border-radius: 12px;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
margin: 10vh auto;
|
||||
border: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.help-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.help-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--command-text, #eee);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.help-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--command-close, #888);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.help-close:hover {
|
||||
color: var(--command-text, #eee);
|
||||
}
|
||||
|
||||
.help-content {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
max-height: calc(80vh - 80px);
|
||||
}
|
||||
|
||||
.help-content h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--command-text, #eee);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.help-content h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.help-content p {
|
||||
font-size: 14px;
|
||||
color: var(--command-description, #aaa);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.help-content ul {
|
||||
margin: 0 0 12px 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.help-content li {
|
||||
font-size: 14px;
|
||||
color: var(--command-description, #aaa);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.help-content strong {
|
||||
color: var(--command-text, #eee);
|
||||
}
|
||||
|
||||
.help-content kbd {
|
||||
background: var(--command-kbd-bg, rgba(255, 255, 255, 0.1));
|
||||
border: 1px solid var(--command-kbd-border, rgba(255, 255, 255, 0.2));
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: var(--command-kbd, #999);
|
||||
}
|
||||
|
||||
/* ===== Responsive Design ===== */
|
||||
@media (max-width: 600px) {
|
||||
.command-container {
|
||||
width: 95%;
|
||||
top: 10%;
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.footer-hints {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.help-container {
|
||||
margin: 5vh auto;
|
||||
max-height: 85vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Accessibility ===== */
|
||||
.command-item:focus-visible {
|
||||
outline: 2px solid var(--command-accent, #4fc3f7);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.command-input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ===== Reduced Motion ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.command-palette * {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Dark/Light Mode Support ===== */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.command-palette {
|
||||
--command-bg: #ffffff;
|
||||
--command-text: #1d1d1f;
|
||||
--command-border: rgba(0, 0, 0, 0.1);
|
||||
--command-hover: rgba(0, 0, 0, 0.05);
|
||||
--command-selected: rgba(0, 122, 255, 0.1);
|
||||
--command-accent: #007aff;
|
||||
--command-placeholder: #999;
|
||||
--command-description: #666;
|
||||
--command-header: #999;
|
||||
--command-hint: #666;
|
||||
--command-empty: #999;
|
||||
--command-shortcut: #666;
|
||||
--command-shortcut-bg: rgba(0, 0, 0, 0.05);
|
||||
--command-kbd-bg: rgba(0, 0, 0, 0.05);
|
||||
--command-kbd-border: rgba(0, 0, 0, 0.1);
|
||||
--command-kbd: #666;
|
||||
--command-mark-bg: rgba(0, 122, 255, 0.2);
|
||||
--command-mark-text: #007aff;
|
||||
--command-footer-bg: rgba(0, 0, 0, 0.03);
|
||||
--command-close: #999;
|
||||
}
|
||||
}
|
||||
309
dashboard/css/guided-help.css
Normal file
309
dashboard/css/guided-help.css
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
/**
|
||||
* Spaxel Dashboard - Guided Troubleshooting Styles
|
||||
*
|
||||
* Proactive contextual help panel with step-by-step guidance.
|
||||
*/
|
||||
|
||||
/* ===== Guided Help Container ===== */
|
||||
.guided-help-container {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
z-index: 200;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.guided-help-container.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ===== Help Panel ===== */
|
||||
.guided-help-panel {
|
||||
background: rgba(30, 30, 58, 0.98);
|
||||
border: 1px solid rgba(79, 195, 247, 0.3);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.1);
|
||||
width: 380px;
|
||||
max-width: calc(100vw - 40px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
.help-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, rgba(79, 195, 247, 0.15), rgba(41, 182, 246, 0.1));
|
||||
border-bottom: 1px solid rgba(79, 195, 247, 0.2);
|
||||
}
|
||||
|
||||
.help-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.help-title h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #eee;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.help-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.help-close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* ===== Content ===== */
|
||||
.help-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Progress Dots */
|
||||
.help-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.help-progress-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.help-progress-dot.active {
|
||||
background: #4fc3f7;
|
||||
box-shadow: 0 0 8px rgba(79, 195, 247, 0.6);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.help-progress-dot.completed {
|
||||
background: #66bb6a;
|
||||
}
|
||||
|
||||
/* Step Content */
|
||||
.help-step {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #4fc3f7;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Dismiss Hint */
|
||||
.help-dismiss-hint {
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.help-dismiss-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.help-dismiss-checkbox input[type="checkbox"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
accent-color: #4fc3f7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.help-dismiss-checkbox span {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ===== Actions ===== */
|
||||
.help-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
.help-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.help-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.help-btn-primary {
|
||||
background: #4fc3f7;
|
||||
color: #1a1a2e;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.help-btn-primary:hover {
|
||||
background: #29b6f6;
|
||||
}
|
||||
|
||||
.help-btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.help-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.help-btn-action {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #66bb6a;
|
||||
border: 1px solid rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.help-btn-action:hover {
|
||||
background: rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
/* ===== Context Help Button ===== */
|
||||
.context-help-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(79, 195, 247, 0.2);
|
||||
border: 1px solid rgba(79, 195, 247, 0.4);
|
||||
color: #4fc3f7;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.context-help-btn:hover {
|
||||
background: rgba(79, 195, 247, 0.3);
|
||||
border-color: rgba(79, 195, 247, 0.6);
|
||||
}
|
||||
|
||||
/* ===== Animation ===== */
|
||||
@keyframes helpSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes helpPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(79, 195, 247, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.guided-help-container.visible .guided-help-panel {
|
||||
animation: helpSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* ===== Responsive Design ===== */
|
||||
@media (max-width: 480px) {
|
||||
.guided-help-container {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.guided-help-panel {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.help-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
flex: 1;
|
||||
min-width: calc(50% - 4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Accessibility ===== */
|
||||
.help-btn:focus-visible,
|
||||
.help-close-btn:focus-visible,
|
||||
.context-help-btn:focus-visible {
|
||||
outline: 2px solid #4fc3f7;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ===== Reduced Motion ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.guided-help-container,
|
||||
.guided-help-panel,
|
||||
.help-progress-dot,
|
||||
.help-btn {
|
||||
animation: none !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
284
dashboard/css/quick-actions.css
Normal file
284
dashboard/css/quick-actions.css
Normal file
|
|
@ -0,0 +1,284 @@
|
|||
/**
|
||||
* Spaxel Dashboard - Spatial Quick Actions Styles
|
||||
*
|
||||
* Right-click (desktop) or long-press (mobile) context menus
|
||||
* on 3D elements for context-sensitive actions.
|
||||
*/
|
||||
|
||||
/* ===== Context Menu Container ===== */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.context-menu.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.context-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
animation: fadeIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===== Context Container ===== */
|
||||
.context-container {
|
||||
position: absolute;
|
||||
min-width: 280px;
|
||||
max-width: 340px;
|
||||
background: var(--context-bg, #1e1e1e);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--context-border, rgba(255, 255, 255, 0.1));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: scaleIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Context Header ===== */
|
||||
.context-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--context-border, rgba(255, 255, 255, 0.1));
|
||||
background: var(--context-header-bg, rgba(255, 255, 255, 0.03));
|
||||
}
|
||||
|
||||
.context-icon {
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--context-icon-bg, rgba(79, 195, 247, 0.15));
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.context-title {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--context-text, #eee);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ===== Context Body ===== */
|
||||
.context-body {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.context-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.context-body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.context-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.context-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* ===== Context Items ===== */
|
||||
.context-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.context-item:hover {
|
||||
background: var(--context-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.context-item:active {
|
||||
background: var(--context-active, rgba(255, 255, 255, 0.08));
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--context-text, #eee);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 12px;
|
||||
color: var(--context-description, #888);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* ===== Target-Specific Styling ===== */
|
||||
|
||||
/* Blob/Person context */
|
||||
.context-menu[data-target="blob"] .context-icon {
|
||||
background: rgba(79, 195, 247, 0.15);
|
||||
color: #4fc3f7;
|
||||
}
|
||||
|
||||
/* Node context */
|
||||
.context-menu[data-target="node"] .context-icon {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
/* Zone context */
|
||||
.context-menu[data-target="zone"] .context-icon {
|
||||
background: rgba(255, 152, 0, 0.15);
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
/* Empty space context */
|
||||
.context-menu[data-target="empty"] .context-icon {
|
||||
background: rgba(158, 158, 158, 0.15);
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
/* Portal context */
|
||||
.context-menu[data-target="portal"] .context-icon {
|
||||
background: rgba(156, 39, 176, 0.15);
|
||||
color: #9c27b0;
|
||||
}
|
||||
|
||||
/* Trigger context */
|
||||
.context-menu[data-target="trigger"] .context-icon {
|
||||
background: rgba(244, 67, 54, 0.15);
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
/* ===== Follow Mode Indicator ===== */
|
||||
.follow-mode-indicator {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(79, 195, 247, 0.9);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 999;
|
||||
animation: slideUp 0.2s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.follow-mode-indicator::before {
|
||||
content: '🎯';
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Responsive Design ===== */
|
||||
@media (max-width: 600px) {
|
||||
.context-container {
|
||||
min-width: 260px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
.context-item {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.follow-mode-indicator {
|
||||
bottom: 100px;
|
||||
padding: 12px 24px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Accessibility ===== */
|
||||
.context-item:focus-visible {
|
||||
outline: 2px solid var(--context-accent, #4fc3f7);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* ===== Reduced Motion ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.context-menu * {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Dark/Light Mode Support ===== */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.context-menu {
|
||||
--context-bg: #ffffff;
|
||||
--context-text: #1d1d1f;
|
||||
--context-border: rgba(0, 0, 0, 0.1);
|
||||
--context-hover: rgba(0, 0, 0, 0.05);
|
||||
--context-active: rgba(0, 0, 0, 0.08);
|
||||
--context-description: #666;
|
||||
--context-header-bg: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
<link rel="stylesheet" href="css/command-palette.css">
|
||||
<link rel="stylesheet" href="css/ambient.css">
|
||||
<link rel="stylesheet" href="css/guided-help.css">
|
||||
<link rel="stylesheet" href="css/quick-actions.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
|
|||
1295
dashboard/js/command-palette.js
Normal file
1295
dashboard/js/command-palette.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -28,6 +28,12 @@
|
|||
historyLimit: 5
|
||||
};
|
||||
|
||||
// Full table view state
|
||||
let isFullTableView = false;
|
||||
let selectedNodes = new Set();
|
||||
let sortColumn = null;
|
||||
let sortDirection = 'asc';
|
||||
|
||||
let pollTimer = null;
|
||||
|
||||
// ============================================
|
||||
|
|
@ -68,9 +74,14 @@
|
|||
panel.innerHTML = `
|
||||
<div class="panel-header">
|
||||
<h3>Fleet Health</h3>
|
||||
<button id="fleet-optimise-btn" class="btn btn-sm" title="Re-optimise roles now">
|
||||
<span class="icon">↻</span> Optimise
|
||||
</button>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button id="fleet-full-view-btn" class="btn btn-sm" title="Open full table view">
|
||||
<span class="icon">⛶</span> Full View
|
||||
</button>
|
||||
<button id="fleet-optimise-btn" class="btn btn-sm" title="Re-optimise roles now">
|
||||
<span class="icon">↻</span> Optimise
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div id="fleet-warning" class="fleet-warning hidden">
|
||||
|
|
@ -122,6 +133,7 @@
|
|||
|
||||
// Add event handlers
|
||||
document.getElementById('fleet-optimise-btn').addEventListener('click', onOptimiseClick);
|
||||
document.getElementById('fleet-full-view-btn').addEventListener('click', toggleFullTableView);
|
||||
document.getElementById('fleet-warning-dismiss').addEventListener('click', dismissWarning);
|
||||
document.getElementById('fleet-simulate-select').addEventListener('change', onSimulateSelect);
|
||||
|
||||
|
|
@ -398,6 +410,481 @@
|
|||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Full Table View Styles */
|
||||
.fleet-table-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.fleet-table-container {
|
||||
background: #1a1a2e;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
width: 90vw;
|
||||
max-width: 1200px;
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.fleet-table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.fleet-table-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.fleet-table-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fleet-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.fleet-btn .icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.fleet-btn-primary {
|
||||
background: #4fc3f7;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.fleet-btn-primary:hover {
|
||||
background: #29b6f6;
|
||||
}
|
||||
|
||||
.fleet-btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.fleet-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.fleet-btn-action {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #66bb6a;
|
||||
border: 1px solid rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.fleet-btn-action:hover:not(:disabled) {
|
||||
background: rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.fleet-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.fleet-table-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fleet-selection-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.fleet-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #4fc3f7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fleet-filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fleet-select {
|
||||
padding: 6px 10px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
color: #ddd;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fleet-select:focus {
|
||||
outline: none;
|
||||
border-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.fleet-search-input {
|
||||
padding: 6px 10px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
color: #ddd;
|
||||
font-size: 12px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.fleet-search-input:focus {
|
||||
outline: none;
|
||||
border-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.fleet-table-wrapper {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fleet-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fleet-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #1e1e3a;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fleet-table th {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fleet-table th.sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.fleet-table th.sortable:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.fleet-table th.sort-asc::after {
|
||||
content: ' ▲';
|
||||
color: #4fc3f7;
|
||||
}
|
||||
|
||||
.fleet-table th.sort-desc::after {
|
||||
content: ' ▼';
|
||||
color: #4fc3f7;
|
||||
}
|
||||
|
||||
.fleet-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.fleet-table tbody tr {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.fleet-table tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.fleet-table tbody tr.selected {
|
||||
background: rgba(79, 195, 247, 0.15);
|
||||
}
|
||||
|
||||
.fleet-select-col {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fleet-mac-col {
|
||||
font-family: monospace;
|
||||
color: #4fc3f7;
|
||||
}
|
||||
|
||||
.node-mac-full {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.node-role-badge {
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.node-role-badge.tx { background: rgba(239, 68, 68, 0.3); color: #fca5a5; }
|
||||
.node-role-badge.rx { background: rgba(59, 130, 246, 0.3); color: #93c5fd; }
|
||||
.node-role-badge.tx_rx { background: rgba(168, 85, 247, 0.3); color: #d8b4fe; }
|
||||
.node-role-badge.passive { background: rgba(107, 114, 128, 0.3); color: #d1d5db; }
|
||||
|
||||
.node-status-badge {
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.node-status-badge.online {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #66bb6a;
|
||||
}
|
||||
|
||||
.node-status-badge.offline {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.health-bar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.health-bar {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.health-bar-good {
|
||||
background: linear-gradient(90deg, #22c55e, #66bb6a);
|
||||
}
|
||||
|
||||
.health-bar-fair {
|
||||
background: linear-gradient(90deg, #eab308, #f59e0b);
|
||||
}
|
||||
|
||||
.health-bar-poor {
|
||||
background: linear-gradient(90deg, #ef4444, #dc2626);
|
||||
}
|
||||
|
||||
.health-text {
|
||||
font-size: 11px;
|
||||
color: #ccc;
|
||||
min-width: 35px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fleet-uptime-col {
|
||||
font-family: monospace;
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fleet-fw-col {
|
||||
font-family: monospace;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.fleet-actions-col {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fleet-action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.fleet-action-btn:hover {
|
||||
color: #4fc3f7;
|
||||
background: rgba(79, 195, 247, 0.1);
|
||||
}
|
||||
|
||||
.fleet-empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.fleet-table-footer {
|
||||
padding: 16px 24px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.fleet-stats-summary {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.fleet-stats-summary strong {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/* Diagnostics Modal */
|
||||
.fleet-diagnostics-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.fleet-diagnostics-content {
|
||||
background: #1a1a2e;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.fleet-diagnostics-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.fleet-diagnostics-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.fleet-close-modal {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.fleet-close-modal:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.fleet-diagnostics-body {
|
||||
padding: 20px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.diagnostics-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.diagnostics-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.diagnostics-section h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.diagnostics-table {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.diagnostics-table td {
|
||||
padding: 6px 0;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.diagnostics-table td:first-child {
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.fleet-diagnostics-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.fleet-diagnostics-actions .fleet-btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
|
@ -852,6 +1339,434 @@
|
|||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Full Table View
|
||||
// ============================================
|
||||
function toggleFullTableView() {
|
||||
isFullTableView = !isFullTableView;
|
||||
|
||||
if (isFullTableView) {
|
||||
showFullTableView();
|
||||
} else {
|
||||
hideFullTableView();
|
||||
}
|
||||
}
|
||||
|
||||
function showFullTableView() {
|
||||
// Create overlay
|
||||
var overlay = document.createElement('div');
|
||||
overlay.id = 'fleet-table-overlay';
|
||||
overlay.className = 'fleet-table-overlay';
|
||||
overlay.innerHTML = `
|
||||
<div class="fleet-table-container">
|
||||
<div class="fleet-table-header">
|
||||
<h2>Fleet Management</h2>
|
||||
<div class="fleet-table-actions">
|
||||
<button id="fleet-refresh-btn" class="fleet-btn fleet-btn-secondary">
|
||||
<span class="icon">↻</span> Refresh
|
||||
</button>
|
||||
<button id="fleet-bulk-identify-btn" class="fleet-btn fleet-btn-action" disabled>
|
||||
<span class="icon">⚡</span> Identify Selected
|
||||
</button>
|
||||
<button id="fleet-close-table-btn" class="fleet-btn fleet-btn-secondary">
|
||||
<span class="icon">×</span> Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fleet-table-toolbar">
|
||||
<div class="fleet-selection-info">
|
||||
<input type="checkbox" id="fleet-select-all" class="fleet-checkbox">
|
||||
<label for="fleet-select-all">
|
||||
<span id="fleet-selected-count">0</span> of <span id="fleet-total-count">0</span> nodes selected
|
||||
</label>
|
||||
</div>
|
||||
<div class="fleet-filters">
|
||||
<select id="fleet-filter-role" class="fleet-select">
|
||||
<option value="">All Roles</option>
|
||||
<option value="tx">TX Only</option>
|
||||
<option value="rx">RX Only</option>
|
||||
<option value="tx_rx">TX/RX</option>
|
||||
<option value="passive">Passive</option>
|
||||
</select>
|
||||
<select id="fleet-filter-status" class="fleet-select">
|
||||
<option value="">All Status</option>
|
||||
<option value="online">Online</option>
|
||||
<option value="offline">Offline</option>
|
||||
</select>
|
||||
<input type="text" id="fleet-search" class="fleet-search-input" placeholder="Search MAC or name...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fleet-table-wrapper">
|
||||
<table class="fleet-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="fleet-select-col">
|
||||
<input type="checkbox" id="fleet-header-select-all" class="fleet-checkbox">
|
||||
</th>
|
||||
<th class="sortable" data-sort="mac">MAC Address</th>
|
||||
<th class="sortable" data-sort="role">Role</th>
|
||||
<th class="sortable" data-sort="status">Status</th>
|
||||
<th class="sortable" data-sort="health">Health</th>
|
||||
<th class="sortable" data-sort="uptime">Uptime</th>
|
||||
<th class="sortable" data-sort="fw">Firmware</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fleet-table-body">
|
||||
<tr>
|
||||
<td colspan="8" class="fleet-empty-state">Loading...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="fleet-table-footer">
|
||||
<div class="fleet-stats-summary">
|
||||
<span>Total: <strong id="fleet-stat-total">0</strong></span>
|
||||
<span>Online: <strong id="fleet-stat-online">0</strong></span>
|
||||
<span>Coverage: <strong id="fleet-stat-coverage">--%</strong></span>
|
||||
<span>Mean GDOP: <strong id="fleet-stat-gdop">--</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Add event listeners
|
||||
document.getElementById('fleet-close-table-btn').addEventListener('click', hideFullTableView);
|
||||
document.getElementById('fleet-refresh-btn').addEventListener('click', refreshFullTable);
|
||||
document.getElementById('fleet-bulk-identify-btn').addEventListener('click', bulkIdentify);
|
||||
document.getElementById('fleet-select-all').addEventListener('change', toggleSelectAll);
|
||||
document.getElementById('fleet-header-select-all').addEventListener('change', toggleSelectAll);
|
||||
document.getElementById('fleet-filter-role').addEventListener('change', renderFullTable);
|
||||
document.getElementById('fleet-filter-status').addEventListener('change', renderFullTable);
|
||||
document.getElementById('fleet-search').addEventListener('input', renderFullTable);
|
||||
|
||||
// Add sort handlers
|
||||
overlay.querySelectorAll('th.sortable').forEach(function(th) {
|
||||
th.addEventListener('click', function() {
|
||||
var column = th.dataset.sort;
|
||||
handleSort(column);
|
||||
});
|
||||
});
|
||||
|
||||
// Populate and render
|
||||
renderFullTable();
|
||||
}
|
||||
|
||||
function hideFullTableView() {
|
||||
isFullTableView = false;
|
||||
var overlay = document.getElementById('fleet-table-overlay');
|
||||
if (overlay) {
|
||||
overlay.remove();
|
||||
}
|
||||
selectedNodes.clear();
|
||||
}
|
||||
|
||||
function renderFullTable() {
|
||||
var tbody = document.getElementById('fleet-table-body');
|
||||
if (!tbody) return;
|
||||
|
||||
var filterRole = document.getElementById('fleet-filter-role').value;
|
||||
var filterStatus = document.getElementById('fleet-filter-status').value;
|
||||
var searchTerm = document.getElementById('fleet-search').value.toLowerCase();
|
||||
|
||||
var nodes = Array.from(state.nodes.values());
|
||||
|
||||
// Apply filters
|
||||
nodes = nodes.filter(function(node) {
|
||||
if (filterRole && node.role !== filterRole) return false;
|
||||
if (filterStatus === 'online' && !node.online) return false;
|
||||
if (filterStatus === 'offline' && node.online) return false;
|
||||
if (searchTerm && !node.mac.toLowerCase().includes(searchTerm) &&
|
||||
!(node.name && node.name.toLowerCase().includes(searchTerm))) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Apply sort
|
||||
if (sortColumn) {
|
||||
nodes.sort(function(a, b) {
|
||||
var aVal = getNodeSortValue(a, sortColumn);
|
||||
var bVal = getNodeSortValue(b, sortColumn);
|
||||
if (sortDirection === 'asc') {
|
||||
return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
|
||||
} else {
|
||||
return aVal < bVal ? 1 : aVal > bVal ? -1 : 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update stats
|
||||
var totalNodes = state.nodes.size;
|
||||
var onlineNodes = Array.from(state.nodes.values()).filter(function(n) { return n.online; }).length;
|
||||
|
||||
document.getElementById('fleet-total-count').textContent = totalNodes;
|
||||
document.getElementById('fleet-selected-count').textContent = selectedNodes.size;
|
||||
document.getElementById('fleet-stat-total').textContent = totalNodes;
|
||||
document.getElementById('fleet-stat-online').textContent = onlineNodes;
|
||||
document.getElementById('fleet-stat-coverage').textContent = (state.coverageScore * 100).toFixed(0) + '%';
|
||||
document.getElementById('fleet-stat-gdop').textContent = state.meanGDOP.toFixed(2);
|
||||
|
||||
// Update bulk button state
|
||||
var bulkBtn = document.getElementById('fleet-bulk-identify-btn');
|
||||
if (bulkBtn) {
|
||||
bulkBtn.disabled = selectedNodes.size === 0;
|
||||
}
|
||||
|
||||
// Render rows
|
||||
if (nodes.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="8" class="fleet-empty-state">No nodes match the current filters</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '';
|
||||
nodes.forEach(function(node) {
|
||||
var isSelected = selectedNodes.has(node.mac);
|
||||
var healthScore = node.health_score || 0;
|
||||
var healthPercent = (healthScore * 100).toFixed(0);
|
||||
var healthClass = healthScore > 0.7 ? 'good' : healthScore > 0.4 ? 'fair' : 'poor';
|
||||
var uptime = node.uptime_seconds || 0;
|
||||
var uptimeStr = formatUptime(uptime);
|
||||
var firmware = node.firmware_version || '--';
|
||||
var statusClass = node.online ? 'online' : 'offline';
|
||||
var statusText = node.online ? 'Online' : 'Offline';
|
||||
|
||||
html += '<tr class="fleet-row' + (isSelected ? ' selected' : '') + '" data-mac="' + node.mac + '">' +
|
||||
'<td class="fleet-select-col">' +
|
||||
'<input type="checkbox" class="fleet-checkbox fleet-row-checkbox" ' +
|
||||
(isSelected ? 'checked ' : '') + 'data-mac="' + node.mac + '">' +
|
||||
'</td>' +
|
||||
'<td class="fleet-mac-col">' +
|
||||
'<span class="node-mac-full">' + node.mac + '</span>' +
|
||||
(node.name ? '<br><span class="node-name">' + node.name + '</span>' : '') +
|
||||
'</td>' +
|
||||
'<td><span class="node-role-badge ' + node.role + '">' + node.role + '</span></td>' +
|
||||
'<td><span class="node-status-badge ' + statusClass + '">' + statusText + '</span></td>' +
|
||||
'<td>' +
|
||||
'<div class="health-bar-wrapper">' +
|
||||
'<div class="health-bar health-bar-' + healthClass + '" style="width: ' + healthPercent + '%"></div>' +
|
||||
'<span class="health-text">' + healthPercent + '%</span>' +
|
||||
'</div>' +
|
||||
'</td>' +
|
||||
'<td class="fleet-uptime-col">' + uptimeStr + '</td>' +
|
||||
'<td class="fleet-fw-col">' + firmware + '</td>' +
|
||||
'<td class="fleet-actions-col">' +
|
||||
'<button class="fleet-action-btn" data-action="flyto" data-mac="' + node.mac + '" title="Fly camera to node">⛶</button>' +
|
||||
'<button class="fleet-action-btn" data-action="identify" data-mac="' + node.mac + '" title="Identify (blink LED)">⚡</button>' +
|
||||
'<button class="fleet-action-btn" data-action="diagnostics" data-mac="' + node.mac + '" title="View diagnostics">⚙</button>' +
|
||||
'</td>' +
|
||||
'</tr>';
|
||||
});
|
||||
|
||||
tbody.innerHTML = html;
|
||||
|
||||
// Add row checkbox handlers
|
||||
tbody.querySelectorAll('.fleet-row-checkbox').forEach(function(checkbox) {
|
||||
checkbox.addEventListener('change', function() {
|
||||
var mac = this.dataset.mac;
|
||||
if (this.checked) {
|
||||
selectedNodes.add(mac);
|
||||
} else {
|
||||
selectedNodes.delete(mac);
|
||||
}
|
||||
renderFullTable(); // Re-render to update selection state
|
||||
});
|
||||
});
|
||||
|
||||
// Add action button handlers
|
||||
tbody.querySelectorAll('.fleet-action-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var action = this.dataset.action;
|
||||
var mac = this.dataset.mac;
|
||||
handleNodeAction(action, mac);
|
||||
});
|
||||
});
|
||||
|
||||
// Add row click handler for selection
|
||||
tbody.querySelectorAll('.fleet-row').forEach(function(row) {
|
||||
row.addEventListener('dblclick', function() {
|
||||
var mac = row.dataset.mac;
|
||||
handleNodeAction('flyto', mac);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getNodeSortValue(node, column) {
|
||||
switch (column) {
|
||||
case 'mac': return node.mac || '';
|
||||
case 'role': return node.role || '';
|
||||
case 'status': return node.online ? 1 : 0;
|
||||
case 'health': return node.health_score || 0;
|
||||
case 'uptime': return node.uptime_seconds || 0;
|
||||
case 'fw': return node.firmware_version || '';
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
|
||||
function handleSort(column) {
|
||||
if (sortColumn === column) {
|
||||
sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
sortColumn = column;
|
||||
sortDirection = 'asc';
|
||||
}
|
||||
|
||||
// Update sort indicators
|
||||
document.querySelectorAll('th.sortable').forEach(function(th) {
|
||||
th.classList.remove('sort-asc', 'sort-desc');
|
||||
if (th.dataset.sort === column) {
|
||||
th.classList.add('sort-' + sortDirection);
|
||||
}
|
||||
});
|
||||
|
||||
renderFullTable();
|
||||
}
|
||||
|
||||
function toggleSelectAll(e) {
|
||||
var isChecked = e.target.checked;
|
||||
var filterRole = document.getElementById('fleet-filter-role').value;
|
||||
var filterStatus = document.getElementById('fleet-filter-status').value;
|
||||
var searchTerm = document.getElementById('fleet-search').value.toLowerCase();
|
||||
|
||||
Array.from(state.nodes.values()).forEach(function(node) {
|
||||
// Check if node matches current filters
|
||||
if (filterRole && node.role !== filterRole) return;
|
||||
if (filterStatus === 'online' && !node.online) return;
|
||||
if (filterStatus === 'offline' && node.online) return;
|
||||
if (searchTerm && !node.mac.toLowerCase().includes(searchTerm) &&
|
||||
!(node.name && node.name.toLowerCase().includes(searchTerm))) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isChecked) {
|
||||
selectedNodes.add(node.mac);
|
||||
} else {
|
||||
selectedNodes.delete(node.mac);
|
||||
}
|
||||
});
|
||||
|
||||
renderFullTable();
|
||||
}
|
||||
|
||||
function handleNodeAction(action, mac) {
|
||||
switch (action) {
|
||||
case 'flyto':
|
||||
flyToNode(mac);
|
||||
break;
|
||||
case 'identify':
|
||||
identifyNode(mac);
|
||||
break;
|
||||
case 'diagnostics':
|
||||
showNodeDiagnostics(mac);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function flyToNode(mac) {
|
||||
// Close the table view first
|
||||
hideFullTableView();
|
||||
|
||||
// Use Viz3D to fly camera to the node
|
||||
if (window.Viz3D && Viz3D.flyToNode) {
|
||||
Viz3D.flyToNode(mac);
|
||||
} else if (window.Viz3D && Viz3D.focusOnNode) {
|
||||
Viz3D.focusOnNode(mac);
|
||||
} else {
|
||||
console.warn('[Fleet] No flyToNode method available on Viz3D');
|
||||
}
|
||||
}
|
||||
|
||||
function showNodeDiagnostics(mac) {
|
||||
var node = state.nodes.get(mac);
|
||||
if (!node) return;
|
||||
|
||||
// Create diagnostics modal
|
||||
var modal = document.createElement('div');
|
||||
modal.className = 'fleet-diagnostics-modal';
|
||||
modal.innerHTML = `
|
||||
<div class="fleet-diagnostics-content">
|
||||
<div class="fleet-diagnostics-header">
|
||||
<h3>Node Diagnostics</h3>
|
||||
<button class="fleet-close-modal">×</button>
|
||||
</div>
|
||||
<div class="fleet-diagnostics-body">
|
||||
<div class="diagnostics-section">
|
||||
<h4>Node Information</h4>
|
||||
<table class="diagnostics-table">
|
||||
<tr><td>MAC Address:</td><td>${node.mac}</td></tr>
|
||||
<tr><td>Role:</td><td>${node.role}</td></tr>
|
||||
<tr><td>Status:</td><td>${node.online ? 'Online' : 'Offline'}</td></tr>
|
||||
<tr><td>Firmware:</td><td>${node.firmware_version || '--'}</td></tr>
|
||||
<tr><td>Uptime:</td><td>${formatUptime(node.uptime_seconds || 0)}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="diagnostics-section">
|
||||
<h4>Health Metrics</h4>
|
||||
<table class="diagnostics-table">
|
||||
<tr><td>Health Score:</td><td>${((node.health_score || 0) * 100).toFixed(0)}%</td></tr>
|
||||
<tr><td>Last Seen:</td><td>${new Date((node.last_seen_ms || 0)).toLocaleString()}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fleet-diagnostics-actions">
|
||||
<button class="fleet-btn fleet-btn-primary" onclick="FleetPanel.identifyNode('${mac}')">Identify Node</button>
|
||||
<button class="fleet-btn fleet-btn-secondary" onclick="FleetPanel.flyToNode('${mac}')">Fly to Node</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
modal.querySelector('.fleet-close-modal').addEventListener('click', function() {
|
||||
modal.remove();
|
||||
});
|
||||
|
||||
modal.addEventListener('click', function(e) {
|
||||
if (e.target === modal) {
|
||||
modal.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bulkIdentify() {
|
||||
if (selectedNodes.size === 0) return;
|
||||
|
||||
selectedNodes.forEach(function(mac) {
|
||||
identifyNode(mac, 3000); // 3 second blink
|
||||
});
|
||||
|
||||
if (window.SpaxelApp && SpaxelApp.showToast) {
|
||||
SpaxelApp.showToast('Identifying ' + selectedNodes.size + ' nodes', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
function refreshFullTable() {
|
||||
fetchFleetHealth();
|
||||
fetchFleetHistory();
|
||||
renderFullTable();
|
||||
}
|
||||
|
||||
function formatUptime(seconds) {
|
||||
if (!seconds) return '--';
|
||||
|
||||
var days = Math.floor(seconds / 86400);
|
||||
var hours = Math.floor((seconds % 86400) / 3600);
|
||||
var minutes = Math.floor((seconds % 3600) / 60);
|
||||
|
||||
if (days > 0) {
|
||||
return days + 'd ' + hours + 'h';
|
||||
} else if (hours > 0) {
|
||||
return hours + 'h ' + minutes + 'm';
|
||||
} else {
|
||||
return minutes + 'm';
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Public API
|
||||
// ============================================
|
||||
|
|
@ -862,7 +1777,11 @@
|
|||
showWarning: showWarning,
|
||||
dismissWarning: dismissWarning,
|
||||
getState: function() { return state; },
|
||||
identifyNode: identifyNode
|
||||
identifyNode: identifyNode,
|
||||
flyToNode: flyToNode,
|
||||
toggleFullTableView: toggleFullTableView,
|
||||
showFullTableView: showFullTableView,
|
||||
hideFullTableView: hideFullTableView
|
||||
};
|
||||
|
||||
// ============================================
|
||||
|
|
|
|||
536
dashboard/js/guided-help.js
Normal file
536
dashboard/js/guided-help.js
Normal file
|
|
@ -0,0 +1,536 @@
|
|||
/**
|
||||
* Spaxel Dashboard - Guided Troubleshooting
|
||||
*
|
||||
* Proactive contextual help that appears when users encounter problems.
|
||||
* Provides step-by-step guidance and explains what went wrong.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// ===== State =====
|
||||
let activeGuide = null;
|
||||
let dismissedGuides = new Set();
|
||||
let helpPanelVisible = false;
|
||||
|
||||
// ===== DOM Elements =====
|
||||
const helpContainer = document.createElement('div');
|
||||
helpContainer.id = 'guided-help-container';
|
||||
helpContainer.className = 'guided-help-container';
|
||||
document.body.appendChild(helpContainer);
|
||||
|
||||
// ===== Guide Definitions =====
|
||||
const guides = {
|
||||
// No nodes detected
|
||||
'no-nodes': {
|
||||
title: 'No Nodes Detected',
|
||||
icon: '📡',
|
||||
trigger: 'no-nodes',
|
||||
steps: [
|
||||
{
|
||||
title: 'Check Power',
|
||||
content: 'Ensure each Spaxel node is powered on. The LED should be breathing blue.',
|
||||
action: null
|
||||
},
|
||||
{
|
||||
title: 'Check WiFi',
|
||||
content: 'Nodes must connect to your WiFi network. Verify your WiFi is working.',
|
||||
action: null
|
||||
},
|
||||
{
|
||||
title: 'Add Missing Nodes',
|
||||
content: 'If nodes are powered but not showing, click "+ Add Node" to onboard them.',
|
||||
action: 'add-node'
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
},
|
||||
|
||||
// Poor detection quality
|
||||
'poor-detection': {
|
||||
title: 'Detection Quality Issues',
|
||||
icon: '📉',
|
||||
trigger: 'poor-quality',
|
||||
steps: [
|
||||
{
|
||||
title: 'Check Node Placement',
|
||||
content: 'Nodes should be placed at least 2 meters apart for best accuracy.',
|
||||
action: null
|
||||
},
|
||||
{
|
||||
title: 'Review Coverage',
|
||||
content: 'Enable GDOP view to see coverage gaps in your space.',
|
||||
action: 'toggle-gdop'
|
||||
},
|
||||
{
|
||||
title: 'Add More Nodes',
|
||||
content: 'Large spaces or areas with obstacles may need additional nodes.',
|
||||
action: 'add-node'
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
},
|
||||
|
||||
// Node went offline
|
||||
'node-offline': {
|
||||
title: 'Node Offline',
|
||||
icon: '⚠️',
|
||||
trigger: 'node-offline',
|
||||
steps: [
|
||||
{
|
||||
title: 'Check Power',
|
||||
content: 'Verify the node is still receiving power. Check cables and connections.',
|
||||
action: null
|
||||
},
|
||||
{
|
||||
title: 'Check WiFi Signal',
|
||||
content: 'The node may be out of WiFi range. Move it closer to your router.',
|
||||
action: null
|
||||
},
|
||||
{
|
||||
title: 'Restart Node',
|
||||
content: 'Try power cycling the node by unplugging and replugging it.',
|
||||
action: null
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
},
|
||||
|
||||
// First anomaly detected
|
||||
'first-anomaly': {
|
||||
title: 'Anomaly Detected',
|
||||
icon: '🔔',
|
||||
trigger: 'first-anomaly',
|
||||
steps: [
|
||||
{
|
||||
title: 'Review the Event',
|
||||
content: 'An unusual pattern was detected. Check the timeline for details.',
|
||||
action: 'view-timeline'
|
||||
},
|
||||
{
|
||||
title: 'Verify Accuracy',
|
||||
content: 'Was this a real event or a false positive? Your feedback helps us improve.',
|
||||
action: 'give-feedback'
|
||||
},
|
||||
{
|
||||
title: 'Adjust Sensitivity',
|
||||
content: 'If this keeps triggering falsely, you can adjust anomaly sensitivity in settings.',
|
||||
action: 'open-settings'
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
},
|
||||
|
||||
// Security mode first use
|
||||
'security-first-use': {
|
||||
title: 'Security Mode Enabled',
|
||||
icon: '🔒',
|
||||
trigger: 'security-first-use',
|
||||
steps: [
|
||||
{
|
||||
title: 'What is Security Mode?',
|
||||
content: 'Security mode enhances detection sensitivity and triggers alerts for any presence.',
|
||||
action: null
|
||||
},
|
||||
{
|
||||
title: 'Set Up Alerts',
|
||||
content: 'Configure webhooks or notifications to be alerted of security events.',
|
||||
action: 'open-automations'
|
||||
},
|
||||
{
|
||||
title: 'Test the System',
|
||||
content: 'Walk through your space to verify detection is working as expected.',
|
||||
action: null
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
},
|
||||
|
||||
// High GDOP area
|
||||
'high-gdop': {
|
||||
title: 'Poor Positioning Coverage',
|
||||
icon: '📍',
|
||||
trigger: 'high-gdop',
|
||||
steps: [
|
||||
{
|
||||
title: 'Understanding GDOP',
|
||||
content: 'GDOP measures positioning accuracy. Red areas have poor accuracy.',
|
||||
action: null
|
||||
},
|
||||
{
|
||||
title: 'Add Virtual Nodes',
|
||||
content: 'Use the simulator to test if adding a node would improve coverage.',
|
||||
action: 'open-simulator'
|
||||
},
|
||||
{
|
||||
title: 'Reposition Existing Nodes',
|
||||
content: 'Small adjustments to node placement can significantly improve coverage.',
|
||||
action: null
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
},
|
||||
|
||||
// Frequent false positives
|
||||
'false-positives': {
|
||||
title: 'Reducing False Detections',
|
||||
icon: '✅',
|
||||
trigger: 'false-positives',
|
||||
steps: [
|
||||
{
|
||||
title: 'Review Recent Events',
|
||||
content: 'Check the timeline to see when false detections are occurring.',
|
||||
action: 'view-timeline'
|
||||
},
|
||||
{
|
||||
title: 'Provide Feedback',
|
||||
content: 'Mark false detections to help the system learn and improve.',
|
||||
action: 'give-feedback'
|
||||
},
|
||||
{
|
||||
title: 'Adjust Diurnal Settings',
|
||||
content: 'Ensure your home patterns are fully learned (7+ days of data).',
|
||||
action: null
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
},
|
||||
|
||||
// Sleep tracking not working
|
||||
'sleep-not-working': {
|
||||
title: 'Sleep Tracking Setup',
|
||||
icon: '😴',
|
||||
trigger: 'sleep-not-working',
|
||||
steps: [
|
||||
{
|
||||
title: 'Define Bedroom Zone',
|
||||
content: 'Create a zone for your bedroom to track sleep patterns.',
|
||||
action: 'create-zone'
|
||||
},
|
||||
{
|
||||
title: 'Add Bed Trigger',
|
||||
content: 'Place a virtual trigger at your bed location for accurate detection.',
|
||||
action: 'add-trigger'
|
||||
},
|
||||
{
|
||||
title: 'Wait for Learning',
|
||||
content: 'Sleep patterns need 7+ nights of data to establish baselines.',
|
||||
action: null
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
},
|
||||
|
||||
// Automation not firing
|
||||
'automation-not-firing': {
|
||||
title: 'Automation Troubleshooting',
|
||||
icon: '⚡',
|
||||
trigger: 'automation-failed',
|
||||
steps: [
|
||||
{
|
||||
title: 'Check Trigger Conditions',
|
||||
content: 'Verify the zone, person, and time conditions match your setup.',
|
||||
action: 'view-automations'
|
||||
},
|
||||
{
|
||||
title: 'Test Webhook',
|
||||
content: 'Use the test button to verify your webhook endpoint is responding.',
|
||||
action: 'test-webhook'
|
||||
},
|
||||
{
|
||||
title: 'Check Automation Logs',
|
||||
content: 'Review recent automation events to see why it didn\'t fire.',
|
||||
action: 'view-logs'
|
||||
}
|
||||
],
|
||||
dismissible: true
|
||||
}
|
||||
};
|
||||
|
||||
// ===== Guide Execution =====
|
||||
function showGuide(guideId, context = {}) {
|
||||
if (dismissedGuides.has(guideId)) {
|
||||
return; // Don't show dismissed guides
|
||||
}
|
||||
|
||||
const guide = guides[guideId];
|
||||
if (!guide) {
|
||||
console.warn('Guide not found:', guideId);
|
||||
return;
|
||||
}
|
||||
|
||||
activeGuide = {
|
||||
id: guideId,
|
||||
data: guide,
|
||||
currentStep: 0,
|
||||
context: context
|
||||
};
|
||||
|
||||
renderGuide();
|
||||
helpPanelVisible = true;
|
||||
}
|
||||
|
||||
function renderGuide() {
|
||||
if (!activeGuide) return;
|
||||
|
||||
const guide = activeGuide.data;
|
||||
const step = guide.steps[activeGuide.currentStep];
|
||||
const isLastStep = activeGuide.currentStep === guide.steps.length - 1;
|
||||
|
||||
helpContainer.innerHTML = `
|
||||
<div class="guided-help-panel">
|
||||
<div class="help-header">
|
||||
<div class="help-title">
|
||||
<span class="help-icon">${guide.icon}</span>
|
||||
<h3>${guide.title}</h3>
|
||||
</div>
|
||||
<button class="help-close-btn" onclick="GuidedHelp.dismiss()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="help-content">
|
||||
<div class="help-progress">
|
||||
${guide.steps.map((_, i) => `
|
||||
<div class="help-progress-dot ${i === activeGuide.currentStep ? 'active' : ''} ${i < activeGuide.currentStep ? 'completed' : ''}"></div>
|
||||
`).join('')}
|
||||
</div>
|
||||
|
||||
<div class="help-step">
|
||||
<h4 class="step-title">${step.title}</h4>
|
||||
<p class="step-content">${step.content}</p>
|
||||
</div>
|
||||
|
||||
${guide.dismissible ? `
|
||||
<div class="help-dismiss-hint">
|
||||
<label class="help-dismiss-checkbox">
|
||||
<input type="checkbox" id="help-dont-show-again">
|
||||
<span>Don't show this guide again</span>
|
||||
</label>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="help-actions">
|
||||
${activeGuide.currentStep > 0 ? `
|
||||
<button class="help-btn help-btn-secondary" onclick="GuidedHelp.previousStep()">
|
||||
← Back
|
||||
</button>
|
||||
` : `
|
||||
<button class="help-btn help-btn-secondary" onclick="GuidedHelp.dismiss()">
|
||||
Skip
|
||||
</button>
|
||||
`}
|
||||
|
||||
${step.action ? `
|
||||
<button class="help-btn help-btn-action" onclick="GuidedHelp.executeAction('${step.action}')">
|
||||
${getActionLabel(step.action)}
|
||||
</button>
|
||||
` : ''}
|
||||
|
||||
${!isLastStep ? `
|
||||
<button class="help-btn help-btn-primary" onclick="GuidedHelp.nextStep()">
|
||||
Next →
|
||||
</button>
|
||||
` : `
|
||||
<button class="help-btn help-btn-primary" onclick="GuidedHelp.complete()">
|
||||
Got it
|
||||
</button>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
helpContainer.classList.add('visible');
|
||||
}
|
||||
|
||||
function getActionLabel(action) {
|
||||
const labels = {
|
||||
'add-node': 'Add Node',
|
||||
'toggle-gdop': 'Show GDOP',
|
||||
'view-timeline': 'View Timeline',
|
||||
'give-feedback': 'Give Feedback',
|
||||
'open-settings': 'Open Settings',
|
||||
'open-automations': 'Automations',
|
||||
'open-simulator': 'Open Simulator',
|
||||
'create-zone': 'Create Zone',
|
||||
'add-trigger': 'Add Trigger',
|
||||
'view-automations': 'View Automations',
|
||||
'test-webhook': 'Test Webhook',
|
||||
'view-logs': 'View Logs'
|
||||
};
|
||||
return labels[action] || 'Action';
|
||||
}
|
||||
|
||||
function executeAction(action) {
|
||||
switch (action) {
|
||||
case 'add-node':
|
||||
if (window.SpaxelOnboard) {
|
||||
SpaxelOnboard.start();
|
||||
}
|
||||
break;
|
||||
case 'toggle-gdop':
|
||||
if (window.Placement) {
|
||||
Placement.toggleGDOP();
|
||||
}
|
||||
break;
|
||||
case 'view-timeline':
|
||||
if (window.SpaxelRouter) {
|
||||
SpaxelRouter.navigate('timeline');
|
||||
}
|
||||
break;
|
||||
case 'give-feedback':
|
||||
if (window.FeedbackUI) {
|
||||
FeedbackUI.openForContext(activeGuide.context);
|
||||
}
|
||||
break;
|
||||
case 'open-settings':
|
||||
if (window.openSettingsPanel) {
|
||||
openSettingsPanel();
|
||||
}
|
||||
break;
|
||||
case 'open-automations':
|
||||
if (window.SpaxelRouter) {
|
||||
SpaxelRouter.navigate('automations');
|
||||
}
|
||||
break;
|
||||
case 'open-simulator':
|
||||
if (window.Simulate) {
|
||||
Simulate.togglePanel();
|
||||
}
|
||||
break;
|
||||
case 'create-zone':
|
||||
// Open zone editor
|
||||
break;
|
||||
case 'add-trigger':
|
||||
// Open trigger editor
|
||||
break;
|
||||
case 'view-automations':
|
||||
if (window.SpaxelRouter) {
|
||||
SpaxelRouter.navigate('automations');
|
||||
}
|
||||
break;
|
||||
case 'test-webhook':
|
||||
// Test webhook functionality
|
||||
break;
|
||||
case 'view-logs':
|
||||
// Show automation logs
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Navigation =====
|
||||
function nextStep() {
|
||||
if (!activeGuide) return;
|
||||
if (activeGuide.currentStep < activeGuide.data.steps.length - 1) {
|
||||
activeGuide.currentStep++;
|
||||
renderGuide();
|
||||
}
|
||||
}
|
||||
|
||||
function previousStep() {
|
||||
if (!activeGuide) return;
|
||||
if (activeGuide.currentStep > 0) {
|
||||
activeGuide.currentStep--;
|
||||
renderGuide();
|
||||
}
|
||||
}
|
||||
|
||||
function complete() {
|
||||
const dontShowAgain = document.getElementById('help-dont-show-again');
|
||||
if (dontShowAgain && dontShowAgain.checked) {
|
||||
dismissedGuides.add(activeGuide.id);
|
||||
saveDismissedGuides();
|
||||
}
|
||||
dismiss();
|
||||
}
|
||||
|
||||
function dismiss() {
|
||||
helpContainer.classList.remove('visible');
|
||||
activeGuide = null;
|
||||
helpPanelVisible = false;
|
||||
}
|
||||
|
||||
// ===== Persistence =====
|
||||
function saveDismissedGuides() {
|
||||
try {
|
||||
localStorage.setItem('spaxel_dismissed_guides', Array.from(dismissedGuides).join(','));
|
||||
} catch (e) {
|
||||
console.warn('Failed to save dismissed guides:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function loadDismissedGuides() {
|
||||
try {
|
||||
const saved = localStorage.getItem('spaxel_dismissed_guides');
|
||||
if (saved) {
|
||||
dismissedGuides = new Set(saved.split(',').filter(id => id));
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to load dismissed guides:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Proactive Triggers =====
|
||||
function checkProactiveTriggers() {
|
||||
// No nodes
|
||||
if (window.Viz3D && Viz3D.getNodes && Viz3D.getNodes().length === 0) {
|
||||
showGuide('no-nodes');
|
||||
}
|
||||
|
||||
// Poor detection quality
|
||||
const qualityGauge = document.getElementById('quality-value');
|
||||
if (qualityGauge) {
|
||||
const quality = parseInt(qualityGauge.textContent);
|
||||
if (!isNaN(quality) && quality < 60) {
|
||||
showGuide('poor-detection');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Context Menu Integration =====
|
||||
function addContextualHelp(target, guideId) {
|
||||
// Add help button to context menus
|
||||
const helpBtn = document.createElement('button');
|
||||
helpBtn.className = 'context-help-btn';
|
||||
helpBtn.innerHTML = '?';
|
||||
helpBtn.onclick = () => showGuide(guideId);
|
||||
return helpBtn;
|
||||
}
|
||||
|
||||
// ===== Public API =====
|
||||
window.GuidedHelp = {
|
||||
show: showGuide,
|
||||
dismiss: dismiss,
|
||||
nextStep: nextStep,
|
||||
previousStep: previousStep,
|
||||
complete: complete,
|
||||
executeAction: executeAction,
|
||||
addContextualHelp: addContextualHelp,
|
||||
checkTriggers: checkProactiveTriggers
|
||||
};
|
||||
|
||||
// ===== Initialization =====
|
||||
loadDismissedGuides();
|
||||
|
||||
// Check triggers after a short delay
|
||||
setTimeout(checkProactiveTriggers, 3000);
|
||||
|
||||
// Listen for system events that might trigger guides
|
||||
window.addEventListener('spaxel:node-offline', (e) => {
|
||||
showGuide('node-offline', { nodeId: e.detail.nodeId });
|
||||
});
|
||||
|
||||
window.addEventListener('spaxel:first-anomaly', (e) => {
|
||||
showGuide('first-anomaly', { anomalyId: e.detail.anomalyId });
|
||||
});
|
||||
|
||||
window.addEventListener('spaxel:security-enabled', () => {
|
||||
if (!dismissedGuides.has('security-first-use')) {
|
||||
showGuide('security-first-use');
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('spaxel:automation-failed', (e) => {
|
||||
showGuide('automation-not-firing', { automationId: e.detail.automationId });
|
||||
});
|
||||
|
||||
})();
|
||||
1302
dashboard/js/quick-actions.js
Normal file
1302
dashboard/js/quick-actions.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -2744,6 +2744,160 @@ const Viz3D = (function () {
|
|||
return states;
|
||||
}
|
||||
|
||||
// ── Follow Camera ───────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Set camera to follow a specific blob.
|
||||
* @param {number} blobId - The blob ID to follow, or null to stop following
|
||||
*/
|
||||
function setFollowTarget(blobId) {
|
||||
if (blobId === null || blobId === undefined) {
|
||||
_followId = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if blob exists
|
||||
if (!_blobs3D.has(blobId)) {
|
||||
console.warn('[Viz3D] Cannot follow blob', blobId, '- not found');
|
||||
return;
|
||||
}
|
||||
|
||||
_followId = blobId;
|
||||
console.log('[Viz3D] Now following blob', blobId);
|
||||
|
||||
// Show indicator
|
||||
_showFollowIndicator(blobId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current follow target.
|
||||
* @returns {number|null} The blob ID being followed, or null
|
||||
*/
|
||||
function getFollowTarget() {
|
||||
return _followId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show follow mode indicator in UI.
|
||||
*/
|
||||
function _showFollowIndicator(blobId) {
|
||||
// Remove existing indicator
|
||||
_removeFollowIndicator();
|
||||
|
||||
// Create indicator
|
||||
const indicator = document.createElement('div');
|
||||
indicator.className = 'follow-mode-indicator';
|
||||
indicator.id = 'follow-indicator';
|
||||
|
||||
// Get blob info
|
||||
const blob = _blobs3D.get(blobId);
|
||||
const personName = blob && blob.personLabel ? blob.personLabel : 'Blob #' + blobId;
|
||||
indicator.textContent = 'Following ' + personName;
|
||||
indicator.style.cursor = 'pointer';
|
||||
indicator.style.pointerEvents = 'auto';
|
||||
|
||||
// Click to stop following
|
||||
indicator.addEventListener('click', function() {
|
||||
setFollowTarget(null);
|
||||
_removeFollowIndicator();
|
||||
});
|
||||
|
||||
document.body.appendChild(indicator);
|
||||
|
||||
// Auto-hide after 5 seconds
|
||||
setTimeout(function() {
|
||||
_removeFollowIndicator();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove follow mode indicator.
|
||||
*/
|
||||
function _removeFollowIndicator() {
|
||||
const indicator = document.getElementById('follow-indicator');
|
||||
if (indicator) {
|
||||
indicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Node Link Highlighting ─────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Highlight all links connected to a specific node.
|
||||
* @param {string} mac - The node MAC address
|
||||
* @param {boolean} highlight - Whether to highlight (true) or restore (false)
|
||||
* @param {number} color - Optional color hex value (default: 0x4fc3f7)
|
||||
*/
|
||||
function highlightNodeLinks(mac, highlight, color) {
|
||||
if (!_linkLines || _linkLines.size === 0) return;
|
||||
|
||||
const highlightColor = color || 0x4fc3f7;
|
||||
|
||||
_linkLines.forEach(function(line, linkID) {
|
||||
// Check if this link involves the specified node
|
||||
if (linkID.includes(mac)) {
|
||||
if (highlight) {
|
||||
// Store original material state
|
||||
if (!line.userData.originalState) {
|
||||
line.userData.originalState = {
|
||||
opacity: line.material.opacity,
|
||||
transparent: line.material.transparent,
|
||||
color: line.material.color ? line.material.color.getHex() : null
|
||||
};
|
||||
|
||||
// Apply highlight
|
||||
line.material.opacity = 1.0;
|
||||
line.material.transparent = false;
|
||||
if (line.material.color) {
|
||||
line.material.color.setHex(highlightColor);
|
||||
}
|
||||
if (line.material.emissive) {
|
||||
line.material.emissive.setHex(highlightColor);
|
||||
line.material.emissiveIntensity = 0.5;
|
||||
}
|
||||
line.material.needsUpdate = true;
|
||||
} else {
|
||||
// Restore original state
|
||||
if (line.userData.originalState) {
|
||||
const orig = line.userData.originalState;
|
||||
line.material.opacity = orig.opacity;
|
||||
line.material.transparent = orig.transparent;
|
||||
if (line.material.color && orig.color !== null) {
|
||||
line.material.color.setHex(orig.color);
|
||||
}
|
||||
if (line.material.emissive) {
|
||||
line.material.emissiveIntensity = 0;
|
||||
}
|
||||
line.material.needsUpdate = true;
|
||||
delete line.userData.originalState;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all link highlights.
|
||||
*/
|
||||
function clearLinkHighlights() {
|
||||
if (!_linkLines) return;
|
||||
_linkLines.forEach(function(line) {
|
||||
if (line.userData.originalState) {
|
||||
const orig = line.userData.originalState;
|
||||
line.material.opacity = orig.opacity;
|
||||
line.material.transparent = orig.transparent;
|
||||
if (line.material.color && orig.color !== null) {
|
||||
line.material.color.setHex(orig.color);
|
||||
}
|
||||
if (line.material.emissive) {
|
||||
line.material.emissiveIntensity = 0;
|
||||
}
|
||||
line.material.needsUpdate = true;
|
||||
delete line.userData.originalState;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ── Public API ────────────────────────────────────────────────────────────
|
||||
return {
|
||||
init,
|
||||
|
|
@ -2897,6 +3051,25 @@ const Viz3D = (function () {
|
|||
setGDOPOverlayVisible: setGDOPOverlayVisible,
|
||||
clearGDOPOverlay: clearGDOPOverlay,
|
||||
getGDOPState: getGDOPState,
|
||||
// Follow camera API
|
||||
setFollowTarget: setFollowTarget,
|
||||
getFollowTarget: getFollowTarget,
|
||||
// Node link highlighting API
|
||||
highlightNodeLinks: highlightNodeLinks,
|
||||
clearLinkHighlights: clearLinkHighlights,
|
||||
// Scene and controls access
|
||||
scene: function() { return _scene; },
|
||||
camera: function() { return _camera; },
|
||||
controls: function() { return _controls; },
|
||||
renderer: function() { return _renderer; },
|
||||
blobMeshes: function() {
|
||||
const meshes = [];
|
||||
_blobs3D.forEach(function(obj) {
|
||||
meshes.push(obj.group);
|
||||
});
|
||||
return meshes;
|
||||
},
|
||||
nodeMeshes: function() { return Array.from(_nodeMeshes.values()); },
|
||||
};
|
||||
// ── Replay Mode Support ─────────────────────────────────────────────────────
|
||||
// Store live blob states for replay mode restoration
|
||||
|
|
@ -3001,4 +3174,49 @@ const Viz3D = (function () {
|
|||
applyLocUpdate(blobUpdates);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Public API ───────────────────────────────────────────────────────────────
|
||||
return {
|
||||
// Core
|
||||
init: init,
|
||||
update: update,
|
||||
|
||||
// Room
|
||||
applyRoom: applyRoom,
|
||||
clearRoom: clearRoom,
|
||||
|
||||
// Nodes
|
||||
applyNodeList: applyNodeList,
|
||||
updateNodePositions: updateNodePositions,
|
||||
getNodeMeshes: function() { return _nodeMeshes; },
|
||||
nodeMeshes: function() { return _nodeMeshes; }, // alias for quick-actions
|
||||
|
||||
// Links
|
||||
applyLinkList: applyLinkList,
|
||||
updateLinkHealth: updateLinkHealth,
|
||||
highlightNodeLinks: highlightNodeLinks,
|
||||
clearLinkHighlights: clearLinkHighlights,
|
||||
|
||||
// Blobs
|
||||
applyLocUpdate: applyLocUpdate,
|
||||
getBlobs3D: function() { return _blobs3D; },
|
||||
blobMeshes: function() { return _blobs3D; }, // alias for quick-actions
|
||||
|
||||
// View presets
|
||||
setViewPreset: setViewPreset,
|
||||
resetView: resetView,
|
||||
|
||||
// Ghost node
|
||||
setGhostNode: setGhostNode,
|
||||
clearGhostNode: clearGhostNode,
|
||||
|
||||
// Replay
|
||||
loadReplaySnapshot: loadReplaySnapshot,
|
||||
|
||||
// Direct access (for advanced integrations)
|
||||
scene: function() { return _scene; },
|
||||
camera: function() { return _camera; },
|
||||
controls: function() { return _controls; },
|
||||
followId: function() { return _followId; }
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
40
fix_ble_handlers.py
Normal file
40
fix_ble_handlers.py
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
#!/usr/bin/env python3
|
||||
"""Fix BLE handlers in main.go by replacing inline handlers with proper ble.Handler registration."""
|
||||
|
||||
# Read the file
|
||||
with open('mothership/cmd/mothership/main.go', 'r') as f:
|
||||
lines = f.readlines()
|
||||
|
||||
# Lines 2072-2159 (0-indexed: 2071-2158) contain the inline BLE handlers
|
||||
# We need to replace these with the proper ble.Handler registration
|
||||
|
||||
# Keep everything before line 2072
|
||||
new_lines = lines[:2071]
|
||||
|
||||
# Add the new BLE handler registration
|
||||
new_lines.append(' // Phase 6: BLE REST API\n')
|
||||
new_lines.append(' if bleRegistry != nil {\n')
|
||||
new_lines.append(' bleHandler := ble.NewHandler(bleRegistry)\n')
|
||||
new_lines.append(' bleHandler.RegisterRoutes(r)\n')
|
||||
new_lines.append(' log.Printf("[INFO] BLE REST API registered at /api/ble/* and /api/people/*")\n')
|
||||
new_lines.append('\n')
|
||||
new_lines.append(' // BLE identity matches endpoint (not in ble.Handler)\n')
|
||||
new_lines.append(' r.Get("/api/ble/matches", func(w http.ResponseWriter, r *http.Request) {\n')
|
||||
new_lines.append(' if identityMatcher == nil {\n')
|
||||
new_lines.append(' writeJSON(w, []*ble.IdentityMatch{})\n')
|
||||
new_lines.append(' return\n')
|
||||
new_lines.append(' }\n')
|
||||
new_lines.append(' matches := identityMatcher.GetAllMatches()\n')
|
||||
new_lines.append(' writeJSON(w, matches)\n')
|
||||
new_lines.append(' })\n')
|
||||
new_lines.append(' }\n')
|
||||
|
||||
# Keep everything after line 2159
|
||||
new_lines.extend(lines[2159:])
|
||||
|
||||
# Write back
|
||||
with open('mothership/cmd/mothership/main.go', 'w') as f:
|
||||
f.writelines(new_lines)
|
||||
|
||||
print("Successfully updated main.go")
|
||||
print("Replaced inline BLE handlers (lines 2072-2159) with ble.Handler.RegisterRoutes(r)")
|
||||
3895
mothership/cmd/mothership/main.go.bak
Normal file
3895
mothership/cmd/mothership/main.go.bak
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue