garage_door_control.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="garage_door_control.css">
  5. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  6. <meta charset="UTF-8">
  7. <title>Garage Remote</title>
  8. <script>
  9. var xmlHttp = null;
  10. function pushTheButton(door)
  11. {
  12. var url = "/garage_door.lua?action=toggle&door=" + door;
  13. xmlHttp = new XMLHttpRequest();
  14. xmlHttp.onreadystatechange = processRequest;
  15. xmlHttp.open("GET", url, true);
  16. xmlHttp.send( null );
  17. }
  18. function processRequest()
  19. {
  20. if(xmlHttp.readyState == 0)
  21. {
  22. document.getElementById("label").innerHTML = 'Initalizing...';
  23. document.getElementById("label").className = "initalizing";
  24. }
  25. else if(xmlHttp.readyState == 1)
  26. {
  27. document.getElementById("label").innerHTML = 'Server connection established.';
  28. document.getElementById("label").className = "connection";
  29. }
  30. else if(xmlHttp.readyState == 2)
  31. {
  32. document.getElementById("label").innerHTML = 'Request received.';
  33. document.getElementById("label").className = "received";
  34. }
  35. else if(xmlHttp.readyState == 3)
  36. {
  37. document.getElementById("label").innerHTML = 'Processing request.';
  38. document.getElementById("label").className = "processing";
  39. }
  40. else if(xmlHttp.readyState == 4)
  41. {
  42. if(xmlHttp.status == 200)
  43. {
  44. document.getElementById("label").innerHTML = xmlHttp.responseText;
  45. document.getElementById("label").className = "ok";
  46. sleep(300);
  47. document.getElementById("label").className = "start";
  48. }
  49. else if(xmlHttp.status == 400)
  50. {
  51. document.getElementById("label").innerHTML = 'Bad request.';
  52. document.getElementById("label").className = "bad";
  53. }
  54. }
  55. }
  56. function sleep(milliseconds){
  57. var start = new Date().getTime();
  58. for (var i = 0; i < 1e7; i++)
  59. {
  60. if ((new Date().getTime() - start) > milliseconds)
  61. {
  62. break;
  63. }
  64. }
  65. }
  66. </script>
  67. <style>
  68. body {
  69. background-color: #777;
  70. }
  71. </style>
  72. </head>
  73. <body>
  74. <div id="remote">
  75. <div id="label" class="start"></div>
  76. <a href="#" onclick="pushTheButton(1);" class="button button-1">
  77. <span>I</span>
  78. </a>
  79. <a href="#" onclick="pushTheButton(2); " class="button button-2">
  80. <span>II</span>
  81. </a>
  82. <div id="spacer"></div>
  83. </div>
  84. </body>
  85. </html>