setting to active no longer reloads the page

else we have a conflict with the tunneled option

templates/common.html

@@ -13,8 +13,8 @@
     {% include svg %}
     <div class="control-panel">
         <div>
-        <input type=radio id="readonly", onClick="location.href='?'" checked>view only
-        <input type=radio id="writable", onClick="location.href='?writable=1'">ACTIVE
+        <input type=radio id="readonly", onClick="setWritable(0);" checked>view only
+        <input type=radio id="writable", onClick="setWritable(1);"">ACTIVE
         </div>
 	<p> Status messages </p>
         <textarea name="outputtext" id="outputtext" rows="10" cols="30" readonly></textarea>
@@ -25,12 +25,14 @@
 <script>
 const urlParams = new URLSearchParams(window.location.search);
 var wsaddr = "ws://{{ wsaddr }}";
-var writable = urlParams.get('writable');
-console.log(writable);
-if (writable) {
-  document.getElementById('readonly').checked = false;
-  document.getElementById('writable').checked = true;
+var writable = false;
+
+function setWritable(flag) {
+  document.getElementById('readonly').checked = ! flag;
+  document.getElementById('writable').checked = flag;
+  writable = flag;
 }
+
 {% include js %}
 </script>
 </body>

templates/secop.js

@@ -29,9 +29,8 @@ function handle_describing(action, modpar, data) {
             // console.log(mod, param, func);
             if (func.includes("click")) {
                 clickElement = elem;
-                if (writable) {
-                    addClickListener(elem, mod, toggleTarget);
-                }
+                console.log(mod, param, func, elem);
+                addClickListener(elem, mod, toggleTarget);
             }
             if (func.includes("fault")) {
                 changeFuncs[mod + ":status"] = function (value) {
@@ -59,9 +58,7 @@ function handle_describing(action, modpar, data) {
             }
             if (func.includes("command")) {
                 console.log(func, mod, param);
-                if (writable) {
-                    addClickListener(elem, mod + ":" + param, sendCommand);
-                }
+                addClickListener(elem, mod + ":" + param, sendCommand);
             }
         })
         if (stateElement && clickElement) {
@@ -70,7 +67,7 @@ function handle_describing(action, modpar, data) {
         }
     }
     console.log('ACTIVATE', changeFuncs);
-    doSend("activate");
+    websocket.send("activate");
 }
 
 function handle_update(action, modpar, data) {
@@ -151,7 +148,7 @@ function doConnect() {
 
 function onOpen(evt) {
     writeToScreen("Connected to "+ wsaddr + "\n");
-    doSend("describe");
+    websocket.send("describe");
     /*
     for (var mod in ctr_state) {
        readValue(mod);
@@ -180,11 +177,24 @@ function onError(evt) {
 }
 
 function doSend(message) {
+    // send a change or do message
+    console.log('doSend');
+    if (! writable) {
+        console.log('unprotected doSend')
+        return;
+    }
     console.log('>', message);
     websocket.send(message);
 }
 
+function warnViewOnly() {
+    if (writable) return false;
+    alert('please set the page ACTIVE to change things');
+    return true;
+}
+
 function toggleTarget(element, mod) {
+    if (warnViewOnly()) return;
     stateElement = element.stateElement || element
     const newState = stateElement.state === false;
     console.log('click', element, mod, stateElement.state, newState);
@@ -193,6 +203,7 @@ function toggleTarget(element, mod) {
 }
 
 function sendCommand(element, modcmd) {
+    if (warnViewOnly()) return;
     console.log('command', modcmd);
     doSend(`do ${modcmd}`);
 }