diff --git a/etc/dsnet-report-js.png b/etc/dsnet-report-js.png
new file mode 100644
index 0000000..a9b55be
Binary files /dev/null and b/etc/dsnet-report-js.png differ
diff --git a/report_rendering/README.md b/report_rendering/README.md
index f560046..1cbdcea 100644
--- a/report_rendering/README.md
+++ b/report_rendering/README.md
@@ -5,15 +5,29 @@ into an existing website or web application.
Most are contributions from other users. If you have a useful addition, please
do a PR.
-
-* `dsnetreport.php`: A php file to render a report.
-* `dsnetreport.html`: A hugo shortcode for rendering a report. See https://github.com/naggie/dsnet/issues/4#issuecomment-632928158 for background. Courtesy of [@Write](https://github.com/Write)
-
Most look something like this:
## Hugo shortcode template
+
+* `hugo/dsnetreport.html`: A hugo shortcode for rendering a report.
+
# PHP template
+See https://github.com/naggie/dsnet/issues/4#issuecomment-632928158 for background. Courtesy of [@Write](https://github.com/Write)
+
+* `php/dsnetreport.php`: A php file to render a report.
+
+
+# Clientside JavaScript
+
+Courtesy of [@frillip](https://github.com/frillip/)
+
+* `js/dsnetreport.html`: Basic HTML with a `div` to place the table in.
+* `js/dsnetreport.js`: Fetches `dsnetreport.json` and renders table.
+* `js/dsnetreport.css`: CSS to render the table as per screenshot.
+
+
+
diff --git a/report_rendering/dsnetreport.html b/report_rendering/hugo/dsnetreport.html
similarity index 100%
rename from report_rendering/dsnetreport.html
rename to report_rendering/hugo/dsnetreport.html
diff --git a/report_rendering/js/dsnetreport.css b/report_rendering/js/dsnetreport.css
new file mode 100644
index 0000000..b7253ab
--- /dev/null
+++ b/report_rendering/js/dsnetreport.css
@@ -0,0 +1,72 @@
+:root {
+ --bg: #030303;
+ --bg-highlight: #202020;
+ --text: #aaaaaa;
+ --text-muted: #666666;
+ --text-faint: #444444;
+ --heading: #cccccc;
+}
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ font-size: 20px;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 80px 0;
+ user-select: text
+}
+
+table th,
+table td {
+ text-align: left;
+ padding: 10px 5px;
+ padding: .6em
+}
+
+table th {
+ border-bottom: 1px solid var(--heading);
+ color: var(--heading)
+}
+
+table tr.dormant {
+ opacity: .3
+}
+
+table tr:nth-child(even) {
+ background: var(--bg-highlight)
+}
+
+table td.indicator-green::before,
+table td.indicator-amber::before,
+table td.indicator-red::before,
+table td.indicator-null::before {
+ display: inline-block;
+ content: "";
+ margin-right: .4em;
+ width: .5em;
+ height: .5em;
+ border: .05em solid transparent
+}
+
+table td.indicator-green::before {
+ background: #0f0;
+ box-shadow: 0 0 .5em rgba(100, 255, 100, .5)
+}
+
+table td.indicator-amber::before {
+ background: orange
+}
+
+table td.indicator-red::before {
+ background: red
+}
+
+table td.indicator-null::before {
+ background: #000;
+ border: .05em solid var(--text-faint)
+}
diff --git a/report_rendering/js/dsnetreport.html b/report_rendering/js/dsnetreport.html
new file mode 100644
index 0000000..f38d0cb
--- /dev/null
+++ b/report_rendering/js/dsnetreport.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ WireGuard Peers
+
+
+
+
WireGuard Peers
+
+
+
+
+
+
diff --git a/report_rendering/js/dsnetreport.js b/report_rendering/js/dsnetreport.js
new file mode 100644
index 0000000..0664b50
--- /dev/null
+++ b/report_rendering/js/dsnetreport.js
@@ -0,0 +1,102 @@
+// Simple javascript to build a HTML table from 'dsnetreport.json'
+
+// Declare our headings
+var header_list = ["Hostname", "Status", "IP", "Owner", "Description", "Up", "Down"];
+
+function build_table() {
+ // Get our div
+ var report = document.getElementById("dsnetreport");
+ report.innerHTML = "";
+ // Make our table
+ var table = document.createElement("table");
+ var header = table.createTHead();
+ var row = header.insertRow();
+ header_list.forEach(function(heading, index) {
+ var cell = row.insertCell();
+ // By default, insertCell() creates elements as '
' even if in a for no reason
+ cell.outerHTML = "
" + heading + "
";
+ });
+ // Create a summary to go at the bottom
+ var devices_online = document.createElement("em")
+
+ // By default, this looks for dsnetreport.json in the current directory
+ fetch("dsnetreport.json")
+ .then(response => response.json())
+ .then(data => {
+ // Create our summary statement
+ devices_online.innerHTML = data.PeersOnline + " of " + data.PeersTotal + " devices connected"
+ // Iterate over the peers
+ data.Peers.forEach(function(peer, index) {
+ // Create the row
+ var row = table.insertRow();
+ row.id = "peer-" + peer.Hostname;
+ row.classList.add("peer")
+ // Different colour text if the peer is dormant
+ if (peer.Dormant) {
+ row.classList.add("dormant")
+ }
+
+ // Hostname
+ var hostname = row.insertCell();
+ hostname.classList.add("hostname")
+ hostname.innerHTML = peer.Hostname;
+ hostname.title = peer.Hostname + "." + data.Domain;
+
+ // Status
+ var status = row.insertCell();
+ status.classList.add("status")
+ status.setAttribute("nowrap", true)
+ // Set indicators based on online status
+ if (peer.Online) {
+ status.title = "Handshake in last 3 minutes";
+ status.classList.add("indicator-green")
+ status.innerHTML = "online";
+ } else {
+ handshake = new Date(peer.LastHandshakeTime);
+ // Add some information about when the peer was last seen
+ status.title = "No handshake since since " + handshake.toLocaleString();
+ status.classList.add("indicator-null")
+ status.innerHTML = "offline";
+ }
+
+ // IP
+ // Could also have external IP as a title?
+ var IP = row.insertCell();
+ IP.classList.add("ip")
+ IP.innerHTML = peer.IP;
+
+ // Owner
+ var owner = row.insertCell();
+ owner.classList.add("owner")
+ owner.innerHTML = peer.Owner;
+
+ // Description
+ var desc = row.insertCell();
+ desc.classList.add("description")
+ desc.innerHTML = peer.Description;
+
+ // Data up in SI units
+ var data_up = row.insertCell();
+ data_up.classList.add("up")
+ data_up.innerHTML = peer.ReceiveBytesSI;
+
+ // Data down in SI units
+ var data_down = row.insertCell();
+ data_down.classList.add("down")
+ data_down.innerHTML = peer.TransmitBytesSI;
+
+ });
+ }).catch(error => {
+ // If we encounter an error, don't do anything useful, just complain
+ console.log(error);
+ });
+ // Add the table to the div
+ report.appendChild(table);
+ // Add the summary to the div
+ report.appendChild(devices_online);
+}
+
+// Build the table when the page has loaded
+document.addEventListener("DOMContentLoaded", function() {
+ build_table();
+}, false);
diff --git a/report_rendering/dsnetreport.php b/report_rendering/php/dsnetreport.php
similarity index 100%
rename from report_rendering/dsnetreport.php
rename to report_rendering/php/dsnetreport.php