iarv/mc-webui
1
0
Fork 1
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-03-28 17:42:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(logs): open System Log as fullscreen modal like Console

Browse Source 
Changed from target="_blank" link to fullscreen modal with iframe,
matching the pattern used by Console, DM, and Contacts modals.
Iframe loads on open and clears on close to manage WebSocket lifecycle.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-03-20 20:41:20 +01:00
parent 0110e65b97
commit ca0ba37be5
3 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/templates/base.html
View File

@@ -133,13 +133,13 @@
<small class="d-block text-muted">Direct meshcli commands</small>
</div>
</button>
<a href="/logs" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-dismiss="offcanvas">
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#logsModal" data-bs-dismiss="offcanvas">
<i class="bi bi-journal-text" style="font-size: 1.5rem;"></i>
<div>
<span>System Log</span>
<small class="d-block text-muted">Real-time application logs</small>
</div>
</a>
</button>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3"
id="mapBtn" title="Show all contacts with GPS on map">
<i class="bi bi-map" style="font-size: 1.5rem;"></i>

37
app/templates/index.html
View File

@@ -44,6 +44,7 @@
/* Modal fullscreen - remove all margins and padding */
#dmModal .modal-dialog.modal-fullscreen,
#contactsModal .modal-dialog.modal-fullscreen,
#logsModal .modal-dialog.modal-fullscreen,
#consoleModal .modal-dialog.modal-fullscreen {
margin: 0 !important;
width: 100vw !important;
@@ -54,6 +55,7 @@
#dmModal .modal-content,
#contactsModal .modal-content,
#logsModal .modal-content,
#consoleModal .modal-content {
border: none !important;
border-radius: 0 !important;
@@ -62,6 +64,7 @@
#dmModal .modal-body,
#contactsModal .modal-body,
#logsModal .modal-body,
#consoleModal .modal-body {
overflow: hidden !important;
}
@@ -230,6 +233,23 @@
</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 %}
@@ -302,6 +322,23 @@
}
});
}
// 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 %}

8
app/templates/logs.html
View File

@@ -151,15 +151,11 @@
<div class="log-container">
<!-- Header -->
<div class="log-header d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center gap-2">
<a href="/" class="btn btn-sm btn-log" title="Back to chat">
<i class="bi bi-arrow-left"></i>
</a>
<h6 class="mb-0 text-light">System Log</h6>
</div>
<div class="d-flex align-items-center gap-2">
<span class="log-count" id="logCount">0 entries</span>
<span class="status-indicator" id="statusDot"></span>
</div>
<div class="d-flex align-items-center gap-2">
<button class="btn btn-sm btn-log" id="pauseBtn" title="Pause/Resume">
<i class="bi bi-pause-fill" id="pauseIcon"></i>
</button>