ESP8266RemotePowerSwitch/ui.h at master · devmapal/ESP8266RemotePowerSwitch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
static const char UI[] =
  "<!DOCTYPE html>\n"
  "<html>\n"
  "<head>\n"
  "<script>\n"
  "window.addEventListener('load', function () {\n"
  "  const sendData = form => {\n"
  "    var XHR = new XMLHttpRequest();\n"
  "\n"
  "    // Bind the FormData object and the form element\n"
  "    var FD = new FormData(form);\n"
  "\n"
  "    // Set up our request\n"
  "    XHR.open('PUT', form.action);\n"
  "\n"
  "    // The data sent is what the user provided in the form\n"
  "    XHR.send(FD);\n"
  "  }\n"
  "  \n"
  "  // Access the form element...\n"
  "  [...document.getElementsByClassName('switch')].forEach(\n"
  "    function(form) {\n"
  "     form.addEventListener('submit', function(event) {\n"
  "          event.preventDefault();\n"
  "\n"
  "          sendData(event.target);\n"
  "        });\n"
  "    });\n"
  "});\n"
  "\n"
  "</script>\n"
  "<style>\n"
  ".grid-container {\n"
  "  display: grid;\n"
  "  grid-template-columns: auto auto auto;\n"
  "  padding: 10px;\n"
  "  max-width: 200px;\n"
  "}\n"
  ".grid-item {\n"
  "  border: 1px solid rgba(0, 0, 0, 0.8);\n"
  "  padding: 20px;\n"
  "  font-size: 30px;\n"
  "  text-align: center;\n"
  "}\n"
  "</style>\n"
  "</head>\n"
  "<body>\n"
  "<div class='grid-container'>\n"
  "  <div class='grid-item'>Lautsprecher</div>\n"
  "  <div class='grid-item'>\n"
  "    <form class='switch' target='ignore' action='/2/1' method='put'>\n"
  "      <input type='hidden' name='state' value='on' />\n"
  "        <input type='submit' value='An' />\n"
  "    </form>\n"
  "  </div>\n"
  "  <div class='grid-item'>\n"
  "    <form class='switch' target='ignore' action='/2/1' method='put'>\n"
  "      <input type='hidden' name='state' value='off' />\n"
  "        <input type='submit' value='Aus' />\n"
  "    </form>\n"
  "  </div>\n"
  "  \n"
  "  <div class='grid-item'>Beleuchtung Wabenregal</div>\n"
  "  <div class='grid-item'>\n"
  "    <form class='switch' target='ignore' action='/2/2' method='put'>\n"
  "      <input type='hidden' name='state' value='on' />\n"
  "        <input type='submit' value='An' />\n"
  "    </form>\n"
  "  </div>\n"
  "  <div class='grid-item'>\n"
  "    <form class='switch' target='ignore' action='/2/2' method='put'>\n"
  "      <input type='hidden' name='state' value='off' />\n"
  "        <input type='submit' value='Aus' />\n"
  "    </form>\n"
  "  </div>\n"
  "</div>\n"
  "\n"
  "</body>\n"
  "</html>\n";