cleanup

web/index.html

@@ -14,7 +14,6 @@
 
         <div id="header">
             <p id="free_ports" />
-            <!--<p id="last_change" />-->
             <div id="connected" class="hidden"><!--INSERT SVG HERE--></div>
             <p id="last_ping" />
         </div>
@@ -27,7 +26,6 @@
                 <th onclick="sort(this,'status')">Zustand</th>
                 <th onclick="sort(this,'last_change')">Seit</th>
             </tr>
-
         </table>
     </div>
 </body>

web/main.js

@@ -53,9 +53,6 @@ window.onload = () => {
       }
 
     sort = (element, key) => {
-
-        console.log(key, oldkey, direction);
-
         if (key == oldkey) {
             direction *= -1;
         } else {
@@ -64,7 +61,6 @@ window.onload = () => {
         }
 
         for (let child of table_elem.firstChild.firstChild.children) {
-            console.log(child);
             child.className = ""
         };
 
@@ -77,14 +73,11 @@ window.onload = () => {
 
         let is_number = !!~(["port", "number", "last_change"].indexOf(key));
 
-        console.log("is number:", is_number);
-
         table = table.sort((a, b) => (direction * (
             is_number ? a[key] - b[key] : ('' +a[key]).localeCompare(b[key], "de-DE")
         )));
 
-        print_table();
-        console.log(table);
+        populate_table();
     };
 
     let fmt = Intl.DateTimeFormat('de-DE', { dateStyle: 'medium', timeStyle: 'medium' });
@@ -92,14 +85,14 @@ window.onload = () => {
     let format_date = date => fmt.format(date).replace(', ', ' ');
     let format_time = date => fmt.format(date).split(', ', 2)[1];
 
-    let print_table = () => {
-        while(table_elem.children.length > 1) {
-            table_elem.removeChild(table_elem.lastChild);
+    let populate_table = () => {
+        // clear everything except for the header row
+        while(table_elem.rows.length > 1) {
+            table_elem.deleteRow(-1);
         }
 
         for (let row of table) {
-
-            let tr = document.createElement("tr");
+            let tr = table_elem.insertRow(-1);
 
             let values = [
                 row.name === null ?  "?" : row.name,
@@ -121,7 +114,7 @@ window.onload = () => {
                 let value = values[i];
                 let name = names[i];
 
-                let td = document.createElement("td");
+                let td = tr.insertCell(-1);
                 td.className = name;
 
                 if (name == "last_change") {
@@ -139,17 +132,11 @@ window.onload = () => {
                 } else {
                     td.innerText = value;
                 }
-                tr.appendChild(td);
-
             }
-
-            table_elem.appendChild(tr)
         }
     };
 
     let update_table = data => {
-        console.log(data);
-
         const allowed_ports = data.allowed_ports.map(x => x.end - x.start + 1).reduce((a,b) => a + b, 0);
         free_ports.innerText = `Freie Ports: ${allowed_ports - Object.keys(data.allocated_ports).length - data.errored_ports.length}`;
         
@@ -191,11 +178,9 @@ window.onload = () => {
             table.push({port, number: null, status: "Fehler", last_change: new Date(timestamp * 1000), rejector: null, name: ""})
         }
 
-        console.log(table);
-
         do_sort(oldkey, direction);
 
-        print_table();
+        populate_table();
     };
 
 
@@ -231,7 +216,7 @@ window.onload = () => {
             last_ping.innerText = `Stand: ${format_event(event, format_time)}`;
             connected.className = "visible";
 
-            print_table();
+            populate_table();
 
             clearTimeout(display_disconnected);
             display_disconnected = setTimeout(() => connected.className = "hidden", 5000);