Improved UI to make it clear that the browser is not supported

Some users do not understand that the browser does not support WebSerial because on the page https://hack-gpon.org/ont-huawei-ma5671a-ymodem/ pressing the button opens the flash window, with this PR the button is deactivated if the browser is not supported and the the strikethrough out character is applied to button text
hack-gpon · Jun 7, 2024 · d5b910b · d5b910b
1 parent 276ec0d
commit d5b910b
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/_includes/root_lantiq.html b/_includes/root_lantiq.html
@@ -46,6 +46,8 @@ <h2>Root status</h2>
         document.getElementById('start-button').disabled = false;
     } else {
         document.getElementById('browser-error').style.display = 'block';
+        document.getElementById('start-button').disabled = true;
+        document.getElementById('start-button').innerHTML=document.getElementById('start-button').innerText.strike();
     }
     const acontroller = new AbortController();
     const cs = acontroller.signal;

diff --git a/_includes/ymodem_lantiq.html b/_includes/ymodem_lantiq.html
@@ -44,6 +44,8 @@ <h2>Flash firmware</h2>
         document.getElementById('flash-start-button').disabled = false;
     } else {
         document.getElementById('flash-browser-error').style.display = 'block';
+        document.getElementById('flash-start-button').disabled = true;
+        document.getElementById('flash-start-button').innerHTML=document.getElementById('flash-start-button').innerText.strike()
     }
     const acontroller = new AbortController();
     const cs = acontroller.signal;
@@ -202,4 +204,4 @@ <h2>Flash firmware</h2>
             }
         });
     };
-</script>
+</script>
diff --git a/_ont/ont-fs-com-gpon-onu-stick-with-mac.md b/_ont/ont-fs-com-gpon-onu-stick-with-mac.md
@@ -147,9 +147,8 @@ When you are ready with everything plugged in you need to press the button below
 
 {: .text-center .fs-6 }
 <button id="start-button" class="btn btn-blue" data-jtd-toggle="modal" data-jtd-target="#root-modal" disabled>Start emergency unlock!</button>
-{% include root_lantiq.html modelName="FS GPON ONU Stick" unlockHuaweiShell=false %}
-
 <div id="browser-error" style="display:none">{% include alert.html content="This browser is not compatible with the emergency unlock procedure. See the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility'>Browser compatibility</a>" alert="Note"  icon="svg-warning" color="red" %}</div>
+{% include root_lantiq.html modelName="FS GPON ONU Stick" unlockHuaweiShell=false %}
 <noscript>
 {% include alert.html content="Your browser does not support JavaScript!" alert="Note"  icon="svg-warning" color="red" %}
 </noscript>

diff --git a/_ont/ont-huawei-ma5671a-root-web.md b/_ont/ont-huawei-ma5671a-root-web.md
@@ -28,9 +28,8 @@ Connect the TTL adapter to the computer, once done press the following button. A
 
 {: .text-center .fs-6 }
 <button id="start-button" class="btn btn-blue" data-jtd-toggle="modal" data-jtd-target="#root-modal" disabled>Start root!</button>
-{% include root_lantiq.html modelName="Huawei MA5671A" unlockHuaweiShell=true %}
-
 <div id="browser-error" style="display:none">{% include alert.html content="This browser is not compatible with the web-root procedure. See the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility'>Browser compatibility</a>" alert="Note"  icon="svg-warning" color="red" %}</div>
+{% include root_lantiq.html modelName="Huawei MA5671A" unlockHuaweiShell=true %}
 <noscript>
 {% include alert.html content="Your browser does not support JavaScript!" alert="Note"  icon="svg-warning" color="red" %}
 </noscript>