Merge branch 'tweak/terminal-scroll' into 'dev'

Add button to scroll to bottom of vterm

See merge request crafty-controller/crafty-4!454

CHANGELOG.md

@@ -7,7 +7,7 @@ TBD
 - Fix traceback error when a user click the roles config tab while already on the roles config page; **this is for new role creation only** ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/452))
 - Fix logic issue when removing items from backup exclusions ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/453))
 ### Tweaks
-TBD
+- Add button to scroll to bottom of vterm ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/454))
 ### Lang
 TBD
 <br><br>

app/frontend/templates/panel/server_term.html

@@ -40,6 +40,9 @@
           </span>
 
           <div class="col-md-12">
+            <button id="to-bottom" style="visibility: hidden; float: right;" class="btn btn-outline-success">{{ translate('serverDetails', 'reset', data['lang']) }}</button>
+            <br />
+            <br />
             <div class="input-group">
               <div id="virt_console" class="" style="width: 100%; font-size: .8em; padding: 5px 10px; border: 1px solid #383e5d; background-color:#2a2c44;height:500px; overflow: scroll;"></div>
             </div>
@@ -193,8 +196,7 @@
   function new_line_handler(data) {
     $('#virt_console').append(data.line)
     const elem = document.getElementById('virt_console');
-    const scrollDiff = (elem.scrollHeight - elem.scrollTop) - elem.clientHeight;
-    if (!$("#stop_scroll").is(':checked') && scrollDiff < 450) {
+    if (!scrolled) {
       scrollConsole()
     }
   }
@@ -293,6 +295,31 @@
       return nextCommand;
     }
   }
+
+  const chkScroll = (e) => {
+    const elem = $(e.currentTarget);
+
+    if (Math.round(elem[0].scrollHeight - elem.scrollTop()) <= elem.outerHeight()) {
+      document.getElementById("to-bottom").style.visibility = "hidden";
+      scrolled = false;
+    }else{
+      document.getElementById("to-bottom").style.visibility = "visible";
+      scrolled = true;
+    }
+  }
+
+  const scrollToBottom = (id) => {
+   const element = $(`#virt_console`);
+   element.animate({
+      scrollTop: element.prop("scrollHeight")
+   }, 500);
+}
+
+  $(document).ready(() => {
+    var scrolled;
+    $('#virt_console').on('scroll', chkScroll);
+    $('#to-bottom').on('click', scrollToBottom)
+  });
 </script>
 
 {% end %}

app/translations/en_EN.json

@@ -359,7 +359,8 @@
         "schedule": "Schedule",
         "serverDetails": "Server Details",
         "terminal": "Terminal",
-        "metrics": "Metrics"
+        "metrics": "Metrics",
+        "reset": "Reset Scroll"
     },
     "serverFiles": {
         "clickUpload": "Click here to select your files",