Add TSCM advanced features UI

- Add meeting window controls (start/end tracked meetings)
- Add quick actions: capabilities, known devices, cases, playbooks
- Add export options for PDF and JSON/CSV reports
- Add JavaScript functions to connect UI to backend API endpoints
- Add CSS for capabilities grid, modal headers, playbook styles

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-16 16:20:47 +00:00
parent 234f254f4f
commit 6dbf2fda01
3 changed files with 1205 additions and 0 deletions

View File

@@ -79,6 +79,61 @@
📄 Generate Report
</button>
<!-- Meeting Window Control -->
<div class="section" id="tscmMeetingSection" style="margin-top: 12px;">
<h3>Meeting Window</h3>
<div id="tscmMeetingStatus" style="font-size: 11px; color: var(--text-muted); margin-bottom: 8px;">
No active meeting
</div>
<div class="form-group">
<input type="text" id="tscmMeetingName" placeholder="Meeting name (optional)">
</div>
<button class="run-btn" id="tscmStartMeetingBtn" onclick="tscmStartMeeting()" style="width: 100%; padding: 8px;">
🎯 Start Meeting Window
</button>
<button class="stop-btn" id="tscmEndMeetingBtn" onclick="tscmEndMeeting()" style="width: 100%; padding: 8px; display: none;">
⏹ End Meeting Window
</button>
<div style="font-size: 9px; color: var(--text-muted); margin-top: 4px;">
Devices detected during meetings get flagged
</div>
</div>
<!-- Quick Actions -->
<div class="section" style="margin-top: 12px;">
<h3>Quick Actions</h3>
<div style="display: flex; flex-direction: column; gap: 6px;">
<button class="preset-btn" onclick="tscmShowCapabilities()" style="width: 100%; font-size: 10px;">
⚙️ View Capabilities
</button>
<button class="preset-btn" onclick="tscmShowKnownDevices()" style="width: 100%; font-size: 10px;">
✅ Known Devices
</button>
<button class="preset-btn" onclick="tscmShowCases()" style="width: 100%; font-size: 10px;">
📁 Cases
</button>
<button class="preset-btn" onclick="tscmShowPlaybooks()" style="width: 100%; font-size: 10px;">
📋 Playbooks
</button>
</div>
</div>
<!-- Export Options -->
<div class="section" id="tscmExportSection" style="margin-top: 12px; display: none;">
<h3>Export Report</h3>
<div style="display: flex; gap: 6px;">
<button class="preset-btn" onclick="tscmDownloadPdf()" style="flex: 1; font-size: 10px;">
📄 PDF
</button>
<button class="preset-btn" onclick="tscmDownloadAnnex('json')" style="flex: 1; font-size: 10px;">
📊 JSON
</button>
<button class="preset-btn" onclick="tscmDownloadAnnex('csv')" style="flex: 1; font-size: 10px;">
📈 CSV
</button>
</div>
</div>
<!-- Futuristic Scanner Progress -->
<div id="tscmProgress" class="tscm-scanner-progress" style="display: none;">
<div class="scanner-ring">