index.html

<!DOCTYPE html>
<html>
<head>
<title>RPi - Python API</title>
<link rel="icon" href="/icon.jpg" sizes="32x32">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
.common-styles {
  font-weight: 400;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 70%;
}
.button {
  box-sizing: border-box;
  margin-top: 3px;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 67%;
  border-radius: 4px;
  margin-left: 6px;
  border: 1px solid #000;
  background-color: inherit;
  color: #000;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
}
.button:hover {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.75);
}
table {
  width: 100%;
}
td, th {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(odd) {
  background-color: #ddd;
}
.column {
  padding: 10px;
}
.left {
  float: left;
  width: 200px;
}
.right {
  float: right;
  width: 530px;
}
.row {
  margin: auto;
  width: 730px;
}
a:link {
  text-decoration: none;
  color: black;
}
a:visited {
  text-decoration: none;  
  color: black;
}
a:hover {
  color: red;
}
a:active {
  text-decoration: none;  
  color: blue;
}
</style>
<body>


<div style="text-align: center;">
<!--- Top menu --->
&nbsp; <b>Transmission:</b>
<a class="button common-styles" href="http://piz2:9091/transmission/web/" rel="nofollow" target="_blank">WebUI</a>
<a class="button common-styles" href="javascript:void(0);" onclick="Start();">Start</a>
<a class="button common-styles" href="javascript:void(0);" onclick="Stop();">Stop</a>
&nbsp; <b>VPN:</b>
<a class="button common-styles" href="javascript:void(0);" onclick="Connect();">Connect</a>
<a class="button common-styles" href="javascript:void(0);" onclick="Disconnect();">Disconnect</a>
&nbsp; <b>System:</b>
<a class="button common-styles" href="/reboot" rel="nofollow">Reboot</a>
<a class="button common-styles" href="/halt" rel="nofollow">Halt</a>
</div>

<div class="row" style="background-color:#111;">

<div class="column left">
<!--- Left table --->
<center><b>Metrics</b></center>
<table class="common-styles" id="metrics">
  <tr><td>Loading...<td></tr>
</table>
</div>

<div class="column right">
<!--- Right table --->
<center><b>Files</b></center>
<table class="common-styles" id="files">
  <tr><td>Loading...<td></tr>
</table>
</div>

</div>
</body>
<script>
async function Metrics(){
  const request = await fetch("/status");
  const metrics = await request.json();
  var table = document.getElementById("metrics");

  document.getElementById("metrics").innerHTML = `<td><b>Key</b></td><td><b>Value</b></td>`;
  for (const [key, value] of Object.entries(metrics)) {
    document.getElementById("metrics").insertRow().innerHTML = `<td>${key}</td><td>${value}</td>`;
  }
}

async function Files(){
  const request = await fetch("/files");
  const files = await request.json();
  var table = document.getElementById("files");
  var download_url = "http://" + window.location.hostname + ":8080";

  document.getElementById("files").innerHTML = `<td><b>Name</b></td><td width="100"><b>Size</b></td>`;
  for (const [key, value] of Object.entries(files)) {
    document.getElementById("files").insertRow().innerHTML = `<td><a target="_blank" href="${download_url}/${key}">${key}</a></td><td>${value}</td>`;
  }
}

async function Start() {
  await fetch("/start");
  Metrics();
}

async function Stop() {
  await fetch("/stop");
  Metrics();
}

async function Connect() {
  await fetch("/connect");
  Metrics();
}

async function Disconnect() {
  await fetch("/disconnect");
  Metrics();
}

window.onload = function () { 
  Files();
  Metrics();
}

setInterval(Files, 2000);
setInterval(Metrics, 60000);
</script>
</html>