WebHost: Better host room (#3496)

* add Range= to log, making responses a lot smaller for massive rooms
* switch xhr to fetch
* post the form using fetch if possible
  * also refresh log faster while waiting for command echo / response
  * do not follow redirect, saving a request
  * do not post empty body
* smooth-scroll the log view
* paste the log into the div when loading the HTML (up to 1MB, rest will be `fetch`ed)
* fix duplicate charset in display_log response

WebHostLib/templates/hostRoom.html

@@ -44,7 +44,7 @@
         {{ macros.list_patches_room(room) }}
         {% if room.owner == session["_id"] %}
             <div style="display: flex; align-items: center;">
-                <form method=post style="flex-grow: 1; margin-right: 1em;">
+                <form method="post" id="command-form" style="flex-grow: 1; margin-right: 1em;">
                     <div class="form-group">
                         <label for="cmd"></label>
                         <input class="form-control" type="text" id="cmd" name="cmd"
@@ -55,24 +55,89 @@
                     Open Log File...
                 </a>
             </div>
-        <div id="logger"></div>
-        <script type="application/ecmascript">
-            let xmlhttp = new XMLHttpRequest();
-            let url = '{{ url_for('display_log', room = room.id) }}';
+        {%  set log = get_log() -%}
+        {%- set log_len = log | length - 1 if log.endswith("…") else log | length -%}
+        <div id="logger" style="white-space: pre">{{ log }}</div>
+        <script>
+          let url = '{{ url_for('display_log', room = room.id) }}';
+          let bytesReceived = {{ log_len }};
+          let updateLogTimeout;
+          let awaitingCommandResponse = false;
+          let logger = document.getElementById("logger");
 
-            xmlhttp.onreadystatechange = function () {
-                if (this.readyState === 4 && this.status === 200) {
-                    document.getElementById("logger").innerText = this.responseText;
-                }
-            };
-
-            function request_new() {
-                xmlhttp.open("GET", url, true);
-                xmlhttp.send();
+          function scrollToBottom(el) {
+            let bot = el.scrollHeight - el.clientHeight;
+            el.scrollTop += Math.ceil((bot - el.scrollTop)/10);
+            if (bot - el.scrollTop >= 1) {
+              window.clearTimeout(el.scrollTimer);
+              el.scrollTimer = window.setTimeout(() => {
+                scrollToBottom(el)
+              }, 16);
             }
+          }
 
-            window.setTimeout(request_new, 1000);
-            window.setInterval(request_new, 10000);
+          async function updateLog() {
+            try {
+              let res = await fetch(url, {
+                headers: {
+                  'Range': `bytes=${bytesReceived}-`,
+                }
+              });
+              if (res.ok) {
+                let text = await res.text();
+                if (text.length > 0) {
+                  awaitingCommandResponse = false;
+                  if (bytesReceived === 0 || res.status !== 206) {
+                    logger.innerHTML = '';
+                  }
+                  if (res.status !== 206) {
+                    bytesReceived = 0;
+                  } else {
+                    bytesReceived += new Blob([text]).size;
+                  }
+                  if (logger.innerHTML.endsWith('…')) {
+                    logger.innerHTML = logger.innerHTML.substring(0, logger.innerHTML.length - 1);
+                  }
+                  logger.appendChild(document.createTextNode(text));
+                  scrollToBottom(logger);
+                }
+              }
+            }
+            finally {
+              window.clearTimeout(updateLogTimeout);
+              updateLogTimeout = window.setTimeout(updateLog, awaitingCommandResponse ? 500 : 10000);
+            }
+          }
+
+          async function postForm(ev) {
+            /** @type {HTMLInputElement} */
+            let cmd = document.getElementById("cmd");
+            if (cmd.value === "") {
+              ev.preventDefault();
+              return;
+            }
+            /** @type {HTMLFormElement} */
+            let form = document.getElementById("command-form");
+            let req = fetch(form.action || window.location.href, {
+              method: form.method,
+              body: new FormData(form),
+              redirect: "manual",
+            });
+            ev.preventDefault(); // has to happen before first await
+            form.reset();
+            let res = await req;
+            if (res.ok || res.type === 'opaqueredirect') {
+              awaitingCommandResponse = true;
+              window.clearTimeout(updateLogTimeout);
+              updateLogTimeout = window.setTimeout(updateLog, 100);
+            } else {
+              window.alert(res.statusText);
+            }
+          }
+
+          document.getElementById("command-form").addEventListener("submit", postForm);
+          updateLogTimeout = window.setTimeout(updateLog, 1000);
+          logger.scrollTop = logger.scrollHeight;
         </script>
         {% endif %}
     </div>