disable/enable buttons based on client state

tangentcode · Jan 29, 2024 · 3a8513e · 3a8513e
1 parent d622f84
commit 3a8513e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>