Not done but in-progress

.avalon/gen.py

@@ -3,5 +3,7 @@
 binf = sys.argv[1]
 filesFolder = sys.argv[2]
 
-with open(binf, 'w') as f:
-    f.write(f'#!/bin/bash\ncd "{filesFolder}"\npython3 "{filesFolder}/villicus.py" "$@"')
+with open(binf, "w") as f:
+    f.write(
+        f'#!/bin/bash\ncd "{filesFolder}"\npython3 "{filesFolder}/villicus.py" "$@"'
+    )

static/bar.css

@@ -0,0 +1,93 @@
+/* The sidebar menu */
+.sidebar {
+    display: flex;
+    height: 100%; /* Full-height: remove this if you want "auto" height */
+    width: 50px; /* Set the width of the sidebar */
+    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+    z-index: 1; /* Stay on top */
+    top: 0; /* Stay at the top */
+    left: 0;
+    background-color: #111; /* Black */
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.sidebar a {
+    padding: 6px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #818181;
+    display: block;
+    background-color: #292929;
+    min-height: 38px;
+    max-height: 50px;
+}
+
+.sidebar a img {
+    height: 44;
+    width: 38;
+}
+
+.sidebar a:hover {
+    background-color: #636363;
+}
+
+.main {
+    margin-left: 50px; /* Same as the width of the sidebar */
+    padding: 0px 10px;
+}
+
+#statusdisplay > div.barsegment {
+    width: 50px;
+    height: 50px;
+    color: white;
+}
+
+#statusdisplay > div.barsegment > div.barcontainer {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#statusdisplay > div.barsegment > div.barcontainer > div.bartext {
+    text-align: center;
+}
+
+.inline {
+    display: inline-block;
+}
+
+body {
+    font-family: arial, sans-serif;
+    background: #EEEEEE;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: relative;
+    z-index: 1;
+    top: -40px;
+    left: 110%;;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent black transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+}

static/js/bar.mjs

@@ -0,0 +1,57 @@
+import {html, render, Component, useState} from 'https://esm.sh/htm/preact/standalone'
+import {httpGet} from '/static/js/common.mjs'
+
+function BarSegment(props) {
+    return html`<div class="barsegment tooltip" style="background-color: ${props.color};">
+            <div class="barcontainer">
+                <div class="bartext">
+                    ${props.percentage}%
+                </div>
+            </div>
+            <div class="tooltiptext">
+                ${props.type}
+            </div>
+        </div>`;
+}
+
+class StatusBar extends Component {
+    state = {
+        running: 0,
+        paused: 0,
+        killed: 100,
+        done: 0
+    };
+
+    makeSocket() {
+        this.socket = new WebSocket((window.location.protocol === "https:" ? "wss://" : "ws://") + window.location.host + "/ws/status");
+
+        this.socket.addEventListener('message', (event) => {
+            this.setState(JSON.parse(event.data));
+            this.render();
+        });
+
+        this.socket.addEventListener('close', (event) => {
+            console.warn("Status websocket disconnected, attempting reconnect...");
+
+            setTimeout(this.makeSocket.bind(this), 10000);
+        });
+    }
+
+    constructor() {
+        super();
+
+        this.makeSocket();
+    }
+
+    render() {
+        return html`
+<${BarSegment} type=Running percentage=${this.state.running} color=darkgreen/>
+<${BarSegment} type=Paused percentage=${this.state.paused} color=darkorange/>
+<${BarSegment} type="Killed/Exited" percentage=${this.state.killed} color=darkred/>
+<${BarSegment} type=Done percentage=${this.state.done} color="rgb(39, 28, 28)"/>
+`
+        return httpGet("/status");
+    }
+}
+
+export {StatusBar, html, render}

static/js/common.mjs

@@ -0,0 +1,8 @@
+function httpGet(theUrl) {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", theUrl, false); // false for synchronous request
+    xmlHttp.send(null);
+    return xmlHttp.responseText;
+}
+
+export {httpGet}

templates/bar.html

@@ -1,63 +1,37 @@
 <html>
 
 <head>
-    <link href="/source/bar.css" rel="stylesheet" media="screen">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Villicus</title>
-    {% block head %}
-    {% endblock %}
+  <link href="/source/bar.css" rel="stylesheet" media="screen">
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
+  <title>Villicus</title>
+  {% block head %}
+  {% endblock %}
 </head>
 
 <body>
-    <div class="topbar">
-        <div class="miniBarProgress" style="width: 0%; background-color: darkgreen;" align=center>0%</div>
-        <div class="miniBarProgress" style="width: 0%; background-color: darkorange;" align=center>0%</div>
-        <div class="miniBarProgress" style="width: 100%; background-color: darkred;" align=center>100%</div>
-        <div class="miniBarProgress" style="width: 0%; background-color: rgb(39, 28, 28);" align=center>0%</div>
+  <div class="sidebar">
+    <div id="sidebuttons">
+      <a href="/"><img src="/source/home.svg" /></a>
+      <a href="/list"><img src="/source/details.svg" /></a>
+      <a href="/list/new"><img src="/source/details-add.svg" /></a>
+      <a href="/reload"><img src="/source/reload.svg"></a>
+      {% block sidebuttons %}
+      {% endblock %}
     </div>
-
-    <div class="sidebar">
-        <a href="/"><img src="/source/home.svg" /></a>
-        <a href="/list"><img src="/source/details.svg" /></a>
-        <a href="/list/new"><img src="/source/details-add.svg" /></a>
-        <a href="/reload"><img src="/source/reload.svg"></a>
-        {% block sidebuttons %}
-        {% endblock %}
+    <div id="statusdisplay">
+
     </div>
+  </div>
 
-    <script>
-        function httpGet(theUrl) {
-            var xmlHttp = new XMLHttpRequest();
-            xmlHttp.open("GET", theUrl, false); // false for synchronous request
-            xmlHttp.send(null);
-            return xmlHttp.responseText;
-        }
-
-        function updateBars() {
-            var x = document.getElementsByClassName("miniBarProgress");
-            var i;
-
-            var j = JSON.parse(httpGet("/status"))
-
-            var e = [j.running, j.paused, j.killed, j.done];
-            for (i = 0; i < x.length; i++) {
-                x[i].innerHTML = e[i];
-                x[i].style.width = x[i].innerHTML;
-            }
-        }
+  <script type="module">
+    import { render, StatusBar, html } from '/static/js/bar.mjs'
 
-        function update() {
-            updateBars();
-        }
+    render(html`<${StatusBar} display="Hewwo" />`, document.querySelector("#statusdisplay"));
+  </script>
 
-        update();
-        var t = setInterval(update, 5000);
-    </script>
-
-    <div class="main">
-        {% block body %}
-        {% endblock %}
-    </div>
+  <div class="main">
+    {% block body %}
+    {% endblock %}
+  </div>
 </body>
-
-</html>

templates/list.html

@@ -12,7 +12,10 @@
     {% for proc in procs %}
     <tr>
         <td><a href="/proc/{{proc['process']}}">{{ proc['process'] }}</a></td>
-        <td>{{ ((("Crashed" + " (Code " + str(proc['returncode']) + ")") if proc['returncode'] >= 0 else ("Killed" + " (Code " + str(proc['returncode']) + ")")) if proc['returncode'] else "Exited normally") if not proc['running'] else ("Paused" if proc['paused'] else "Running") }}</td>
+        <td>{{ ((("Crashed" + " (Code " + str(proc['returncode']) +
+        ")") if proc['returncode'] >= 0 else ("Killed" + " (Code " +
+        str(proc['returncode']) + ")")) if proc['returncode'] else
+        "Exited normally") if not proc['running'] else ("Paused" if proc['paused'] else "Running") }}</td>
         <td>
             {% if proc['paused'] %}
             <a href="/unpause/{{proc['process']}}"><img src="/source/play.svg" /></a>
@@ -29,4 +32,4 @@
     </tr>
     {% endfor %}
 </table>
-{% endblock %}
+{% endblock %}