dashboard: add console clear button

1 files changed, 13 insertions, 1 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 8b62181..9b23d46 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -94,6 +94,8 @@
   section h2 .following { font-size: 12px; text-transform: none; letter-spacing: 0;
     margin-left: 1em; font-style: italic; }
   section.collapsed h2 .following { display: none; }
+  /* A button within a title's line, where it comes (not at its end, as toggles are). */
+  section h2 button.inline { float: none; margin-left: 1em; line-height: 1em; }
   /* The right column dragged off to the side: the map takes the width. */
   @media (min-width: 901px) {
     main.right-hidden > section:not(#map) { display: none; }
@@ -277,7 +279,7 @@
   <div id="column-hint" class="note">Drag the space left of these boxes to the right to
     hide the column.</div>
   <section id="console-box">
-    <h2>Console <label class="choice" title="Only the messages with the node or over the link in focus (clicked on the map or in the peers); all while nothing is"><input type="checkbox" id="console-filter">filter selected</label><span id="console-following" class="following" title="Scrolled to the bottom: new messages are scrolled to as they come; scroll up to stop">following…</span><span id="console-rates" class="rates" title="Messages and bytes per second sent and received, as load averages are: over the last 1, 5 and 15 minutes (exponentially weighted), since the page was opened; with the filter, those with the node or over the link in focus"></span></h2>
+    <h2>Console <label class="choice" title="Only the messages with the node or over the link in focus (clicked on the map or in the peers); all while nothing is"><input type="checkbox" id="console-filter">filter selected</label><span id="console-following" class="following" title="Scrolled to the bottom: new messages are scrolled to as they come; scroll up to stop">following…</span><button id="console-clear" class="toggle inline" title="Empty this page's console: what comes from now on fills it again">clear</button><span id="console-rates" class="rates" title="Messages and bytes per second sent and received, as load averages are: over the last 1, 5 and 15 minutes (exponentially weighted), since the page was opened; with the filter, those with the node or over the link in focus"></span></h2>
     <div class="scroll" id="console-scroll"><div id="console" class="console"></div>
       <div id="console-none" class="note" hidden>No information available</div></div>
   </section>
@@ -2168,6 +2170,16 @@ function showFollowing() {
     scroll.scrollTop + scroll.clientHeight < scroll.scrollHeight - 4;
 }
 consoleScroll.addEventListener("scroll", showFollowing, { passive: true });
+// `clear`: the console emptied; it fills again with what comes from now on.
+document.getElementById("console-clear").addEventListener("click", () => {
+  consoleMessages.length = 0;
+  pointedMessage = null;
+  if (shownMessage !== null) showMessage(null);
+  markRelated(null);
+  document.getElementById("console").replaceChildren();
+  filterConsole();
+  showFollowing();
+});
 function showConsole() {
   document.getElementById("console").replaceChildren(...consoleMessages.map(consoleLine));
   filterConsole();