From 3a8513e59694396dbaada8b9c6603869442589f2 Mon Sep 17 00:00:00 2001
From: tangentstorm <michal.wallace@gmail.com>
Date: Sun, 28 Jan 2024 19:40:09 -0500
Subject: [PATCH] disable/enable buttons based on client state

---
 tanco/app.py                 |  2 ++
 tanco/static/style.css       |  2 +-
 tanco/templates/attempt.html | 13 ++++++++-----
 tanco/templates/index.html   |  6 ++++++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/tanco/app.py b/tanco/app.py
index d602329..47d97f5 100644
--- a/tanco/app.py
+++ b/tanco/app.py
@@ -91,8 +91,10 @@ async def notify(code, data, wrap=True):
 
 async def notify_client_state(code):
     data = dict(name="client", status='connected')
+    data['attrs'] = 'hx-on::load=clientHere()'
     if not clients.get(code):
         data['status'] = 'disconnected'
+        data['attrs'] = 'hx-on::load=clientGone()'
 
     html = await quart.render_template_string('''
         {% import 'websocket.html' as ws %}
diff --git a/tanco/static/style.css b/tanco/static/style.css
index c15ad65..8866bf7 100644
--- a/tanco/static/style.css
+++ b/tanco/static/style.css
@@ -52,7 +52,7 @@ a:hover { color: #0162c2ff; background: #f3f0e5; }
 
 #buttons { display: inline-block; }
 
-#shell.hidden { display: none }
+.hidden { display: none }
 #shell {
   --shell-width: 500px;
   background: #999; border: solid #333 1px;
diff --git a/tanco/templates/attempt.html b/tanco/templates/attempt.html
index 156d3ab..14fb74e 100644
--- a/tanco/templates/attempt.html
+++ b/tanco/templates/attempt.html
@@ -19,10 +19,13 @@
     let ws = new WebSocket(url)
     const el = document.getElementById('browser-ws')
     el.addEventListener('htmx:wsOpen', e=> {
+      // can't cache this because element is replaced
+      document.getElementById('client-ws').classList.remove('hidden');
       el.classList.remove('disconnected');
       el.classList.add('connected');
       el.querySelector('.status').innerHTML='connected'; });
     el.addEventListener('htmx:wsClose', e=> {
+      document.getElementById('client-ws').classList.add('hidden');
       el.classList.remove('connected');
       el.classList.add('disconnected');
       el.querySelector('.status').innerHTML='disconnected'});
@@ -50,21 +53,21 @@ <h3>passed tests</h3>
   <div style="width: calc(100% - 230px);">
     {% include "state.html" %}
     <div id="buttons" hx-swap="none">
-      <button class="has-tooltip" hx-post="/a/{{ data.code }}/cmd/test">test
+      <button disabled class="has-tooltip" hx-post="/a/{{ data.code }}/cmd/test">test
         <span class="tooltip">
         Run <code>tanco test</code> to run known tests.<br/>
         Requires <code>tanco share</code>.</span></button>
-      <button class="has-tooltip" hx-post="/a/{{ data.code }}/cmd/next">next
+      <button disabled class="has-tooltip" hx-post="/a/{{ data.code }}/cmd/next">next
         <span class="tooltip">
         Run <code>tanco next</code> to move on to the next test.<br/>
         Requires that all known tests are passing.<br/>
         Requires <code>tanco share</code>.</span></button>
-      <button class="has-tooltip" type="button" onclick="toggleShell()">shell
+      <button disabled  class="has-tooltip" type="button" onclick="toggleShell()">shell
         <span class="tooltip">
         Toggles websocket shell for talking to your target program.<br/>
         Requires <code>tanco share</code>.</span></button>
       <!--
-      <button class="has-tooltip" hx-post="/a/{{ data.code }}/cmd/spawn">spawn
+      <button disabled class="has-tooltip" hx-post="/a/{{ data.code }}/cmd/spawn">spawn
         <span class="tooltip">
         Run <code>tanco spawn</code> to start (or restart) your target program.<br/>
         Requires <code>tanco share</code>.</span></button>
@@ -75,7 +78,7 @@ <h3>passed tests</h3>
       <form hx-post="/a/{{ data.code }}/shell"
             hx-swap="none">
         <input name="msg" type="text"/>
-        <button type="submit">send</button>
+        <button disabled type="submit">send</button>
       </form>
     </div>
     <div id="test-detail"></div>
diff --git a/tanco/templates/index.html b/tanco/templates/index.html
index 67fdf73..7553078 100644
--- a/tanco/templates/index.html
+++ b/tanco/templates/index.html
@@ -9,6 +9,12 @@
     htmx.config.scrollIntoViewOnBoost = false;
     function toggleShell() {
       document.getElementById('shell').classList.toggle('hidden') }
+    function clientGone() {
+      for (let el of document.getElementsByTagName('button')) {
+        el.disabled = true; }};
+    function clientHere() {
+      for (let el of document.getElementsByTagName('button')) {
+        el.disabled = false; }};
   </script>
 </head>
 <body>