diff --git a/src/ports.rs b/src/ports.rs index ba5ae9e..0baa3d7 100644 --- a/src/ports.rs +++ b/src/ports.rs @@ -21,7 +21,7 @@ use tracing::{debug, error, info, instrument, warn}; use crate::{ constants::{CACHE_STORE_INTERVAL, PORT_OWNERSHIP_TIMEOUT, PORT_RETRY_TIME}, - packets::{Packet, PacketKind}, + packets::Packet, spawn, Config, Number, Port, UnixTimestamp, }; @@ -302,17 +302,10 @@ impl Serialize for Rejector { S: Serializer, { let packet = &self.state.1; - let kind = match packet.kind() { - PacketKind::End => "end", - PacketKind::Reject => "reject", - _ => unreachable!(), - }; match packet.as_string() { - Some(string) if string.chars().all(|c| !c.is_control()) => { - (kind, string).serialize(serializer) - } - _ => (kind, packet.data()).serialize(serializer), + Some(string) if string.chars().all(|c| !c.is_control()) => string.serialize(serializer), + _ => packet.data().serialize(serializer), } } } diff --git a/web/index.html b/web/index.html index 7ca1ae9..6bf77bb 100644 --- a/web/index.html +++ b/web/index.html @@ -10,10 +10,22 @@ - -

- 


-    
+    

+    

+        
+        

+    

+
+    
+        
+            
+            
+            
+            
+            
+            
+        
+    
NummerPortZustandNameMeldungLetzte Änderung

 
 
 
\ No newline at end of file
diff --git a/web/main.css b/web/main.css
index 396392f..9c99c3b 100644
--- a/web/main.css
+++ b/web/main.css
@@ -2,7 +2,7 @@ body {
     background-color: #eee;
 }
 
-#connected {
+#connected_box {
     position: absolute;
     top: 5%;
     right: 5%;
@@ -10,6 +10,25 @@ body {
     height: 5%;
 }
 
+
+td,
+th {
+    border: 1px solid black;
+    padding: 0.5em;
+}
+
+table {
+    border-spacing: 0;
+}
+
+.number {
+    text-align: right;
+}
+
+.text {
+    text-align: left;
+}
+
 .visible {
     opacity: 1;
     transition: opacity 500ms linear;
diff --git a/web/main.js b/web/main.js
index d3de877..ead3107 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,7 +1,8 @@
 window.onload = () => {
-    const data = document.getElementById("data");
+    const table_elem = document.getElementById("table");
     const last_update = document.getElementById("last_update");
     const connected = document.getElementById("connected");
+    const free_ports = document.getElementById("free_ports");
 
     const timeout_duration = 10*1000;
     const retry_timeout = 5*1000;
@@ -9,7 +10,82 @@ window.onload = () => {
     let reconnect_timeout;
     let ping_timeout;
     let evtSource;
+    let table = [];
 
+    let format_date = date => date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+
+    let print_table = () => {
+        while(table_elem.children.length > 1) {
+            table_elem.removeChild(table_elem.lastChild);
+        }
+
+        for (let row of table) {
+
+            let tr = document.createElement("tr");
+            
+            let values = [
+                row.number,
+                row.port,
+                row.status,
+                row.name || "?",
+                row.rejector || "",
+                format_date(row.last_change)
+            ];
+
+            for(let value of values) {
+                let td = document.createElement("td");
+                td.innerText = value;
+                td.className = Number.isInteger(value) ? "number" : "text";
+                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}`;
+        
+
+        table = [];
+
+        for(let number in data.allocated_ports) {
+            let port = data.allocated_ports[number];
+            number = +number;
+            let {status, last_change} = data.port_state[port];
+
+            let rejector = data.rejectors[port] || null;
+
+            if (rejector && rejector instanceof Array) {
+                rejector = rejector.map(x => "0x"+x.toString(16).padStart(2, 0)).join(" ")
+            }
+
+            last_change = new Date(last_change * 1000);
+
+            let name = data.names[number] || null;
+
+            switch(status) {
+                case "disconnected":
+                    status = "getrennt";
+                    break;
+                case "idle":
+                    status = "bereit";
+                    break;
+                case "in_call":
+                    status = "anruf";
+                    break;
+            }
+
+            table.push({port, number, status, last_change, rejector, name})
+        }
+
+        console.log(table);
+
+        print_table();
+    };
 
     let connect_event_source = () => {
 
@@ -21,11 +97,11 @@ window.onload = () => {
             
         evtSource = new EventSource("/events");
         evtSource.addEventListener("change", event => {
-            last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
+            last_update.innerText = `Letzte Änderung: ${format_date(new Date(+event.data * 1000))}`;
            
             fetch("/data")
                 .then(res => res.json())
-                .then(res => data.innerText = JSON.stringify(res, null, 1));
+                .then(update_table);
         });
 
         evtSource.addEventListener("ping", event => {
@@ -33,7 +109,7 @@ window.onload = () => {
             ping_timeout = setTimeout(connect_event_source, timeout_duration);
 
 
-            last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
+            last_update.innerText = `Letzte Änderung: ${format_date(new Date(+event.data * 1000))}`;
             connected.className = "visible";
             setTimeout(() => connected.className = "hidden", 1000);
         });