diff --git a/report_rendering/README.md b/report_rendering/README.md
index f560046..bad2031 100644
--- a/report_rendering/README.md
+++ b/report_rendering/README.md
@@ -5,15 +5,20 @@ 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. See https://github.com/naggie/dsnet/issues/4#issuecomment-632928158 for background. Courtesy of [@Write](https://github.com/Write)
# PHP template
+* `php/dsnetreport.php`: A php file to render a report.
+
+# Clientside JavaScript
+* `js/dsnetreport.html`: Basic HTML with a `div` for our table, nothing fancy.
+* `js/dsnetreport.js`: The brains of the operation. Fetches `dsnetreport.json` and turns it into a HTML table.
+* `js/dsnetreport.css`: The beauty of the operation. Makes the table look rather dapper.
+
+
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..3291148
--- /dev/null
+++ b/report_rendering/js/dsnetreport.css
@@ -0,0 +1,132 @@
+:root {
+ --bg: #031010;
+ --bg-highlight: #202525;
+ --text: #aaaaaa;
+ --text-muted: #666666;
+ --text-faint: #444444;
+ --heading: #cccccc;
+}
+
+[data-theme=light] {
+ --bg: #ffffff;
+ --bg-highlight: #f5f5f5;
+ --text: #444444;
+ --text-muted: #777777;
+ --text-faint: #999999;
+ --heading: #111111;
+}
+
+html {
+ overflow-y: scroll;
+ overflow-x: hidden;
+ background: var(--bg)
+}
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: var(--nav-height)0 0;
+ background: var(--bg);
+ color: var(--text);
+ font-size: 20px;
+ min-height: 100%;
+ overscroll-behavior: none;
+ overflow-x: hidden
+}
+
+h1,
+h2,
+h3,
+h4 {
+ font-weight: 400;
+ color: var(--heading)
+}
+
+h1 {
+ margin-top: -20px;
+ padding-top: 80px
+}
+
+hr {
+ border: 0;
+ border-top: 1px solid var(--line);
+ margin: 80px 0 30px;
+ width: 100%
+}
+
+
+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)
+}
+
+@media only screen and (max-width:1200px) {
+ aside {
+ display: none
+ }
+
+ aside~main {
+ transform: translateX(0)
+ }
+}
+
+@media(max-width:900px) {
+ table * {
+ font-size: 2.2vw
+ }
+
+ pre * {
+ font-size: 2.5vw
+ }
+}
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