|
9 | 9 | <body> |
10 | 10 | <div class="heading">STORINATOR</div> |
11 | 11 |
|
12 | | - <button |
13 | | - id="powerLed" |
14 | | - type="button" |
15 | | - class="button" |
16 | | - disabled> |
17 | | - POWER LED |
| 12 | + <button id="powerLed" type="button" class="button" disabled> |
| 13 | + NO CONNECTION |
18 | 14 | </button> |
19 | 15 | <button |
20 | 16 | id="powerBtn" |
21 | 17 | type="button" |
22 | 18 | class="activeButton" |
23 | | - onclick="sendCommand(CMD_POWER_ON)"> |
| 19 | + onclick="sendCommand(CMD_POWER_ON)" |
| 20 | + > |
24 | 21 | POWER ON |
25 | 22 | </button> |
26 | 23 | <button |
27 | 24 | id="standByBtn" |
28 | 25 | type="button" |
29 | 26 | class="activeButton" |
30 | | - onclick="sendCommand(CMD_STAND_BY)"> |
| 27 | + onclick="sendCommand(CMD_STAND_BY)" |
| 28 | + > |
31 | 29 | STANDBY |
32 | 30 | </button> |
33 | 31 | <button |
34 | 32 | id="resetBtn" |
35 | 33 | type="button" |
36 | 34 | class="activeButton" |
37 | | - onclick="sendCommand(CMD_RESET)"> |
| 35 | + onclick="sendCommand(CMD_RESET)" |
| 36 | + > |
38 | 37 | RESET |
39 | 38 | </button> |
40 | 39 | <button |
41 | 40 | id="killBtn" |
42 | 41 | type="button" |
43 | 42 | class="activeButton" |
44 | | - onclick="sendCommand(CMD_KILL)"> |
| 43 | + onclick="sendCommand(CMD_KILL)" |
| 44 | + > |
45 | 45 | KILL |
46 | | - </button> |
| 46 | + </button> |
47 | 47 |
|
48 | | - <a href="https://github.com/MatiasG19/arduino-remote-switch">Arduino Remote Switch on GitHub</a> |
| 48 | + <a href="https://github.com/MatiasG19/arduino-remote-switch" |
| 49 | + >Arduino Remote Switch on GitHub</a |
| 50 | + > |
49 | 51 |
|
50 | 52 | <script> |
51 | | - const CMD_POWER_ON = "powerOn", CMD_STAND_BY = "standBy", CMD_RESET = "reset", CMD_KILL = "kill" |
52 | | - const REQ_POWER_STATUS = "powerStatus" |
| 53 | + const CMD_POWER_ON = 'powerOn', |
| 54 | + CMD_STAND_BY = 'standBy', |
| 55 | + CMD_RESET = 'reset', |
| 56 | + CMD_KILL = 'kill' |
| 57 | + const REQ_POWER_STATUS = 'powerStatus' |
53 | 58 |
|
54 | | - setInterval(() => { |
55 | | - togglePowerLedColor(true) |
| 59 | + setInterval(() => { |
56 | 60 | requestStatus(REQ_POWER_STATUS) |
57 | 61 | }, 3000) |
58 | 62 |
|
59 | 63 | function togglePowerLedColor(state) { |
60 | 64 | const powerLed = document.getElementById('powerLed') |
61 | | - if (state) { |
62 | | - powerLed.style.color = "#27e670" |
| 65 | + if (state == 'on') { |
| 66 | + powerLed.textContent = 'POWER LED' |
| 67 | + powerLed.style.color = '#27e670' |
| 68 | + } else if (state == 'off') { |
| 69 | + powerLed.textContent = 'POWER LED' |
| 70 | + powerLed.style.color = '#eb1e8f' |
63 | 71 | } else { |
64 | | - powerLed.style.color = "#eb1e8f" |
| 72 | + powerLed.style.color = '#cfcfcf' |
| 73 | + powerLed.textContent = 'NO CONNECTION' |
65 | 74 | } |
66 | 75 | } |
67 | 76 |
|
|
84 | 93 | xhttp.onreadystatechange = function () { |
85 | 94 | if (this.readyState == 4 && this.status == 200) { |
86 | 95 | console.debug(`requestStatus:${request}:${this.responseText}`) |
87 | | - if(request == REQ_POWER_STATUS && typeof this.response === "string") { |
88 | | - if(this.response.toString().includes(REQ_POWER_STATUS+":on")) |
89 | | - togglePowerLedColor(true) |
90 | | - else |
91 | | - togglePowerLedColor(false) |
| 96 | + if ( |
| 97 | + request == REQ_POWER_STATUS && |
| 98 | + typeof this.response === 'string' |
| 99 | + ) { |
| 100 | + if (this.response.toString().includes(REQ_POWER_STATUS + ':on')) |
| 101 | + togglePowerLedColor('on') |
| 102 | + else togglePowerLedColor('off') |
92 | 103 | } |
| 104 | + } else if (this.readyState == 4 && this.status == 404) { |
| 105 | + togglePowerLedColor('nocon') |
| 106 | + console.log('No connection to server.') |
93 | 107 | } |
94 | 108 | } |
95 | 109 | xhttp.open('GET', request, true) |
|
0 commit comments