first working logViewer

gui/preload-log.js

@@ -36,19 +36,20 @@ window.addEventListener('DOMContentLoaded', () => {
 
     document.getElementById('enable_filter_error').addEventListener('click', () => {
         if (document.getElementById('enable_filter_error').checked){
-            display_class("table-error", true)
+            display_class("table-danger", true)
         } else {
-            display_class("table-error", false)
+            display_class("table-danger", false)
         }
     })
 })
 
 
 function display_class(class_name, state){
-    const collection = document.getElementsByClassName(class_name);
+    var collection = document.getElementsByClassName(class_name);
+    console.log(collection)
     for (let i = 0; i < collection.length; i++) {
-        if (state === true){
+        if (state == true){
-            collection[i].style.display = "block";
+            collection[i].style.display = "table-row";
         } else {
             collection[i].style.display = "None";
         }
@@ -79,8 +80,13 @@ ipcRenderer.on('action-update-log', (event, arg) => {
     var type = document.createElement("td");
     var typeText = document.createElement('span');
     // typeText.innerText = entry.slice(10, 30).match(/[\[](.*)[^\]]/g);
-    typeText.innerText = entry.match(/\[[^\]]+\]/g)[0];
+    console.log(entry.match(/\[[^\]]+\]/g))
 
+    try{
+        typeText.innerText = entry.match(/\[[^\]]+\]/g)[0];
+    } catch(e){
+        typeText.innerText = '-'
+    }
 
 
 //    let res = str.match(/[\[](.*)[^\]]/g);
@@ -90,42 +96,92 @@ ipcRenderer.on('action-update-log', (event, arg) => {
     var area = document.createElement("td");
     var areaText = document.createElement('span');
     //areaText.innerText = entry.slice(10, 50).match(/[\] \[](.*)[^\]]/g);
-    areaText.innerText = entry.match(/\[[^\]]+\]/g)[1];
+    //areaText.innerText = entry.match(/\[[^\]]+\]/g)[1];
+
+    try{
+        areaText.innerText = entry.match(/\[[^\]]+\]/g)[1];
+    } catch(e){
+        areaText.innerText = '-'
+    }
     area.appendChild(areaText);
     
     var logEntry = document.createElement("td");
     var logEntryText = document.createElement('span');
-
+    try{logEntryText.innerText = entry.split("]")[2];
-
+    } catch(e){
-    logEntryText.innerText = entry.split("]")[2];
+        logEntryText.innerText = "-";
+    }
     logEntry.appendChild(logEntryText);
 
     row.appendChild(timestamp);
     row.appendChild(type);
     row.appendChild(area);
     row.appendChild(logEntry);
+
+    //row.classList.add("table-blablubb");
+/*
+    if (logEntryText.innerText.includes('ALSA lib pcm')) {
+        row.classList.add("table-secondary");
+    }
+  */
+    if (typeText.innerText.includes('info')) {
+        row.classList.add("table-info");
+    }
+    if (typeText.innerText.includes('debug')) {
+        row.classList.add("table-secondary");
+    }
+
+    if (typeText.innerText.includes('warning')) {
+        row.classList.add("table-warning");
+    }  
+    
+    if (typeText.innerText.includes('error')) {
+        row.classList.add("table-danger");
+    }
+
+
+    if (document.getElementById('enable_filter_info').checked) {
+        row.style.display = "table-row"
+        display_class("table-info", true)
+    } else {
+        row.style.display = "None"
+        display_class("table-info", false)
+
+    }
+    if (document.getElementById('enable_filter_debug').checked) {
+        row.style.display = "table-row"
+        display_class("table-secondary", true)
+    } else {
+        row.style.display = "None"
+        display_class("table-secondary", false)
+
+    }
+    if (document.getElementById('enable_filter_warning').checked) {
+        row.style.display = "table-row"
+        display_class("table-warning", true)
+    } else {
+        row.style.display = "None"
+        display_class("table-warning", false)
+
+    }
+    if (document.getElementById('enable_filter_error').checked) {
+        row.style.display = "table-row"
+        display_class("table-danger", true)
+    } else {
+        row.style.display = "None"
+        display_class("table-danger", false)
+
+    }
+
+
+
+
+
+
     tbl.appendChild(row);
 
 
 
-    if (logEntryText.innerText.includes('ALSA lib pcm')) {
-        row.classList.add("table-secondary");
-    }
-    
-    if (logEntryText.innerText.includes('[info ]')) {
-        row.classList.add("table-info");
-    }
-    if (logEntryText.innerText.includes('[debug ]')) {
-        row.classList.add("table-secondary");
-    }
-
-    if (logEntryText.innerText.includes('[warning ]')) {
-        row.classList.add("table-warning");
-    }  
-    
-    if (logEntryText.innerText.includes('[error ]')) {
-        row.classList.add("table-danger");
-    }    
 
     
     // scroll to bottom of page

gui/src/log-module.html

@@ -5,9 +5,12 @@
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
-      <!-- Bootstrap CSS -->
-      <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
 
+
+
+       <!-- Bootstrap CSS -->
+      <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" type="text/css" href="styles.css" />
       <title>FreeDATA - Live Log</title>
    </head>
    <body>
@@ -35,8 +38,8 @@
 </nav>
 
 
-<div class="container-fluid mt-5"></div>
+<div class="container-fluid mt-5">
-
+            <div class="tableFixHead">
             <table class="table table-hover">
                <thead>
                   <tr>
@@ -57,8 +60,7 @@
                          -->
                </tbody>
             </table>
-
+</div>
    </div>
-          
    </body>
 </html>

gui/src/styles.css

@@ -36,3 +36,15 @@ html {
     border: 0;
     padding: 1px;
 }
+
+
+.tableFixHead          {
+overflow: auto;
+height: 90vh;
+}
+.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
+
+/* Just common table stuff. Really. */
+table  { border-collapse: collapse; width: 100%; }
+th, td { padding: 8px 16px; }
+th     { background:#eee; }