log.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <html>
  2. <head>
  3. <style>
  4. html,
  5. body {
  6. height: 100%;
  7. margin: 2px;
  8. }
  9. .box {
  10. display: flex;
  11. flex-flow: column;
  12. height: 100%;
  13. }
  14. .box .row.header {
  15. flex: 0 1 auto;
  16. }
  17. .box .row.content {
  18. flex: 1 1 auto;
  19. }
  20. .box .row.footer {
  21. flex: 0 1 auto;
  22. }
  23. #log {
  24. font-family: 'Courier New', Courier, monospace;
  25. font-size: small;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="box">
  31. <div class="row header">
  32. <button onClick="reload();">Reload</button>
  33. <button onClick="window.open('logfileact');">Show full log</button>
  34. <button onClick="window.location.href = 'fileserver/log/message/'">Show older log files</button>
  35. </div>
  36. <div class="row content" id="log"><br><br><br><b>Loading Logfile, please wait...</b></div>
  37. <div class="row footer">
  38. <button onClick="reload();">Reload</button>
  39. <button onClick="window.open('logfileact');">Show full log</button>
  40. <button onClick="window.location.href = 'fileserver/log/message/'">Show older log files</button>
  41. </div>
  42. </div>
  43. </body>
  44. <script>
  45. function reload() {
  46. // document.getElementById('log').innerHTML += "<br><b>Reloading...<b><br><br>";
  47. document.getElementById('log').innerHTML += "<b>Reloading...</b>";
  48. window.scrollBy(0,document.body.scrollHeight);
  49. funcRequest('log');
  50. }
  51. function processLogLine(line, index, arr) {
  52. /* Make sure the whitespaces in the uptime field get persevered */
  53. uptimePart = line.slice(0, line.indexOf("]")).replace(/ /g, "&nbsp;");
  54. line = uptimePart + line.slice(line.indexOf("]"))
  55. if (line.includes("&lt;WRN&gt;")) {
  56. arr[index] = "<span style=\"color:#e83c00\">" + line + "</span>";
  57. }
  58. else if (line.includes("&lt;ERR&gt;")) {
  59. arr[index] = "<span style=\"color:red\"><b>" + line + "</b></span>";
  60. }
  61. else if (line.includes("&lt;DBG&gt;")) {
  62. arr[index] = "<span style=\"color:gray\">" + line + "</span>";
  63. }
  64. else {
  65. arr[index] = line;
  66. }
  67. arr[index] += "<br>";
  68. }
  69. async function funcRequest(url){
  70. await fetch(url)
  71. .then((res) => {
  72. if (!res.ok) {
  73. document.getElementById("log").innerHTML = "HTTP error " + res.status;
  74. }
  75. return res.text();
  76. })
  77. .then((log) => {
  78. log = log.replace(/</g, "&lt;");
  79. log = log.replace(/>/g, "&gt;");
  80. logArr = log.split("\n");
  81. logArr.forEach(processLogLine);
  82. document.getElementById('log').innerHTML = "<br>" + logArr.join("\n") + "&nbsp;";
  83. window.scrollBy(0,document.body.scrollHeight);
  84. })
  85. .catch((err) => {
  86. document.getElementById("log").innerHTML = err;
  87. });
  88. }
  89. funcRequest('log');
  90. </script>
  91. </html>