fafo/jeol-t330a
11
0
Fork 0
Code Issues 5 Pull requests 2 Actions Packages Projects Releases Wiki Activity

succd: Cleanup whitespace in HTML file

Browse source
This commit is contained in:
Rahix 2024-09-27 02:31:38 +02:00
parent 34ab508b13
commit f7752922c2
1 changed files with 77 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
succbone/succd/index.html
View file

@ -6,29 +6,29 @@
<style> <style>
body { body {
font-size: 14px; font-size: 14px;
padding: 2em; padding: 2em;
} }
table { table {
font-size: 40px; font-size: 40px;
} }
th, td { th, td {
background-color: #e8e8e8; background-color: #e8e8e8;
padding: 0.4em; padding: 0.4em;
} }
th { th {
font-weight: 100; font-weight: 100;
text-align: right; text-align: right;
font-size: 30px; font-size: 30px;
} }
td { td {
text-align: left; text-align: left;
} }
td { td {
font-weight: 800; font-weight: 800;
} }
h2 { h2 {
font-style: italic; font-style: italic;
font-weight: 100; font-weight: 100;
} }
button { button {
height: 4.5em; height: 4.5em;
@ -56,15 +56,15 @@ td > span {
<h2>nothing more permanent than a temporary solution</h2> <h2>nothing more permanent than a temporary solution</h2>
<p style="margin-top: 2em; clear: both;"> <p style="margin-top: 2em; clear: both;">
<table> <table>
<tr> <tr>
<th>Voltage</th> <th>Voltage</th>
<td id="volts" colspan="4">{{.volts}}</td> <td id="volts" colspan="4">{{.volts}}</td>
</tr> </tr>
<tr> <tr>
<th>Pressure</th> <th>Pressure</th>
<td id="mbar" colspan="4">{{.mbar}}</td> <td id="mbar" colspan="4">{{.mbar}}</td>
</tr> </tr>
<tr> <tr>
<th>Thresholds</th> <th>Thresholds</th>
<td>Rough:</td> <td>Rough:</td>
@ -72,13 +72,13 @@ td > span {
<td>High:</td> <td>High:</td>
<td id="thigh">...</td> <td id="thigh">...</td>
</tr> </tr>
<tr> <tr>
<th>Pumps</th> <th>Pumps</th>
<td>RP:</td> <td>RP:</td>
<td id="rp">{{ if .rp }}ON{{ else }}OFF{{ end }}</td> <td id="rp">{{ if .rp }}ON{{ else }}OFF{{ end }}</td>
<td>DP:</td> <td>DP:</td>
<td id="dp">{{ if .dp }}ON{{ else }}OFF{{ end }}</td> <td id="dp">{{ if .dp }}ON{{ else }}OFF{{ end }}</td>
</tr> </tr>
<tr> <tr>
<th>Evac Control</th> <th>Evac Control</th>
<td colspan="4"> <td colspan="4">
@ -90,18 +90,18 @@ td > span {
<button id="dpoff">DP Off</button> <button id="dpoff">DP Off</button>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Status</th> <th>Status</th>
<td id="status" colspan="4">OK</td> <td id="status" colspan="4">OK</td>
</tr> </tr>
</table> </table>
</p> </p>
<p style="margin-top: 2em;"> <p style="margin-top: 2em;">
<canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas> <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
</p> </p>
<p style="font-style: italic; font-size: 12px; margin-top: 5em;"> <p style="font-style: italic; font-size: 12px; margin-top: 5em;">
{{.hostname}} | load: {{.load}} | <a href="/debug/pprof">pprof</a> | <a href="/metrics">metrics</a> | ws ping: <span id="ping">…</span> {{.hostname}} | load: {{.load}} | <a href="/debug/pprof">pprof</a> | <a href="/metrics">metrics</a> | ws ping: <span id="ping">…</span>
</p> </p>
<script> <script>
@ -237,49 +237,49 @@ let historicalDraw = (w, h) => {
}; };
window.addEventListener("load", (_) => { window.addEventListener("load", (_) => {
console.log("s u c c"); console.log("s u c c");
let status = document.querySelector("#status"); let status = document.querySelector("#status");
let volts = document.querySelector("#volts"); let volts = document.querySelector("#volts");
let mbar = document.querySelector("#mbar"); let mbar = document.querySelector("#mbar");
let ping = document.querySelector("#ping"); let ping = document.querySelector("#ping");
let trough = document.querySelector("#trough"); let trough = document.querySelector("#trough");
let thigh = document.querySelector("#thigh"); let thigh = document.querySelector("#thigh");
// Buttons // Buttons
let pd = document.querySelector("#pd"); let pd = document.querySelector("#pd");
let vent = document.querySelector("#vent"); let vent = document.querySelector("#vent");
let rpon = document.querySelector("#rpon"); let rpon = document.querySelector("#rpon");
let rpoff = document.querySelector("#rpoff"); let rpoff = document.querySelector("#rpoff");
canvas = document.querySelector("#graph").getContext("2d"); canvas = document.querySelector("#graph").getContext("2d");
// TODO(q3k): unhardcode this. // TODO(q3k): unhardcode this.
historicalDraw(1024, 512); historicalDraw(1024, 512);
// Basic retry loop for connecting to WS. // Basic retry loop for connecting to WS.
let loc = window.location; let loc = window.location;
let wsloc = ""; let wsloc = "";
if (loc.protocol == "https:") { if (loc.protocol == "https:") {
wsloc = "wss:"; wsloc = "wss:";
} else { } else {
wsloc = "ws:"; wsloc = "ws:";
} }
wsloc += "//" + loc.host + "/stream"; wsloc += "//" + loc.host + "/stream";
console.log("Connecting to " + wsloc + "..."); console.log("Connecting to " + wsloc + "...");
let connected = false; let connected = false;
let connect = () => { let connect = () => {
const socket = new WebSocket(wsloc); const socket = new WebSocket(wsloc);
socket.addEventListener("open", (event) => { socket.addEventListener("open", (event) => {
connected = true; connected = true;
console.log("Socket connected!"); console.log("Socket connected!");
status.innerHTML = "Online"; status.innerHTML = "Online";
status.style = "background-color: #60f060;"; status.style = "background-color: #60f060;";
}); });
socket.addEventListener("message", (event) => { socket.addEventListener("message", (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
volts.innerHTML = data.Volts; volts.innerHTML = data.Volts;
mbar.innerHTML = data.Mbar; mbar.innerHTML = data.Mbar;
rp.innerHTML = data.RPOn ? "ON" : "OFF"; rp.innerHTML = data.RPOn ? "ON" : "OFF";
if (data.RPOn) { if (data.RPOn) {
rp.style = "background-color: #60f060"; rp.style = "background-color: #60f060";
@ -309,22 +309,22 @@ window.addEventListener("load", (_) => {
thigh.style = "background-color: #f06060"; thigh.style = "background-color: #f06060";
} }
historicalPush(data.MbarFloat); historicalPush(data.MbarFloat);
ping.innerHTML = Date.now(); ping.innerHTML = Date.now();
}); });
socket.addEventListener("close", (event) => { socket.addEventListener("close", (event) => {
status.innerHTML = "Offline"; status.innerHTML = "Offline";
status.style = "background-color: #f06060;"; status.style = "background-color: #f06060;";
if (connected) { if (connected) {
console.log("Socket dead, reconnecting..."); console.log("Socket dead, reconnecting...");
} }
connected = false; connected = false;
setTimeout(connect, 1000); setTimeout(connect, 1000);
}); });
socket.addEventListener("error", (event) => { socket.addEventListener("error", (event) => {
socket.close(); socket.close();
}); });
}; };
connect(); connect();
pd.addEventListener("click", async (event) => { pd.addEventListener("click", async (event) => {
await fetch("/button/pumpdown"); await fetch("/button/pumpdown");
@ -345,4 +345,4 @@ window.addEventListener("load", (_) => {
await fetch("/dp/off"); await fetch("/dp/off");
}); });
}); });
</script> </script>