mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-07-27 12:02:38 +02:00
MarekWo
d8d3427dc9
Clicking a route in the chat path popup now opens Path Analyzer on the
Map view with that message selected and that exact echo path drawn,
instead of copying the route to the clipboard. Copy stays available as
a small per-route clipboard icon in the popup.
Deep link flow: popup click stores {packet_hash, path hex} in
window.paDeepLink; the modal show handler builds the iframe URL with
?hash=&path=; the analyzer resolves the message after load (widening
the time range once to 7 days if needed), matches the echo by raw path
hex (fallback: shortest), and switches to the map. A plain menu open
still loads the analyzer without any deep link.
Verified live via Playwright: clicked the 3rd (non-shortest) route of a
multi-route message - the map opened with exactly that echo selected,
including the 3-to-7-day widening retry (message was 4 days old).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
383 lines
18 KiB
HTML
383 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Chat - mc-webui{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<!-- Emoji Picker (local) -->
|
|
<script type="module" src="{{ url_for('static', filename='vendor/emoji-picker-element/index.js') }}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid d-flex flex-column" style="height: 100%;">
|
|
<!-- Main content: sidebar + chat -->
|
|
<div class="d-flex flex-grow-1 overflow-hidden" style="min-height: 0;">
|
|
<!-- Channel Sidebar (visible on lg+ screens) -->
|
|
<div id="channelSidebar" class="channel-sidebar">
|
|
<div class="channel-sidebar-header">
|
|
<i class="bi bi-broadcast-pin"></i> Channels
|
|
</div>
|
|
<div class="channel-sidebar-list" id="channelSidebarList">
|
|
<!-- Populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
<!-- Chat Area -->
|
|
<div class="flex-grow-1 d-flex flex-column" style="min-width: 0;">
|
|
<!-- Messages Container -->
|
|
<div class="flex-grow-1 position-relative overflow-hidden" style="min-height: 0;">
|
|
<!-- Filter bar overlay -->
|
|
<div id="filterBar" class="filter-bar">
|
|
<div class="filter-bar-inner">
|
|
<div class="filter-input-wrapper">
|
|
<input type="text" id="filterInput" class="filter-bar-input" placeholder="Filter messages..." autocomplete="off">
|
|
<!-- Filter mentions autocomplete popup -->
|
|
<div id="filterMentionsPopup" class="mentions-popup filter-mentions-popup hidden">
|
|
<div class="mentions-list" id="filterMentionsList"></div>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="filterMeBtn" class="filter-bar-btn filter-bar-btn-me" title="Filter my messages">
|
|
<i class="bi bi-person-fill"></i>
|
|
</button>
|
|
<span id="filterMatchCount" class="filter-match-count"></span>
|
|
<button type="button" id="filterClearBtn" class="filter-bar-btn filter-bar-btn-clear" title="Clear">
|
|
<i class="bi bi-x"></i>
|
|
</button>
|
|
<button type="button" id="filterCloseBtn" class="filter-bar-btn filter-bar-btn-close" title="Close">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="messagesContainer" class="messages-container h-100 overflow-auto p-3">
|
|
<div id="messagesList">
|
|
<!-- Messages will be loaded here via JavaScript -->
|
|
<div class="text-center text-muted py-5">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-3">Loading messages...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Scroll to bottom button -->
|
|
<button id="scrollToBottomBtn" class="scroll-to-bottom-btn" title="Scroll to bottom">
|
|
<i class="bi bi-chevron-double-down"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Send Message Form -->
|
|
<div class="border-top bg-light">
|
|
<form id="sendMessageForm" class="p-3">
|
|
<div class="emoji-picker-container">
|
|
<div class="input-group">
|
|
<textarea
|
|
id="messageInput"
|
|
class="form-control"
|
|
placeholder="Type a message..."
|
|
rows="2"
|
|
maxlength="500"
|
|
required
|
|
></textarea>
|
|
<button type="button" class="btn btn-outline-secondary" id="emojiBtn" title="Insert emoji">
|
|
<i class="bi bi-emoji-smile"></i>
|
|
</button>
|
|
<button type="submit" class="btn btn-primary px-4" id="sendBtn">
|
|
<i class="bi bi-send"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Emoji picker popup (hidden by default) -->
|
|
<div id="emojiPickerPopup" class="emoji-picker-popup hidden"></div>
|
|
<!-- Mentions autocomplete popup (hidden by default) -->
|
|
<div id="mentionsPopup" class="mentions-popup hidden">
|
|
<div class="mentions-list" id="mentionsList"></div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<small id="charCounter" class="text-muted">0 / 135</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Status Bar -->
|
|
<div class="border-top">
|
|
<div class="p-2 small text-muted d-flex justify-content-between align-items-center">
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<span id="statusText">
|
|
<i class="bi bi-circle-fill text-secondary"></i> Connecting...
|
|
</span>
|
|
<span id="regionIndicator" class="badge bg-info text-dark d-none" role="button"
|
|
title="Click to change region for this channel">
|
|
<i class="bi bi-pin-map"></i> <span id="regionIndicatorName"></span>
|
|
</span>
|
|
</div>
|
|
<span id="lastRefresh">Updated: Never</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Action Buttons -->
|
|
<div class="fab-container" id="fabContainer">
|
|
<button class="fab fab-toggle" id="fabToggle" title="Hide buttons">
|
|
<i class="bi bi-chevron-right"></i>
|
|
</button>
|
|
<button class="fab fab-filter" id="filterFab" title="Filter Messages">
|
|
<i class="bi bi-funnel-fill"></i>
|
|
</button>
|
|
<button class="fab fab-search" id="globalSearchBtn" data-bs-toggle="modal" data-bs-target="#searchModal" title="Search Messages">
|
|
<i class="bi bi-search"></i>
|
|
</button>
|
|
<button class="fab fab-dm" data-bs-toggle="modal" data-bs-target="#dmModal" title="Direct Messages">
|
|
<i class="bi bi-envelope-fill"></i>
|
|
</button>
|
|
<button class="fab fab-contacts" data-bs-toggle="modal" data-bs-target="#contactsModal" title="Contact Management">
|
|
<i class="bi bi-person-fill"></i>
|
|
</button>
|
|
<button class="fab fab-settings" data-bs-toggle="modal" data-bs-target="#settingsModal" title="Settings">
|
|
<i class="bi bi-gear-fill"></i>
|
|
</button>
|
|
<button class="fab fab-advert d-none" id="fab-advert" title="Send Advert">
|
|
<i class="bi bi-megaphone"></i>
|
|
</button>
|
|
<button class="fab fab-floodadvert d-none" id="fab-floodadvert" title="Flood Advert">
|
|
<i class="bi bi-broadcast"></i>
|
|
</button>
|
|
<button class="fab fab-map d-none" id="fab-map" title="Map">
|
|
<i class="bi bi-map"></i>
|
|
</button>
|
|
<button class="fab fab-console d-none" id="fab-console" data-bs-toggle="modal" data-bs-target="#consoleModal" title="Console">
|
|
<i class="bi bi-terminal"></i>
|
|
</button>
|
|
<button class="fab fab-repeaters d-none" id="fab-repeaters" data-bs-toggle="modal" data-bs-target="#repeatersModal" title="My Repeaters">
|
|
<i class="bi bi-diagram-3"></i>
|
|
</button>
|
|
<button class="fab fab-pathanalyzer d-none" id="fab-pathanalyzer" data-bs-toggle="modal" data-bs-target="#pathAnalyzerModal" title="Path Analyzer">
|
|
<i class="bi bi-signpost-split"></i>
|
|
</button>
|
|
<button class="fab fab-deviceinfo d-none" id="fab-deviceinfo" data-bs-toggle="modal" data-bs-target="#deviceInfoModal" title="Device Info">
|
|
<i class="bi bi-cpu"></i>
|
|
</button>
|
|
<button class="fab fab-syslog d-none" id="fab-syslog" data-bs-toggle="modal" data-bs-target="#logsModal" title="System Log">
|
|
<i class="bi bi-journal-text"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- DM Modal (Full Screen) -->
|
|
<div class="modal fade" id="dmModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title"><i class="bi bi-envelope"></i> Direct Messages</h5>
|
|
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-lg"></i> Close
|
|
</button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<iframe id="dmFrame" src="/dm" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Management Modal (Full Screen) -->
|
|
<div class="modal fade" id="contactsModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title"><i class="bi bi-person-check"></i> Contact Management</h5>
|
|
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-lg"></i> Close
|
|
</button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<iframe id="contactsFrame" src="/contacts/manage" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Console Modal (Full Screen) -->
|
|
<div class="modal fade" id="consoleModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content" style="background-color: #1a1a2e;">
|
|
<div class="modal-header" style="background-color: #16213e; border-bottom: 1px solid #0f3460;">
|
|
<h5 class="modal-title text-white"><i class="bi bi-terminal"></i> mc-webui Console</h5>
|
|
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-lg"></i> Close
|
|
</button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<iframe id="consoleFrame" src="/console" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- My Repeaters Modal (Full Screen) -->
|
|
<div class="modal fade" id="repeatersModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title"><i class="bi bi-diagram-3"></i> My Repeaters</h5>
|
|
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-lg"></i> Close
|
|
</button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<iframe id="repeatersFrame" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Path Analyzer Modal (Full Screen) -->
|
|
<div class="modal fade" id="pathAnalyzerModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header pathanalyzer-header text-white">
|
|
<h5 class="modal-title"><i class="bi bi-signpost-split"></i> Path Analyzer</h5>
|
|
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-lg"></i> Close
|
|
</button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<iframe id="pathAnalyzerFrame" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Log Modal (Full Screen) -->
|
|
<div class="modal fade" id="logsModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content" style="background-color: #1a1a2e;">
|
|
<div class="modal-header" style="background-color: #16213e; border-bottom: 1px solid #0f3460;">
|
|
<h5 class="modal-title text-white"><i class="bi bi-journal-text"></i> System Log</h5>
|
|
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-lg"></i> Close
|
|
</button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<iframe id="logsFrame" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
// Pass configuration from Flask to JavaScript
|
|
window.MC_CONFIG = {
|
|
deviceName: "{{ device_name }}"
|
|
};
|
|
|
|
// Reload iframe content when modals are opened to ensure fresh data
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const dmModal = document.getElementById('dmModal');
|
|
const contactsModal = document.getElementById('contactsModal');
|
|
|
|
if (dmModal) {
|
|
dmModal.addEventListener('show.bs.modal', function () {
|
|
const dmFrame = document.getElementById('dmFrame');
|
|
if (dmFrame) {
|
|
dmFrame.src = dmFrame.src;
|
|
}
|
|
});
|
|
|
|
// Update DM badges when modal is closed (without full page reload)
|
|
dmModal.addEventListener('hidden.bs.modal', async function () {
|
|
try {
|
|
// Reload DM read status from server to sync with app.js automatic updates
|
|
// This ensures dmLastSeenTimestamps in app.js is current
|
|
if (typeof loadDmLastSeenTimestampsFromServer === 'function') {
|
|
await loadDmLastSeenTimestampsFromServer();
|
|
}
|
|
|
|
// Trigger DM badge update (now handled by app.js on FAB button)
|
|
if (typeof checkDmUpdates === 'function') {
|
|
await checkDmUpdates();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating DM badges:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (contactsModal) {
|
|
contactsModal.addEventListener('show.bs.modal', function () {
|
|
const contactsFrame = document.getElementById('contactsFrame');
|
|
if (contactsFrame) {
|
|
contactsFrame.src = contactsFrame.src;
|
|
}
|
|
});
|
|
|
|
// Update pending contacts badge when modal is closed
|
|
contactsModal.addEventListener('hidden.bs.modal', async function () {
|
|
try {
|
|
// Trigger pending contacts badge update (handled by app.js on FAB button)
|
|
if (typeof updatePendingContactsBadge === 'function') {
|
|
await updatePendingContactsBadge();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating pending contacts badge:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Console modal - reload iframe when opened to reset WebSocket connection
|
|
const consoleModal = document.getElementById('consoleModal');
|
|
if (consoleModal) {
|
|
consoleModal.addEventListener('show.bs.modal', function () {
|
|
const consoleFrame = document.getElementById('consoleFrame');
|
|
if (consoleFrame) {
|
|
consoleFrame.src = '/console';
|
|
}
|
|
});
|
|
}
|
|
|
|
// My Repeaters modal - (re)load iframe on open for fresh data
|
|
const repeatersModal = document.getElementById('repeatersModal');
|
|
if (repeatersModal) {
|
|
repeatersModal.addEventListener('show.bs.modal', function () {
|
|
const repeatersFrame = document.getElementById('repeatersFrame');
|
|
if (repeatersFrame) {
|
|
repeatersFrame.src = '/repeaters';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Path Analyzer modal - (re)load iframe on open for fresh data
|
|
const pathAnalyzerModal = document.getElementById('pathAnalyzerModal');
|
|
if (pathAnalyzerModal) {
|
|
pathAnalyzerModal.addEventListener('show.bs.modal', function () {
|
|
const pathAnalyzerFrame = document.getElementById('pathAnalyzerFrame');
|
|
if (pathAnalyzerFrame) {
|
|
// Deep link from a chat path popup (openPathInAnalyzer):
|
|
// preselect the message + echo on the map view
|
|
const dl = window.paDeepLink;
|
|
window.paDeepLink = null;
|
|
pathAnalyzerFrame.src = dl
|
|
? `/path-analyzer?hash=${encodeURIComponent(dl.hash)}&path=${encodeURIComponent(dl.path)}`
|
|
: '/path-analyzer';
|
|
}
|
|
});
|
|
}
|
|
|
|
// System Log modal - load iframe on open, clear on close
|
|
const logsModal = document.getElementById('logsModal');
|
|
if (logsModal) {
|
|
logsModal.addEventListener('show.bs.modal', function () {
|
|
const logsFrame = document.getElementById('logsFrame');
|
|
if (logsFrame) {
|
|
logsFrame.src = '/logs';
|
|
}
|
|
});
|
|
logsModal.addEventListener('hidden.bs.modal', function () {
|
|
const logsFrame = document.getElementById('logsFrame');
|
|
if (logsFrame) {
|
|
logsFrame.src = ''; // disconnect WebSocket when closed
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|