Improve style, show no connection on error

MatiasG19 · MatiasG19 · commit 32b1041cfdab · 2023-06-10T19:12:52.000+02:00
diff --git a/web/src/index.htm b/web/src/index.htm
@@ -9,7 +9,13 @@
   <body>
     <div class="heading">STORINATOR</div>
 
-    <button id="powerLed" type="button" class="button" disabled>
+    <button
+      id="powerLed"
+      type="button"
+      class="button"
+      disabled
+      style="color: #b413ff"
+    >
       NO CONNECTION
     </button>
     <button
@@ -69,7 +75,7 @@
           powerLed.textContent = 'POWER LED'
           powerLed.style.color = '#eb1e8f'
         } else {
-          powerLed.style.color = '#cfcfcf'
+          powerLed.style.color = '#b413ff'
           powerLed.textContent = 'NO CONNECTION'
         }
       }
@@ -100,12 +106,16 @@
               if (this.response.toString().includes(REQ_POWER_STATUS + ':on'))
                 togglePowerLedColor('on')
               else togglePowerLedColor('off')
+            } else if (this.readyState == 4) {
+              togglePowerLedColor('nocon')
+              console.log('No connection to server.')
             }
-          } else if (this.readyState == 4 && this.status == 404) {
-            togglePowerLedColor('nocon')
-            console.log('No connection to server.')
           }
         }
+        xhttp.onerror = function () {
+          togglePowerLedColor('nocon')
+          console.log('No connection to server.')
+        }
         xhttp.open('GET', request, true)
         xhttp.send()
       }
diff --git a/web/src/style.css b/web/src/style.css
@@ -49,5 +49,5 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 5%;
+  margin: 5%;
 }

Original file line number	Diff line number	Diff line change
`@@ -49,5 +49,5 @@ a {`
`49`	`49`	`display: flex;`
`50`	`50`	`align-items: center;`
`51`	`51`	`justify-content: center;`
`52`		`- padding: 5%;`
	`52`	`+ margin: 5%;`
`53`	`53`	`}`