garage_door_control.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html>
  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. </head>
  9. <script>
  10. var xmlHttp = null;
  11. function pushTheButton(door)
  12. {
  13. var url = "/garage_door.lua?action=toggle&door=" + door;
  14. xmlHttp = new XMLHttpRequest();
  15. xmlHttp.onreadystatechange = processRequest;
  16. xmlHttp.open("GET", url, true);
  17. xmlHttp.send( null );
  18. }
  19. function processRequest()
  20. {
  21. if(xmlHttp.readyState == 0)
  22. {
  23. document.getElementById("label").innerHTML = 'Initalizing...';
  24. document.getElementById("label").className = "initalizing";
  25. }
  26. else if(xmlHttp.readyState == 1)
  27. {
  28. document.getElementById("label").innerHTML = 'Server connection established.';
  29. document.getElementById("label").className = "connection";
  30. }
  31. else if(xmlHttp.readyState == 2)
  32. {
  33. document.getElementById("label").innerHTML = 'Request received.';
  34. document.getElementById("label").className = "received";
  35. }
  36. else if(xmlHttp.readyState == 3)
  37. {
  38. document.getElementById("label").innerHTML = 'Processing request.';
  39. document.getElementById("label").className = "processing";
  40. }
  41. else if(xmlHttp.readyState == 4)
  42. {
  43. if(xmlHttp.status == 200)
  44. {
  45. document.getElementById("label").innerHTML = xmlHttp.responseText;
  46. document.getElementById("label").className = "ok";
  47. sleep(300);
  48. document.getElementById("label").className = "start";
  49. }
  50. else if(xmlHttp.status == 400)
  51. {
  52. document.getElementById("label").innerHTML = 'Bad request.';
  53. document.getElementById("label").className = "bad";
  54. }
  55. }
  56. }
  57. function sleep(milliseconds){
  58. var start = new Date().getTime();
  59. for (var i = 0; i < 1e7; i++)
  60. {
  61. if ((new Date().getTime() - start) > milliseconds)
  62. {
  63. break;
  64. }
  65. }
  66. }
  67. </script>
  68. <body bgcolor="#777777">
  69. <div id="remote">
  70. <div id="label" class="start"></div>
  71. <a href="#" onclick="pushTheButton(1);" class="button button-1">
  72. <span>I</span>
  73. </a>
  74. <a href="#" onclick="pushTheButton(2); " class="button button-2">
  75. <span>II</span>
  76. </a>
  77. <div id="spacer"></div>
  78. </div>
  79. </body>
  80. </html>